0

list-style: none;CSS コードで使用しているときに余分な空き領域を削除するのに苦労しています。このように説明するのは難しいので (私は英語のネイティブ スピーカーではありません)、代わりにいくつかのスクリーンショットを示します。

ここに画像の説明を入力

私の問題は、どんなに頑張っても、境界線とナビゲーション バーの間のスペース (赤いマーク) を取り除くことができないことです。私の目標は、境界線をナビゲーション バーの端 (リンクのある暗いスペース) に揃えることです。

CSS/HTML/PHP ファイルも追加しています。

HTML: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />


<title>PHP</title>

</head>
    <body>
        <div id="wrapper">

            <?php include('includes/header.php'); ?>
            <?php include('includes/nav.php'); ?>

            <div id="content">
                <h3>Text</h3>
                <p>Text...</p>
                <p>Text...</p>
                <h3>Text</h3>
                <p>Text...</p>
                <p>Text...</p>
            </div>

            <?php include('includes/footer.php'); ?>

        </div> 
    </body>

</html>

CSS:

body {
font-family: georgia,sans-serif;
color:white;
background-color: #191919;
}

#wrapper {
width:1200px;
background-color:#363636;
margin:0 auto;
border-left:1px solid #565656;
border-right:1px solid #565656;

}

#header {
width:1200px;
height:200px;
margin:0 auto;
border-bottom:1px solid #565656;
border-top:1px solid #565656;
}

#header h2 {
color: #ffff66;
}

#content {
width:700px;
float:left;

}


#navigation {

    padding-top: 55px;
    float: right;
    width:175px;
    height:550px;
    list-style:none;
    border-left: 1px dotted #ffff66;


}

#navigation a  {

    display:block;
    background:url(images/navbar.JPG );
    height:70px;
}

#navigation a.link1:hover {background-position:175px 0px;}
#navigation a.link2 {background-position:0px 70px;}
#navigation a.link2:hover {background-position:175px 70px;}
#navigation a.link3 {background-position:0px 140px;}
#navigation a.link3:hover{background-position: 175px 140px;}
#navigation a.link4 {background-position:0px 210px;}
#navigation a.link4:hover {background-position: 175px 210px;}
#navigation a.link5 {background-position:0px 280px;}
#navigation a.link5:hover {background-position: 175px 280px;}
#navigation a.link6 {background-position:0px 350px;}
#navigation a.link6:hover {background-position: 175px 350px;}


#footer {
clear:both;
width:1200px;
height:35px;
border-top:1px solid #565656;
}

nav.php:

<ul id="navigation">
    <li><a href="index.php" class="link1"></a></li>
    <li><a href="index.php" class="link2"></a></li>
    <li><a href="index.php" class="link3"></a></li>
    <li><a href="index.php" class="link4"></a></li>
    <li><a href="index.php" class="link5"></a></li>
    <li><a href="index.php" class="link6"></a></li>
</ul>

簡単に修正できるかどうかはわかりません。私は HTML/CSS/PHP が初めてなので、しばらくお待ちください:) 助けてくれてありがとう!

4

1 に答える 1