Links en rechts.
Nu moeten hier op de rode vlakken dus de advertenties komen, maar ik ben geen ster in CSS. Hoe kun je dat aanpakken?
Als je dat niet wilt, je zou zo iets kunnen doen. Even heel simpel opzetje, uit het hoofd. Er moet nog wel wat meer bij..
css
Code (php)
1
2
3
4
5
2
3
4
5
.left{float:left;}
.addver{width: 100px;}
#main{margin: 0 auto; width: 960px;}
#menu{ width: 150px;}
#content{ width: 710px;}
.addver{width: 100px;}
#main{margin: 0 auto; width: 960px;}
#menu{ width: 150px;}
#content{ width: 710px;}
html
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div id="main">
<div class="left addver"></div>
<div id="menu" class="left"></div>
<div id="content" class="left"></div>
<div class="left addver"></div>
</div>
<div class="left addver"></div>
<div id="menu" class="left"></div>
<div id="content" class="left"></div>
<div class="left addver"></div>
</div>
Gewijzigd op 10/08/2010 12:26:20 door Mark Beets
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
#page{
width: 900px;
border:1px solid black;
overflow: hidden;
background-color:white;
}
#bmain{
float:right;
width:700px;
background-color:white;
}
#left{
float: left;
width:200px;
background-color:white;
}
#menu{
width:198px;
background-color:white;
}
#ad{
width:198px;
background-color:white;
}
#header{
position: relative;
margin: 0px auto;
width: 900px;
top: 0;
background-color:white;
}
width: 900px;
border:1px solid black;
overflow: hidden;
background-color:white;
}
#bmain{
float:right;
width:700px;
background-color:white;
}
#left{
float: left;
width:200px;
background-color:white;
}
#menu{
width:198px;
background-color:white;
}
#ad{
width:198px;
background-color:white;
}
#header{
position: relative;
margin: 0px auto;
width: 900px;
top: 0;
background-color:white;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="page">
<div id="header">
Header
<hr>
</div><!--close header-->
<div id="left">
<div id="menu">
menu
</div>
<div id="ad">
Menu 2
</div><!--close ad-->
</div><!--close left-->
<div id="bmain">
<!-- start main content -->
main
</div>
<div id="footer">
footer
</div>
</div>
<div id="header">
Header
<hr>
</div><!--close header-->
<div id="left">
<div id="menu">
menu
</div>
<div id="ad">
Menu 2
</div><!--close ad-->
</div><!--close left-->
<div id="bmain">
<!-- start main content -->
main
</div>
<div id="footer">
footer
</div>
</div>
Dan plaats je in die outer 3 kolommen, links en rechts 100px groot en midden 700px.
Evt zou je margin op de middelste kunnen plaatsen. Float dan alles naar links en dan heb heb je zoals je het wou...toch?