Afficher un message
Vieux 25/03/2008, 05h05   #1
Larry
Aucun Avatar
 
Messages: n/a
Hébergeur:
Par défaut Layout with 3 colums (2 sidebars + content): how to?

Hello!

I'm currently trying to make my very first stylesheet (aspirin needed)
and I'm, of course, facing some problems.

I"ve found many sites offering layout tutorial for 3 colums websites,
very interesting ones. Problem is: the 3 colums are side by side
(normal) but I want 2 sidebars on the right + main content on the
left.

site should look like this (Header, Sidebar1, Sidebar2, Content,
Footer)

---------------
H
---------------
S1|
|
---- C
S2|
|
---- ---------
F
--------------

So far, code looks like this (notes: I haven't included footer yet and
I use temporary vivid colors for ease of building purpose only, I'll
switch to normal colors later)

body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font-size:62.5% ;
font: "Trebuchet MS", helvetica, sans-serif ;
background: #000 url(xxxxx/back.jpg) repeat-x;
}

div#container
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #fff;
background: #00f ;
}

div#header
{
height: 100px;
background: url(file://xxxxx/header.jpg) no-repeat center ;
}

div#sidebar
{
background-color: rgba(204,204,204);
width: 130px;
height: 150px;
margin-top: 25px;
margin-left: 10px;
}

div#sidebar2
{
background-color: rgba(204,204,204);
width: 130px;
height: 150px;
margin-top: 25px;
margin-left: 10px;
}

div#content
{
background-color: rgba(204,204,204);
width: 610px;
margin-top: 25px;
margin-left: 150px;
border: 2px solid #000;
}

pre
{
overflow: auto ;
}


Main problem: content should start on the same line as sidebar1, but
here it is displayed after sidebar2 (margins are ok though).

How can I correct this problem?

Thanks for your
Larry
  Réponse avec citation
 
Page generated in 0,05641 seconds with 9 queries