[css] ułożenie divów Opcje

[axeld]

Mam problem, bo nie moge uzyskać takiego wyglądu:



Czarna ramka to div o okreslonej szrokości 500 px i nieokreslonej wysokosci (ma sie dopasowac).
Wewnątrz niego leca sobie divy o nieokreslonej szerokosci i wysokosci, ktore sa dokladnie wielkosci wpisanego do nich tekstu.
Nie umiem sobie poradzic zeby przelewaly mi sie jeden pod drugim.

pomozcie.
z gory dzieki!

adam

[ayeo]

Witaj!

Wstaw każdą linijkę jako <p> i będzie ok.

Pozdrawiam!

[Czadus]

A ja, aby uzyskać walidację, każdą linijkę wstawiłbym w element <span></span> a linijkę przełamałbym znakiem <br />.

I walidacja zostaje spełniona.

[ayeo]

Twierdzisz, że akapity nie przechodzą walidacji?

[Czadus]

Sorki, mój błąd, zwracam honor

[axeld]

Dzięki za odpowiedz. Wyniknal jednak inny problem.
Ten pierwszy div z ramka musi tez miec nieokreslona szerokosc. czyli tak:



a tu jest przyklad moich prob:
http://ultramaryna.pl/nowa_maryna/test.php

On mi to rozszerza na cala szerokosc strony (tego diva z ramka)...

[ayeo]

Witam!

Element blokowy zawsze na szerokość zajmuje całą dostępną przestrzeń.

Pozdrawiam!

[axeld]

Ale da sie zrobic tak, zeby dostosowywal sie do swojego contentu?

Moze powinienem jakos na tabelach zaczac to robic?

[ayeo]

Witam!

Na szerokość nie da się. Chyba, że element liniowy, ale nie ten z kolei nie może zawierać w sobie blokowych Zresztą to byłoby bezsensu! Jak sobie wyobrażasz stronę bez określania szerokości? Nie rozumiem co chcesz osiągnąć.

Pozdrawiam!

[axeld]

To ma byc menu rozwijane.
Po najechaniu na jeden z elementow menu poziomego pojawia sie takie podmenu o szerokosci najdluzszego napisu (linka).
Mogłbym to na tabeli zrobic, ale czy tabeli mozna zadac visibility:hidden albo position:relative? Chyba nie bo to tylko dla divow dziala...



Dodam jeszcze, ze jak dam float:left; do te male divy wygladaja dokładnie tak jak chcę, bo się skalują do contentu, ale jak są za małe to wskakuje jeden po drugim a nie pod spodem.

[tjaden]

zamknij tabele w div-ach i wszystko zrobisz

[mls]

HTML:

[HTML] pobierz, plaintext 
<div class="container"><div class="container-inner">
    <p>napis</p>
    <p>drugi napis</p>
    <p>a tu bardzo dlugi napis</p>
    <p>krotki</p>
    <p>koniec</p>
</div></div>
[HTML] pobierz, plaintext 

CSS:

Kod

div.container { overflow: hidden; }
div.container-inner { float: left; border: 1px solid #000; }
div.container-inner p { float: left; clear: left; background: #f00; margin: 0; padding: 0; }

Pisane z głowy, nie sprawdzone

Ten post edytował mls 21.02.2009, 21:30:01

[axeld]

Działa tak jak chciałem! Jesteś mistrzem!!!!
Dzięki wielkie!