I have been searching since yesterday for a solution but couldn't find one, or couldn't find the right keywords to search with.
So I have a header on my website like this is a header and I centered that nicely and extended the background color of it.
Now I found out how to make a nice interactive/glossy nav bar as a footer but im using it at the top and the thing is I also want to extend it's size, however it just centers itself and doesn't extend. I'll show this in a screenshot and will post my code.
Also: I want my box to be centered, which is contained in a div called #main_inner_area.
Note: Navbar is still called #footer in CSS/HTML code.. I want to extend the sides of my navbar, like the background color of my header is extended to the full width.
my screenshot: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (sorry but its hard to explain without screenie)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
P.S. I'd REALLY appreciate it. Im an 18 year old student trying to learn some extra things next to my study.