Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]float left dla obrazka
szczemp
post 8.07.2012, 23:02:18
Post #1





Grupa: Zarejestrowani
Postów: 149
Pomógł: 9
Dołączył: 9.12.2010

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
markonix
post 8.07.2012, 23:11:29
Post #2





Grupa: Zarejestrowani
Postów: 2 707
Pomógł: 290
Dołączył: 16.12.2008
Skąd: Śląsk

Ostrzeżenie: (0%)
-----


Daj jakiś element z clear:both pod koniec akapitu.


--------------------
Go to the top of the page
+Quote Post
krzywy36
post 9.07.2012, 00:46:04
Post #3





Grupa: Zarejestrowani
Postów: 370
Pomógł: 43
Dołączył: 1.12.2007
Skąd: Kędzierzyn Koźle

Ostrzeżenie: (0%)
-----


lepiej overflow: hidden dla otaczajacego diva.


--------------------
pretty as a shit.
Go to the top of the page
+Quote Post
lukesh
post 9.07.2012, 01:16:49
Post #4





Grupa: Zarejestrowani
Postów: 113
Pomógł: 14
Dołączył: 25.08.2006

Ostrzeżenie: (0%)
-----


  1. .wpis {
  2. overflow: auto;
  3. }


--------------------
Edumemo.pl - Nauka Języków Obcych
Go to the top of the page
+Quote Post
szczemp
post 9.07.2012, 06:59:47
Post #5





Grupa: Zarejestrowani
Postów: 149
Pomógł: 9
Dołączył: 9.12.2010

Ostrzeżenie: (0%)
-----


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


Ten post edytował szczemp 9.07.2012, 07:07:50
Go to the top of the page
+Quote Post
piotrex41
post 9.07.2012, 11:08:52
Post #6





Grupa: Zarejestrowani
Postów: 168
Pomógł: 26
Dołączył: 15.09.2011
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


Testowane:
  1. .box a {
  2. float:left;
  3. clear:both;
  4. }


--------------------
www.piotrex41.pl - piotrex41 portfolio
d(-.-)b - Music is my life || PHP is my passion
Go to the top of the page
+Quote Post
szczemp
post 9.07.2012, 14:37:12
Post #7





Grupa: Zarejestrowani
Postów: 149
Pomógł: 9
Dołączył: 9.12.2010

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 1.05.2025 - 04:42