SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Div Problem

  1. #1
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Problem

    Hi,

    I am having problems with this fiv tag. The 5px padding to the right of the "Contact Us" button seems to be transparent, I want it to have a black background. I've tried <div style="background-color: #000"> in the div tag before the "ul", but it didn't work. This is a jquery javascript.

    Here is the image:



    Body Coding:
    Code:
        <div><ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a>
                <ul>
                    <li><a href="#">Our Mission</a></li>
                    <li><a href="#">History</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">Our Sponsors</a></li>
                </ul>
            </li>
            <li><a href="#" style="cursor:hand">Rules</a></li>
            <li><a href="#" style="cursor:hand">Prizes</a></li>
            <li><a href="#" style="cursor:hand">Shark Info</a>
                <ul>
                    <li><a href="#">Shark Identification</a></li>
                    <li><a href="#">Tagging</a></li>
                    <li><a href="#">Measuring</a></li>
                    <li><a href="#">Blacktip Migration</a></li>
                </ul>
            </li>
            <li><a hred="#" style="cursor:pointer">Gallery</a>
                <ul>
                    <li><a href="#">Photo Gallery</a>
                        <ul>
                            <li><a href="#">2008</a></li>
                            <li><a href="#">2009</a></li>
                        </ul>
                        </li>
                    <li><a href="#">Video Gallery</a>
                        <ul>
                            <li><a href="#">2008</a></li>
                            <li><a href="#">2009</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a hred="#" style="cursor:pointer">Media</a>
                <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Videos</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Production</a></li>
                </ul>
            </li>
            <li><a hred="#" style="cursor:pointer">Archives</a>
                <ul>
                    <li><a href="#">Past Winners</a></li>
                    <li><a href="#">Past Annoucements</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul></div>
    CSS Coding:

    Code:
    body{
    font-size:13px;
    font-family:"Times New Roman", Times, serif;
    text-align:center;
    font-weight:bold;
    }
    
    #nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em; 
    z-index:30;
    }
    
    #nav a{
    display:block;
    padding:0px 5px;
    color:#676558;
    text-decoration:none;
    background-color:#000;
    width:73px;
    line-height:25px;
    font-size:13px;
    font-weight:bold;
    }
    
    #nav a:hover{
    color:#09F;
    font-weight:bold;
    background-image:url(../graphics/navbar-shark.gif);
    background-attachment:scroll;
    background-repeat:no-repeat;
    background-position:center;
    }
    
    #nav li{
    float:left;
    position:relative;
    }
    
    #nav ul {
    position:absolute;
    display:none;
    width:110px;
    top:25px;
    }
    
    #nav li ul a{
    width:110px;
    height:auto;
    float:left;
    text-align:left;
    background-color:#252525;
    line-height:25px;
    z-index:30;
    font-weight:normal;
    }
    
    #nav ul ul{
    top:auto;
    }	
    
    #nav li ul ul {
    left:110px;
    margin:0px 0 0 10px;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }
    Any help, would be greatly appreciated!

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Unless I've missed it, you haven't reference the <div> in the CSS at all.

    I think what's happening is that, because the entire visible contents of the <div> are floated, the <ul>s and therefore the <div> itself are collapsing to zero-height.

  3. #3
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Unless I've missed it, you haven't reference the <div> in the CSS at all.

    I think what's happening is that, because the entire visible contents of the <div> are floated, the <ul>s and therefore the <div> itself are collapsing to zero-height.
    I am new to this, I haven't mastered CSS yet. How do I reference the <div> in the CSS? I tried placing the id="nav" in the <div> and the entire navigation bar disappeared.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BTC View Post
    I am new to this, I haven't mastered CSS yet. How do I reference the <div> in the CSS? I tried placing the id="nav" in the <div> and the entire navigation bar disappeared.
    It needs to be <div id="nav">...</div>, with the same content as you have in the <div>...</div> now.

  5. #5
    SitePoint Zealot BTC's Avatar
    Join Date
    Jul 2010
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    It needs to be <div id="nav">...</div>, with the same content as you have in the <div>...</div> now.
    I tried that and it didn't work. When I take the id="nav" out of the <ul> and place it in the <div>, the navigation bar disappears:



    The CSS coding I gave above was for the navigation bar. The "layout" coding and the "navigation bar" coding are in two different stylesheets. Here is the coding for the page layout.

    Code:
    #center {
     	margin-left: auto;
     	margin-right: auto;
     	width: 750px;
     	}
    div.body {
    	margin:0em;
    	padding:0em;
    	color:#676556;
    	font-family:"Times New Roman", Times, serif;
    	font-size:0.8125em;
    	text-align:center;
    	font-weight:bold;
    	vertical-align:text-top;
    }
    #plain_sand{
      background: transparent url(../graphics/plainwood.gif);
    }
    
    #fading_sandtop{
      background: transparent url(../graphics/fadingwood.gif) repeat-x top left;
    }
    #fading_sandbottom{
      background: transparent url(../graphics/faddingwoodmuskie_bottom.gif) repeat-x bottom left;
      padding-bottom:200px;
    }
    div.contentbox {
    	padding:20px;
    	padding-top:30px;
    	padding-bottom:30px;
    	width:730px;
    }
    div.information {
    	float:left;
    	width:548px;
    	margin:auto;
    	padding:1.5em;
    	text-align:left;
    	background-color:#FFF;
    }
    div.sponsors {
    	float:right;
    	padding-top:0.9375em;
    	padding-bottom:0.9375em;
    	padding-left:5px;
    	padding-right:5px;
    	background-color:#E0E0E0;
    	width:125px;
    	line-height:2em;
    }
    Do I need to combine the layout CSS with the navigation CSS into one stylesheet?

    Thanks for your time! I really appreciate it!


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
  •