[html][css]Layout div - trzy elementy graficzne w jednej kolumnie Opcje

[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ć?

Powód edycji: dodaje tag (cysiaczek)

[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 sprecyzuj

[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.

Ten post edytował Kreton 22.08.2007, 22:14:22

[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;
}

Ten post edytował boomer 23.08.2007, 08:10:03