Forum PHP.pl > [CSS]display:inline nie działa

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]display:inline nie działa

sweter

30.08.2009, 19:43:29

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

Crozin

30.08.2009, 20:02:22

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...

sweter

30.08.2009, 20:11:56

[HTML] pobierz, plaintext 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
		<title>Globetrotter</title>
		<link rel="Stylesheet" type="text/css" href="style2.css" />
	</head>
	<body>
		<center>
			<div id="strona_top">
				<div id="strona_top-left"></div>
				<div id="strona_top-middle"></div>
				<div id="strona_top-right"></div>
			</div>
			<div id="strona">
 
			</div>
			<div id="strona_bottom">
				<div id="strona_bottom-left"></div>
				<div id="strona_bottom-middle"></div>
				<div id="strona_bottom-right"></div>
			</div>
		</center>
	</body>
</html>
 
 
[HTML] pobierz, plaintext

Plik css wygląda tak:

[CSS] pobierz, plaintext 
 
#strona {
		width:740px;
		text-align:left;
		background-image:url('./img/tlo-center.png');
	}
#strona_top {
		width:740px;
		height:30px;
		text-align:left;
	}
#strona_top-left {
		width:30px;
		height:30px;
		background-image:url('./img/top-left.png');
		display:inline;
	}
#strona_top-middle {
		width:680px;
		height:30px;
		background-image:url('./img/top-middle.png');
		display:inline;
	}
#strona_top-right {
		width:30px;
		height:30px;
		background-image:url('./img/top-right.png');
		display:inline;
 }
 
 
[CSS] pobierz, plaintext

Problem w tym, że ten górny div #strona_top się nie wyświetla

Crozin

30.08.2009, 20:47:36

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.

sweter

30.08.2009, 21:13:47

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ę?

potreb

30.08.2009, 21:17:10

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.

sweter

30.08.2009, 21:23:24

Cytat

Dla kontenera ustawiasz:
margin: 0 auto;

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

JoShiMa

30.08.2009, 22:40:29

A te trzy divy w topie nie mogą mieć po prostu float:left?

sweter

31.08.2009, 09:21:16

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?

nitek

31.08.2009, 09:37:26

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

http://www.quirksmode.org/css/display.html

sweter

31.08.2009, 09:44:04

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

EDIT:

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

Crozin

31.08.2009, 10:24:15

vertical-align

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.