Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Ginie wysokość w display:inline, Działa tylko na absolute
Tomplus
post 9.09.2008, 15:14:12
Post #1





Grupa: Zarejestrowani
Postów: 1 875
Pomógł: 230
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
JoShiMa
post 9.09.2008, 15:47:35
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.


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
Tomplus
post 9.09.2008, 18:07:15
Post #3





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

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

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 !
Go to the top of the page
+Quote Post
JoShiMa
post 10.09.2008, 10:26:39
Post #4





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

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

Cieszę się, że mogłam pomóc.


--------------------
Zajrzyj, poczytaj, naucz się
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: Standardowy · Przełącz na: 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: 18.07.2025 - 02:24
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn