zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Linien in Navigation bei Liste

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2011, 18:57
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard Linien in Navigation bei Liste

Hallo,

ich habe eine Navigation die aus eine ungeordnete verschachtelte Liste besteht. Beispiel:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Navigation</title>
<style type="text/css">
body {
	color: #000;
	background: #FFF;
	font-family: arial,sans-serif;
	font-size: 100.01%;
	padding: 0;
	margin: 0;
}
#sidebar {
	float: left;
	width: 210px;
	margin: 15px 0 0 30px;
	padding: 0;
}
#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#sidebar ul li {
	width: 205px;
	color: #00F;
	font-weight: bolder;
	padding: 0;
	margin-left: 5px;
	margin-top: 3px;
	margin-bottom: 0;
	float: left;
	border-bottom: 1px dotted #ccc; /* fuer die Linie */
}
#sidebar ul li ul li {
	width: 180px;
	list-style-type: none;
	line-height: 200%;
	font-weight: lighter;
	font-size: 86%;
	color: #36C;
	padding-left: 10px;
	padding-right: 0;
	margin-left: 15px;
	margin-right: 0;
}
#sidebar ul li ul li ul li {
	width: 160px;
	color: #000080;
	list-style: none;
	line-height: 170%;
	margin-left: 13px;
	margin-top: 0;
	margin-right: 0;
	padding-left: 4px;
	font-size: 90%;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
  <li>Punkt 1</li>
  <li>Punkt 2
    <ul>
      <li>Punkt 2-1</li>
      <li>Punkt 2-2
        <ul>
          <li>Punkt 2-2-1</li>
          <li>Punkt 2-3-2</li>
        </ul>
      </li>
      <li>Punkt 2-3</li>
    </ul>
  </li>
  <li>Punkt 3</li>
  <li>Punkt 4</li>
</ul>
</div>
</body>
</html>
Um die einzelne Menüpunkte besser zu unterscheiden, wollte ich unter jeden Menüpunkt eine dezente Linie einsetzen. Dies habe ich mit border der Liste gemacht, leider wird jetzt bei verschachtelte Punkte die Linie dann eingesetzt wenn die Liste im Code endet also bei </li> und dies ist teilweise nach </ul>!
Wie kann ich das am besten realisieren?
Leider kann ich auch keine zusätzliche Klassen in HTML-Code einsetzen, denn dieser kommt dynamisch vom CMS.

Bin für jede Hilfe dankbar
Wandler
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2011, 19:00
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Da das eine Navigation werden soll - du hast anscheinend die Links vergessen - ist es immer blöd, wenn die Hintergrundfarbe größer ist als die Links selber. Deshalb solltest du Angaben wie Breite und Höhe dem Link zuordnen (display:block; hilft dabei) und dann kannst du diesem auch den Strich geben.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2011, 19:19
Benutzerbild von wandler
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.01.2006
Beiträge: 48
wandler befindet sich auf einem aufstrebenden Ast
Standard

DANKE,
daran habe ich gar nicht gedacht.
__________________
Coden ist keine Esoterik, also lasst uns an eurem Wissen teilhaben ihr Gurus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Navigation ist nicht mittig Schokokrapfen CSS 29 20.09.2011 00:19
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:37 Uhr.