Tijden veranderen
css div geen goede hoogte
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
#container #middle #menu{
padding-top: 10px;
background:#313131;
width: 270px;
height: 100%;
border-right: 2px solid #000;
float: left;
height: 100%;
}
padding-top: 10px;
background:#313131;
width: 270px;
height: 100%;
border-right: 2px solid #000;
float: left;
height: 100%;
}
Nu is de #container 1000px hoog en de #middle 550px hoog.
Nu wil ik dat hij de zelfde hoogte geeft als #middle.
Helaas doet hij dit niet, en wordt hij alleen hoger als er meer tekst onder elkaar staat.
Hoe kan ik dit oplossen?
Gewijzigd op 15/10/2011 13:13:02 door - Ariën -
Want op google heb ik geen idee wat goed is, want overal staat een andere oplossing
Je maakt een een plaatje op de breedte van de linkerkolom van bv 2px hoog, dan maak je in css een id #container met als achtergrond de kleur die je wilt hebben en de achtergrond image het plaatje dat links is uitgelijnd en alleen in de y-richting wordt herhaald. Daarbinnen maak je de andere divs aan. Bv:
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
37
38
39
40
41
42
43
44
45
46
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
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faux columns</title>
<style>
body {
text-align: center;
height: 100%;
}
#container {
display: inline-block;
overflow: auto;
background: #2AFFAA;
background-image: url(/images/bg-left.jpg);
background-position: left;
background-repeat:repeat-y;
min-height: 700px;
width: 1024px;
}
#left {
display: block;
float: left;
width: 250px; /* let op de breedte als je padding gebruikt */
text-align: left;
}
#content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<script>
for (i=1; i<61; i++) {
document.write("regel " + i + "<br />");
}
</script>
</div>
<div id="content">Test van ger</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Faux columns</title>
<style>
body {
text-align: center;
height: 100%;
}
#container {
display: inline-block;
overflow: auto;
background: #2AFFAA;
background-image: url(/images/bg-left.jpg);
background-position: left;
background-repeat:repeat-y;
min-height: 700px;
width: 1024px;
}
#left {
display: block;
float: left;
width: 250px; /* let op de breedte als je padding gebruikt */
text-align: left;
}
#content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<script>
for (i=1; i<61; i++) {
document.write("regel " + i + "<br />");
}
</script>
</div>
<div id="content">Test van ger</div>
</div>
</body>
</html>
Een voorbeeld zonder plaatjes: http://waldio.110mb.com/css/fauxcolumn.html
Faux columns is er op vele verschillende manieren. Elke manieren zijn hier beschreven met hun voor en nadelen: http://webdev-il.blogspot.com/2011/04/how-to-make-multiple-div-columns-expand.html
Een faux column met CSS3 (gradients) is ook mogelijk, hiervoor raad ik deze tutorial aan: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-equal-columns-with-css3-gradients/
Quote:
1. The Faux Columns method
This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image
This as the name suggests uses false columns in the way of tiled background images to create the illusion of similar sized columns - this is a bit of a cheat (and uses extra images). Not really recommended as every time you change column widths you need to make a new image
Dit is uit jouw tweede link
I rest my case