Results 1 to 2 of 2

Thread: problem with ul first child

  1. #1
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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
    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;
    }

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    :first-child is a property not fully supported across all mainstream browsers,

    for more see http://www.webdevout.net/browser-sup...ses-firstchild

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •