ugrás a tartalomhoz

Listák középre

Burnee · 2011. Ápr. 16. (Szo), 15.32
Sziasztok!

Adott egy div, benne 3 listával:
  1. <div class="myDiv">  
  2.   <ul>  
  3.     <li>Hosszú hosszú hosszú szöveg</li>  
  4.     <li>rövid szöveg</li>  
  5.     <li>rövid szöveg</li>  
  6.   </ul>  
  7.   <ul>  
  8.     <li>rövid szöveg</li>  
  9.     <li>rövid szöveg</li>  
  10.     <li>rövid szöveg</li>  
  11.   </ul>  
  12.   <ul>  
  13.     <li>rövid szöveg</li>  
  14.     <li>rövid szöveg</li>  
  15.     <li>rövid szöveg</li>  
  16.   </ul>  
  17. </div>  
  1. .myDiv {  
  2.   height: 200px;  
  3.   /* width: dinamikus, de nem a listáktól függ */  
  4. }  
  5. .myDiv ul {  
  6.   float: left;  
  7.   /* width, height: a tartalomtól függ */  
  8. }  
Namármost az lenne a kérdésem tisztelettel, hogy hogyan kerülnek ezek a listák középre a myDiv-ben (jQuery nélkül)?
A float persze nem fontos, de a listáknak valahogy egymás mellé kell kerülniük.
‹ Menü kiakad "switch case" vs "this" ›
 ■
1

Mihez képest?

Poetro · 2011. Ápr. 16. (Szo), 18.19
Mihez képest kell középre kerülniük? Emennyiben nincsen a listáknak fix magassága, úgy nehéz függőlegesen középre rakni őket. Ugyanez igaz a szélességre is. Hogy került ide a jQuery? Sima JavaScript-tel meg lehet oldani, nem kell hozzá jQuery. CSS-sel, mint említettem, problémás, ugyanakkor display: table segítségével lehetséges.
2

Vízszintesen

Burnee · 2011. Ápr. 16. (Szo), 18.54
Vízszintesen, és én is féltem tőle, hogy problémás lesz.

A jQuery úgy került ide, hogy amúgy is be van töltve és azzal egyszerűbb:
- Adok a listáknak egy wrappert, aminek a szélessége az oldal betöltése után adott. Ezt megfogom és margin: 0 auto;

De gondoltam, nem nyúlok ehhez a megoldáshoz, amíg nem tudom biztosan, hogy nincs elegánsabb.
3

display: inline

szappantarto · 2011. Ápr. 16. (Szo), 20.31
Nekem még mindig nem teljesen világos, hogy mit akarsz "középre" de szerintem te arra gondolsz, hogy a három lista egymás mellé kerüljön. Ekkor:
.myDiv ul-hoz add hozzá ezt a tulajdonságot: display: inline;
4

A 3 lista egymás mellé

Burnee · 2011. Ápr. 17. (V), 02.15
A 3 lista egymás mellé kerüljön, és ők hárman együtt alkotva egy egészet, kerüljenek középre a myDiv-en belül (vízszintesen).

- Már írtam rá azóta scriptet, valamint felfedeztem egy jQuery plugin-t is.

De az elegáns megoldásokat még mindig szívesen fogadom.
5

.myDiv { margin:

szappantarto · 2011. Ápr. 17. (V), 08.46
  1. .myDiv {  
  2.     margin: auto;  
  3.     width: 800px;   
  4. //a width-et persze cserélheted, megkaphatja a szélességet öröklött tulajdonságként is,  
  5. // de kell hogy legyen szélességérték megadva, különben nem fog középre kerülni!  
  6.   
  7. }  
  8. .myDiv ul {  
  9.     display: inline;  
  10.     float: left;  
  11. }  
  12. .myDiv li {  
  13.     display: block;  
  14.     margin: 0px;  
  15. }  
6

ennyi lenne...

Burnee · 2011. Ápr. 17. (V), 11.05
Ennyi lenne, ha a myDiv szélességét meghatározhatnám, de sajnos említettem, hogy az dinamikus.
7

Centered float

ganyecz · 2011. Ápr. 17. (V), 13.55
Talán valami ilyesmire van szükséged:
  1. .myDivWrapper {  
  2.   float: right;  
  3.   position: relative;  
  4.   left: -50%;  
  5.   text-align: left;  
  6. }  
  7. .myDiv {  
  8.   position: relative;  
  9.   left: 50%;  
  10. }  
  11. .myDiv ul {  
  12.   float: left;  
  13. }  
  1. <div class="myDivWrapper">  
  2.   <div class="myDiv">  
  3.     <ul> ... </ul>  
  4.     <ul> ... </ul>  
  5.     <ul> ... </ul>  
  6.   </div>  
  7. </div>  
8

Like!

Burnee · 2011. Ápr. 18. (H), 00.28
Köszi Mester! Ilyesmire!