100% width bar in two colors

Hanscraft · 10-28-2010, 01:10 AM

Hello. The web designer I took over for used an image for the yellow/blue bar on the top of this website. That entire bar is an image which is 2000px wide.

As you can tell, the website is slow to load and that bar is one of the reasons. I'd like to recreate it with straight up CSS but I'm needing some guidance on how to get it to be oh... 70% on the left side yellow and 30% to the right blue.

Any suggestions?

DrDOS · 10-28-2010, 01:43 AM

Code:

<html>

<head>

<style type="text/css">

#top_nav{width:100%;border-top:1px solid Black}

#left_nav{width:70%;background: Gold;float:left;height:24px}

#right_nav{width:30%;background: DarkBlue;float:right;height:24px}

</style>

</head>

<body>

<div id="top_nav">

<div id="left_nav"></div>

<div id="right_nav"></div>

</div>

</body>

</html>

Adjust colors and sizes to suit.

teedoff · 10-28-2010, 03:15 AM

Hanscraft? are you local to this school? UNCG is in Greensboro NC. I live near there. Cool to see local designers working!

Hanscraft · 11-02-2010, 05:56 AM

I haven't had time to try this code in my mirror version of the website, but I do appreciate your work. When I get a chance later this week, I'll definitely report back to you on the results!

angelina2010 · 11-02-2010, 06:29 AM

Yes your suggestion is correct you can use 70%yellow and 30%blue.no need to change your thought.

Stocks News

Hanscraft · 12-14-2010, 03:13 AM

Thanks! I have it working beautifully on my mirrored site! Thanks again!

bazz · 12-14-2010, 03:23 AM

Have you checked that site in Firefox? I think there may be other issues with it, as well

bazz

Hanscraft · 12-20-2010, 08:18 PM

Thanks for the heads-up. I was viewing the website in a non-100% width browser and saw the the lines ran. Crap.

Any suggestions on how to keep this frozen so that it always lines up no matter what size the browser is opened to?

Excavator · 12-20-2010, 11:58 PM

Hello Hanscraft,
First off, here is a better link for the page in question - http://lis.uncg.edu/

I think browsers are not going to do a partial of a % so your 20.3% is probably just going to be 20% ...if that even matters to you.

Could you explain your "lines up" issue a little more? I'm not seeing it mis-aligned in FF4, not that I can tell anyway.

Check your site in the validator too. You have some very basic errors that need fixed, ie: using id's mulitiple times and random extra or missing closing tags. See the links about validation in my signature line.

Hanscraft · 12-21-2010, 04:10 AM

Thanks for the quick reply. It's a fluid layout right now so that the percentages for those horizontal line divs try to retain them no matter how big the browser window is. When I make the browser smaller in FF (probably an older one my work computer has installed), the white space which is where the dropdown menu between them is suppose to rest opens up. I apologize for that's not a clear description.

I think the term I'm looking for is I want the lines to remain static in their position and to be stretching on the outside to fit wider browser windows instead of it compromising where the lines meet above the content of the page.

This website was quickly put together and mashed from the code of other people so I have lots of work ahead of me trying to sort it out in my downtime!

Excavator · 12-21-2010, 05:12 AM

Quote:

Originally Posted by Hanscraft

When I make the browser smaller in FF (probably an older one my work computer has installed), the white space which is where the dropdown menu between them is suppose to rest opens up. I apologize for that's not a clear description.

Could that be because when you give .uncgBodyContent a 1000px width it is not fluid anymore?

Hanscraft · 12-22-2010, 09:20 PM

When I tried to fix that, it didn't work. So what I've done for now is to comment out the right_nav and just have the gold bar showing through. However, that breaks the specifications of our design committee. I spent an hour today trying to get the blue in place (sticked to the right edge of the "CAMPUS LINKS" box and then extending to infinity to the right) to no avail.

I was trying to use background-position.