---
title: "CSS-blind?"
url: "https://www.typo3.net/d/84202-css-blind"
source: "typo3.net"
tags: ["Allgemein","Frage"]
created: "2008-11-20"
last_reply: "2008-11-21"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# CSS-blind?

Allgemein · 2 Antworten · gestartet 2008-11-20

## Eröffnungsbeitrag

**Reiko** · 2008-11-20 · [Beitrag #1](https://www.typo3.net/d/84202-css-blind/1)

Hallo,

wie mir scheint, sehe ich den CSS-Wald vor lauter Bäumen nicht mehr. Ich will eine CSS-basierte Navigation erstellen, welcher vertical verläuft und über 3 Ebenen geht. Jede Ebene soll eine andere Hintergrundfarbe haben, die Linkitems sollen nacheinander eingerückt sein und die Hintergrundfarben sollen aber immer am linken Rand beginnen.

```html
[Ebene1]
|   [Ebene2]
|      [Ebene3]
```

Ich schaffe es auch, den Hintergrund der 2. Navigation noch am linken Rand zu platzieren. Bei der dritten Liste dann jedoch fehlen am linken Rand einige Pixel.

Mein Code:

```html
<div class="navigation">
            	<ul>
                	<li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">Festplatten</a>
                            <div class="navigation_ebene2">
                            	<ul>
                                	<li><a href="#Linkitem" target="_self">1¸8"</a></li>
                                    <li><a href="#Linkitem" target="_self">2¸5"</a></li>
                                    <li>
                                    	<div class="navigation_ebene3">
                                    		<a href="#Linkitem" target="_self">3¸5"</a>
                                            <ul>
                                            	<li><a href="#Linkitem" target="_self">IDE</a></li>
                                                <li><a href="#Linkitem" target="_self">SATA</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">Eingabegeräte</a>
                        </div>
                    </li>
                    <li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">PC-Systeme</a>
                        </div>
                    </li>
                </ul>	
            </div>
```

Meine CSS:

```html
div.navigation {
	padding: 0px 0px 5px 0px;
}
	div.navigation ul {
		list-style-type: none;
	}
		div.navigation li:hover,
		div.navigation li:active {
			background-color: #c4dda9;
		}
	div.navigation_ebene1 {
		padding: 5px 0px 5px 0px;
		border-bottom: 1px solid #005d00;
		clear: both;
	}
		div.navigation_ebene1 a,
		div.navigation_ebene1 a:visited {
			color: #000000;
			text-decoration: none;
			display: block;
			padding: 0px 0px 0px 14px;
			background-image: url(../img/pfeil_gross_schwarz.png);
			background-position: left center;
			background-repeat: no-repeat;
		}
		div.navigation_ebene1 a:hover,
		div.navigation_ebene1 a:active {
			background-image: url(../img/pfeil_gross_gruen.png);
		}
	div.navigation_ebene2 {

	}
		div.navigation_ebene2 li {
			padding: 1px 0px 1px 14px;
		}
		div.navigation_ebene2 li:hover,
		div.navigation_ebene2 li:active {	
			background-color: #d1ebb4;
		}
	div.navigation_ebene3 {

	}
		div.navigation_ebene3 li {
			padding: 1px 0px 1px 13px;
		}
		div.navigation_ebene3 li:hover,
		div.navigation_ebene3 li:active {
			background-color: #ddf8be;
		}
```

Bitte bitte helft mir!  #giggle#  #giggle#
Ich glaube fast, dass es nur ein ganz banaler Fehler ist -.-

So long!
Reiko

/*edit: achja, anzuschauen ist das ganze unter <http://www.rsv-computer.de>

## Antworten

### [#2](https://www.typo3.net/d/84202-css-blind/2) · maik · 2008-11-20

Ich würde das komplett anders aufbauen.
Auf die DIV's kannst du eigentlich komplett verzichten.

Die Hintergründe würde ich dann immer über li a setzen.
zweite Ebene
li li a
dritte Ebene
li li li a

Das gaze schaut dann wie folgt aus:

CSS

```html
/* Reset Listen Style */
#mainNavi ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 200px;
}

/* 1. Ebene */
#mainNavi li a {
	display:block;
	padding: 5px;
	background-color:#00FF00;
}

/* 2. Ebene */
#mainNavi li li a {
	padding: 3px 0 3px 20px;
	background-color:#FF0000;
}

/* 3. Ebene */
#mainNavi li li li a {
	padding: 2px 0 2px 40px;
	background-color:#0000FF;
	color: #fff;
}
```

HTML

```html
<div ID="mainNavi">
<ul>
  <li><a href="#">Ebene 1
    </a>
    <ul>
      <li><a href="#">Ebene 1.1</a>
        <ul>
          <li><a href="#">Ebene 1.1.1</a></li>
          <li><a href="#">Ebene 1.1.2  </a></li>
        </ul>
      </li>
      <li><a href="#">Ebene 1.2 </a></li>
    </ul>
  </li>
  <li><a href="#">Ebene 2</a></li>
  <li><a href="#">Ebene 3 </a></li>
</ul>
```

### [#3](https://www.typo3.net/d/84202-css-blind/3) · Reiko · 2008-11-21

Ich danke dir!
Warum einfach, wenn es auch umständlich geht? ;)

Ích würd dich ja knutschen, aber ich denke, das willst du nicht! :)

So long!
Reiko

---

Quelle: „CSS-blind?“, typo3.net, https://www.typo3.net/d/84202-css-blind
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.