CSS: DIV probléma
A tiszújvárosi RoadShowon elhangzott CSS előadás után (Boogie - CSS a gyakorlatban) megpróbálok én is átállni a "full CSS designra". Minden szuper és jó addig, amíg a 3. DIV alá egy 4.-et szeretnék betenni.
Az a gond, hogy az első 3 DIV-ben tudom a pontos pixel magasságot, és így könnyű a többit egymás alá rendelni. Csakhogy a 3. DIV-ben már dinamikus méretű szöveg van, és így nem tudok a 3. (main) alá egy 4. (down) tenni, mert nem tudom a 3. DIV magasságát.
Próbálkoztam a position átállításával, absoluteról relativra, de úgyse ment.
div#main {
position: absolute;
top: 82px;
left: 0px;
width: 690px;
/* ... */
}
div#down {
position: relative;
left: 0px;
width: 690px;
/* ... */
}
Erre a down DIV-et ráteszi a MAIN-ra, pedig alá kellene.
Mit tegyek?
■ Az a gond, hogy az első 3 DIV-ben tudom a pontos pixel magasságot, és így könnyű a többit egymás alá rendelni. Csakhogy a 3. DIV-ben már dinamikus méretű szöveg van, és így nem tudok a 3. (main) alá egy 4. (down) tenni, mert nem tudom a 3. DIV magasságát.
Próbálkoztam a position átállításával, absoluteról relativra, de úgyse ment.
div#main {
position: absolute;
top: 82px;
left: 0px;
width: 690px;
/* ... */
}
div#down {
position: relative;
left: 0px;
width: 690px;
/* ... */
}
Erre a down DIV-et ráteszi a MAIN-ra, pedig alá kellene.
Mit tegyek?
divek helye
-boogie-
alapértelmezett position
Ott a pont
relativeaz alapértelmezett, aztán meg mégsem. Arelativeés astaticközötti különbség annyi, hogy aposition: relativetulajdonságú elemnek lehetleftéstopértéket beállítani. Ez itt nulla volt, tehát arelativemegadása tényleg felesleges.-boogie-
par link
Nezd meg ezeket, biztosan talasz koztuk olyat, ami megfelel Neked:
http://www.friendsofed.com/books/1590593812/1590593812.pdf
http://www.fu2k.org/alex/css/index.mhtml
http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml#
http://www.pixy.cz/blogg/clanky/css-3col-layout/
http://www.webreference.com/authoring/style/sheets/layout/advanced/
Felho
Foglalat gond
Én rögtön az elején elakadtam a css layout kialakitásának. Szeretnék egy foglalatba tenni mindent, ami balra igazított kis margóval, és fix a szélessége. Sehogy se jön össze. Vagy csak beírt szöveg széles, vagy kihúzódik a böngészőablak jobb széléig és "gumizgat".
A css kód (most)az alábbi(így csak szöveg széles):
body{
padding: 0px; margin: 0px; text-align: left; background-color: #ccc;
}
#pg-foglalat {
position: absolute;
width: 750 px;
top: 10px;
left: 10px;
min-height: 550 px;
border-left: 2px solid #000;
background-color: #fff;}
Hol a hiba?
CSS hiba
Mértékszám és mértékegység között nincs szóköz. A problémádat pedig nem értem, de ez lehet, hogy csak az én hibám.
--
slink
Minden r e l a t i v e :-)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#egy {
background-color: Red;
position: relative;
width: 690px;
height: 50px;
}
#ketto {
background-color: Green;
position: relative;
width: 690px;
height: 30px;
}
#harom {/*ez nalad a main*/
background-color: Blue;
position: relative;
width: 690px;
/*height nem is kell*/
font-size:100px;
}
#negy {
background-color: Red;
position: relative;
width: 690px;
height: 40px;
}
-->
</style>
</head>
<body>
<div id="egy"></div>
<div id="ketto"></div>
<div id="harom">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
</div>
<div id="negy"></div>
</body>
</html>