Archief - CSS: margin-bottom ; div centreren

PieterJ · 22 dec 2004

Op mijn webpagina maak ik gebruik van enkele div's. Een voor een bepaalde div zou ik ergens in mijn script moeten kunnen inpassen dat er onder de div nog 50 pixels overblijven tussen de div en het einde van de webpagina.

Dit is het stuk css dat slaat op de div die ik zo wil positioneren:

#left {
position: absolute;
top:50px;
left:50px;
width:141px;
border:1px dashed #000000;
}

Wat moet ik hierin veranderen zodat ik mijn bottom-margin krijg? Of is het niet in dit deel van de CSS dat ik dit moet aanpassen...

En dan nog een vraagje:

kan je een div ook centreren via de css?

DarkBone · 22 dec 2004

euh... margin-bottom: 50px; zeker? Ge geeft zelf al het antwoord in uw titel... of begrijp ik u nu zo verkeerd.

grtz

*edit*
horizontaal centreren:

body
{
text-align:center; /* speciaal voor IE */
}

#te_centreren_div
{
text-align: left; /* neveneffecten van IE 'hack' ongedaan maken
margin: 0 auto; /* centreren zoals het hoort in hedendaagse browsers */
width: ___px;
}

Zero Grav · 22 dec 2004

Dat centreren staat trouwens in de sticky

left: -helftvanwidthpx;
margin-left: 50%;

als ik het goed vanbuiten ken

PieterJ · 22 dec 2004

Kunnen jullie dit even concreet toepassen:

left: -helftvanwidthpx;
margin-left: 50%;

Moet je deze alletwee toepassen? Of één van de twee?

Ik heb zonet eens enkel
margin-left: 50%;
in mijn script gezet, maar dan wordt de div gewoon begonnen in het midden van de pagina, maar niet gecentreerd...

DarkBone · 22 dec 2004

Mijn code moet normaal perfect werken, tenminste als je de benamingen aanpast en je eigen breedte opgeeft.

Ook altijd handig als je even heel duidelijk stelt hoe er moet gecentreerd worden!
- enkel horizontaal
- enkel verticaal
- of beide

nu kunnen we er enkel met ons klak naar smijten é

PieterJ · 22 dec 2004

Ik zou graag horizontaal willen centreren.
De div is 500 pixels breed, de webpagina gewoon maximumbreedte...

Zero Grav · 22 dec 2004

position: absolute; was'k nog vergeten
width :500px;
left: -250px;
margin-left: 50%;

PieterJ · 22 dec 2004

Bedankt.

PieterJ · 22 dec 2004

En kan er mij ook iemand helpen met volgend probleem:

ik heb links op mijn pagina ook een div staan, die langer is dan de pagina zelf. En ik zou moeten kunnen instellen dat deze div gepositioneerd staat op 50px van de 'top', en altijd minimum 50px van de 'bottom' staat.

Het lijkt makkelijker dan het is (denk ik). Ik heb al vanalles geprobeerd maar het lukt me maar niet...

Zero Grav · 22 dec 2004

position: absolute;
top: 50px;
margin-bottom: 50px;

denk ik da ge wilt?

PieterJ · 22 dec 2004

Dit werkt niet. Ik denk dat ik het trouwens al eens geprobeerd had. Ik vind het ook raar dat dit script niet werkt.
Jammer, maar toch bedankt!

PieterJ · 23 dec 2004

Ik zou zeggen, probeer het zelf eens uit. Je zult normaal zelf (volgens mijn ervaringen toch) snel tot de conclusie komen dat dit probleem minder eenvoudig is dan het lijkt.

Je maakt gewoon een langwerpige div, die langer is dan uw pagina zelf. U heeft de div een ander kleurtje dan de achterground, en u zult zin dat het niet zo gemakkelijk is om een top- en bottom-margin te krijgen bij div's.

Of misschien kunnen jullie zelf eens zoeken in mijn script.

De webpagina is:
http://users.pandora.be/webcreationsop/wcop/homepage_nieuw.html

Het stijlblad vind je hier:
http://users.pandora.be/webcreationsop/wcop/stijlblad_nieuw.css

Wat ik bedoel zie je (duidelijk) onder de 'linkerdiv'.

DarkBone · 23 dec 2004

Hmm, blijkbaar heb ik er de vorige keer over gekeken, maar het is nogal logisch dat dat niet wil werken. Je gebruikt namelijk absolute positionering. Dan heeft dat geen invloed.

Probeer dit maar eens:

Code:

 <html>
 <head>
 <style>
 #container
 {
 	width: 300px;
 	height: 1000px;
 	background-color: red;
 	margin-bottom: 500px;
 	/* position: absolute; */
 }
 
 </style>
 </head>
 <body>
 
 <div id="container">
 test
 </div>
 
 </body>
 </html>

En haal daarna position: absolute; uit de commentaar en merk het verschil op.

Hint: jou layout kan perfect gemaakt worden zonder absolute positionering. Absolute positioning = evil

PieterJ · 23 dec 2004

Zonder die absolute-positioning kan ik mijn div wel niet plaatsen waar ik wil hoor...

DarkBone · 23 dec 2004

PieterJ zei:
Zonder die absolute-positioning kan ik mijn div wel niet plaatsen waar ik wil hoor...

Dat durf ik aan te vechten... misschien onvoldoende ervaring/kennis?

PieterJ · 23 dec 2004

Dat zou best kunnen. Ik zeg ook maar wat ik denk. Het is best mogelijk dat iemand anders dit wel kan, maar ik slaag er in ieder geval niet in. Ik kan behoordlijk met html en css om, maar het is de eerste keer dat ik mijn webpagina's via css en div's probeer in te delen.

Inderdaad wel niet echt veel ervaring hierin dus.

DarkBone · 23 dec 2004

Werk met relatieve positionering (is standaard zo) en gebruik floats om blokken links of rechts te laten 'drijven'.

Archief - CSS: margin-bottom ; div centreren

PieterJ

Legacy Member

DarkBone

Legacy Member

Zero Grav

Legacy Member

PieterJ

Legacy Member

DarkBone

Legacy Member

PieterJ

Legacy Member

Zero Grav

Legacy Member

PieterJ

Legacy Member

PieterJ

Legacy Member

Zero Grav

Legacy Member

PieterJ

Legacy Member

PieterJ

Legacy Member

DarkBone

Legacy Member

PieterJ

Legacy Member

DarkBone

Legacy Member

PieterJ

Legacy Member

DarkBone

Legacy Member