Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]float left dla obrazka
Forum PHP.pl > Forum > Przedszkole
szczemp
robię sobie taki mały szablon dla pewnej strony (nie mogę ingerować w kod html bo generuje go jakiś skrypt)
mam do ostylowania taki fragment
  1. <div class = "wpis">
  2. <h1>tytuł</h1>
  3. <span class = "data">2011-11-11 11:11</span>
  4. <img src = "icons/ikona.jpg" alt = "tytuł"/>
  5. <p>kawałek tekstu</p>
  6. </div>

i mam do tego taki css
  1. .wpis img {
  2. margin: 0px 15px 10px 0px;
  3. float: left;
  4. }
  5. .wpis p {
  6. font-size: 12px;
  7. line-height: 18px;
  8. text-align: justify;
  9. }

możliwości wygenerowania kodu html są trzy:
będzie obrazek i mało tekstu (pierwszy przykład)
będzie obrazek i dużo tekstu (drugi przykład)
nie będzie obrazka (trzeci przykład)

i jest problem z obrazkiem
ma on być po lewej stronie a tekst oblewać go po prawej
niby działa dobrze ale jeśli jest mało tekstu to wychodzi z diva
nie wychodzi z diva jeśli dam mu float: left, ale wtedy nie oblewa go tekst
divowi też nie mogę dać minimalnej wysokości 150px (wysokość obrazka), bo jak jest mało tekstu to kijowo wygląda taka dziura
markonix
Daj jakiś element z clear:both pod koniec akapitu.
krzywy36
lepiej overflow: hidden dla otaczajacego diva.
lukesh
  1. .wpis {
  2. overflow: auto;
  3. }
szczemp
Cytat(markonix @ 9.07.2012, 00:11:29 ) *
Daj jakiś element z clear:both pod koniec akapitu.

pisałem, że nie mogę ingerować w kod html bo jest generowany przez skrypt

Cytat(krzywy36 @ 9.07.2012, 01:46:04 ) *
lepiej overflow: hidden dla otaczajacego diva.

działa

Cytat(lukesh @ 9.07.2012, 02:16:49 ) *
  1. .wpis {
  2. overflow: auto;
  3. }

też działa

dzięki

jeszcze jedno pytanie
mam diva a w nim linki
  1. <div class = "box">
  2. <a href = "#">link</a>
  3. <a href = "#">link</a>
  4. <a href = "#">link</a>
  5. </div>


i chcę żeby każdy link był w nowej lini
też nie mogę nic dodać do htmla tylko cssem to muszę zrobić
można to jakoś zrobić inaczej niż display: block dla a?
chodzi o to że block ba długość na całego diva
i np
  1. a:hover {background: red}

zmienia tło na całym bloku a chciałbym tylko pod tekstem
piotrex41
Testowane:
  1. .box a {
  2. float:left;
  3. clear:both;
  4. }
szczemp
nie podałem całego kodu i to co podał piotrex41 nie działało do końca
były jeszcze inne divy wewnątrz i na zewnątrz boxa i trzeba było im trochę pomóc
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.