0

私はCSSを初めて使用しますが、これまでのところ気に入っています。しかし、コードで障害物にぶつかりました。私はほとんどそこにいますが、適切なガイダンスが必要です。

ナビの左側にロゴを配置しようとしている Web サイトを提供しました。サイトのコンテンツを、幅 960 ピクセル、上から 0 ピクセル (ブラウザの上部に対して) の中央に配置したいと考えています。セレクターで CSSdisplay: inlineを使用しliて、目標を達成しようとしています。

また、インライン ナビゲーションをロゴに合わせようとしています。a:hoverまた、ナビゲーションの CSSセレクターを使用して、ロゴの上部 4px の境界線を模倣しようとしています。これをmargin-top: 0pxブラウザに表示したい。

私のほぼ正しいロゴ/ナビゲーションレイアウトへのリンクは次のとおりです。

http://multimediaxchange.com/vls/index.php?page=home

ここに私のCSSコードがあります:

.topbar {
    width:960px;
    height:87px;
    text-align:center;
}

.topbar-inner {
    width:960px;
    margin:0 auto 0 auto;
    text-align:center;
}

.logo {
    margin-top:0px;
    display:inline;
}

img {
    float:left;
    border: 0;
    padding: 0;
    margin: 0;
}

.menu {
    display:inline;
    margin-top:0px;
}

.menu > ul > li {
    display:inline-block;
    position:relative;
    border-top:4px solid #FFF;
    margin-right:0px;
    padding-top:40px;
    min-width:80px;
}

.menu > li {
    display:inline-block;
    list-style:none;
    margin-top:50px;
}

.menu li a {
    color: #000;
    display: block;
    text-decoration:none;
}

.menu li:hover {
    border-top-color: #039;
}

.menu li:hover a {
    color:#039;
}

body { 
    font-family:Arial, Helvetica, sans-serif; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px;
}

.content { 
    height:500px; 
    padding:0px 20px 20px 20px; 
    text-align:left; 
    font-size:12px; 
}

.footer { 
    border-top:1px solid #DFDFDF; 
    width:960px; 
    margin: 0 auto; 
    font-size:11px; 
    text-align:center; 
}

HTMLコードは次のとおりです。

<?php
// Load Setup document:
include('_config/setup.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title><?php echo $page_title; ?></title>
    <link rel="stylesheet" type="text/css" href="_css/styles.css">
</head>
<body>
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo"><img src="/vls/_images/mylogo.png" height="87" width="287"/></div>
            <!-- logo -->
            <div class="menu"><?php include('_template/nav_main.php'); ?></div>
            <!-- menu -->
        </div>
        <!-- topbar-inner -->
    </div>
    <!-- topbar -->
    <div class="bdy_hdr"><?php get_page_name($dbc, $pg); ?></div>                    
    <div class="content"><?php get_page_body($dbc, $pg); ?></div>
    <div class="footer"><?php include('_template/footer.php'); ?></div>
</body>
</html>

ありがとう！

4

3 に答える 3

0

divs次のように、コンテナ内に配置することをお勧めします。

<div id="container">
    <div class="topbar">
        <div class="topbar-inner">
            <div class="logo">
                <img src="/vls/_images/mylogo.png" height="87" width="287"/>
            </div>
            <div class="menu">
                <?php include('_template/nav_main.php'); ?>
            </div>
        </div>
    </div>
    <div class="bdy_hdr">
        <?php get_page_name($dbc, $pg); ?>
    </div>                    
    <div class="content">
        <?php get_page_body($dbc, $pg); ?>
    </div>
    <div class="footer">
        <?php include('_template/footer.php'); ?>
    </div>
 </div>

次に、CSS で次のようにします。

.topbar{
margin:0 auto;
}

widthto を指定してから.bdy_hdr、同じこと.contentを行うことをお勧めします。.footer

.bdy_hdr,
.content,
.footer{
width:960px;
margin:0 auto;
}
于 2013-10-17T02:25:30.503 に答える