Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Ginie wysokość w display:inline
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Tomplus
9.09.2008, 15:14:12
Witam,

Zrobiłem stronkę, ale przedstawię tylko fragment nad którym spędziłem większość czasu.
Przedstawię poniżej (skrócony) albo na http://www.swos.pl/temp/jubiler/cat.html

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. <title>Jubiler</title>
  5. <style>
  6. ul li {
  7.      margin:0;
  8.      list-style:none;
  9.      text-aling:center;
  10.      display: inline;
  11.      border: 1px dotted #ccc;
  12.      background-color: #fff;
  13.      width: 171px;
  14.      height: 181px;
  15. }
  16.  
  17. li:hover { 
  18.  
  19. }
  20. ul li a {
  21.  
  22.  
  23. }
  24.  ul li img {
  25.      padding:30px;
  26. }
  27.  
  28. ul li.a {
  29.      position: absolute;
  30.      margin:0;
  31.      list-style:none;
  32.      text-aling:center;
  33.      display: inline;
  34.      border: 1px dotted #fcc;
  35.      background-color: #fff;
  36.      width: 171px;
  37.      height: 181px;
  38. }
  39.  
  40. </style>
  41. </head>
  42. <body>
  43.  
  44. <ul>
  45. <li class="a"><a href="#"><img src="gfx/obraczka.png"/></a></li>
  46. <li><a href="#"><img src="gfx/obraczka.png"/></a></li>
  47. <li><a href="#"><img src="gfx/obraczka.png"/></a></li>
  48. </ul>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext


Gdy klikniecie na przykład, wszystko się wyjaśni, Pierwszy element ustawiony jako absolute, ma rozmiar: 171x181
z tłem białym pod obrazkiem. Jako że to jest absolute, musiałbym każdy element przesuwać o Npx, a tym bardziej opcja display:inline nie ma prawa działać w takiej pozycji.
Dlatego stosuje relatywne wyświetlenie, ale mimo ze lista układa mi się poziomo, to nie pojawia się tło elementu LI, co mnie b. smuci.

Dlatego proszę o pomoc w rozwiązaniu problemu.

Problem teraz stanowi elementy
JoShiMa
9.09.2008, 15:47:35
Polecam lekturę artykułu Elementy liniowe kontra blokowe. Pomoże (mam nadzieję) coś nieco zrozumieć.

Podpowiem. Moze trzeba dać 

[HTML] pobierz, plaintext 
  1. a{display:block;  width: 171px;height: 181px;}
[HTML] pobierz, plaintext


Aha. I po co Ci position: absolute;. Blechhhh.

A właściwie to co chcesz osiągnąć wyróżniając jedno li?

A tu masz przykład jak można to samo bez zbędnego kodu i wygibasów osiągnąć. Podejrzyj sobie.
Tomplus
9.09.2008, 18:07:15
Wyróżniłem jedno LI, aby pokazać - tylko jako przykład co chce osiągnąć.

Artykuł czytałem ale przeczytałem jeszcze raz, dzięki.

zapomniałem do czego służy display i jakie efekty dzięki temu mozna osiagnać, to mnie zgubiło.

Ale dzięki za odpowiedź. Masz Plusa odemnie !
JoShiMa
10.09.2008, 10:26:39
Cieszę się, że mogłam pomóc.
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.