Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Obrazkolinki pozycjonowanie
#1
Witam,
mam problem z wstawieniem obrazkow linkow. Rysunek przedstawia co bym chcial zrobic:
http://img295.imageshack.us/img295/8916/obrazei.jpg
(1, 2 i 3 to trzy rozne obrazki)
W HTMLu raczej tego nie zrobie bo wychodzi:
http://img231.imageshack.us/img231/5622/obraze1.jpg

Probowalem w css ale tam znalazlem tylko opcje background image i nie potrafilem wstawic wiecej niz jednego.

Jesli obrazki nie tlumacza tego co chce zrobic to chodzi mi o cos typu:
kilka obrazkow obok siebie tworzace jeden duzy obrazek, a kazda inna czesc obrazku to osobny link.

Prosze o pomoc, najlepiej kawalek kodu albo link do tutorialu pokazujacy taki przypadek
Odpowiedz
#2
Kod:
<div style="float: left; width: 50px; height: 100px;">
    <img src="obrazek-1.png" alt="" style="width: 50px; height: 100px;"/>
</div>
<div style="float: left; width: 50px; height: 100px;">
    <img src="obrazek-2.png" alt="" style="width: 50px; height: 50px" />
    <img src="obrazek-3.png" alt="" style="width: 50px; height: 50px" />
</div>
<div style="clear: both"></div>
Odpowiedz
#3
O... szybka odpowiedz, dzieki.
Jak bym chcial sie jeszcze dowiedziec jak rozumiec ten caly kod to poczytac o divach w jakis poradnikach html?
Odpowiedz
#4
(03-08-2010, 19:57)fafor napisał(a): Jak bym chcial sie jeszcze dowiedziec jak rozumiec ten caly kod to poczytac o divach w jakis poradnikach html?

Czytanie zawsze pomaga :) Ale najważniejszą rzeczą jaką musisz zrozumieć o divach to jest to: div obrazuje fragment strony o kształcie prostokąta, przy czym każdy prostokąt może mieć dowolną liczbę wewnętrznych prostokątów. Tak naprawdę to układ divów narzuca się sam po rzucie okiem na szkic strony (w tym wypadku na Twój pierwszy obrazek). Na szkicu widać - potrzebne są dwa prostokąty o takich samych wymiarach (lewy i prawy), gdzie ten drugi ma się dzielić na dwa kolejne prostokąty ułożone jeden pod drugim. Reszta to sztuczki (float: left, clear: both), ale meritum pozostaje takie samo.

Myśl o swoich projektach jak o zestawie powiązanych ze sobą prostokątów - będzie Ci znacznie łatwiej zaprogramować układ HTML.
Odpowiedz
#5
jeszcze jedno male pytanie, nie potrafie tego obrazka przemiescic, gdzie w ktorym miejscu mam wpisac jakies wartosci by go wysrodkowac w pionie i poziomie?
Odpowiedz
#6
(03-08-2010, 20:05)fafor napisał(a): jeszcze jedno male pytanie, nie potrafie tego obrazka przemiescic, gdzie w ktorym miejscu mam wpisac jakies wartosci by go wysrodkowac w pionie i poziomie?

Względem czego - względem całej strony? :)
Odpowiedz
#7
Tak, probowalem <center> i align ale nic nie dzialalo.
Odpowiedz
#8
(03-08-2010, 20:11)fafor napisał(a): Tak, probowalem <center> i align ale nic nie dzialalo.

No to kolejne prostokąciki:
Kod:
<div style="position: absolute; left: 50%; top: 50%">
    <div style="position: relative; left: -50px; top: -50px">
        <div style="float: left; width: 50px; height: 100px;">
            <img src="obrazek-1.png" alt="" style="width: 50px; height: 100px;"/>
        </div>
        <div style="float: left; width: 50px; height: 100px;">
            <img src="obrazek-2.png" alt="" style="width: 50px; height: 50px" />
            <img src="obrazek-3.png" alt="" style="width: 50px; height: 50px" />
        </div>
        <div style="clear: both"></div>
    </div>
</div>
UWAGA: wartości dla "left: -50px" i "top: -50px" zależą od wysokości i szerokości pozycjonowanego prostokąta i wynoszą, odpowiednio: połowę szerokości i połowę wysokości.
Odpowiedz
#9
Dzikei wielkie!
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  [HTML/CSS] Pozycjonowanie obiektów na stronie lfc_90 1 2,516 09-06-2013, 15:27
Ostatni post: Kartofelek
  Pozycjonowanie loga taaniel 2 2,587 13-08-2012, 21:54
Ostatni post: dmowski1
  pozycjonowanie stozek419 2 3,129 28-07-2011, 23:02
Ostatni post: stozek419
  pozycjonowanie css stozek419 9 6,542 26-07-2011, 01:34
Ostatni post: michalszyd
  pozycjonowanie divów mikim160 2 3,524 26-12-2010, 17:36
Ostatni post: mikim160

Skocz do:


Użytkownicy przeglądający ten wątek: 2 gości
Sponsorzy i przyjaciele
SeoHost.pl