Ik ben bezig met een website, nu wil ik 3 div's naast elkaar hebben.
De middelste krijgt een vast maat van 800px breed en moet in het midden van het scherm blijven, en de linker en rechter moeten het scherm aanvullen.
In de middelste komt wat tekst, linkjes, etc... met een plaatje, in dat plaatje zitten 3 lijnen over de hele breedte (800px) , nu zou ik graag willen dat die lijnen door lopen aan de linker en rechter kant, door ze als achtergrond te zetten in de linker en rechter div. verder komt er in deze div's geen tekst of wat dan ook. De reden is dat de scherm grote dan niet uit maakt, maar dat de lijnen niet zomaar op houden, omdat dat er niet uit ziet, en toch de website een vast grote heeft van 800px.
Is dit eigenlijk wel te maken?
Ik heb me namelijk al helemaal suf gezocht, op google en GoT maar kom alleen maar de oplossing tegen dat de buitenst 2 een vaste waarde hebben en de middelste variabel is, of dat ze alle 3 variabel zijn.
Dit is wat in nu heb waar ik mee test... het geheel moet er natuurlijk ook goed uit gaan zien in de meest gebruikte browsers.
Ik ben niet uit op kan en klaar aangeleverde codes, maar een schopje in de goede richting is zeker welkom.
De middelste krijgt een vast maat van 800px breed en moet in het midden van het scherm blijven, en de linker en rechter moeten het scherm aanvullen.
In de middelste komt wat tekst, linkjes, etc... met een plaatje, in dat plaatje zitten 3 lijnen over de hele breedte (800px) , nu zou ik graag willen dat die lijnen door lopen aan de linker en rechter kant, door ze als achtergrond te zetten in de linker en rechter div. verder komt er in deze div's geen tekst of wat dan ook. De reden is dat de scherm grote dan niet uit maakt, maar dat de lijnen niet zomaar op houden, omdat dat er niet uit ziet, en toch de website een vast grote heeft van 800px.
Is dit eigenlijk wel te maken?
Ik heb me namelijk al helemaal suf gezocht, op google en GoT maar kom alleen maar de oplossing tegen dat de buitenst 2 een vaste waarde hebben en de middelste variabel is, of dat ze alle 3 variabel zijn.
Dit is wat in nu heb waar ik mee test... het geheel moet er natuurlijk ook goed uit gaan zien in de meest gebruikte browsers.
Ik ben niet uit op kan en klaar aangeleverde codes, maar een schopje in de goede richting is zeker welkom.
code:
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
47
48
49
50
51
52
53
54
55
56
57
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>testing 123...</title>
<style>
#intro_frame {
width: 100%;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0px;
height: 100%;
}
#intro_left {
border: 1px solid #000;
float: left;
padding: 0px;
height: 100%;
}
#intro_center {
width: 800px;
border: 1px solid #000;
float: left;
padding: 0px;
height: 100%;
}
#intro_right {
border: 1px solid #000;
float: left;
padding: 0px;
height: 100%;
}
body {
height: 100%;
background: #ccffcc;
}
</style>
</head>
<body>
<div id="intro_frame">
<div id="intro_left">test
</div>
<div id="intro_center">test 2
</div>
<div id="intro_right"> test 3
</div>
</div>
</body>
</html> |
/u/129382/crop5f6f24af0ae5d.png?f=community)
:strip_icc():strip_exif()/u/92368/crop67f122a4021bc.jpg?f=community)
,zou ik zelf niet hebben kunnen verzinnen, en werkt goed, getest in IE 7 en firefox 2.??, dus een bruikbare oplossing, bedankt.