div op een vaste locatie mbv CSS: posities

Hola,

ik ben al wel enige tijd aan het kneien met CSS (wie niet?). Een ding heb ik echter nog niet echt goed begrepen - terwijl het toch volgens mij niet zo moeilijk te snappen is! (Ik voel me weer eens blonder dan blond!) :frowning:

Dat ene ding is: posities!

Hoe krijg ik in een floating div een 2e div die op een vaste plaats in die 1e div komt te hangen??

Als iemand mij een goede tutorial over posities kan aanreiken ga ik juichen!
:lol:

Float blijft vervelend, maar in deze tutorial op A List Apart staat echt heel erg veel over positioneren:

http://www.alistapart.com/articles/practicalcss/

Ik heb hem vandaag ook gebruikt voor een float-probleem dat nu is opgelost. ;]

Bedankt voor je snelle reactie. De tutorial die je noemde heb ik ook al gelezen. Maar daar kwam ik helaas niet mijn utidaging in tegen... :(

Ik vermoed dat ik moet gaan ‘rommelen’ (sorry maar dat is het in mijn geval nog wel - dat krijg je als je niet weet wat je doet…:wink: ) met [color=red:b82582859c]position: relative[/color:b82582859c] en [color=red:b82582859c]position: absolute[/color:b82582859c]

Helaas ga ik daar vaak de mist in…

volgens mij is dit de meest complete tutorial over floats: http://css.maxdesign.com.au/

Dat had ik ook bij mijn site opbouw www.freshface.be , maar alles is goed gekomen.

Mmmm.... misschien ben ik niet helemaal helder in wat ik bedoel... Code: [code:1:58e9100eaf] <div id="div1"> <h1>mjin text</h1> <p>mijn paragraaffff....</p> <div id="div2">link naar volgende</div> </div> [/code:1:58e9100eaf]

de div2 met de link moet standaard rechtsonder komen te staan… En ik krijg dat niet voor elkaar - floating niet…
:oops:

In de CSS van die tweede div:

text-align: right;

Als dat niet werkt gebruik dan:
float: right;

maar dat had je al geprobeerd geloof ik.

Bewerkt:
Of wil je die tweede div op dezelfde lijn naast de eerste div?

nee... div1 = 400x400 div2 > moet rechts onder in de hoek komen te staan, onafhankelijk van <p>... ? :roll:

div2 margin-left:100% margin-top:100%

[quote:d35e8cc583] div2 margin-left:100% margin-top:100% [/quote:d35e8cc583]

kom je daarmee niet in de problemen met je paragraaf tags dan??
Ik ga het in ieder geval eens proberen, bedankt!

Tja... dat wil inderdaad niet lukken.

Nog iemand een idee? 8)

Ik was wat met dit aan het spelen:

[code:1:099992c6eb]
#kader {width:400px; height:400px; background-color:#BBB;}
#div1 { width:100%;}
#div2 {
background-color:#FFF;
margin-top:395px;
position:relative;
height: 5;
left: 300px;
}

<div id="kader">
<div id="div1">
<p>Lijn1</p>
<p>Lijn2</p>
</div>

<div id="div2">Rechts-beneden</div>

</div>
[/code:1:099992c6eb]

ik heb een testje op m'n site gezet [url=http://www.miransweb.nl/blok.html] klik hier [/url] ... misschien is dit wat je bedoelt ?

Ja, zo moet het er uit zien!

Nu heb ik echter wel een wens: bij voorkeur niet die ene extra div die je gebruikt om de p-tags…
(Reden: ik hoef niet bij alle pagina’s een extra-blokje te gebruiken) hier voor de site waar het om gaat…

Een vraag: waarom gebruik je die position:relative?

Bedankt voor je voorzetje. Helder.

De enige manier om het goed te doen:

[code:1:0eacac0897]
#div1 {
position : relative;
}

#div2 {
position : absolute;
bottom : 0;
right : 0;
}[/code:1:0eacac0897]

het kan ook zonder de extra p div, was meer voor de duidelijkheid: [code:1:da951c8162]#div1 { background-color: #ccf; width: 500px; padding: 10px 10px 10px 10px; margin-left: auto; margin-right: auto; }

#div2 &#123;
	width&#58; 500px;
	margin-left&#58; auto;
	margin-right&#58; auto;
	&#125;
	
#div3 &#123;
	position&#58; relative;
	bottom&#58; 0px;
	right&#58; 0px;
	width&#58; 40%;
	margin-left&#58; auto;
	margin-right&#58; 0;
	margin-bottom&#58;0;
	&#125;[/code:1:da951c8162]</p>

De code van tennapel deed 't m. Volgens mij moet je het gewoon snappen.... Soms heb ik daar toch wel wat moeite mee blijkbaar...

Maar: door de positie:relative te zetten maak je het mogelijk om voor het child element een absolute positie te definieren… correct me if I’m wrong.

Het mooie er aan: 't is het kleinste stukkie code in deze thread :wink:

[quote:7f3975c68d="hhoeksma"]Maar: door de positie:relative te zetten maak je het mogelijk om voor het child element een absolute positie te definieren... correct me if I'm wrong.[/quote:7f3975c68d]

Inderdaad, zo blond ben je ook weer niet :wink:

Bedankt! Ik begin iets te snappen van die posities...

[size=9:79972ed34f]En ik voel me ook nog een stuk beter nu…![/size:79972ed34f]

Ik heb ook zo een probleem ik zou dus het volgende willen [img:2daa200e35]http://users.pandora.be/rabbit_design/menu.gif[/img:2daa200e35]

Het lukt me om het op die plaats te krijgen met een margin-top en margin-left, maar in IE op mac zet hij het menu gans links en houd geen rekening met margin left.

Hoe kan ik nu maken dat ( div menu) het in die div (menuinhoud) op die plaats komt te staan ?
Dank