Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Ginie wysokość w display:inline, Działa tylko na absolute
Tomplus
post
Post #1





Grupa: Zarejestrowani
Postów: 1 884
Pomógł: 231
Dołączył: 20.03.2005
Skąd: Będzin

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

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

Ten post edytował Tomplus 9.09.2008, 15:16:50
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
JoShiMa
post
Post #2





Grupa: Zarejestrowani
Postów: 1 374
Pomógł: 149
Dołączył: 1.03.2006

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

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.
Go to the top of the page
+Quote Post

Posty w temacie
- Tomplus   [CSS] Ginie wysokość w display:inline   9.09.2008, 15:14:12
- - JoShiMa   Polecam lekturę artykułu Elementy liniowe kontra b...   9.09.2008, 15:47:35
- - Tomplus   Wyróżniłem jedno LI, aby pokazać - tylko jako przy...   9.09.2008, 18:07:15
- - JoShiMa   Cieszę się, że mogłam pomóc.   10.09.2008, 10:26:39

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 9.10.2025 - 11:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn