ugrás a tartalomhoz

css probléma

gabrieludon · 2009. Okt. 19. (H), 19.12
Sajnos nem igazán értek a css-hez, így örülnék ha valaki kisegítene.
A lent látható kóddal a következő a bajom:

Először táblázattal próbáltam megoldani a dolgot, de aztán letettem róla és jött a CSS. Lényegében a CSS három részre osztja a képernyőt. Egy felső részre, egy középsőre és egy alsóra. A középső rész mérete fix, vagyis 624 px. Azt szeretném elérni, hogy a másik két rész egyenletesen töltse ki a maradék részt felbontástól függően, de ezt eddig nem sikerült elérnem. Ha valaki tud kérem segítsen! Lehet hogy amatőr kérdés és elnézést kérek érte...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Title</title>

<style type="text/css">
HTML, BODY {
background-image:url(img/hatter.png);
margin: 0;
padding: 0;
}
#header {
margin: 0 0 0 0;
width: 100%;
height: 100%;
}
#contents {
margin: 0 0 0 0;
height: 624px;
vertical-align:middle;
background-image:url(img/kozhatter.png);
}
#footer {
background-image:url(img/alsohatter.png);
background-position:bottom;
height: 100%;
width: 100%;
margin: 0 0 0 0;
}
</style>
</head>
<body>
<div id="header">Felső rész</div>
<div id="contents">
<p>
középső rész
</p>
</div>
<div id="footer">alsó rész</div>
</body>
</html>
‹ innerHTML input checkbox ›
 ■
1

<!DOCTYPE HTML PUBLIC

Blintux · 2009. Okt. 19. (H), 20.56
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2. "http://www.w3.org/TR/html4/strict.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">  
  6. <meta http-equiv="content-language" content="en-us">  
  7. <title>Title</title>  
  8.   
  9. <style type="text/css">  
  10. HTML, BODY {  
  11. background-image:url(img/hatter.png);  
  12. margin: 0;  
  13. padding: 0;  
  14. width:100%;  
  15. height:100%;  
  16. display:table;  
  17. }  
  18. #header {  
  19. display:table-row;  
  20. }  
  21. #contents {  
  22. display:table-row;  
  23. height: 624px;  
  24. vertical-align:middle;  
  25. background-image:url(img/kozhatter.png);  
  26. }  
  27. #footer {  
  28. background-image:url(img/alsohatter.png);  
  29. background-position:bottom;  
  30. display:table-row;  
  31. }  
  32. </style>  
  33.   
  34. </head>  
  35. <body>  
  36. <div id="header">Felső rész</div>  
  37. <div id="contents">  
  38. <p>  
  39. középső rész  
  40. </p>  
  41. </div>  
  42. <div id="footer">alsó rész</div>  
  43. </body>  
  44. </html>  
2

ie

gabrieludon · 2009. Okt. 20. (K), 12.00
ÜDv!

Köszönöm a megoldást...de sajnos ugyanaz! Bár Firefox alatt most már hibátlan, IE alatt még mindíg ugyanaz...
Lényeges lenne, hogy a felső és alsó rész kitöltse a maradék helyet ami természetesen felbontás kérdése, de explorer alatt még mindíg 1 sor magasak csak ezek a részek :(
3

Alap probléma

Kevlar · 2009. Okt. 22. (Cs), 11.59
Az az alap gond, hogy egy HTML dokumentum nem így épül fel.
Általában a kezdő grafikusoknak kell elmagyarázni, hogy miért nincs lehetőség dinamikus tartalmakat mindenhogyan rendezgetni: mert alapjáraton egy dokumentum fentről lefelé épül fel.
Én nem kedvelem a display: table-cell és hasonló megoldásokat, bár igaz, hogy itt legalább nem a HTML-t szemeteljük tele a table felesleges tag-jeivel.
Az IE nem is ismeri ezeket, tehát a fenti megoldás nem 100%-os.
Amit szeretnél szerintem Javascript-el oldható csak meg: le tudod kérdezni a látogató böngészőjének magasságát, ebből kivonod a középső fix magasságú részt és a maradékot osztod kettővel.
4

Re: Alap probléma

gabrieludon · 2009. Okt. 26. (H), 11.42
Köszönöm a választ...

Azt még meg is érteném hogy fentről lefelé épül fel az oldal. De ez esetben pl. én már annak is örülnék, ha az alsó cella kitöltené a maradék helyet legalul.
5

Függőleges középre rendezés

Udi · 2009. Okt. 27. (K), 12.51
Ha a fenti és alsó kihagyott helyre tartalmat nem akarsz beszúrni, csak hátteret, akkor a következő megoldás jó lehet. A középső terület méretét ismered, ez alapfeltétele a következő módszernek: a középre rendezendő divnek abszolút elhelyezést állítasz be, és a tetejét lenyomod 50%-kal. Az 50%-ot a szülő magasságából fogja számítani (ha nem, akkor a szülőnek állíts be relatív elhelyezést), ezután a divedet vissza kell tolni az ismert magasság felével, ezt negatív felső margóval meg tudod csinálni.
  1. <html>  
  2. <head>  
  3. <title>Blog</title>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5.     <style type="text/css">  
  6.         #lap {  
  7.             position: absolute;  
  8.             top: 50%;  
  9.             left: 0; /* IE miatt érdemes bent tartani */  
  10.             height: 500px;  
  11.             width: 100%;  
  12.             margin-top: -250px; /* fenti margó a magasság fele mínuszban */  
  13.             text-align: left;  
  14.             background: #ccc;  
  15.         }  
  16.     </style>  
  17. </head>  
  18.   
  19. <body>  
  20.     <div id="lap">  
  21.         <p>Függőlegesen középre rendezett tartalom</p>  
  22.     </div>  
  23. </body>  
  24. </html>  
IE6-ban is jól működik. Fölé és alá viszont trükkös lehet bármit is elhelyezni, de ha csak háttér kell, és tudod pixelben a középső rész magasságát, akkor nem lesz nehéz egyetlen nagy hátteret gyártani a középső dobozt tartalmazó divre, vagy magára a bodyra.
6

Továbbfejlesztés

Udi · 2009. Okt. 27. (K), 13.38
Ebéd közben gondolkoztam még, és tovább lehet fejleszteni ezt a módszert. Mivel a középső részt az abszolút elhelyezés miatt kiemeltük a sorból, ezért mögé szúrhatunk két divet, amiknek 50%-os magasságot adunk. Így azok az oldal középen fognak találkozni, de azt mi már nem látjuk, mert eltakarja a középső rész. Tehát:
  1. <html>  
  2. <head>  
  3. <title>Teszt</title>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5.     <style type="text/css">  
  6.         body {  
  7.             padding: 0;  
  8.             margin: 0;  
  9.             position: relative;  
  10.         }  
  11.         #kozep {  
  12.             position: absolute;  
  13.             top: 50%;  
  14.             left: 0; /* IE miatt érdemes bent tartani */  
  15.             height: 500px;  
  16.             width: 100%;  
  17.             margin-top: -250px; /* fenti margó a magasság fele mínuszban */  
  18.             text-align: left;  
  19.             background: #ccc;  
  20.         }  
  21.         #fejlec-hatter {  
  22.             margin: 0;  
  23.             background: #c00;  
  24.             width: 100%;  
  25.             height: 50%;  
  26.         }  
  27.         #lablec-hatter {  
  28.             margin: 0;  
  29.             background: #00c;  
  30.             width: 100%;  
  31.             height: 50%;  
  32.         }  
  33.         #lablec-tartalom {  
  34.             position: absolute;  
  35.             bottom: 0;  
  36.         }  
  37.         p {  
  38.             margin: 0;  
  39.         }  
  40.     </style>  
  41. </head>  
  42.   
  43. <body>  
  44.     <div id="kozep">  
  45.         <p>Függőlegesen középre rendezett tartalom</p>  
  46.     </div>  
  47.     <div id="fejlec-hatter">  
  48.         <p>Fejléc</p>  
  49.     </div>  
  50.     <div id="lablec-hatter">  
  51.         <div id="lablec-tartalom">  
  52.             <p>Lábléc tartalom</p>  
  53.         </div>  
  54.     </div>  
  55. </body>  
  56. </html>  
A fejléc tartalma az oldal tetejére kerül, az ott viszonylag jó is. A lábléc tartalma viszont az oldal közepére kerülne, amit mi nem látunk. Viszont nem tudjuk, hogy hol ér véget a középső rész, ahova tennünk kellene a tartalmat, ezért egyetlen megoldásként lerakhatjuk a lap aljára. Ez nagyobb felbontásban hülyén tud kinézni.

Ezért kellene azt csinálni, hogy a fejlec-hatter és lablec-hatter divekbe nem raksz tartalmat, hanem azoknak a tartalmaknak is kitalálsz egy fix magasságot, és belerakod őket a középső részbe, de csak a tényleges középső tartalomnak adsz meg más hátteret, a fejléc és lábléc tartalomnál pedig átlátszik majd a két 50%-os doboz háttere. Ez már közelít a tökéleteshez, de ne hagyd figyelmen kívül, hogy a min-height tulajdonság problémás lehet IE alatt, így ha nem elég nagy a felhasználó felbontása, akkor nem fogja látni a fejlécet és a láblécet.
7

Re: Továbbfejlesztés

gabrieludon · 2009. Okt. 28. (Sze), 10.46
Ez a megoldás nagyon profi!
Köszönöm szépen! Az egy aprócska gond csak az, hogy a középső rész hátterének egy része átlátszó, így az alsó rész háttere átüt rajta. De ezt már kisakkozom valahogy!

Még egyszer köszönöm szépen a segítséget!
8

Re: Továbbfejlesztés2

gabrieludon · 2009. Okt. 28. (Sze), 11.15
Most lehet hogy nagy marhaságot kérdezek...de...
Lényegében nekem az alsó rész csak azért kell mert más hátteret akarok. A felső megoldás is jó lenne nekem... de lehet-e a DIV-eket egymáshoz képest pozicionálni?
Mert ha a középső rész alatt kezdődhetne közvetlenül az alsó (aminek egyébként csak más hátteret akarok adni) akkor máris megoldódott a dolog...

A második megoldás tökéletes lenne, ha a középső részben lévő hátteret nem kellene részlegesen átlátszóra csinálnom :(
9

Van rá megoldás

Udi · 2009. Okt. 28. (Sze), 16.44
Azt tudod megtenni, hogy a középre rendezett dobozba raksz még egy tartalom dobozt, ami akkora magasságú lesz, mint amit a középre rendezett doboznak szeretnél. Ezután a középre rendezett dobozba, a tartalom után elhelyezed a lábléc háttérnek való dobozt, és annak egy jó nagy magasságot megadsz (mondjuk 1000px), hogy mindig leérjen a lap aljára. Azt nem fogod tudni megmondani, hogy pontosan mekkorának kell lennie, hogy a lap aljára érjen, ezért kell túllógatni rajta. A túllógatás miatt meg fog jelenni egy görgető, ezért vagy a body-ra, vagy a középső doboz szülőjére kell egy overflow: hidden tulajdonság, hogy a kilógó dolgokat eltüntesse.
  1. <html>  
  2. <head>  
  3. <title>Teszt</title>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">  
  5.     <style type="text/css">  
  6.         body {  
  7.             overflow: hidden;  
  8.         }         
  9.   
  10.         #kozep {  
  11.             position: absolute;  
  12.             top: 50%;  
  13.             left: 0; /* IE miatt érdemes bent tartani */  
  14.             height: 500px;  
  15.             width: 100%;  
  16.             margin-top: -250px; /* fenti margó a magasság fele mínuszban */  
  17.             background: #ccc;  
  18.         }  
  19.         #tartalom {  
  20.             height: 500px; /* a középső rész magassága */  
  21.         }  
  22.           
  23.         #lablec-hatter {  
  24.             background: #c00;  
  25.             height: 1000px;  
  26.         }  
  27.         p {  
  28.             margin: 0;  
  29.         }  
  30.     </style>  
  31. </head>  
  32.   
  33. <body>  
  34.     <div id="kozep">  
  35.         <div id="tartalom">  
  36.         <p>Függőlegesen középre rendezett tartalom</p>  
  37.         </div>  
  38.   
  39.         <div id="lablec-hatter">  
  40.         </div>  
  41.     </div>  
  42. </body>  
  43. </html>  
Működik IE6 alatt is, szóval alkalmazható megoldás, csak át kell gondolni, hogy mennyire hasznos. Az "overflow: hidden" miatt akkor sem fog tudni görgetni a felhasználó, ha maga a középső rész nem látszik teljesen. Eredetileg 624 pixel magas középső tartalmat szerettél, ügyelj arra, hogy nagyon elterjedtek a 16:10 és 16:9 arányú képernyők, amiknek a szélessége lehet, hogy megvan, de a magasságuk nem biztos, ráadásul a böngészők mindenféle toolbart és tab listát is vízszintes panelre rakodnak. Én most 1280x800-as felbontásban körülbelül 600 pixel magas dolgokat látok a böngésző ablakban.
10

Re: Van rá megoldás

gabrieludon · 2009. Okt. 29. (Cs), 14.53
Tökéletes! Köszönöm szépen a segítséget! :)