CODEWITHSUNDEEP
htmlcss
Learning
Learning

Reputation: 20001

Horizontal Bar across page with different color on each side

I need to design something as show below.

So far I have managed to do as http://jsfiddle.net/GDDA5/1006/ but I am not able to add different color on each side of navigation bar and Image Bar as show in example. I am not sure how to do it.

Help in this regard is appreciated.

enter image description here

Sample code

<div id="BannerBar"></div>
<div id="navBar"></div>
<div id="TopImageBar"></div>
<div id="imageBar"></div>
<div id="contentWrapper">
    <div id="logowrapper">LOGO</div>
    <div id="NavigationWrapper">Home | About Us | News | Something</div>
    <div id="TopImageWrapper">IMAGE HERE </div>
</div>
<div id="footerBar"></div>

Upvotes: 0

Views: 303

Answers (3)

Tiago
Tiago

Reputation: 172

Done: http://jsfiddle.net/GDDA5/1014/

You can update colors from left and right now.

.TopImageBar
{
    height: 80px;
    background: blue;
    margin-top:90px;
    width:50%; 
    float: left;
    position: absolute;
}

.TopImageBar.Right {
     background: red;
     right: 0%;
}

Upvotes: 1

Szymon
Szymon

Reputation: 1290

Here's modified jsfiddle for you , on both sides #navbar has 2 div #leftNav and #rightNav with black and red background-color JSFIDDLE

second way is to use :before an :after which I do not recommend because IE8 has problem with :before pseudo-element

EDIT:

I was thinking about IE7, not IE8 where it work just need to declare <!DOCTYPE>.

Upvotes: 1

keirog
keirog

Reputation: 2178

Add this to your CSS:

#navBar:before {
    content: '';
    position: absolute;
    background: gray;
    height: 100%;
    right: 0;
    width: 50%;
}

#TopImageBar:before {
    background: gray;
    content: '';
    height: 100%;
    position: absolute;
    width: 50%;
}

Upvotes: 1

Related Questions