Unordered list not working :(

+1 praveenraj .s.r · June 5, 2015
It is said that in the footer every element is a list element but for me second element is above the previous element.. I mean that 'Account' is overlapped by 'profile'

Post a Reply

Replies

Oldest  Newest  Rating
0 praveenraj .s.r · June 10, 2015
Hey @Kaveh Greenwood thank you I got it.. I'm very grate full to you!! :)
+2 Kaveh Greenwood · June 9, 2015
For a quick fix you could add the following to your CSS sheet:
#header_menu .know_you{
margin-left: 70px;
}

Above: I am adding a CSS class for the LI classed as "know_you". It pushes the LI and the ones behind it 70px from the left.

I don't understand why you have padding for the first class, but no styles for the second and third classes on the LIs.

This is what I did to remove it. It may not be the most official but it removed it. You can see and test here: http://jsfiddle.net/phzhbv64/


#header{
position:fixed;
top:100px;
margin:0px;
padding:0px;
left:0px;
right:0px;
width:100%;
height:80px;
font-family:Comic Sans MS;
text-shadow: 1px 1px 1px black;
border-top:1px solid rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.25);
background:rgba(0,0,0,1);

}
#header li ul{
list-style:none;
padding:0px;
margin-bottom:12px;
}
#header .whiteBorder{
border:1px solid white;
}
#header_menu{
margin: 10px;
padding:0px;
width:auto;
}
#header_menu li{
list-style:none;
float:left;
font-size:12px;
padding:12px 14px 14px 14px;
border-right:1px solid rgba(0,0,0,0.4);
background:rgba(0,0,0,0.1);

}
#header_menu .home{
font-family:Comic Sans MS;
font-weight:bold;
color:red;
font-size:20px;
}

#header_menu .home a{
background:none;
border:none;
text-decoration:none;
color:red;

}
#header_menu .home a:hover{
color:white;
}
0 praveenraj .s.r · June 7, 2015
@John McMullan


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="index.css"/>
<body>
<div id="header">
    <ul id="header_menu">
      <li class="home"><a href="index.html"> Home</a></li>
      <li class="know_you" > <a href="">know your computer</a></li>
      <li class="about"><a href="">About us</a></li>
    </ul>
</div>
</body>
</html>

In css

#header{
  position:fixed;
  top:100px;
  margin:0px;
  padding:0px;
  left:0px;
  right:0px;
  width:100%;
  height:80px;
  font-family:Comic Sans MS;
  text-shadow: 1px 1px 1px black;
  border-top:1px solid rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  background:rgba(0,0,0,1);

}
#header li ul{
  list-style:none;
  padding:0px;
  margin-bottom:12px;
}
#header .whiteBorder{
  border:1px solid white;
}
#header_menu{
  margin: 10px;
  padding:0px;
  width:auto;
}
#header_menu li{
  list-style:none;
  float:left;
  font-size:12px;
  padding:12px 14px 14px 14px;
  border-right:1px solid rgba(0,0,0,0.4);
  background:rgba(0,0,0,0.1);

}
#header_menu .home{
  position:absolute;
  border:none;
  background:none;
  padding:10px 2px 0px 14px;
  font-family:Comic Sans MS;
  font-weight:bold;
  color:red;
  font-size:20px;
}
#header_menu .home a{
  background:none;
  border:none;
  text-decoration:none;
  color:red;

}
#header_menu .home a:hover{
  color:white;
}
+1 Jack McMullan · June 6, 2015
can you post the code?
  • 1

HTML / CSS / Web Design

107,185 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators