SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)

    aligning nav bar

    Hi folks, I have a bit of a conundrum with the main nav bar for this mockup:

    http://www.iraqtimeline.com/amy/amy.html

    Take a look at it in different resolutions and you'll see the problem: it's all over the place. It displays close to the left margin in 800x600, almost centered in 1024x768, and shoved over to the right in 1280x1024. Ironically, I'd like it to display closer to what it does in the smallest display: left-aligned, with a small padding on the left to keep it off the left edge.

    Here's the CSS for the navbar:

    Code CSS:
    #roundbar-blue {
    	clear:left;
    	float:left;
    	width:100%;
    	min-width: 700px;
    	max-width: 1200px;
    	background:#80c8ff url(../images/roundbar-blue.gif) 0 25% repeat;
    	font-family: "Liberation Sans", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
    	font-size: 90%;
    	border-bottom:1px solid #49a9ff;
    	overflow:hidden;
    }
     
    #roundbar-blue ul {
    	clear:left;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	left:89%;
    	text-align:center;
    }
     
    #roundbar-blue ul li {
    	display:block;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	right:100%;
    }
     
    #roundbar-blue ul li.first {
    	border-left:1px solid #49a9ff;
    }
     
    #roundbar-blue ul li.last {
    	border-right:1px solid #99d8ff;
    }
     
    #roundbar-blue ul li a {
    	display:block;
    	margin:0;
    	padding:.8em .8em;
    	color:#29527a;
    	text-decoration:none;
    	border-left:1px solid #99d8ff;
    	border-right:1px solid #49a9ff;
    	line-height:1.3em;
    }
     
    #roundbar-blue ul li.active a,
    #roundbar-blue ul li.focus a {
    	background:url(../images/roundbar-blue.gif) 0 75% repeat;
    	font-weight:bold;
    }
     
    #roundbar-blue ul li a:hover {
    	background:url(../images/roundbar-blue.gif) 0 75% repeat;
    	color: #FDF5E6;
    	text-decoration: underline;
    	top: 0;
    }
     
    #roundbar-blue ul li a span {
    	display:block;
    }

    It's obvious that the problem centers around this line of code: left:89%; in the #roundbar-blue ul element, as well as right:100%; in the #roundbar-blue ul li element, but I'm not sure how to fix it, and I imagine other portions of the CSS may be affecting the alignment as well.

    Any ideas? Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yes, the left and right settings are causing trouble. What are they aiming to achieve?

    If you just want some left padding, I'd try something like this:

    Code:
    #roundbar-blue ul {
    	clear:left;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0 0 0 80px;
    	position:relative;
    	/*left:89%;*/
    	text-align:center;
    }
    
    #roundbar-blue ul li {
    	display:block;
    	float:left;
    	list-style:none;
    	margin:0;
    	padding:0;
    	position:relative;
    	/*right:100%;*/
    }
    Is that what you were after?

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Ralph, is it that simple of a fix? Sure seems like it on a quick test drive. I thought it had to be something more complex and evil. I think I've been up too long, I should have seen that right off the bat.

    Thanks for the assist, and you are free to mock me at your leisure for not catching this myself.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'd like it to display closer to what it does in the smallest display: left-aligned, with a small padding on the left to keep it off the left edge.
    Hi Max,
    Your still using those RP'd MJT layouts aren't you.
    I remember you having trouble with them in the past.

    I just saw ralph's reply but I'll post my similar test edits as well.
    Code:
    #roundbar-blue ul {
        clear:left;
        float:left;
        width:95%;
        min-width:700px;
        list-style:none;
        margin:0;
        padding:0 0 0 5%;
        text-align:center;
    }
    
    #roundbar-blue ul li {
        /*display:block; not needed*/
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        /*position:relative;
        right:100%;*/
    }

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Black Max View Post
    you are free to mock me at your leisure
    I'll save it for a rainy day! Nah, I'll never mock anyone here, as the ice is always cracking under my feet.

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Ray, I like those RP'd MJT layouts. (RP'd? No comprehendo, senor. Radical prostatectomy? Retinitis pigmentosa?) Their virtues outweigh their faults (for me), and I've made some fixes to the worst of their problems. I've never used that nav bar before (another MJT production, ironic considering I must have looked at fifty at least), and it has its issues also. Thanks for your fixes, I will try them. (Edit: Ray, they work nicely, and they do streamline the code. Nice job, sir.)

    You know, one of these days I will jump into the deep water and start knocking these things out for myself.

    Ralph, I got about nine hours of sleep, opened the site up again, and went, "Why in hell did I ever post this question? Duhhhhh!" So mock away, and when the ice cracks under both of us, you can use Hardy's immortal line, "Now look what you made me do!"

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Ray, I like those RP'd MJT layouts. (RP'd? No comprehendo, senor. Radical prostatectomy? Retinitis pigmentosa?) Their virtues outweigh their faults (for me), and I've made some fixes to the worst of their problems.
    Hi Max,
    I wasn't trying to take your thread off topic but the relative positioning you had on the nav to begin with is what caused me to look further into the layout.

    I know you like full width fluid layouts, I thought maybe you were using the layout just for the sake of the equal height columns it produces. If that was the case then there are much simpler ways to get equal columns while keeping a fluid layout. They allow you to eliminate all the relative positioning and extra divs used in the MJT.

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    but the relative positioning you had on the nav to begin with is what caused me to look further into the layout.
    Relative positioning, RP...maybe I didn't get enough sleep after all.

    Quote Originally Posted by Rayzur View Post
    I know you like full width fluid layouts, I thought maybe you were using the layout just for the sake of the equal height columns it produces. If that was the case then there are much simpler ways to get equal columns while keeping a fluid layout. They allow you to eliminate all the relative positioning and extra divs used in the MJT.
    I do like full width fluid layouts (elastic, actually, but that's a debate for another thread, and I'm not sure these layouts qualify as purely elastic, though he makes them available in px, em, and % versions; I tend towards the ems). One of the biggest advantages to the MJT layouts is its equal height columns. Can you recommend simpler and more efficient fluid layouts that have equal heights? I'm used to dealing with MJT's relative positioning and extra divs, but I'd prefer something more efficient and streamlined.

  9. #9
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Can you recommend simpler and more efficient fluid layouts that have equal heights? I'm used to dealing with MJT's relative positioning and extra divs, but I'd prefer something more efficient and streamlined.
    Hi,
    Since you prefer an em width sidebar then the easiest equal column method in that case would be Pauls' AP Faux Columns. That allows you to set the actual sidebar flaot and AP faux div at the same em width.

    You would have to do some tweaking to the min-max settings on these examples below but they convey the basic approach.

    Full Width Two Column Sticky Footer (AP faux)
    Min-Max Three Column with Sticky Footer (AP faux)
    Elastic Sidebar with Fluid Main Content

    I'm on my way out the door right now but if you need any help tweaking code just give a shout and I could help you with that later.

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    You are the man, Ray. Keep this up and Mrs Max will have you over for barbeque (or her new specialty, authentic red beans and rice). Warning, we don't do that Texas red sauce "BBQ" stuff, this is the real Eastern NC vinegary stuff. Yum.


    I'm going to stick with the MJT layout in this design, because with the help of you, Ralph, Alex, and other SP folks, I've beaten it into submission but you can believe I'll try Paul's and the CSS Labs layouts in future.


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
  •