Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    100% width bar in two colors

    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?

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,026
    Thanks
    15
    Thanked 240 Times in 240 Posts
    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.
    Last edited by DrDOS; 10-28-2010 at 03:15 AM. Reason: change colors

  • Users who have thanked DrDOS for this post:

    Hanscraft (11-02-2010)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Hanscraft? are you local to this school? UNCG is in Greensboro NC. I live near there. Cool to see local designers working!

  • #4
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #5
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes your suggestion is correct you can use 70%yellow and 30%blue.no need to change your thought.

    Stocks News

  • #6
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks! I have it working beautifully on my mirrored site! Thanks again!

  • #7
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Have you checked that site in Firefox? I think there may be other issues with it, as well

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #8
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Hanscraft View Post
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    May 2010
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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