ugrás a tartalomhoz

Doboz igazítása alulra CSS-sel

Anonymous · 2005. Júl. 27. (Sze), 13.19
Sziasztok!

A következö lenne a problémám. Van egy dizájn, aminek így kellene kinéznie
+------------------------+
|header                  |
+------+--------+--------+
|szöveg|szöveg  |szöveg  |
|      |        |        |
|      |        |        |
|      |        | +----+ |
|      |        | | box| |
|      |        | +----+ |
+------+--------+--------+
|footer                  |
+------------------------+


Namost, ha a boxot position:absolute-al oda rakom, ahol lennie kell, akkor az szép és jó, de ha a jobb oldali szöveg egy bizonyos méretet meghalad (történetesen a bal és középsö blokk méretét) akkor a box "alá" fog belógni. A box mérete nem fix, ugyanúgy, ahogy akármelyik szöveg mérete is változhat.

Hogy lehetne ezt CSS-sel (táblázatok nélkül megoldani?)

Köszi

ProClub
proclub##kukac##karinthy.hu
‹ Rövid webcímek használata (mint a Weblaboron) IE nyomtatási fejléc/lábléc átállítása ›
 ■
1

Ne pozícionáld

Tome · 2005. Júl. 27. (Sze), 13.35
A "box"-ot ne pozícionáld, rakd a jobb oldali div-be, a tartalom után. Így bármekkora is tartalom mindig alatta lesz a doboz, mivel magában a HTML-ben is utána következik.
Remélem segítettem.
2

Nem egészen erre

Anonymous · 2005. Júl. 27. (Sze), 13.39
Nem egészen erre gondoltam, mert akkor ugye, így fog kinézni:
+------------------------+
|header                  |
+------+--------+--------+
|szöveg|szöveg  |szöveg  |
|      |        | +----+ |
|      |        | | box| |
|      |        | +----+ |
|      |        |        |
|      |        |        |
+------+--------+--------+
|footer                  |
+------------------------+


És így kellene:

+------------------------+
|header                  |
+------+--------+--------+
|szöveg|szöveg  |szöveg  |
|      |        |        |
|      |        |        |
|      |        | +----+ |
|      |        | | box| |
|      |        | +----+ |
+------+--------+--------+
|footer                  |
+------------------------+


Remélem, észrevetted az apró, ámde jelentös különbséget... :)

Sajnos, ebben nem veszekedhetek a fönökömmel. Ö a dizájner. :J

Köszi

ProClub
proclub##kukac##karinthy.hu
3

min-height

kgyt · 2005. Júl. 27. (Sze), 13.45
A fölötte levő szöveg minimális magasságát a min-height tulajdonsággal be lehet állítani, ekkor nem fog felcsúszni a box üres jobb oldali sáv esetén sem. Ha a szöveg túl sok, akkor meg lejjebb csúszik...

<style type="text/css">
  #boxfelettitext {
    min-height: 250px;
  }
</style>
<!--[if ie]>
  <style type="text/css">
    #boxfelettitext {
      height: 250px;
    }
  </style>
<![endif]-->
--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
4

:]

Anonymous · 2005. Júl. 27. (Sze), 13.55
Az a baj, hogy akkor meg elöállhat ez az eset:

+------------------------+
|header                  |
+------+--------+--------+
|szöveg|szöveg  |szöveg  |
|      |szöveg  |        |
|      |szöveg  |        |
|      |szöveg  | +----+ |
|      |szöveg  | | box| |
|      |szöveg  | +----+ |
|      |szöveg  |        |
|      |szöveg  |        |
+------+--------+--------+
|footer                  |
+------------------------+


ami úgyszintén nem megfelelö. Egyáltalán nem tudom, melyik részben mennyi szöveg lesz. Ez a baj vele.

ProClub
proclub##kukac##karinthy.hu
10

fix magasság

kgyt · 2005. Júl. 27. (Sze), 18.56
Akkor legyen a box magassága fix, és a benne levő szöveg overflow: auto...
+ az elötte levő szöveg is overflow: auto tulajdonságú.

--
Szeretettel: Károly György Tamás
kgyt(a)kgyt.hu - http://kgyt.hu
5

hova kell kerülnie?

Jano · 2005. Júl. 27. (Sze), 13.57
Pontosan mi is a megkötés akkor erre a dobozra? A teteje van bizonyos magasagban vagy bizonyos tavolsagra a felette levo szovegtol, vagy az alja kell, hogy lent legyen? Van valami mas elem amihez tartozik?
6

Megkötés

Anonymous · 2005. Júl. 27. (Sze), 14.08
A megkötés a boxra az lenne, hogy ennek a CSS tulajdonságnak megfelelöen legyen elhelyezve:

position:absolute;
bottom:48px;
right:6px;
width:200px;


És ne menjen alá a jobb oldali szöveg. Mert position:absolute;-nál, ugye, elöfordulhat.

Ha fix lenne a doboz mérete, akkor így oldanám meg: (szöveg3 a jobb oldali szöveg)

#box
{
 position:absolute;
 bottom:48px;
 right:6px;
 width:200px;
 height:300px;
}

#szoveg3
{
 float:right;
 width:200px;
 /* ... */
 margin-bottom:300px;
}


Csak mivel nem fix a doboz mérete, ezért ez így nem megoldható. JavaScript-el könnyü lenne, csak azt meg nem szeretném/szeretné a fönököm.

Köszi

ProClub
proclub##kukac##karinthy.hu
7

Nem marad más csak táblázat

Jano · 2005. Júl. 27. (Sze), 16.49
Ha ennyire fontos, hogy az a doboz ott legyen, akkor valószinuelg akkor jársz ebben az esetben a legjobban ha most táblázatot választasz tartóként. 3 oszlop melyből az utolsó 2 cellára bomlik és az alsóban lefelé igazítasz.

Szerintem ez még mindig jobb mint javascripttel számolgatni és utólag rendezgetni. Egy darab táblázat nem okoz nagy gondot elérhetőségi szempontból.
Persze útban lehet ha alternatív kinézet vagy ilyenek kellenek, de CSS-sel ez nem nagyon megoldható.
9

footerstick?

Hodicska Gergely · 2005. Júl. 27. (Sze), 18.43
Amit a footerstick használ ki, azt itt nem lehet?


Felhő
11

Explicit magasság

Jano · 2005. Júl. 28. (Cs), 15.36
Nem tudom pontosan mire gondoslz, de szerintem ott is fixen megadott magassággal megy csak a dolog.
8

display: table

attlad · 2005. Júl. 27. (Sze), 16.59
Bár ez nem megoldás abból a szempontból, hogy ha jól tudom Explorer nem kezeli ezt se, de böngészőkben: Firefox, Konqueror és Opera 8 a következő kód valami olyasmit csinál amit leírtál:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>display: table</title>
<div style="border: solid; display: table; height: 300px; width: 200px;">
    <div style="display: table-row; background: red;">
        tartalom<br>
        tartalom<br>
    </div>
    <div style="display: table-row; background: yellow; height: 1%;">
        box<br>
    </div>
</div>
IE-ben meg van CSS expression, de az is JavaScript.

Attila