problem with ul first child
Hi there on this page I have my navigation in an unordered list it looks fine except for on the first item I dont want the list bullet to show. I want it to go away. On the page you will see "home" as the first link and on the left a bullet point which I want to go away ,but I dont know how. I tried adding
#nav_middle ul li:first-child {
list-style-type:none;
}
but does not work :confused:
what can I do to take away the first bullet so the bullet does not show on the left of "home".
Here is the link to the page
http://plurcss.site50.net/
Also one more question in order to center a page all I have to do is
put this margin property in the container div right?
margin:0 auto;
however in my page I have to put margin:0 auto; in every selector for it to center look at my css. Is that normal or should it just work with the one property in the main container div property? Also nice to meet you all and would be very kind of any of you to help me out.
Blesses - Plurcss
HTML
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colorful Web : Css Coding Practice</title>
<link rel="stylesheet" href="scripts/reset.css" />
<link rel="stylesheet" href="scripts/style.css" />
<meta name="description" content=" The description of the websight
goes here" />
<meta name="keywords" content="Keyword, Key word, Keywords" />
</head>
<body>
<div id="container">
<div id="header">
<img id="title" src="images/title.png" />
<form action="" method="get" id="search_form">
<input name="" type="text" value="Search..." class="search"/>
<input type="image" src="images/go_button.jpg" class="search_button" value="Go"/>
</form>
</div>
<div id="banner">
</div>
<div id="nav">
<div id="nav_left">
</div>
<div id="nav_middle">
<ul>
<li><a href="#" class="linkul">Home</a></li>
<li><a href="#" class="linkul">Services</a></li>
<li><a href="#" class="linkul">Cool ****</a></li>
<li><a href="#" class="linkul">Pictures</a></li>
<li><a href="#" class="linkul">Contact Us</a></li>
<li><a href="#" class="linkul">Music</a></li>
</ul>
</div>
<div id="nav_right">
</div>
</div>
</div>
</body>
</html>
CSS
Code:
body {
background:url('../images/background.jpg') no-repeat;
background-color: #e1e1e1;
}
/*Why do I have to put margin:0 auto; every time
shouldent it just be in the container? My layout
wont center unless I set margin for each differnt
thing */
#container {
margin:0 auto;
width: 100%;
height:100%;
/*background: white; */
}
#header {
margin:0 auto;
width: 857px;
height: 144px;
}
#title {
margin-top:45px;
float:left;
}
#header input {
margin-top: 70px;
float:left;
}
.search {
width: 243px;
height: 27px;
padding: 0px 5px 0px 0px;
text-indent: 15px;
margin: 0px 0px 0px 30px;
border: 0px;
background:url('../images/bg_search.jpg') no-repeat;
background-position: top;
}
#banner {
margin:0 auto;
width:857px;
height:196px;
background:url('../images/banner.png') no-repeat;
}
#nav {
margin:0 auto;
margin-top: 15px;
padding: 0px 0px 0px 0px;
clear:both;
width: 857px;
height: 47px;
}
#nav_left {
float:left;
width:17px;
height:47px;
background:url('../images/left_nav.png') no-repeat;
}
#nav_middle {
padding: 15px 0px 0px 0px;
float: left;
width:820px;
height:47px;
background:url('../images/nav_bg.png') repeat-x;
}
#nav_right {
float:left;
width:20px;
height:47px;
background:url('../images/right_nav.png') no-repeat;
}
#nav_middle ul {
margin-left:145px;
margin-top:3px;
}
#nav_middle li{
float:left;
background:url('../images/bullet.png') no-repeat;
padding-left:10px;
padding-right:5px;
/* border-right: 1px solid black; */
}
.linkul {
text-decoration:none;
color:#858585;
padding-right:15px;
margin-left:10px;
}
#nav_middle ul li a:hover {
color:#F01B92;
}
#nav_middle ul li:first-child {
list-style-type:none;
}
Reset CSS
Code:
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
