Forum PHP.pl > [HTML/CSS] Obrazki z float wyjeżdżają poza warstwę

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML/CSS] Obrazki z float wyjeżdżają poza warstwę

l0ud

10.03.2008, 19:29:04

Witam, aktualnie 'migruję' z tabelek na warstwy i kolejno pojawiają się problemy z tym związane.

Oto kolejny z nich: gdy nadam akapitowi/obrazkowi float:left zostaje on jakby pozycjonowany bez względu na inne obiekty. Gdy umieszczę go w jakiejś warstwie, po prostu wyjeżdża poza nią, a nie rozciąga jak wg. mnie powinien robić.

Kod html:

[HTML] pobierz, plaintext 
<div class="contents">
<h1>Testowa podstrona</h1>
<div class="contents_row"><p style="float:left"><a href="javascript:display(29,800,600);"><img src="./photos/th29.jpg" alt="Lilie wodne.jpg" title="Lilie wodne.jpg" class="instant ishadow40" style="border-width:1px;" /></a></p>
 test test</div>
<div class="contents_row"><p style="text-align:right"><a href="#page_area" title="Do góry strony">:: Na górę ::</a></p>
</div>
</div>
[HTML] pobierz, plaintext

Wraz z CSS:

Kod

DIV.contents {
     border-width: 1px;
     border-style: solid;
     border-color: #B6830A;
     background-color: #FFFDF5;
}

H1 {
     background-color: #FFE58B;
     background-image: url('images/contents_h_background.jpg');
     margin: 0px;
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
     line-height: 26px;
     vertical-align: middle;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: normal;
     color: black;
     text-decoration: none;
}

DIV.contents_row {
     border-top-style: solid;
     border-top-color: #F8DA98;
     border-top-width: 1px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 4px;
     padding-bottom: 4px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: normal;
     color: black;
}

Dają taki piękny efekt:

Przy tabelkach tak się nie działo

Pewnie nie rozumiem do końca działania atrybutu float...

Proszę o odpowiedź i pozdrawiam

nitek

10.03.2008, 20:04:43

witam,

wydaje mi się, że odpowiedź jest tutaj: http://kurs.browsehappy.pl/CSS/Float, a dokładniej w tym fragmencie:

Cytat

Najważniejsze cechy obiektów z float:
* tekst i elementy z display:inline zawsze je opływają,
* są wyjęte z normalnego biegu dokumentu — nie muszą być na ekranie w takiej kolejności, w jakiej są w dokumencie oraz mogą wystawać poza dolną krawędź obiektu, w którym się znajdują,
* tworzą swój własny bieg dokumentu, przez co kilka elementów z float nigdy nie będzie się nakładało (w przeciwieństwie do pozycjonowania absolutnego), tylko ułożą się obok siebie.

a potem pomocne będzie dla Ciebie to:

Cytat

Ponieważ obiekty z float są wyjęte z normalnego biegu dokumentu, mogą rozciągać się nad kilkoma innymi — np. ilustracja może rozciągać się z boku kilku akapitów.
Aby uniknąć tego efektu należy jakiemuś elementowi za elementem z float nadać właściwość clear — powoduje ona ponowne „złączenie” float z biegiem dokumentu.

Ogólnie polecam lekture całego artykułu - jak dla mnie autor elegancko wszystko opisał.
pozdrawiam

l0ud

10.03.2008, 20:24:04

Niestety, ale atrybut clear:both w contents_row co prawda rozwiązuje sprawę tutaj, ale gdy w warstwie contents tylko jeden contents_row nie zadziała

Co zrobić w takim wypadku? Bo chyba dodatkowego elementu specjalnie po to nie będę umieszczał?

nitek

10.03.2008, 20:28:11

możesz spróbować w następnym elemencie po wykorzystaniu float dać

Kod

- taka mała, ale chyba powszechnie stosowana sztuczka

l0ud

10.03.2008, 20:31:15

Owszem, działa, ale jak pisałem powyżej - dodawanie nowego elementu mnie po prostu nie satysfakcjonuje

Przecież chyba nie po to są style, żeby to dodatkowo komplikować...?

dr_bonzo

10.03.2008, 20:35:26

Mozesz dodac styl do nastepnego elementu, lub uzyc-niedzialajacego-w-IE :after

l0ud

10.03.2008, 20:45:07

Cytat

Mozesz dodac styl do nastepnego elementu

Problem w tym, że następnego elementu w warstwie contents już nie ma :/

No nic, w tym wypadku po prostu zastosuję ten trick co podał nitek, ew. w trochę innej postaci. Całe szczęście, że warstwy contents z jednym contents_row mam tylko w PA...

Dzięki za pomoc

woj_tas

10.03.2008, 21:23:48

Dodaj

[HTML] pobierz, plaintext 
overflow:hidden;
[HTML] pobierz, plaintext

dla .contents_row

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.