Liste mit CSS formatieren

Tutorial wurde erstellt von: Bluevacci.de

Mit Hilfe einer HTML Listen lassen sich ganz leicht und Suchmascheinen freundlich (SEO) Inhalte formatieren. Besonders geeigent sind so HTML Listen für ein Newsportal, Blog usw.
Die optische Darstallung kann je nach Einsatz selber durch das Anpassen des Cascading Stylesheet (CSS) selber bestimmt werden.

Beispiel anzeigen

  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmode
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmode
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmode
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmode
  • Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmode

CSS:

#container {
	width: 100%;
	background: #fff;
	margin: 15px 2%;
}
ul.List {
	padding: 10px;
	list-style: none;
	text-align: left;
}
ul.List li {
	padding: 5px 15px;
	line-height: 1.8em;
	list-style: none;
	border-bottom: 1px #DEDEDE dashed;
}
ul.List li:hover {
	color: #ADADAD;
	background: #F4F4F4;
	cursor: default;
}

HTML:

<div id="container">
    <ul class="liste">
        <li>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.....
        </li>
        <li>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.....
        </li>
        <li>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr.....
        </li>
    </ul>
</div>