Forum PHP.pl > [html][css]Pozioma lista grafiki z paskiem przesuwania

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [html][css]Pozioma lista grafiki z paskiem przesuwania

b_chmura

4.09.2009, 14:35:12

Witam

W zamiarach kod powinien tworzyć poziomą listę miniatur jednak jak widzicie linia miniatur załamuj się i leci w dół.
Jeśli odkomentuję width: 9000px; efekt jest pożądany jednak ja potrzebuję opcji bez podawania szerokości na sztywno (po prostu jest ona zmienna) wiecie jak temu zaradzić? próbowałem z width: auto; ale nie poskutkowało.

[HTML] pobierz, plaintext 
<html>
  <head>
    <title></title>
  </head>
  <style>
  div.value    { background: yellow; height: 255px; width: 90%; overflow: auto; border: solid 0px #BFBFBF; border-top-width: 1px;}
  div.worklist { background: red; position: relative; height: 235px; !important width: auto;}
  div.artwork  { background: blue; width: 520px; height: 215px; border: solid 1px #BFBFBF; margin: 10px; float: left;}
  </style>
  <body>
  <strong>Przyklad jak to wyglada:</strong>
    <div class="value">
      <div class="worklist">
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <br style="clear: both;" />
      </div>
    </div>
    <br /><br />
   <strong>A jak powinno wygladać (tyle, ze bez stałej szerokosci diva czerwonego "worklist"):</strong>
    <div class="value">
      <div class="worklist" style="width: 9000px;">
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <div class="artwork"></div>
        <br style="clear: both;" />
      </div>
    </div>
  </body>
</html>
[HTML] pobierz, plaintext

EDIT:
Zaktualizowałem kod. Przykład on-line niżej.

thek

4.09.2009, 14:46:35

Jesli miniaturki mają względnie stałą szerokość to nadaj elementowi blokowemu je zawierającemu stała szerokość, float:left i na koniec wszystkich miniaturek, ale wewnątrz bloku rodzica, dodaj element blokowy z clear:both. W efekcie ilość miniaturek dopasuje się do szerokości rodzica. Ważne byś nie zapomniał dodać tego elementu z clear na końcu bo Ci się layout rozjedzie.
Czyli coś takiego:

[HTML] pobierz, plaintext 
<div id="rodzic">
    <div class="kontener_miniaturki"></div>
    <div class="kontener_miniaturki"></div>
    <div class="kontener_miniaturki"></div>
    <div class="kontener_miniaturki"></div>
    <div class="kontener_miniaturki"></div>
    <span class="clear"></span>
</div>
[HTML] pobierz, plaintext

Gdzie style to:

Kod

div.kontener_miniaturki {
width: jakaś szerokość;
float:feft;
}

span.clear {
display:block;
clear:both;
}

EDIT: Jako że miniatury mają z reguły także w miarę stały zakres wysokości i szerokości (skalowanie obrazków), można użyć stałej wysokości i szerokości kontenera miniaturki, przez co powinny się one ładnie wyświetlać w bloczkach podobnych do komórek tabelki

Do tego dorzuć coś dla pseudoklasy hover i będziesz miał naprawdę fajny efekt.

b_chmura

4.09.2009, 16:00:00

Niestety. Miniaturki (kontenery w których będą miniaturki) wciąż przenoszą się do nowej linii.

EDIT:
Dodaję przykład on-line: http://www.informel.pl/~bchmura/exaple/example.html

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.