SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Threaded View

  1. #2
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I keep my navigatino bar from shifting with broswer

    Hi there! I'm fairly new to web deisgn and am working on a website for my job. I've placed all my divs in the desired locations and now as I'm trying to add a navigation bar it seems to control the location of my divs. I'd like it to be on the right side of the screen across from the logo but when I float it to the right or adjust the left margin, my divs move alongside with it as if the left end of the navigation bar is the end marginhelp.jpghelp.jpg. I've listed my code for help!

    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>
    
    <title>Untitled Document</title>
    
      <style type="text/css">
      
    body {
    	font: 12pt "Minion Pro SmBd", "Minion Pro Med", "Minion Pro";
    }
    
    #logo {
    	margin-top:20px;
    	margin-left:120px;
    	border:none;
    }
    
    ul
    {
    list-style-type:none;
    padding:0;
    padding-top:6px;
    padding-bottom:6px;
    
    }
    li
    {
    display:inline;
    }
    a:link,a:visited
    {
    font-weight:bold;
    color:#FFFFFF;
    background-color:#91E287;
    text-align:center;
    padding:6px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#7A991A;
    }
    
    div#d1 {
    	background-color: red;
    	width:600px;
    	height:370px;	background-color: #FFF;
    		border: 2px solid green;
    margin-top:45px;
    margin-left:0px;
    	padding:5px;
    	position:absolute;
    }
    
    div#d2 {
    	
    width:370px;
    height:500px;	background-color:#FFF;
    border: 2px solid green;
    margin-top:45px;
    margin-left:740px;
    padding:5px;
    position:absolute;
    }
    
    div#d3 {
    	
    width:600px;
    height:380px;	background-color:#FFF;
    border: 2px solid green;
    margin-top:435px;
    margin-left:120px;
    padding:5px;
    position:absolute;
    }
    
    div#d4 {
    	
    width:370px;
    height:250px;	background-color:#FFF;
    border: 2px solid green;margin-top:565px;
    margin-left:740px;
    padding:5px;
    position:absolute;
    }
    
    </style>
    </head>
    
    <body>
    <div id="logo">
    <img src="restorelogo.jpg" alt="Habitat for Humanity of Frederick County ReStore"/> </div>
    <div id"nav">
    <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Donate</a></li>
    <li><a href="">Volunteer</a></li>
    <li><a href=""> Habitat for Humanity of Frederick County</a></li>
    
    <div id="d1">Don't Dump it! Donae it!<br />
    At Habitat Restore of Frederick</div>
    <div id="d2">DIV #2</div>
    <div id="d3">DIV #3</div>
    <div id="d4">DIV #4</div>
    Last edited by Paul O'B; Mar 20, 2012 at 13:50. Reason: code tags added


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
  •