Hallo,
Ik zit momenteel met een voor mij onbekend raadsel:
De container is nodig als achtergrond (plaatje, een kleur enz.). Binnen de container zit een paragraaf met daaronder een link welke ik volledig links of rechts wil positioneren. De beste oplossing leek mij een float. Alleen wanneer ik links of rechts float lijkt de link gedeeltelijk buiten de flow van de container div te vallen. Met gedeeltelijk bedoel ik hij blijft er binnen, maar zoals je kunt zien wordt de background-color, margin, padding van de container div niet overgenomen (simpel gezegd de div rekt niet uit).
Ik heb tot nu toe de volgende info kunnen vinden:
[rml][ css]meerdere tegenovergestelde floats in Mozilla[/rml]
Maar ik moet eerlijk bekenen dat ik niet snap of dit voor mijn probleem van toepassing is.
Ik kan zat werkende alternatieven bedenken voor mijn probleem, maar eerlijk gezegd wil ik gewoon weten wat ik fout doe of wat er ergens fout gaat. Een code met oplossing mag natuurlijk ook, maar ik denk dat ik deze zelf wel kan bedenken als ik het probleem eenmaal snap / zie / begrijp. Dus wie helpt me uit de brand.
Het probleem doet zich voor in alle door mij gebruikte browsers (Firefox 1.5, IE 6.0 en Opera 8.51).
Ik zit momenteel met een voor mij onbekend raadsel:
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
58
59
60
61
62
63
64
65
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Testcase</title>
<style>
body
{
width: 500px;
height: 500px;
margin: auto auto;
padding: 0px;
border: #000000 1px solid;
color: #ffffff;
}
div#links
{
float: left;
width: 100px;
background-color: green;
}
div#container
{
background-color: black;
}
div#container a
{
color: #ffffff;
float: right; <<<<<<<<<<<<<< haal deze weg en druk f5
}
div#midden
{
float:left;
width:300px;
background-color: blue;
}
div#rechts
{
float: right;
width: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div id="links">
<div id="container">
<p>Ik ben de linkse paragraaf</p>
<a href="#">linkse rechtse link</a>
</div>
</div>
<div id="midden">
midden
</div>
<div id="rechts">
rechts
</div>
</body>
</html> |
De container is nodig als achtergrond (plaatje, een kleur enz.). Binnen de container zit een paragraaf met daaronder een link welke ik volledig links of rechts wil positioneren. De beste oplossing leek mij een float. Alleen wanneer ik links of rechts float lijkt de link gedeeltelijk buiten de flow van de container div te vallen. Met gedeeltelijk bedoel ik hij blijft er binnen, maar zoals je kunt zien wordt de background-color, margin, padding van de container div niet overgenomen (simpel gezegd de div rekt niet uit).
Ik heb tot nu toe de volgende info kunnen vinden:
[rml][ css]meerdere tegenovergestelde floats in Mozilla[/rml]
Maar ik moet eerlijk bekenen dat ik niet snap of dit voor mijn probleem van toepassing is.
Ik kan zat werkende alternatieven bedenken voor mijn probleem, maar eerlijk gezegd wil ik gewoon weten wat ik fout doe of wat er ergens fout gaat. Een code met oplossing mag natuurlijk ook, maar ik denk dat ik deze zelf wel kan bedenken als ik het probleem eenmaal snap / zie / begrijp. Dus wie helpt me uit de brand.
Het probleem doet zich voor in alle door mij gebruikte browsers (Firefox 1.5, IE 6.0 en Opera 8.51).
[ Voor 20% gewijzigd door DerKleinePunkt op 09-01-2006 21:22 ]
Ein kleiner Punkt in einer grossen Welt
, de pagina ziet er precies zo uit als ik zou verwachten met deze CSS code... Maak anders eens een screenshot van je probleem en hoe jij zou willen dat het eruit komt te zien..
, de pagina ziet er precies zo uit als ik zou verwachten met deze CSS code... Maak anders eens een screenshot van je probleem en hoe jij zou willen dat het eruit komt te zien..
(heb mijn reactie vervolgens aangepast).
.
.
) Een soort van inline float mogen ze van mijn part wel toevoegen. Ach...zal jullie er verder niet mee lastig vallen, ik zie waar ik de mist in ging. Hartelijk dank voor jullie hulp 