ugrás a tartalomhoz

Div-span igazítások - CSS

therest · 2011. Jan. 26. (Sze), 17.22
Megpróbálom érthetően vázolni a problémát:
Van x elem amit egymás alá kell kirakni a képernyőre. Ezeket divként jeleníteném meg, szélességük a user által állítható, de alapértelmezésben a képernyő teljes szélessége. Magasságuk alapértelmezésben 20px, de ha a divre kattint a user, akkor kinyílik, így láthatóvá téve a teljes tartalmat, újabb kattal be is tudja zárni. Ez overflow:hiddennel, és a height állításával van megoldva.

A tartalma egy ilyen divnek, szöveg (span) és ikonok (img). Az ikonoknak minden esetben meg kéne jelenniük az alap div jobb felső sarkában, és ehhez kéne igazodjon a span elem, illetve az alapdiv minden más tartalma Jelenleg az ikonok egy külön divben vannak az alapdiven belül, ez az ikondiv float:right-ra van állítva, pozíció ilyesmi nincs megadva.

A probléma az, hogy ha a spanban lévő szöveg túl hosszú, az ikonok divjét lentebb kényszeríti.

Azt kéne kitalálni, hogyan lehetne úgy formázni stíluslappal, hogy a span szövege törjön meg az ikonok divjénél. Mindezt, 500 oldal CSS nélkül, a lehető legtisztább módon.

Ötletek?
‹ Mootools, ajax ( joomla ) Paraméter átadás JavaScriptből COOKIE-ba ›
 ■
1

whitespace, float

Poetro · 2011. Jan. 26. (Sze), 18.13
  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title></title>  
  6.   <style type="text/css">  
  7.     #ikondiv {  
  8.       float: right;  
  9.       white-space: nowrap;  
  10.     }  
  11.     #ikondiv img {  
  12.       background: red;  
  13.       border: 1px solid grey;  
  14.     }  
  15.   </style>  
  16. </head>  
  17. <body>  
  18.     <div id="alapdiv">  
  19.     <div id="ikondiv">  
  20.       <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />  
  21.       <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />  
  22.       <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />  
  23.       <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />  
  24.       <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />  
  25.     </div>  
  26.       <p>Megpróbálom érthetően vázolni a problémát:</p>  
  27.       <p>Van x elem amit egymás alá kell kirakni a képernyőre. Ezeket divként jeleníteném meg, szélességük a user által állítható, de alapértelmezésben a képernyő teljes szélessége. Magasságuk alapértelmezésben 20px, de ha a divre kattint a user, akkor kinyílik, így láthatóvá téve a teljes tartalmat, újabb kattal be is tudja zárni. Ez overflow:hiddennel, és a height állításával van megoldva.</p>  
  28.       <p>A tartalma egy ilyen divnek, szöveg (span) és ikonok (img). Az ikonoknak minden esetben meg kéne jelenniük az alap div jobb felső sarkában, és ehhez kéne igazodjon a span elem, illetve az alapdiv minden más tartalma Jelenleg az ikonok egy külön divben vannak az alapdiven belül, ez az ikondiv float:right-ra van állítva, pozíció ilyesmi nincs megadva.</p>  
  29.       <p>A probléma az, hogy ha a spanban lévő szöveg túl hosszú, az ikonok divjét lentebb kényszeríti.</p>  
  30.   </div>  
  31. </body>  
  32. </html>  
2

a példa jó

therest · 2011. Jan. 26. (Sze), 18.50
Köszönöm, hogy szántál rá időt, és összehoztad a példát, elég jónak tűnik első blikkre. Megpróbálom átültetni a megoldásod. Mivel sok minden JS-el megy a rendszerben, lehet lesznek még gondok, akkor nem kizárt hogy kérdezek még.

Sikerült is. Kicsit furcsa számomra, hogy az ikonok div-je előbb helyezkedik el a HTML kódban mint a többi tartalom. Ha a szöveg után van, akkor nem is működik a dolog. Miért van ez így?
3

Float

Poetro · 2011. Jan. 28. (P), 13.12
Mert így működik a float. Ha később mozgatod balra, illetve jobbra, akkor lejjebb kerül maga a floatolt doboz.