www.webdeveloper.com
Results 1 to 2 of 2

Thread: Help With Divs

Hybrid View

  1. #1
    Join Date
    Jan 2013
    Location
    Halifax, NS
    Posts
    1

    Red face Help With Divs

    Hey,

    I've read the basics, along with a couple of books, but after awhile all the reading and videos start to get too heavy. I seem to have a problem moving from basics to more advanced stuff. I figured it would be a good idea to sign up here where I could get information, and add the help to the hands on construction of my website. I've got a domain but it was made in SiteSpinner, now that I've upgraded, and started learning the code I'm going to completely re-do my website. It'll probably take some time, but I'm gonna take a stab at it.

    I'm working on the index page at the moment. I've added an banner, and an image the same length as the banner just under the banner. That's where I'd like to add my nav bar created with CSS and HTML. The problem is I can't figure out how to get the nav bar buttons to go on top of the image that I've placed under my banner. Think anyone could help?

    HMTL

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Paget</title>
    <link href="Css/J_Css.css" rel="stylesheet" type="text/css"/>
    </head>
    
    <body>
    
    <div align="center" id="site_banner"><img src="Images/Site_Banner.png" width="800" height="120" alt="Site Banner" /></div>
    
    <div align="center" id="Site_Nav_Image"><img src="Images/Site_Nav.png" width="800" height="30" alt="Nav_Image" />
     </div>
    
    
    <div id="navbar"> 
      <ul> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
      </ul> 
    </div> 
    
    
    
    
    
    </body>
    </html>
    
    
    
    <div id="navbar"> 
      <ul> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
            <li><a href="#">LinkHere</a></li> 
      </ul> 
    </div> 
    
    CSS

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /* This is the code for the Navbar That will be on the site! */
     <!-- 
     
     #navbar ul { 
            margin: 0; 
            padding: 5px; 
            list-style-type: none; 
            text-align: center; 
                   } 
     
    #navbar ul li {  
            display: inline; 
            } 
     
    #navbar ul li a { 
            text-decoration: none; 
            padding: .2em 1em; 
            color: #fff; 
            background-color: #000; 
            } 
     
    #navbar ul li a:hover { 
            color: #000; 
            background-color: #fff; 
            } 
    		
    
    body {background:#996615;
    font-family: sans-serif, verdana, arial;
    color: #444444;
    font-size: 12px;
    margin: 0px;
    
    }

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Can you show all the code for this, not just the relevant CSS.
    I can think of several methods to stack the navbar on top of the banner image, but mostly by positioning. I'd rather the flow be understood before throwing tweaks/work-a-rounds into consideration...
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles