+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: Początkujący webmaster (https://www.webmastertalk.pl/forum-poczatkujacy-webmaster)
+--- Wątek: CSS - atrybut display (/thread-css-atrybut-display)
CSS - atrybut display - superman - 11-11-2009
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?
RE: CSS - atrybut display - KowR - 11-11-2009
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.
RE: CSS - atrybut display - dziamber - 11-11-2009
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ę
// Ehh rodi mnie wyprzedził o kilka sekund
RE: CSS - atrybut display - superman - 11-11-2009
Dałem tak:
<style type="text/css">
<!--
.inline {display: inline}
-->
</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
RE: CSS - atrybut display - dziamber - 11-11-2009
dodaj:
Kod:
list-style-type: circle;RE: CSS - atrybut display - superman - 11-11-2009
dodałem to tak:
.inline {display: inline; list-style-type: circle}
i nic to nie dało
RE: CSS - atrybut display - dziamber - 11-11-2009
Zapomniałeś średnika za circle
RE: CSS - atrybut display - superman - 11-11-2009
Nie musi być średnika za circle a po drugie nawet jak dałem to nic to nie dało
RE: CSS - atrybut display - dziamber - 11-11-2009
Zrób to jakoś po ludzku, np. tak:
kod css
Kod:
#mojalista {
width: 400px;
}
#mojalista ul li {
display: inline;
}Kod:
<div id="mojalista">
<ul>
<li>punkt</li>
<li>punkt2</li>
</ul>
</div>RE: CSS - atrybut display - Kamil - 11-11-2009
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
Przynajmniej ja tak robię :]@dziamber
Nie zmienia to jednak faktu że "punktacje" i tak tracisz takim sposobem