Rozciąganie DIV-ów z float

[doremido]

Jak sprawić, żeby DIV, który jest "floatowany" rozciągał się w zależności od jego zawartości.

Dodam, że ma zdefiniowaną wysokość tak:

min-height: 55px; height:auto !important; height: 55px;


Z góry dziękuję,
Daniel

[Tomek]

a możesz podać większy kontekst? np. linka do przykładowej strony gdzie masz ten problem? (coś mi się wydaje że gdzieś nie masz wyczyszczonego float... - ale to tylko podejrzenia)

[doremido]

Mniej wiecej wyglada to tak:

Kod: Zaznacz cały


<ul>

<li>
<a float-left><p>tekst</p></a>
</li>



[doremido]

Właściwie to problem tkwi gdzie indziej...

Otóż mam listę:

HTML

Kod: Zaznacz cały


<ul>

<li>
<a><p>tekst</p></a>
<li>

</ul>



STYLE

Kod: Zaznacz cały


li {
min-height: 55px;                                 height:auto !important;                                 height: 55px;
}


a:hover {color: pink; text-decoration: underline;}
p { width: 190px; padding: 0px; padding-left: 20px; color: black;}



Ma wyglądać to tak, że po najechaniu na link kolor tekstu sie nie zmienia, tylko nadawany jest underline w kolorze pink.

Nie działa wtedy, gdy dokument ma zdefiniowany DTD

Z DTD działa wtedy, gdy <a> ma float (float jest tylko po to, żeby był underline), ale wtedy sie nie rozciąga.

[Tomek]

a jest elementem linowym, natomiast p blokowym - także nie może być umieszczone w a - tu masz podstawowy błąd który przy DTD może powodować nie działanie tego podświetlania...(przeglądarka wchodzi w tryb standardów a nie zgadywania). Zmień p na span np. lub inny element liniowy - albo nadaj przez css dla a display:block

[doremido]

Block dla <a> załatwia sprawę

Dziękuję

[Tomek]

yhm - ale popraw ten numer z <a><p>

[doremido]

tzn, że mam zmienić <a><p> na <a><span>?

Niestety nie moge tego zrobić, gdyż p ma padding-left oraz tlo, wp rzypadku span nie da sie tego zrobic...

Chyba że widzisz jakieś inne roziwązanie?

[Tomek]

display:block? a zrezygnuj może z display block dla a
wykorzystaj też do stylowania li

[doremido]

<li> jest juz formatowane...

Chodzi o to, że mam bullety graficzne, więc zgodnie ze wskazówkami, żeby działało poprawnie pod każdą przeglądarką tak samo powinienem użyć stylów dla <li>, gdzie bullet będzie tłem. Problem w tym, że <li> ma tło wykonane przez grafika, a wygląda ono tak, że jest to gradient z dołu do góry czyli musi być spozycjonowane do dołu. Obrazek tworzący tło wyglądałby następująco: na górze po lewej bullet, na dole gradient. Wszystko dobrze, ale <li> sie rozciąga, wiec bullet przy pozycjonowaniu bottom, będzie zmieniać pozycje.

Wymyśliłem więc, że w <li> dam tło z samym gradientem, a bullet umieszcze jako tło <p> oraz dodam dlań styl padding-left: 20px;

Wynik jest taki, że mam w <li> gradient, który zawsze jest od dału. Bullet który zawsze jest na górze równo z tekstem.

Kod: Zaznacz cały


<li style="tlo-gradient">

<a:hover style="color-orange; display-block;"><p style="tlo-bulet; color-black">test</p></a>

</li>



Ostateczny wynik jest taki, że po najechaniu na test nadaje się underline o kolorze orange z zatrzymaniem koloru black dla tekstu.

Czy to jest złe rozwiązanie?

Czy masz lepszy pomysł?

[Tomek]

yhm.
a próbowałeś ze span zamiast z p? - Ostyluj je odpowiednio (właśnie za pomocą display:block) - uzyskasz ten sam efekt a przynajmniej kod będzie... zgrabny. Zresztą - jeśli dobrze rozumiem - można by w ogóle zrezygnować z tego p - w zamian dobrze ostylowując a - przecież jemu też możesz nadać kolor, tło, a osobny kolor dla :hover.
Twoje rozwiązanie jest złe tylko z powodu umieszczania el. blokowych w el. liniowych. Nie jest to wielkie "wykroczenie" - ale może powodować niezamierzone efekty...

[Mateusz SSJ8]

Masz rację, tomasiek. Tym bardziej, że
<p>tekst</p>
to jest tekst w akapicie. Kod:
<span>tekst</span>
Oznacza fragment tekstu, który stylem różni od stylu całego tekstu w określonym fragmencie.
Gdy jeszcze nie miałem internetu, używałem wtedy Worda (i oczywiście nie tylko) do tworzenia dokumentów HTML (skoro stroną internetową nie można tego nazwać). Nie tworzyłem żadnych klas, więc kiedy przeglądałem te dokumenty Notatnikiem, widziałem kod:
<p class="to_i_to"><span style="font-size:to_i_to;font-family:to_i_to;color:to_i_to">tekst</span></p>

To tyle z informacji. Od siebie mogę dodać jeszcze tyle, że strony internetowe wywodzą się z dokumentów HTML, o czym chyba nie tylko ja dziś wiem.

[Tomek]

@Mateusz SSJ8
1. nie musisz wszystkiego potwierdzać - twój post niczego nowego nie wniósł do tej dyskusji.
2. Miałeś nie robić wycieczek poza tematy związane z danym wątkiem. (chodzi o dopisek o wywodzeniu się dok. html. Następny taki, będzie skasowany)
3. Po raz kolejny cię proszę - zacznij się stosować do zasad panujących na forum - będzie nam wszystkim naprawdę przyjemniej.

@doremido - możesz gdzieś pokazać źródło strony (najlepiej linka) - wtedy by szybciej dało się udzielić konkretnej odpowiedzi, a może nawet pomóc w ostylowaniu tego bez p - wszak po co jest webdeveloper?

[doremido]

Witaj

Problem już rozwiązaliśmy. Dziękuję.

Rozumiem, że najbardziej razi Cię, że element blokowy <p> jest w elemencie liniowym <a>.

No ale gdy nadałem <a> display: block, to w tym momencie przestał być liniowym (dispaly: inline), więc nie rozumiem dlaczego uważasz, że nadal jest źle.

[Tomek]

CSS to nie html i HTML może... mącić.

[doremido]

Heh, w sumie racja.

Lecz to nie jest dla mnie teraz zmartwieniem, właściwie powinienem już dawno dać sobie spokój z "idealną" poprawnością dokumentu, ponieważ strona będzie edytowana WYSWYGiem.

[Tomek]

no i po stronie - jak znam życie - połówka znaczników nie będzie podomykana... co przy float skutkuje raczej tragicznym efektem...
A nie lepiej dobry cms + tinymce skonfigurowany żeby wyrzucał xhtml (da się nawet strict)?

[doremido]

Używam niezłego edytora (domyka wszystko), tylko że nie jest zgodny z XHTML - np wstawia font-color etc.

W każdym razie pojawił się inny problem...

Co jakiś czas się z nim stykam i jeszcze sobie nie poradziłem.

Otóż mam dwa divy z float left (obok siebie) lewy ma border-left 1px, reszta 0. Nie wiem jak zrobić, żeby oba zawsze miały tę samą wysokość :/ Jeśli prawy jest niższy od lewego, to border kończy się np w połowie.

Z table nie ma problemu, ale jak to zrobić z divami?

[TroPtyN]

Rozumiem, że pragniesz sprawić, że oba div-y będą miały taką samą wysokość, bez względu na ich zawartość? Jeśli tak, to wystarczy zastosować display: z wartościami table i table-cell zamiast float. Niestety nIEdorozwinięte przeglądarki są zbyt przygłupie na coś takiego, przez co trzeba się "troszkę" napocić. Tutaj jest szerzej napisane o rozwiązaniu problemu.

[Tomek]

@doremido - a możesz podać adres tej strony? Będzie nam łatwiej wychwycić ewentualne błędy i wprowadzać poprawki na konkretnej stronie. Na razie to wiemy o co ci chodzi - ale nie możemy pomóc w konkretnym przypadku.