Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [html][css]Pozioma lista grafiki z paskiem przesuwania, dla diva bez konkretnej szerokości
b_chmura
post 4.09.2009, 14:35:12
Post #1





Grupa: Zarejestrowani
Postów: 813
Pomógł: 34
Dołączył: 18.03.2007
Skąd: o stamtąd

Ostrzeżenie: (0%)
-----

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 
  1. <html>
  2.   <head>
  3.     <title></title>
  4.   </head>
  5.   <style>
  6.   div.value    { background: yellow; height: 255px; width: 90%; overflow: auto; border: solid 0px #BFBFBF; border-top-width: 1px;}
  7.   div.worklist { background: red; position: relative; height: 235px; !important width: auto;}
  8.   div.artwork  { background: blue; width: 520px; height: 215px; border: solid 1px #BFBFBF; margin: 10px; float: left;}
  9.   </style>
  10.   <body>
  11.   <strong>Przyklad jak to wyglada:</strong>
  12.     <div class="value">
  13.       <div class="worklist">
  14.         <div class="artwork"></div>
  15.         <div class="artwork"></div>
  16.         <div class="artwork"></div>
  17.         <div class="artwork"></div>
  18.         <div class="artwork"></div>
  19.         <br style="clear: both;" />
  20.       </div>
  21.     </div>
  22.     <br /><br />
  23.    <strong>A jak powinno wygladać (tyle, ze bez stałej szerokosci diva czerwonego "worklist"):</strong>
  24.     <div class="value">
  25.       <div class="worklist" style="width: 9000px;">
  26.         <div class="artwork"></div>
  27.         <div class="artwork"></div>
  28.         <div class="artwork"></div>
  29.         <div class="artwork"></div>
  30.         <div class="artwork"></div>
  31.         <br style="clear: both;" />
  32.       </div>
  33.     </div>
  34.   </body>
  35. </html>
[HTML] pobierz, plaintext


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

Ten post edytował b_chmura 4.09.2009, 16:03:05
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
thek
post 4.09.2009, 14:46:35
Post #2





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
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 
  1. <div id="rodzic">
  2.     <div class="kontener_miniaturki"></div>
  3.     <div class="kontener_miniaturki"></div>
  4.     <div class="kontener_miniaturki"></div>
  5.     <div class="kontener_miniaturki"></div>
  6.     <div class="kontener_miniaturki"></div>
  7.     <span class="clear"></span>
  8. </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 smile.gif Do tego dorzuć coś dla pseudoklasy hover i będziesz miał naprawdę fajny efekt.

Ten post edytował thek 4.09.2009, 14:50:00


--------------------
Najpierw był manual... Jeśli tam nie zawarto słów mądrości to zapytaj wszechwiedzącego Google zadając mu własciwe pytania. A jeśli i on milczy to Twój problem nie istnieje :D
Go to the top of the page
+Quote Post
b_chmura
post 4.09.2009, 16:00:00
Post #3





Grupa: Zarejestrowani
Postów: 813
Pomógł: 34
Dołączył: 18.03.2007
Skąd: o stamtąd

Ostrzeżenie: (0%)
-----

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

Ten post edytował b_chmura 4.09.2009, 16:00:18
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 03:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn