display: Anzeigeart von Elementen

0 | 10576 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "display: Anzeigeart von Elementen" mit Ihrem Wissen!

Anzeige Hier werben

display

Werte: none, block, inline, inline-block, list-item, run-in, inline-table, table, table-caption, table-cell, table-column, table-columns-group, table-footer-group, table-header-group, table-row, table-row-group
Standardwert: block
Vererbung: nein
Kurzschreibweise: keine
Anwendbar auf: alle Elemente
CSS-Level: CSS1, CSS2.1, CSS3

Mit display bestimmt man wie ein Element angezeigt und sich verhalten soll. Es kann auch eingestellt werden dass es gar nicht angezeigt wird.

Die Hauptanwendung der display-Eigenschaft dürfte sein, Elemente zu verstecken und zwischen Inline und Block-Elementen umzuschalten.

  • run-in erklären: was heißt hier "Kontextabhängig", wann wird das Element wie angezeigt
  • beispiel und erlärung(anwendung) zu inline-block

Werte

Wert
Bedeutung
Kompatibilität in verschiedenen Browsern
block
Darstellung als Block-Element: Erzwingt die Erzeugung einer neuen Zeile nach und vor dem Element: das Element nimmt eine eigen Zeile ein.
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display:block
inline
Darstellung als Inline-Element: Erzwingt einen Textfluss
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: inline
none
Element wird nicht angezeigt. Es wird auch kein Platzhalter freigelassen (im Gegensatz zu visibility: hidden)
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: none
inline-block
Erzeugt äußerlich einen Block, für den Breite, Höhe und Außenabstand angegeben werden kann, belässt das Element jedoch im laufenden Textfluss
Firefox3.6Unterstützt4+Unterstützt
IE7Fast8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: inline-block
IE6 und 7 beherrschen inline-block nur auf Inline-Elemente.
list-item
Wie block, jedoch mit einem Aufzählungszeichen davor (<li>)
Firefox3.6Unterstützt4+Unterstützt
IE7Unterstützt8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: list-item
run-in
Bewirkt, dass das Element Kontext-abhängig als Block- oder Inline-Element dargestellt wird
Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unterstützt12Unterstützt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: run-in
compact
Bewirkt, dass das Element seitlich neben das darauffolgende Element platziert wird
(nicht in CSS2.1)
Firefox3.6Unbekannt4+Unbekannt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unbekannt5Unbekannt
dispaly:compact

marker
In Verbindung mit den Pseudoelementen :before und :after kann eine Markierung neben dem Text angebracht werden. (nicht in CSS2.1)
Firefox3.6Unbekannt4+Unbekannt
IE7Unbekannt8Unbekannt9Unbekannt
Opera11Unbekannt12Unbekannt
1+Unbekannt
Safari4Unbekannt5Unbekannt
display:marker;

Tabelle

Firefox3.6Unterstützt4+Unterstützt
IE7Nein8Unterstützt9Unterstützt
Opera11Unbekannt12Unbekannt
1+Unterstützt
Safari4Unterstützt5Unterstützt
display: table, ...

Mit display können auch beliebige Elemente als Tabellenteile darstellen lassen.

Wert
Darstellungs als...
table Tabelle wie <table> in HTML
inline-table Tabelle, die sich als Inline-Element verhält
table-caption Tabellenüberschrift (<caption>)
table-cell Tabellenzelle (<td>, <th>)
table-row Tabellenzeile (<tr>)
table-column Tabellenspalte (<col>)
table-columns-group Tabellenspalten (<colgroup>)
table-header-group Tabellenkopf (<thead>)
table-row-group
Tabellenkörper (<tbody>)
table-footer-group Tabellenfuss(<tfoot>)

Beispiele

Liste als Tabs anzeigen

Ungeordnete Listen sind sehr gut dafür geeignet um Menüs damit auszuzeichnen. Mit dem folgenden Code kann man aus einer Normalen Liste Tabs(Reiter) machen.

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<style type="text/css">
    li {
        display: block;
        float: left;
        margin: .2em;
        padding: 2px;
        border: solid;
    }
</style>
<ul>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3</li>
</ul>

Elemente nur bei Mauszeiger-drüber anzeigen

Mit display und :hover kann man Elemente nur Anzeigen lassen, wenn ein Benutzer mit der Maus über ein Elternelement fährt. Dadurch kann man z.B. sehr leicht Tooltips erstellen.

display  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<style type="text/css">
    p {
        position: relative;
    }
    p span {
        display: none;
    }
    p:hover span {
        display: block;

        position: absolute;
        top: 1em;
        left: 1em;
        border: solid;
        background: #eee;
    }
</style>
<p>
    Fahr hier drüber!
    <span>Und sehe dann diesen Tooltip</span>
</p>

Unterschiede zwischne inline-block und inline

...text...

inline elemente können normalerweise keine höhe und keinen außenabstand haben

 
HTML
1
2
3
4
5
6
<p>
    Text <div style="display:inline-block;">inline-block</div> Text
</p>
<p>
    Text <div style="display:inline;">inline</div> Text
</p>

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 5 Personen an der Seite "display: Anzeigeart von Elementen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "display: Anzeigeart von Elementen" hier bearbeiten.

Mitarbeiter
  • Ich bin Schüler eines Gymnasiums und beschäftige mich in meiner Freizeit seit vielen Jahren mit HTML- und CSS-Programmierung. Außerdem interessiere ich mich für PHP (WordPress, Drupal, ...), Ruby und Ruby on Rails.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Kinderturnen - Sport Spiele für Kinder