SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    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

  2. #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

    I'm having trouble keeping my navigation bar in place, it shifts around and stacks on itself when my browser is minimized. I've tried absolute positioning (all of my other elements are absolute positioned and they stay put regardless of browser size.

    Here is my code for my navigation bar, any suggestions?

    ul{
    list-style-type:none;
    margin-left:453px;
    margin-top:-40px;
    padding:8px;
    }

    li{
    position:absolute;
    display:inline;
    }
    a:link,a:visited{
    width:900px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#91E287;
    text-align:center;
    padding:8px;
    text-decoration:none;
    text-transform:uppercase;
    }
    a:hover,a:active
    {
    background-color:#1D9A16;
    }

    Thanks!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Please don't double post as its bad etiquette.

    You can't layout your page like that I'm afraid as it is not viable for the web. I believe you have already been give this advice anyway in your other thread.

    It is not advisable to absolutely place content on the page in fixed height and width boxes because it will break as soon as the user resizes the text or if the user has a different dpi setting. You should never (almost never) apply height to containers that hold text content. If you must apply height then use ems and not px anyway.

    You should not absolutely position those boxes into place but rather let them take place in the flow if the document in the place that they would naturally fall. The layout should be two floated columns and then stack the content in each column as required without the need for further positioning.

    The page content should ideally be in a page container and centred using auto margins. You will need a width to do this and an em width would be better than px width and even better would be a min max layout instead.

    You really should have some content in their first as it is impossible for us to say how it should be styled until we see what it is. The content dictates a lot of how the page will be styled and indeed the html markup is the most important step in the proceedings as you can specify the heading levels and general structure which will then give you elements to target and structure rather than saying #div1,'div2 ,#'div3 which is a very bad naming process.

    Here's basic start of a centred layout with two columns and a header and your nav at the top.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body, table {
    	margin: 0;
    	padding: 0;
    	font-size: 100%;
    }
    object, iframe, blockquote, fieldset, form, legend, table, caption, th, td {
    	margin: 0;
    	padding: 0;
    	border:none;
    }
    h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul { margin:0 0 .75em }
    ol, ul { list-style: none; }
    table {
    	border-collapse: separate;
    	border-spacing: 0;
    }
    caption, th, td {
    	text-align: left;
    	font-weight: normal;
    	vertical-align:top;
    }
    /* end reset styles */
    body {
    	line-height:1.4;
    	font-size:88%;
    }
    #outer {
    	width:68em;
    	margin:auto;
    	background:f2f2f2;
    	padding:20px 0;
    }
    .logo, .logo span {
    	width:200px;/* width of logo*/
    	height:100px;/* height of logo */
    	margin:0;
    	position:relative;
    	overflow:hidden;
    	float:left;
    }
    .logo span {
    	position:absolute;
    	top:0;
    	left:0;
    	background:red url(restorelogo.jpg) no-repeat 0 0;/* red for testing only */
    }
    #nav {
    	padding:6px 0;
    	float:right;
    }
    #nav li { display:inline; }
    #nav li a {
    	font-weight:bold;
    	background:#91E287;
    	padding:6px;
    	text-decoration:none;
    	text-transform:uppercase;
    }
    #nav li a, #nav li a:visited { color:#fff; }
    #nav li a:hover, #nav li a:focus, #nav li a:active { background:#7A991A; }
    #main {
    	clear:both;
    	overflow:hidden;
    	width:100%;
    	padding:10px 0 1px;
    }
    #sidebar {
    	float:left;
    	width:27em;
    	background:#eee;
    }
    #content {
    	width:40em;
    	float:right;
    	background:#eee;
    }
    .section {
    	border: 2px solid green;
    	padding:5px;
    	margin:0 2px 5px;
    }
    </style>
    </head>
    
    <body>
    <div id="outer">
    		<h1 class="logo">Habitat for Humanity of Frederick County<br>
    				ReStore<span></span></h1>
    		<ul id="nav">
    				<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>
    		</ul>
    		<div id="main">
    				<div id="content">
    						<h2>Main content goes here</h2>
    						<div class="section">
    								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
    								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
    						</div>
    						<div class="section">
    								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
    						</div>
    				</div>
    				<div id="sidebar">
    						<h3>Left Sidebar content goes here</h3>
    						<div class="section">
    								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
    						</div>
    						<div class="section">
    								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam mi, interdum eu sodales nec, viverra porttitor arcu. In consectetur sem quis neque convallis quis vestibulum dolor porttitor. Aliquam diam odio, dictum at venenatis sed, dignissim quis arcu. Sed lectus leo, luctus eu convallis a, sollicitudin ac leo.</p>
    						</div>
    				</div>
    		</div>
    </div>
    </body>
    </html>
    You should take some time to read up on floats and positioning and general page layout otherwise you will keep running into a brick wall until you grasp how things can be laid out and how they interact with each other. It's a steep learning curve at first but don't give up and do some research and you will soon start getting the right idea. read through the in formation you were given in the other thread also.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Using absolute position for layout is going to introduce you to a world of pain, I'm afraid. Ideally, spend a week or two with a good book on CSS first to learn how CSS works, as it will save you a lot of misery. Truly. (I recommend Stylin' with CSS, by Charles Wyke-Smith.)

    To your main point of why the divs are being moved with the navigation, it's because you haven't closed off your <ul>. Add the bit in red below:

    Code:
    <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>
    </ul>
    EDIT: ah, Paul answered first. Take his advice!

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry, I didn't realize that I double posted until just now! I was able to figure out how to position the nav bar without it moving other elements, but I'm still stuck on how to keep the nav bar from stacking when browser is minimized.

    "You should never (almost never) apply height to containers that hold text content. If you must apply height then use ems and not px anyway."

    out of my four divs, only one will have text, the other 3 hold plugins (a form, facebook & diggerslist plugin) is that acceptable or should I tried these plugins as text as well?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cboice8127 View Post
    I'm sorry, I didn't realize that I double posted until just now! I was able to figure out how to position the nav bar without it moving other elements, but I'm still stuck on how to keep the nav bar from stacking when browser is minimized.
    You will need to give the nav a width that is wide enough for the content it holds. However surely allowing it to wrap is a better design choice as users with smaller screens will still be able to use it without scrolling.

    "You should never (almost never) apply height to containers that hold text content. If you must apply height then use ems and not px anyway."

    out of my four divs, only one will have text, the other 3 hold plugins (a form, facebook & diggerslist plugin) is that acceptable or should I tried these plugins as text as well?
    If the plugins contain text content then the same issue will arise and resizing the text from the browser controls will see your text content spilling out. In most cases you shouldn't need a height anyway and they can take up the space they require (unless its a pre-requisite of the plugin that you are using).

    Look at my example and see how you can take text out or add text in without breaking anything.

    These are fundamental issues and although you may want a quick fix we can only give you best practices

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for all your help!!!


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
  •