Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]display:inline nie działa
sweter
post
Post #1





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

Mam pewnego diva o nazwie #top, a w nim trzy #top-right, #top-middle i #top-right z display ustawionym na inline. Nie chcą się one jednak wyświetlić. Czemu? #top ma display:block;

EDIT:
to może zadam jeszcze jedno pytanie:
jak Wy radzicie sobie z umieszczeniem elementów w jednej linii, tak jakby były w tabelach?
Bo ja dotychczas stosowałem table-cell, jednak zauważyłem, że nie działa to w IE 6 (IMG:style_emoticons/default/sad.gif)

Ten post edytował sweter 30.08.2009, 20:03:49
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

1) Albo teraz się walnąłeś jedynie w poście albo masz błąd w postaci powtarzających się identyfikatorów: top-right
2) Pokaż kod...
Go to the top of the page
+Quote Post
sweter
post
Post #3





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. 	<head>
  5. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. 		<title>Globetrotter</title>
  7. 		<link rel="Stylesheet" type="text/css" href="style2.css" />
  8. 	</head>
  9. 	<body>
  10. 		<center>
  11. 			<div id="strona_top">
  12. 				<div id="strona_top-left"></div>
  13. 				<div id="strona_top-middle"></div>
  14. 				<div id="strona_top-right"></div>
  15. 			</div>
  16. 			<div id="strona">
  17.  
  18. 			</div>
  19. 			<div id="strona_bottom">
  20. 				<div id="strona_bottom-left"></div>
  21. 				<div id="strona_bottom-middle"></div>
  22. 				<div id="strona_bottom-right"></div>
  23. 			</div>
  24. 		</center>
  25. 	</body>
  26. </html>
  27.  
  28.  
[HTML] pobierz, plaintext


Plik css wygląda tak:

[CSS] pobierz, plaintext 
  1.  
  2. #strona {
  3. 		width:740px;
  4. 		text-align:left;
  5. 		background-image:url('./img/tlo-center.png');
  6. 	}
  7. #strona_top {
  8. 		width:740px;
  9. 		height:30px;
  10. 		text-align:left;
  11. 	}
  12. #strona_top-left {
  13. 		width:30px;
  14. 		height:30px;
  15. 		background-image:url('./img/top-left.png');
  16. 		display:inline;
  17. 	}
  18. #strona_top-middle {
  19. 		width:680px;
  20. 		height:30px;
  21. 		background-image:url('./img/top-middle.png');
  22. 		display:inline;
  23. 	}
  24. #strona_top-right {
  25. 		width:30px;
  26. 		height:30px;
  27. 		background-image:url('./img/top-right.png');
  28. 		display:inline;
  29.  }
  30.  
  31.  
[CSS] pobierz, plaintext


Problem w tym, że ten górny div #strona_top się nie wyświetla (IMG:style_emoticons/default/sad.gif)

Go to the top of the page
+Quote Post
Crozin
post
Post #4





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

Dla elementów liniowych nie można ustalić wysokości/szerokości. Skorzystaj z inline-block.
CENETER? wtf?
Strasznie dużo kodu CSS niepotrzebnie powtarzasz, a budowanie szkieletu strony "na sztywno" to najczęściej zły pomysł - chociaż... nie wiem jaki jest Twój cel.
Go to the top of the page
+Quote Post
sweter
post
Post #5





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

inline-block jest ok, tylko ma dwie poważne wady:

1. nie działa pod IE 6

2. elementy są ustawiane do siebie względem ich dolnych krawędzi (a ja chciałbym, żeby były ustalane wzgl. górnych)

Cytat
CENETER? wtf?


A w jaki inny sposób wyśrodkować stronę?
Go to the top of the page
+Quote Post
potreb
post
Post #6





Grupa: Zarejestrowani
Postów: 1 568
Pomógł: 192
Dołączył: 7.03.2005
Skąd: Warszawa

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

Dla kontenera ustawiasz:
margin: 0 auto;

btw: <center> to era kamienia łupanego

Nie zauważyłem że taki coś jak kontener u ciebie nie istnieje.

Ten post edytował potreb 30.08.2009, 21:18:55
Go to the top of the page
+Quote Post
sweter
post
Post #7





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

Cytat
Dla kontenera ustawiasz:
margin: 0 auto;

Czyli dla tego diva, który zawiera te 2 divy z display:inline-block ?

Ten post edytował sweter 30.08.2009, 21:24:35
Go to the top of the page
+Quote Post
JoShiMa
post
Post #8





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

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

A te trzy divy w topie nie mogą mieć po prostu float:left?
Go to the top of the page
+Quote Post
sweter
post
Post #9





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

Z tymi 3 divami sobie poradziłem w taki sposób:

Pierwszy div ma float:left,  dwa kolejne float:left; clear:none;




Teraz potrzebuję pomocy w innej sprawie, aczkolwiek bardzo zbliżonej do temetu.

Mam dwa divy, które mają być obok siebie tak, jak komórki tabeli.

Nie mogę użyć display:table-cell, bo IE6 go nie interpretuje.

Nie mogę również użyć float:left (clear:none;) ponieważ zewnętrzny div nie rozciąga się do takiej wysokości jak ma któryś z tych div'ów.

Możecie poradzić jak sobie poradzić z tym problemem?
Go to the top of the page
+Quote Post
nitek
post
Post #10





Grupa: Zarejestrowani
Postów: 209
Pomógł: 37
Dołączył: 27.02.2008
Skąd: Kwidzyn

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

a display: inline-block / inline nie pomoże w twoim przypadku?

http://www.quirksmode.org/css/display.html
Go to the top of the page
+Quote Post
sweter
post
Post #11





Grupa: Zarejestrowani
Postów: 623
Pomógł: 11
Dołączył: 1.01.2009
Skąd: Wrocław

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

Cytat
a display: inline-block / inline nie pomoże w twoim przypadku?

Pomoże, ale nie do końca, bo te divy z inline/inline-block wyrównują się do dolnej krawędzi (IMG:style_emoticons/default/sad.gif)




EDIT:

Te dwa divy mają by wyrónwnane do tej górnej, niebiesiej linii, a nie do dolnej:

(IMG:http://wstaw.org/images/free/2009/08/31/60181ebb35437a0ae618222a95d8d9.png)



Ten post edytował sweter 31.08.2009, 09:55:14
Go to the top of the page
+Quote Post
Crozin
post
Post #12





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

vertical-align
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 · Linearny+ · Przełącz na: Drzewo

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

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