Bakgrundsbild i layouten
sitter med en sida, men har fått ett problem, o är ganska ny på css. Jag vill få in en bild i headern som jag skapat i photoshop, men hur får jag den att hamna "rätt"? Alltså vilka mått ska jag lämpligast ge den i ps o vad anger jag i css för att få den centrerad när width är satt till 100%?
Har försökt det jag kommer på men lyckas inte få den snyggt placerad. Skriver hela css:en så att ni ser vad jag gjort.
HTML:
<div id="container">
<div id="header">
</div>
<div id="navigation">
<ul>
<li><a href="#>Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
<div id="content-container">
<div id="content">
<h2>
Page heading
</h2>
</div>
<div id="aside">
<!-- content aside -->
</div>
<div id="footer">
<!-- content footer -->
</div>
</div>
</div>
CSS:
#container
{
margin: 0 auto;
width: 100%;
background: #jjj;
}
#header
{
background-image: url(scotflag.jpg);
padding: 40px;
}
#navigation
{
float: left;
width: 100%;
background-image: url(scotflag.jpg);
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 100%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
#content
{
clear: left;
float: left;
width: 60%;
padding: 20px 0;
margin: 0 0 0 4%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 0 3% 0 0;
display: inline;
}
img.one
{
float: right;
margin-left: 5px;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
}
}
#aside h3 { margin: 0; }
#footer
{
clear: left;
background: #ccc;
text-align: right;
padding: 20px;
height: 1%;
}
