Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [html][css]Layout div - trzy elementy graficzne w jednej kolumnie
Forum PHP.pl > Forum > Przedszkole
boomer
Witam wszystkich forumowiczów.
Chciałbym zrobić layout strony, gdzie konkretnie w menu (lewa kolumna) umieszczone byłyby 3 elementy graficzne w tle.
Pierwszy element graficzny (górny fragment obrazu).
Drugi element graficzny (powtarzający się fragment obrazu w zależności od zmieniającej się wysokości tekstu na stronie).
Trzeci element graficzny (dolny fragment obrazu).Nad całością mają znajdować się linki menu.
Ma ktoś jakąś propozycję, jak to zrealizować?
phpion
http://forum.php.pl/index.php?showtopic=75654
Może podaj co do tej pory zrobiłeś bo problem raczej nie wydaje się trudny...
boomer
Probowałem zrobić coś takiego, że mam w lewej kolumnie trzy divy:

Kod
<div id="left1">

</div>
<div id="left2">

</div>
<div id="left3">

</div>


W każdym z nich chcę umieścić inny background-image, ale nie wiem jak się zabrać za to, aby w warstwie nadrzędnej w stosunku do tych left 1,2,3 były hiperłącza.
FliSs_tCv
tzn jak hiperlocza questionmark.gif sprecyzuj smile.gif
boomer
Chcę mieć menu zrobione ze zwykłych hiperłączy <a href .......>Menu item 1</a> itd.
Pod menu ma być grafika, która składa się z trzech elementów.
1 i 3 o stałej wysokości i szerokości.
Element 2 - środkowych będzie zmieniał się w zależności od zawartości środkowej kolumny (właściwej zawartości strony).
Kreton
Podpowiem.

Biorąc pod uwagę strukture:
Kod
<div id="menu">
   <h3>Kategoria</h3>
   <ul>
      <li>Link czy cuś</li>
   </ul>
</div>

Dla div ustawiasz background na sam dół bez powtarzania, dla h3 ustawiasz background zeby zaczynal sie od samej góry bez powtarzania, dla ul dajesz background z powtarzaniem w pionie. Koniec.
boomer
Dzięki za podpowiedź, ale nie za bardzo to działa.

Tylko fragment tła dla h3 jest wyświetlany. (jak zmieniłem na określoną wysokość h3, to wtedy ul schodzi niżej - efekt nieporządany).
Dodatkowo h3 odstaje od baneru u góry. No i jeszcze jak zrobić, żeby obrazek w div zawsze był na dole w zależności od środkowej kolumny layoutu. (warstwa div się nie rozszerza, jeżeli kolumna content zwiększa swoją zawartość.) Wspomnę tylko, że wszystkie te 3 warstwy są umieszczone w kontenerze.


Kod
<div id="menu">
<h3>Kategoria</h3>
   <ul>
      <li>Link czy cuś</li>
   </ul>
</div>



Kod
#menu {
background-image:url(sites/images/left2.jpg);
background-repeat: no-repeat;
vertical-align: bottom;
float : left;
width : 170px;
}
#menu h3{
background-image:url(sites/images/left1.jpg);
background-repeat: no-repeat;
vertical-align: top;
}
#menu ul{
background-image:url(sites/images/left_back.jpg);
background-repeat: repeat-y;
}
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.