CODEWITHSUNDEEP
htmlcss
Toesmash
Toesmash

Reputation: 347

List-style: how to hide that extra empty space

I am having a hard time with removing extra free space while using list-style: none; in my CSS code. It is hard to explain it this way(I am not native english speaker) so here are some screenshots instead.

enter image description here

My problem is that no matter how hard I try, I cannot get rid of the space(red mark) between my border and my navigation bar. My goal is to have the border lined up with the edge of the navigation bar (dark space with links).

I hope I made everything clear, i am adding my CSS/HTML/PHP file as well.

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>

I am not sure if it is an easy fix or not. I am new to HTML/CSS/PHP so be patient with me:) Thank you very much for help!

Upvotes: 0

Views: 1190

Answers (1)

chopper
chopper

Reputation: 6709

In your css include: 

ul {
   padding-left:0px;
}

Upvotes: 4

Related Questions