zentriertes menü

Dalle_112

Code

<div id="menuebox">


	<div id="menue">
		<div class="aussen">
<span class="menutag">Produkte</span>
[url='#']Systeme[/url]
[url='#']Speicher[/url]
[url='#']Laufwerke[/url]
[url='#']Monitore[/url]
[url='#']Drucker[/url]
[url='#']Zubehör[/url]
		</div>
		<div class="aussen">
<span class="menutag">Leistungen</span>
[url='#']Netzwerke[/url]
[url='#']Server[/url]
[url='#']Wartung[/url]
		</div>
		<div class="aussen">
<span class="menutag">Service</span>
[url='#']Reparatur[/url]
[url='#']Konfiguration[/url]
[url='#']Software[/url]
[url='#']Schulung[/url]
		</div>
		<div class="aussen">
<span class="menutag">Links</span>
[url='#']About Us[/url]
[url='#']Partner[/url]
[url='#']Referenzen[/url]
		</div>
	</div>


<!-- Der folgende Block bedient nur IEs! 
	 Durch diese Redundanz vermeiden wir den Einsatz von Javascript. -->


<!--[if IE]>
	<div class="stupidie">
<a class="auss" href="#"><span class="menutag">Produkte</span>
<table><tr><td>
[url='#']Systeme[/url]
[url='#']Speicher[/url]
[url='#']Laufwerke[/url]
[url='#']Monitore[/url]
[url='#']Drucker[/url]
[url='#']Zubehör[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Leistungen</span>
<table><tr><td>
[url='#']Netzwerke[/url]
[url='#']Server[/url]
[url='#']Wartung[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Service</span>
<table><tr><td>
[url='#']Reparatur[/url]
[url='#']Konfiguration[/url]
[url='#']Software[/url]
[url='#']Schulung[/url]
</td></tr></table>
</a>
<a class="auss" href="#"><span class="menutag">Links</span>
<table><tr><td>
[url='#']About Us[/url]
[url='#']Partner[/url]
[url='#']Referenzen[/url]
</td></tr></table>
</a>
	</div>
<![endif]-->


</div>




++++++++++++++++++++
   CSS Teil I
++++++++++++++++++++


/*
	Menue-styles fuer non-IEs
	Achtung:
	Fuer non-IEs gilt das Stylesheet 'dropdown.css'!
	Fuer IE gilt das Stylesheet 'fix-ie.css' (per CC)!
*/


#menuebox {
position: relative;
height: 30px;
}
.stupidie {
display: none;
}
#menue {
position:absolute;
top: 5px;
left: 0;
z-index: 200;
}


#menue .aussen {
float: left;
display: block;
overflow: hidden;
width: 8em;
height: 1.3em;
font-weight: bold;
text-align: center;
background-color: #dec79a;
color: #513913;
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
#menue .aussen:hover {
height: auto;
background-color: #624617;
color: #fff;
}


a.innen-1 {
margin-top: 2px;
}
a.innen,
a.innen-1 {
display: block;
width: 7.9em;
padding: 2px 0;
text-decoration: none;
font-weight: normal;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.innen,
a:visited.innen-1 {
background-color: #ecd8ae;
color:#555;
}
a:hover.innen,
a:hover.innen-1 {
background-color: #f7eedb;
color: #900;
}


span.menutag {
display: block;
cursor: default;
}




++++++++++++++++++++
   CSS Teil II
++++++++++++++++++++


/*
	Menue-styles fuer IEs
	Am besten per Conditional Comment einbinden.
	Fuer IE5.5 und 5.0 muessen nur geringfuegige kosmetische
	Anpassungen vorgenommen werden (siehe Kommentare).
*/


#menue {
display:none;
}
.stupidie {
display: block;
position: absolute;
top: 5px;
left: 0;
z-index: 200;
}


a.auss {
float: left;
width: 8em;
height: 1.4em;
overflow: hidden;
display: block;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #dec79a;
color: #513913; 
border: 1px solid;
border-color: #d0843e #78561d #78561d #d0843e;
}
a:hover.auss {
overflow: visible;
background-color: #624617;
color: #fff;
}
a:hover.auss table {
display: block;
margin-top: 3px;
background-color: #dec79a;
color: #400;
border-collapse: collapse;
}


a.inn {
display: block;
width: 7.9em; /* fuer 5er IEs anpassen, sonst 'zuckt' es */
padding: 2px 0;
font-size: 100%; /* fuer 5er IEs auf 80% reduzieren */
font-weight: normal;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #78561d;
background-color: #ecd8ae;
color: #600;
}
a:visited.inn {
background-color: #ecd8ae;
color:#444;
}
a:hover.inn {
position: relative;
background-color: #f7eedb;
color: #900;
}
span.menutag {
display: block;
cursor: default;
}

Alles anzeigen

wie bekomm ich dieses menü horizontal in die mitte... habs mit <div align="center"> versucht, hat aber nicht wirklich gefunzt.
über dem menü soll ein banner und darunter der inhalt.

gruss

driver

versuchs mal mit text-align:center;

Dalle_112

muss dieser befehl in die css datei?
ich habs jetzt mal versucht, aber ich weiss nicht wo ich das reinschreiben soll... habs direkt in den divtag geschrieben, hat aber nicht funktioniert!

hilft es wenn ich aus aus dem <span> tag einen <div> tag mache?

gruss und danke für die schnelle antwort

K.Y.L.T.

du kannst es in die CSS schreiben, wenn du es direkt in die Div packst muss es aber

<div style="text-align:center;"> text </div> heißen

Dalle_112

naja, aber dann hab ich ja nicht das ganze menü in der mitte der seite, oder?
der text steht ja schon mittig in dem menü... ich möchte aber das ganze menü in die mitte haben. geht das überhaupt?

gruss

K.Y.L.T.

Zeig mal bitte den Link , weiß nicht genau ob ich da richtig liege was du meinst

Dalle_112

es gibt noch keinen link...
ich möchte das das menü nicht linksbündig ist, sondern immer in der mitte der seite steht... ich hab den abstand vom linken rand schon verschoben, nur ist es dann nicht dynamisch...

gruss

driver

mach mal im css so:

Code

#menuebox {
position: absolute;
left:50%;
margin:auto;
}

K.Y.L.T.

// EDI lol mist driver war schneller

DrunkenDX

ich mach bei diesem projekt mit...

leider hat das auch nicht funktioniert, oder wir haben was falsch gemacht...

hier der link: http://drunkendx.ohost.de/index.html

gruss

driver

Code

#menuebox {
position:absolute;
height:30px;
left:50%;
margin-left:-461px;
}

DrunkenDX

funzt auch net...

es soll egal bei welche grösse oder auflösung immer in der mitte sein, so wie wenn ich das banner ineinen div setze mit align:"center"...

gruss

driver

also bei mir klappt des so....

Dalle_112

Also ich habe das jetzt auch mal mit dem Code:

#menuebox {
position:absolute;
height:30px;
left:50%;
margin-left:-461px;
}

versucht aber es geht nicht er schieb mir die navi komplett nach links so das ich nur noch die hälfte der navi sehe!

driver

habt ich euch mal des von mir geholt und entpackt ?
geht des auch nicht ? was fürn browser verwendet ihr ?

Dalle_112

Doch das hatte ich gemacht und da ist die navi zentriert.
wir verwenden mozilla, ie, sea monkay.

aber ich hatte jetzt mal was anderes versucht: #menuebox {
position:absolute;
height:30px;
left:50%;
margin:center;
}
und jetzt ist die navi so wie bei dir auf dem bild mittig aber der banner nicht mehr, jetzt ist der banner linksbündig und ich bekomme ihn nicht mehr mittig

gruss

driver

hm.... dann musste beim banner auchmal des left:50% margin:center eingeben...

oder du machst um alles nen großen div und gibst es bei dem ein...

DrunkenDX

also das mit dem grossen div um alles hab ich auch schon versucht gehabt, ganz am anfang.. das hat auch net gefunzt, jedoch versteh ich da immernoch nicht warum das so net geht!

Tags