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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    #ikondiv {
      float: right;
      white-space: nowrap;
    }
    #ikondiv img {
      background: red;
      border: 1px solid grey;
    }
  </style>
</head>
<body>
	<div id="alapdiv">
    <div id="ikondiv">
      <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />
      <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />
      <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />
      <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />
      <img src="http://www.google.hu/images/nav_logo29.png" alt="" width="20" height="20" />
    </div>
      <p>Megpróbálom érthetően vázolni a problémát:</p>
      <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>
      <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>
      <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>
  </div>
</body>
</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.