How Do I Create a Solid Black Bar?

  • joogle

    (@joogle)


    14 years, 9 months ago

    What should I do if I want to put in a solid black bar across the screen on my site http://www.huloji.com As you can see, there is a a black bar going across the page right below the header. I want the Menu to be extended across the page WITHOUT creating extra scrollable area. I increased the width of the menu to 2600px and played with the margins to get this effect, but this basically extended the width of the entire website and now there is a horizontal scroll bar at the bottom.

    My second idea was to make a background with a black bar already in it and just line it up with the menu, but I would prefer to have it coded in the css because I also want to do the samething for the Footer.

    How do i put in a solid black bar that extends to the end of the page, but doesn’t extend the site’s width?

Viewing 4 replies - 1 through 4 (of 4 total)
  • mfux

    (@mfux)

    14 years, 9 months ago

    In the header div have an innerHeader, this will contain the banner at the top, define the width as you choose and set the margins to auto.

    The menu will be a part of the main header div but outside of the innerHeader, which will have a width of 100% but with padding of 10%, for example, on the left. Or of course you could have a set amount of pixels as padding.

    #header{width:100%; margin:0;}
#innerHeader{width:1020px; margin:auto;}
#nav{width:100%; margin:0; padding-left:100px;}

    I have something similar in a theme of mine and it works fine.

    Thread Starter joogle

    (@joogle)

    14 years, 9 months ago

    sorry, im not a professional with css and php. the coding example you gave me seems like it would go into the CSS Coding, but isn’t Header Div in the header.php?

    mfux

    (@mfux)

    14 years, 9 months ago

    When you call the style sheet in the index.php file it will affect the header div in the header.php file.

    If you put the above code in the CSS stylesheet (style.css) then it should sort out your problem, hopefully.

    Make sure you give the #nav a background-color: #000000; too.

    Thread Starter joogle

    (@joogle)

    14 years, 9 months ago

    I put that css code into my style.css and i have the same problem as before. After adjusting the padding and margins, my site still has a horizontal scroll bar because the coding extends my site. Please take a look at this http://www.huloji.com Here is the css code I put into my style.css

    [CSS moderated as per the Forum Rules. Please just post a link to your site.]

    ideas? All I need is a black bar going across the page without extending the site’s borders…. I can play with the margins and align that bar with the menu to give it the same look. This is so frustrating! hahahah

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How Do I Create a Solid Black Bar?’ is closed to new replies.