Forum PHP.pl > [CSS] 2 proste zadania z obrazkami

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] 2 proste zadania z obrazkami

fleshgrinder

24.12.2008, 15:08:46

1. mam diva, a w nim trzy obrazki-linki o nieznanej, rozniej szerokosci [ ale sumarycznie na pewno mniejsze od szerokosci diva ] ustawione w poziomie. jakim stylem odsune obrazki wzgledem siebie i bocznych krawedzi na rowne odleglosci? text-align: center w divie przycisnal je tylko do srodka, nie bylo przerw miedzy nimi, a margin: 0 auto na same linki w ogole nie dziala, podobnie jak justify

2. mam diva, w nim obrazek nieznanej wielkosci i teskt, rowniez nienanej dlugosci. obrazek ulozony do lewej krawedzi diva, tekst ma sie ukladac po prawej stronie obrazka, ale nie przy prawej krawedzi diva, nie ma go tez oplywac. ustawilem obrazkowi i kontenerowi na tekst float: left i jesli tekst jest wysokosci obrazka to wszystko jest w porzadku, natomiast jesli jest wyzszy to spada na dol.

prosze o pomoc

Pilsener

24.12.2008, 15:39:45

[HTML] pobierz, plaintext 
<div>
<a href="http://" class="link1"><img /></a>
<a href="http://" class="link2"><img /></a>
<a href="http://" class="link3"><img /></a>
</div>
[HTML] pobierz, plaintext

- daj linkom float left, right a dla trzeciego display:block oraz poeksperymentuj z rozmiarami i marginesami, choć wątpię aby udało się ustawić tak, by działało we wszystkich przeglądarkach. Nawet jak ustawisz równo linki, to obrazki mając różne rozmiary będą burzyły ten układ

2. Niewiele z tego rozumiem, dałbyś jakiś kod

Cytat

ustawilem obrazkowi i kontenerowi na tekst float: left

- a po także dla tekstu? I może to Ci pomoże:
http://kurs.browsehappy.pl/CSS/Float

fleshgrinder

24.12.2008, 16:12:07

ok, oto kod drugiego i wyniki:

Kod

<div class="bigColumn">
       <h2><img src="/hi5Serw/img/partners.png" class="bordered" alt="" ></h2>
               <div class="text">
                   <img src="/hi5Serw/img/partners/rednet_4.png" class="bordered2 left" alt="" >
                   <div class="left">
                       <h3>redNet Property Group</h3>
                       <p>krotki tekst</p>
                   </div>
               </div>
   </div>


   div.bigColumn {
       margin-left: 0px;
       width: 600px;
       float: left;
       font-size: 70%;
   }

   div.text {
       padding-bottom: 13px;
       border: 1px dashed #bcbdc0;
       border-width: 0 0 1px 0;
       overflow: hidden;
       margin-bottom: 13px;

   }

   div.text p {
     padding: 0 12px;
     margin: 0;
   }


   img.bordered2 {
       border: 1px solid #cccbc9;
   }

   img.left, div.left {
       float: left;
   }

po wstawieniu krotkiego tekstu jest tak jak byc powinno:

po wstawieniu dlugiego tekstu wszystko spada w dol:

decha-design

24.12.2008, 17:03:09

tekst weź w kolejnego diva (chyba, że już masz ... nie czytałem kodu

) i nadaj mu określoną szerokośc w pixelach ... (po prostu oblicz sobie ile powinien mieć ... chyba, że obrazki się bedą zmieniać to wtedy jest problem)

Astarot

25.12.2008, 01:14:43

Rowniez kodu nie analizowalem ale wychodzac na przeciw Twoim oczekiwaniom podpowiem:

ad1:) nigdy nie uzywaj wartosci %owych - jest to opcja zla i nie poprawna, a fuj!

ad2) Margin badz padding rozwiarza Twoj problem wzlgem rownej odleglosci elementow miedzy soba

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.