Mainmenu "splitten" für horizontales Menü?

MBetke · 24. November 2012, 19:38:08

Irgendwie ist gerader der CSS-Wurm bei mir drin.

Ich versuche eine horizontale Menuleiste zu bauen wo die einzelnen Punkte durch farbige Quadrate immer der gleichen Größe hervorgehoben sind.
Beim Hoover wird dieses Quadrat nochmal leicht in der Farbe verändert.
Normalerweise wäre das alles kein Problem, aber da ich in Mozilo ja nur den {mainmenu} Tag habe will mir die Aufteilung nicht gelingen.

Ich habe nun folgende Probleme und sicherlich nur nen Brett vorm Kopf:
1. Mein Quadrat ist mit den anderen "verbunden". Ich habe schon versucht dem "mainmenu a" einen Rahmen in der Hintergrundfarbe zu geben, damit es nach mehr Abstand aussieht. Das gesamte Mainmenu ist ja in einem Cotainer.
2. Jedes Quaddrat ist unterschiedlich groß und passt sich der Textlänge an. Es soll aber quasi "fixed" sein. Also ein Kleiner Menupunkt soll in einem gleichgroßen Quadrat sitzen wie ein größeres.

Wer schubst mich in die richtige Richtung (vom Quader)?

m4ddy · 25. November 2012, 13:01:10

Hi, wie sieht denn dein aktueller Code aus?
Ist ja immer hilfreich wenn man sich anschauen kann was du bisher so gmacht hast, damit man sagen kann ob dein Ansatz richtig ist oder du besser anders rangehst.

m4ddy · 25. November 2012, 13:07:08

Schau mal vielleciht hilft dir das:

Code Auswählen

<!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>

<style type="text/css">

ul {
	list-style: none;
}

li {
	background: #666;
	float: left;
	height: 100px;
	width: 100px;
	overflow: hidden;
	white-space:normal;
	margin: 0 0 0 40px;
	text-align: center;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>

<body>

<ul>
 <li>Das ist ein menü
 </li>
 <li>das ist ein längerer Menüpunkt
 </li>
 <li>ganz kurz
 </li>
</ul>
</body>
</html>

ich glaub das ist ungefähr das was du wolltest

MBetke · 25. November 2012, 20:28:49

Hier ist das was ich bisher hatte. Sicher nicht zu gebrauche danher hatte ich es nicht gepostet und nur beschrieben:

Code Auswählen

#mainmenu {
	height: 120px;
	font-family: "Century Gothic", Trebuchet MS, Arial, Helvetica, sans-serif;
	background: #d432d2; /*TESTFARBE*/
}

#mainmenu ul {
	margin: 0;
	list-style: none;
}

#mainmenu li {
	display: inline;
}

#mainmenu a {
	display: block;
	float: left;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-left: 20px;
	padding-right: 20px;
	border-color: #ffffff;
	border: 5px;
	border-style:solid;
	
}

#mainmenu a:hover {
	background: #e7e7e7;
}

#mainmenu .active a {
}

#mainmenu .first a {
}

Das ich diese Abstände aber über "li" definieren kann war mir neu. Ich hätte jetzt ewig mit dem #mainmenu rumprobiert.
Wieder was gelernt. Vielen Dank! Ich kann halt tolle 3D Sachen bauen aber dafür kein gutes CSS.

Neuigkeiten:

Mainmenu "splitten" für horizontales Menü?

MBetke

m4ddy

m4ddy

MBetke