ugrás a tartalomhoz

Div probléma

Apofiszh · 2009. Nov. 9. (H), 22.21
Sziasztok!

Nagyon belebonyolódtam egy div problémába, amit nem tudok ,hogy oldjak meg. Körbe írni nem tudom, ezért inkább megmutatom a kódot,
  1. <style type="text/css">  
  2. .div_nagy{  
  3.     float: right;  
  4.     display: inline;  
  5.     width: 470px;  
  6.     background-color: red;  
  7. }  
  8. .valtozo_width{  
  9.     float: right;  
  10.     display: inline;  
  11.     width: auto;  
  12. }  
  13. .sor1{  
  14.     float: left;  
  15.     display: inline;  
  16.     width: 100%;  
  17.     text-align: left;  
  18.     background-color: yellow;  
  19. }  
  20. .sor2{  
  21.     display: inline;  
  22.     float: right;  
  23.     background-color: green;  
  24. }  
  25. .sor2a{  
  26.     float: right;  
  27.     display: inline;  
  28.     background-color: silver;      
  29. }  
  30. .sor2b{  
  31.     width: 100%;  
  32.     float: left;  
  33.     display: inline;  
  34.     background-color: aqua;  
  35. }  
  36. .sor2b_balra{  
  37.     float: left;  
  38.     display: inline;  
  39. }  
  40. .sor2b_jobbra{  
  41.     float: right;  
  42.     display: inline;  
  43. }  
  44. </style>  
  45. <div class="div_nagy">  
  46.     <div class="valtozo_width">  
  47.         <div class="sor1">sor1 sor1 sor1 sor1</div>  
  48.         <div class="sor2">  
  49.             <div class="sor2a">sor2a sor2a sor2a sor2a sor2a sor2a sor2a sor2a sor2a </div>  
  50.             <div class="sor2b">  
  51.                 <div class="sor2b_balra">  
  52.                     helló!!  
  53.                 </div>  
  54.                 <div class="sor2b_jobbra">  
  55.                     én jobbra  
  56.                 </div>  
  57.             </div>  
  58.         </div>  
  59.           
  60.     </div>  
  61. </div>  
.


Azt szeretném elérni,hogy a .sor2a szélessége határozza meg a többi div szélességét, .sor1 szövegét balra szeretném igazítani a .sor2a elejéhez, .sor2b_balra a .sor2a szöveg bal széléhez szeretném igazítani és a .sor2b_jobra szöveget meg a .sor2a végéhez.


------------------------------------------------------------------
|...............|sor1...........................................|
|...............--------------------------------------------------
|...............|sor2a sor2a sor2a sor2a sor2a sor2a|
|...............--------------------------------------------------
|...............|sor2b_balra................sor2b_jobbra|
|-----------------------------------------------------------------

valahogy így :)
Ha valaki tudja miért nem azt akarja a css amit én az legyen szíves megírni, előre is köszönöm szépen a segítséget.

Üdv, A
‹ Érthetetlen függőleges köz Flash object elem után Javascript menü képekkel ›
 ■
1

miért div?

ironwill · 2009. Nov. 9. (H), 23.28
Szia!

Alapvető kérdés: miért akarod div-el megoldani?
Első ránézésre ez egy táblázat.
  1. <table style="width: 100%">  
  2.   <tr>  
  3.     <td>&nbsp;</td>  
  4.     <td colspan="2">sor1</td>  
  5.   </tr>  
  6.   <tr>  
  7.     <td>&nbsp;</td>  
  8.     <td colspan="2">sor2a</td>  
  9.   </tr>  
  10.   <tr>  
  11.     <td>&nbsp;</td>  
  12.     <td style="text-align: left">sor2b_balra</td>  
  13.     <td style="text-align: right">sor2b_jobbra</td>  
  14.   </tr>  
  15. </table>  
(Olykor az emberek túlzásba viszik a TABLELESS fogalmát, ha már létezik, használjuk.)

De lehet, hogy nem ennyire egyszerű tartalmat akarsz beletenni és vázként szeretnéd használni, akkor tényleg érdemesebb div-ekből felépíteni, de táblázattal sokkal könnyebb olyanná varázsolni, ahogy alképzelted.

Az inline-t miért teszed bele? Amikor float-olsz, akkor amúgy is egymás mellé kerülnek az elemek. Vagy, akkor miért teszed bele a float-ot?

Nálam valahogy így nézne ki a kód:
  1. <div style="float: right">  
  2.   <div>sor1</div>  
  3.   <div>sor2a</div>  
  4.   <div>  
  5.     <div style="float: left">sor2b_balra</div>  
  6.     <div style="float: right">sor2b_jobbra</div>  
  7.     <div style="clear: both"></div>  
  8.   </div>  
  9. </div>  
  10. <div style="clear: both"></div>  
(A width: auto explorer alatt működik, Firefox alatt nem.)

Sok sikert, remélem tudtam segíteni!

üdv, Gábor
2

inline

Apofiszh · 2009. Nov. 10. (K), 11.34
szia!

Pont ilyen div elrendezés kell nekem, köszönöm szépen!

Az inline és a clear mit csinál pontosan? Azt olvastam egy fórumon,hogy az inline azért kell,h ie és ff ben ugyan akkora legyen a szélessége a diveknek, ez igaz?
3

inline

ironwill · 2009. Nov. 10. (K), 20.17
Szia!

Szívesen.
Bocsánat, csak napközben dolgozom.. :)
A clear-re azért van szükség, mert a float-olt elemek maguk után "ragasztják" a következő elemeket, ezért kell, hogy egy clear-el "letisztítsuk".

3 állapota van: left, right, both (értelemszerűen balról, jobbról, mindkét oldalról)

Az inline-t nem használtam túl sokszor, ezért erről nem tudok nyilatkozni. Én akkor használtam, amikor block típusú elemeket egy sorba akartam rendezni, float-olás nélkül. pl. lista elemek: ul, ol, li

üdv, Gábor
4

clear

Apofiszh · 2009. Nov. 12. (Cs), 01.32
ha jól értem akkor a clear akkor kell ha már nem szeretném ,hogy összeragadjanak? :)