Navigation mit CSS formatieren

Mauki

Mauki

Aktives Mitglied
Thread Starter
Dabei seit
24.07.2002
Beiträge
15.499
Reaktionspunkte
189
Ich habe eine Navigation in meinem Typo3 Web drin. Das ganze ist ne Liste und ich habe das mit CSS formatiert. In

meinem Template sah das echt gut aus, ich müsste das nun ein wenig anpassen. Jetzt ist das Menü aber total verschoben und es werden Aufzählungspunkte angezeigt. Was ist an meinem CSS nicht korrekt ?

Webseite

Typo3 Code

Code: 
# Navigation links erstellen
	  navi_links = HMENU
	  navi_links.special = directory
	  navi_links.special.value = 2
	  navi_links.entryLevel = 1
	  navi_links {

	  1 = TMENU
	  1.noBlur = 1
	  1.expAll = 0
	  1.collapse = 0

	  1.wrap = <ul class="ullevel1">|</ul>
	  1.NO = 1
	  1.NO.linkWrap = <li class="level_1_NO">|</li>
	  1.ACT = 1
	  1.ACT.linkWrap = <li class="level_1_ACT">|</li>
	  1.ACTIFSUB = 1
	  1.ACTIFSUB.linkWrap = <li class="level_1_ACT">|

	  2 = TMENU
	  2.noBlur = 1
	  2.expAll = 0
	  2.collapse = 0	  
	  2.wrap = <ul class="ullevel2">|</ul></li>
	  2.NO = 1
	  2.NO.linkWrap = <li class="level_2_NO">|</li>
	  2.ACT = 1
	  2.ACT.linkWrap = <li class="level_2_ACT">|</li>
	  2.ACTIFSUB = 1
	  2.ACTIFSUB.linkWrap = <li class="level_2_ACT">|
	  }


CSS
HTML: 
* Stylesheets für Navigation */

.ullevel1 {
	list-style:none;
	width:160px;
	color:#FFFFFF;
	text-decoration:none;
	padding: 0px;
		}


ul.ullevel1 a {
	width:160px;
	display:block;
	color:#FFFFFF;
	padding:4px;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
	}
	
ul.ullevel1 a:visited {
	width:160px;
	display:block;
	color:#FFFFFF;
	padding:4px;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
		}

ul.ullevel1 a:hover {
	width:160px;
	color:#FFFFFF;
	background:#00387D;
	text-decoration:none;
	}

/* Stylesheets für Submenu */

ul.ullevel2 {
	color:#FFFFFF;
	text-decoration:none;
	padding: 0px;
		}
	
	
ul.ullevel2 a {
	display:block;
	color:#FFFFFF;
	padding:4px;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
	background:#83B9CD;
	font-size: 8pt;
	}
	
ul.ullevel2 a:visited {
	display:block;
	color:#FFFFFF;
	padding:4px;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
	background:#83B9CD;
	font-size: 8pt;
		}

ul.ullevel2 a:hover{ 
	width:140px;
	color:#FFFFFF;
	background:#00387D;
	text-decoration:none;
	font-size: 8pt;
	}
 
Ich glaube du must das list-style: none; dem li-Elementen in deiner Liste geben, nicht dem ul.

Code:
li.ullevel1 {
list-style: none;
}

Damit müsste es gehen
 
acid schrieb:
Ich glaube du must das list-style: none; dem li-Elementen in deiner Liste geben, nicht dem ul.
Code:
li.ullevel1 {
list-style: none;
}
Zum Vergrößern anklicken....

Wenn, dann müsste es ul.ullevel1 li heißen (komische Bezeichner BTW). Sollte aber auch so funktionieren wie ausgezeichnet.

Du hast außerdem viel zu viele Klassen in deinem Markup. Du kannst doch die erste Liste mit
Code: 
.box3 ul
und die zweite mit
Code: 
.box3 ul ul
ansprechen, wieso machst du das nicht?

Wegen den Einzügen: margin's und padding's raus!
Entweder global
Code: 
* {
  margin: 0;
  padding: 0;
}

oder nur für die Liste
Code: 
ul.ullevel1, ul.ullevel2 {
  margin: 0;
  padding: 0;
}

Und wegen den Bullet-Points:
Code: 
* Stylesheets für Navigation */

Da fehlt ein '/' am Anfang

Matt
 
msslovi0 schrieb:
Und wegen den Bullet-Points:
Code: 
* Stylesheets für Navigation */

Da fehlt ein '/' am Anfang
Zum Vergrößern anklicken....

Sieht schon etwas besser aus, was ein Satzzeichen so alles bewirkt :D

Im Firefox ist es soweit in Ordnung, nur muß das ganze nur noch ein Stückchen höher, fängt irgendwie zu tief an.

Im IE dagegen, sieht das total übel aus.
 
Definiere 'zu tief'.

Den Mac-IE kannst du BTW knicken. Interessiert keinen, nicht mal M$ selbst (siehe www.msn.com). Allerdings zeigt der Win-IE die Navigation gar nicht an. Darüber solltest du nachdenken.

Matt
 
Ich meine den WIN IE. Geh mal auf die Seite, mein Link oben dann siehts du was ich mit zu tief meine. Das sollte Links noch etws höher, sozusagen oben andocken.

Die Navigation erscheint zur Zeit nur auf der Startseite nicht, das ist mir bekannt. Ist ein Fehler im Typoscript, wo ich noch nicht weiß warum :(
 
Mauki schrieb:
Ich meine den WIN IE. Geh mal auf die Seite, mein Link oben dann siehts du was ich mit zu tief meine. Das sollte Links noch etws höher, sozusagen oben andocken.
Zum Vergrößern anklicken....

Ich sagt doch, padding's und margin's raus. Dann verschwindet auch der margin im IE. Und damit das mit den Bullets klappt wirst du den list-style: none für alle ul wiederholen müssen (also ul.ullevel1, ul.ullevel2).

Der Abstand oben verschwindet evtl. auch mit margin: 0.

Matt
 
So mit folgendem Code ist jetzt der Abstand oben weg und auch im IE Win sieht das Menü echt gut aus.

1. Ist der Code jetzt so ok, oder ist noch was überflüssiges drin
2. Der Hover und die Subnavi sind 1 - 2 Pixel kürzer wie die restliche Navigation. Woran liegt es ? Wenn ich da extra 160 px definiere ist es 1 - 2 Pixel zu breit?


Code: 
/* Stylesheets für Navigation */

.ullevel1 {
	list-style:none;
	width:160px;
	color:#FFFFFF;
        margin: 0;
        padding: 0;
	text-decoration:none;
		}


ul.ullevel1 a {
	display:block;
	color:#FFFFFF;
	text-decoration:none;
        font-weight:bold;
	padding:3px;
	border-bottom: 1px solid #FFFFFF;
	}
	
ul.ullevel1 a:visited {
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
		}

ul.ullevel1 a:hover {
	color:#FFFFFF;
	background:#00387D;
	text-decoration:none;
	}

/* Stylesheets für Submenu */

ul.ullevel2 {
	color:#FFFFFF;
	text-decoration:none;
        margin: 0;
        padding: 0;
		}
	
	
ul.ullevel2 a {
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
	background:#83B9CD;
	font-size: 11px;
	padding:3px;
        }
	
ul.ullevel2 a:visited {
	display:block;
	color:#FFFFFF;
	text-decoration:none;
	border-bottom: 1px solid #FFFFFF;
	background:#83B9CD;
	font-size: 11px;
		}

ul.ullevel2 a:hover{ 
	color:#FFFFFF;
	background:#00387D;
	text-decoration:none;
	font-size: 11px;
	}
 
Zuletzt bearbeitet:
Dieses css
Code: 
/* Navi-Container */

.box3{
  float: left;
  width: 164px;
  height: 100%;
  background: #5B91AD;
}
	
/* Stylesheets für Navigation Links */

.box3 ul {
  list-style: none;
  width: 164px;
  margin: 0;
  padding: 0;
}


.box3 ul a, 
.box3 ul a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  padding: 3px;
  border-bottom: 1px solid #fff;
}
	
.box3 ul a:hover {
  background: #00387D;
}

/* Stylesheets für Submenu */

.box3 ul ul {
  margin: 0;
  padding: 0;
}
	
	
.box3 ul ul a, 
.box3 ul ul a:visited {
  display: block;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;
  background: #83B9CD;
  font-size: 11px;
  padding: 3px 0px 3px 8px;
}
	
.box3 ul ul a:hover{ 
  background:#00387D;
}

funktioniert mit diesem Markup:
HTML: 
<div class="box3">
  <ul>
    <li>
      <a href="index.php?id=17">der Stamm</a>
      <ul>
        <li><a href="">123</a></li>
      </ul>
    </li>
    <li><a href="index.php?id=16">Pfadichor</a></li>
    <li><a href="index.php?id=15">Familienkreis</a></li>
    <li><a href="index.php?id=14">Freundeskreis</a></li>
    <li><a href="index.php?id=13">Termine</a></li>
    <li><a href="index.php?id=12">Bilder</a></li>
    <li><a href="index.php?id=11">Pfadfindertum</a></li>
    <li><a href="index.php?id=10">G&auml;stebuch</a></li>
    <li><a href="index.php?id=9">Links</a></li>
  </ul>
</div>

Das ist jetzt die verkürzte Version ohne extra Klassen für die Listen.

Matt
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten