CSS dobozmódszer, doboz a dobozban pozicionálás?
Üres weblapra szeretnék egy dobozt pl:
#header{
width:300px;
height:800px;
background-color:rgb(szín);
margin: 0 auto 0 auto;
}
Ezt meghívon (id-vel) és ebbe bele szeretnék tenni egy kisebb dobozt, de úgy hogy mindkét doboz középen legyen, és a kisebb a lentebb.
padding-top:érték;
próbálkoztam de nem sikerült.
Remélem érthető.
(még egyszer: téglalapba egy kisebbet, de ha a nagynak a top pozíciója 0, a kicsinek -20, mintha sor töréssel lentebb vinném).
Bocs csak még kezdő vagyok.
válasza:Relative és absolute pozíciókkal egymáshoz igazíthatod a kettőt:
#header{
width:300px;
height:800px;
background-color:rgb(szín);
margin: 0 auto 0 auto;
position:relative;
}
#kisdoboz{
position:absolute;
z-index:1;
top:50px;
right:50px;
bottom:50px;
left:50px;
}
és ha lejjebb akarod, akkor adjál nagyobb top értéket:
#kisdoboz{
position:absolute;
z-index:1;
top:70px;
right:50px;
bottom:50px;
left:50px;
}
a padding a belső "kövérségét" jelenti a dobozoknak, margin-nal tudnál relative vagy static position-ben lévőket mozgatni, hogyha mondjuk inkább egymás alá tennéd valami oknál fogva.
válasza:Itt van egy másik módszer:
<style>
#header{
background-color:rgb(200,210,255);
height:250px; /* height = height - padding-top */
margin: 0 auto 0 auto;
padding-top:50px;
width:500px;
}
#kisdoboz{
background-color:rgb(160,190,200);
height:200px;
margin: 0 auto 0 auto;
width:400px;
}
</style>
<div id="header">
<div id="kisdoboz"></div>
</div>
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!