Zaloguj się

superman · 11-11-2009, 16:59

Jestem początkującym webmasterem i zacząłem się bawić w CSSie - powiedzice mi dokładnie do czego służy atrybut display na chłopski rozum. Chodzi mi o wartość block, inline i none i kiedy je się stosuje?

**KowR** · 11-11-2009, 17:04

display -> odpowiadanie za wyświetlanie danego bloku (np. diva, obrazka itd. - możesz tego użyć do wszystkiego)

inline - w jednej linii (dla niektórych elementów jest to domyślne)
block - jako blok (dla niektórych elementów jest to domyślne np. divów)
none - nie wyświetla (po prostu element się ukrywa)

Możesz używać tego do wszystkiego i kiedy chcesz... Najczęściej stosuje się to w połączeniu z JavaScriptem gdzie są elementy takie jak np. rozwijane menu gdzie przed ukryciem elementy mają display:none; a po najechaniu JS zmienia z "nie wyświetlaj" na np. dispaly:block; -> wyświetlaj jako blok.

**dziamber** · (Ten post był ostatnio modyfikowany: 11-11-2009, 17:06 przez dziamber.)

Jak masz np. liste li. To jak dasz display: block; to lista będzie wyświetlana w bloku, czyli standardowo od góry do dołu. Jak dasz display: inline; to lista będzie wyświetlana poziomo od prawej do lewej tak jak np. standardowe menu na stronie. A jak dasz display: none; to lista nie będzie wyświetlana, zniknie po prostu. Mam nadzieje że mój chaotyczny opis pomógł Ci choc trochę Smile

// Ehh rodi mnie wyprzedził o kilka sekund Smile

superman · (Ten post był ostatnio modyfikowany: 11-11-2009, 19:11 przez superman.)

Dałem tak:
<style type="text/css">

</style>
</head>

<body>
<ul>
<li class="inline">klasa1</li>
<li class="inline">klasa2</li>
</ul>
</body>
</html>

i lista wyświetla się w jednej linii ale nie ma wypunktowania

**dziamber** · 11-11-2009, 19:31

dodaj:

Kod:
list-style-type: circle;

superman · (Ten post był ostatnio modyfikowany: 11-11-2009, 20:14 przez superman.)

dodałem to tak:
.inline {display: inline; list-style-type: circle}
i nic to nie dało

**dziamber** · 11-11-2009, 20:30

Zapomniałeś średnika za circle

superman · 11-11-2009, 20:32

Nie musi być średnika za circle a po drugie nawet jak dałem to nic to nie dało

**dziamber** · 11-11-2009, 20:45

Zrób to jakoś po ludzku, np. tak:
kod css

Kod:
#mojalista {

width: 400px;

}

#mojalista ul li {

display: inline;

}

kod html

Kod:
<div id="mojalista">

<ul>

<li>punkt</li>

<li>punkt2</li>

</ul>

</div>

Kamil · (Ten post był ostatnio modyfikowany: 11-11-2009, 20:59 przez Kamil.)

Ja bym zaproponował takie rozwiązanie:

Cytat:<head>
<style type="text/css">
li { float: left; padding-right: 20px; }
</style>
</head>

<body>
<ul>
<li>klasa1</li>
<li>klasa2</li>
</ul>
</body>

Bloki najczęściej wykorzystuje się bezpośrednio w linkach Smile

Przynajmniej ja tak robię :]

@dziamber
Nie zmienia to jednak faktu że "punktacje" i tak tracisz takim sposobem

Zaloguj się
Login:
Hasło:	Nie pamiętam hasła
	Zapamiętaj mnie