Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: HTML-Liste mit CSS formatierung



Ranking: +1   Kommentare: 4   |   Bewertung: Keine Berechtigung!  

Hallo DesignNation User,

in diesem Tutorial zeig ich euch, wie schön man einfache HTML-Listen mit CSS formatieren kann.



Schritt 1:


Wir nehmen uns unseren HTML-Editor und erstellen eine neue HTML-Datei:

Schritt 1
Schritt 1


Ich selber benutze Dreamweaver aber man kann diese mit jedem HTML-Editor hinbekommen, je nach Geschmack (:

Schritt 2:


Wir schreiben jetzt in den <body> Tag unsere Liste und geben der <ul> die Klasse "liste":

Schritt 2
Schritt 2


Und euer Text kommt in die Listenpunkte (<li></li>):

Schritt 2
Schritt 2


Jetzt steht das Grundgerüst unsere HTML-Liste, fehlt nur noch die formatierung mittels CSS.

Schritt 3:


Ich benutze jetzt keine extra CSS-Datei aber ich empfehle euch bei eigenen Projekten dieses in eure CSS-Datei einzubinden.

Da unsere <ul> die Klasse "liste" bezistzt, können wir diese direkt ansprechen.

Das sieht dann so aus:

Code:


ul.liste {

}



Wir geben der ul.liste den Wert "margin" mit "0 0 20px 0", "padding" mit "0" und "list-style" mit dem Wert "none".

Das ganze sieht dann so aus:

Code:


ul.liste {

   margin: 0 0 20px 0;

   padding: 0;

   list-style: none;

}



Jetzt müssen wir nur noch unsere Listenpunkte (<li>) formatieren.

Schritt 4:


Die Listenpunkte sprechen wir so an:

Code:


ul.liste li {

}



Also die <ul> mit der Klasse "liste" dessen <li>.

Die Formatierung sieht dann so aus:

Code:


ul.liste li {

   padding: 5px 0 5px 25px;

   border-bottom: dashed 1px #666666;

   margin: 0 10px 0 0;

   line-height: 18px;

   list-style:none;

   _height: 20px;

}



Das Padding ist für den Außenabstand, border-bottom gibt dem <li> eine gepunkteten Kontur unten die 1px groß ist und die Farbe #666666 hat. Margin ist wieder für den Innenabstand. line-height: Ist für die Zeilen höhe. list-style ist wieder der Listen-Style und _height ist eine psyeudo Klasse die nur der IE6 versteht.

Schritt 5:


Dieser Schritt ist kein muss, aber ich finde ihn ganz schön. Kann aber auch dazu verleiten das Leute denken man könnte den Listenpunkt anklicken.

Wir geben dem <li> einen hover effekt.

Das sieht dann so im CSS aus:

Code:


ul.liste li:hover {

   color:#b3e00f;

   background: #1c2424;

}



Das heißt die <ul> mit der Klasse "liste" dessen <li> wenn man mit der Maus drauf geht.

Color ist für die Text Farbe und background für die Hintergrundfarbe des <li>



Das war es auch schon. Ihr könnt jetzt natürlich eure eigenen Farben, Abstände und Stile benutzen.

Hier ist nochmal der ganze Code den ich benutzt habe:

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Unbenanntes Dokument</title>

<style type="text/css">

<!--



body,

td,

th {

   font-family: Trebuchet MS, Verdana, Arial;

   font-size: 12px;

   color: #a6a69b;

}



body {

   background-color: #1f2b29;

}



#block {

   width:380px;

}



ul.liste {

   margin: 0 0 20px 0;

   padding: 0;

   list-style: none;

}



ul.liste li {

   padding: 5px 0 5px 25px;

   border-bottom: dashed 1px #666666;

   margin: 0 10px 0 0;

   line-height: 18px;

   list-style:none;

   _height: 20px;

}



ul.liste li:hover {

   color:#b3e00f;

   background: #1c2424;

}

-->

</style>

</head>

<body>

<div id="block">

    <h1>HTML-Liste formatiert mit CSS</h1>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>

    <ul class="liste">

        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <span class="highlight">labore et dolore magna aliquyam</span></li>

        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <span class="highlight">labore et dolore magna aliquyam</span></li>

        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <span class="highlight">labore et dolore magna aliquyam</span></li>

        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <span class="highlight">labore et dolore magna aliquyam</span></li>

        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut <span class="highlight">labore et dolore magna aliquyam</span></li>

    </ul>

</div>

</body>

</html>




und so müsste das ganze dann aussehen dann im Browser aussehen:

Endergebnis
Endergebnis




Geteset habe ich das ganze im Firefox 2 - 3 und Internet Exploerer 6 - 7.

Ich hoffe es bringt einige weiter und es ist gut verständlich erklärt. Bei Fragen könnt Ihr mir gerne eine Nachricht zu kommen lassen.


Mit freundlichen Grüßen

DennisBlack

Veröffentlicht von: deleted_1373545880
Veröffentlicht am: 16 Apr. 2009
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: HTML


Themenverwandte Tutorials


Kommentar(e) (4)


deleted_1373545880 sagt:

Zitat chriss:

Soweit so gut, _height ist allerdings keine Pseudo-Klasse sondern ein Hack der u.A. invalide ist. Leider gibt’s wenig alternativen … sollte man aber immer im Hinterkopf haben. ;)



Ah hab ich vergessen dazu zu schreiben. Dank dir für den Hinweis. Also ich benutzte diese Liste sogut wie in allen meinen Projekten und ich optimiere auf der Arbeit für IE 6-7 und Firefox in erster hinsicht. Dort bekomm ich keine invalide anzeige oder ähnliches.

Grüße

17 Jun. 2009 12:08:11 • Antworten


chriss sagt:

Soweit so gut, _height ist allerdings keine Pseudo-Klasse sondern ein Hack der u.A. invalide ist. Leider gibt’s wenig alternativen … sollte man aber immer im Hinterkopf haben. ;)

17 Jun. 2009 09:42:55 • Antworten


deleted_1373545880 sagt:

Zitat cookiepants:

wow sieht sehr gut aus :)

denke mal sowas ist sehr nützlich für News etc auf der eigenen Homepage.



z.B. oder einfach wenn man was schön darstellen will und sich nicht mit divs rumschlagen will.

Zuletzt bearbeitet am: 18 Apr. 2009 11:38:23

17 Apr. 2009 18:01:59 • Antworten


cookiepants sagt:

wow sieht sehr gut aus :)

denke mal sowas ist sehr nützlich für News etc auf der eigenen Homepage.

17 Apr. 2009 17:23:08 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder