CSS Menü verschieben funktioniert nicht so recht & Probleme mit IE Workaround

Razer2k · 11.05.2008, 15:20

Hiho Leute,
ich bin gerade dabei mir eine kleine Homepage zusammen zu basteln, mit HTML kenne ich mich 'gut' aus.

Was CSS betrifft bin ich dabei es mir anzueignen.
Nun bin ich hier im Forum auf ein echt schönes CSS Dropdownmenü gestoßen undzwar dieses.
Ich habe es soweit meinen Wünschen angepasst, allerdings habe ich noch ein paar Probleme.

Zuersteinmal habe ich die Seite hier schonmal hochgeladen damit ihr sie euch anschauen könnt : *klick* und hier die CSS-Datei *klick*

So nun weiter, das Menü soll eigentlich in der Mitte der Seite zentriert werden und es soll ebenfalls noch ein klein wenig nach unten verschoben werden, allerdings habe ich das bisher noch nicht hinbekommen.

Der Code scheint mir generell etwas komisch zu sein, viele Befehle kann man verändern und sie bewirken nichts, was ich nicht ganz verstehe.

Das zweite und letzte Problem betrifft den Internet Explorer, denn dort funktioniert das Menü überhaupt nicht......wie muss ich da vorgehen ?

MfG Razer

Singal · 11.05.2008, 15:50

Ein echtes PHP-Problem ist das aber nicht, oder?

Zum Problem: Naja, die Seite macht das, was Du ihr sagst - es steht ja nirgends, dass das Menü zentriert werden soll...

Füge Deinem DIV "menu" folgende Formatierung in der CSS-Datei hinzu:

HTML-Code:

body {
	text-align:center;
	}

#menu {
	width:800px;
	margin:0 auto;
	}

In der HTML-Datei selbst von Dir liegt auch noch ein Fehler: Die Liste am Anfang wird am Ende nicht mehr geschlossen - ebenfalls fehlt ein abschließendes </div>.

Hoffe, Dir helfen zu können.

Rizzo · 11.05.2008, 16:17

Zitat:

Zitat von Singal

Ein echtes PHP-Problem ist das aber nicht, oder?

Eben, deswegen wird es mal in's CSS Forum geschubst.

Boris · 11.05.2008, 16:52

Ohne Doctype wirst du im übrigen auf wesentlich mehr Fehler kommen mit dem IE, also besser das gleich auch mal nach.

@Signal:
Man zentriert keine Blockelemente mit text-align: center - das geht im IE6 nur, wenn dieser sich im Quirks Modus befindet (was dieser mit einem ordentlichen Doctype dann nicht ist).

Razer2k · 11.05.2008, 19:00

Japp sorry das mit den schließenden Befehlen stimmt, weil ich die Seite hier vereinfacht als Beispiel darstellen wollte, ohne den kompletten Inhalt.

@ Signal :

Also so ?

Zitat:

HTML-Code:

body {
text-align:center;
}

#menu {
width:800px;
margin:0 auto;
}

ul.dropdown * ul {
list-style: none;
margin:0px;
padding:0px;
display:none;
position:absolute;
}

ul.dropdown li {
list-style:none;
float:left;
font-weight:bold;
padding:2px;
}

ul.dropdown li * li {
float:none;
background-color:black;
font-size:10px;
font-weight:normal;
border-left:3px solid #cfcfcf;
position: relative;
}

ul.dropdown ul * ul {
left:98%;
top:0;
width:100%;
}

ul.dropdown a {
display:block;
}

ul.dropdown ul * a {
width:15em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
display:block;
}

#nav {
font:10px verdana;
background-color:#f9f9f9;
}

#nav a {
color:FF7F00;
padding:3px;
text-decoration:none;
}

#nav a:hover {
background-color:CCCCCC;
color:#000;
}

#nav a.is_blind {
color:#cfcfcf;
}

#nav a.is_blind:hover {
color:#cfcfcf;
}

#nav ul {
background-color:#fff;
border:1px solid #999;
}

Allerdings funktioniert die Seite dann nicht mehr so recht : *klick*

zulujaner · 11.05.2008, 19:30

probier das mal so.

HTML-Code:

<!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>
			<title>Test HP</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<meta http-equiv="content-style-type" content="text/css">
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<script src="js/js.js" type="text/javascript"></script>
		<script type="text/javascript"></script>

	</head>
	
	<body bgcolor="black"> 
		<br><br /><center><img src="logo.png"></img></center>
		
		<div id="menu">
		<ul id="nav" class="dropdown" style="padding:0;margin:0;">
			<li><a href="">Start </a></li>
			<li><a href="">Games</a>

				<ul>
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>

					<li><a href="">6</a></li>
					<li><a href="">7</a></li>
					<li><a href="">8</a></li>
				</ul>
			</li>
			<li><a href="">Books</a>
				<ul>

					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
				</ul>

			</li>
			<li><a href="">Comics</a>
				<ul>
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>

					<li><a href="">5</a></li>
					<li><a href="">6</a></li>
					<li><a href="">7</a></li>
					<li><a href="">8</a></li>
				</ul>
			</li>
			<li><a href="">Guestbook</a></li>

			<li><a href="">Links</a></li>
		</ul>
		</div>
	</body>
</html>

und das CSS für das Menü so:
Dein zitierten CSS Code für body und menu löschen

HTML-Code:

#menu {

	position: absolute; 
	width:800px;
	left:50%;
	margin-left:-400px;
	margin-top:100px;
	float:none;
	background-color:yellow;
	font-size:10px;
	font-weight:normal;
	border:1px solid #cfcfcf;
}

funktioniert bei mir mit Mozilla und dem IE7

Auch die anderen Beiträge lesen! Kann nicht schaden. Probier mal deine Seite mit Doctype (ganz oben im Quelltext beim html tag) und ohne... völlig verschiedene Ausgaben...

Razer2k · 11.05.2008, 19:37

Hm...
schaut bei mir so aus :

Das Menü an sich soll nicht verändert werden wenns geht

zulujaner · 11.05.2008, 19:44

na schön ist das nicht

Hab im Moment kein Opera drauf - werde das gleich mal nachholen...

bis später.

zulujaner · 11.05.2008, 19:50

nun bei mir siehts so aus in Opera:

Hier nochmal der komplette css Code:

HTML-Code:

#menu {

	position: absolute; 
	width:800px;
	left:50%;
	margin-left:-400px;
	margin-top:100px;
	float:none;
	background-color:yellow;
	font-size:10px;
	font-weight:normal;
	border:1px solid #cfcfcf;
}

ul.dropdown * ul {
	list-style: none;
	margin:0px;
	padding:0px;
	display:none;
	position:absolute;
}

ul.dropdown li {
	list-style:none;
	float:left;	
	font-weight:bold;
    padding:2px;
}

ul.dropdown li * li {
	float:none;
	background-color:black;
	font-size:10px;
	font-weight:normal;
	border-left:3px solid #cfcfcf;
	position: relative;   
}

ul.dropdown ul * ul {
	left:98%;
	top:0;
	width:100%;
}

ul.dropdown a {
	display:block;
}


ul.dropdown ul * a {
	width:15em;
}

ul.dropdown li:hover ul ul, ul.dropdown li:hover ul ul ul, ul.dropdown li:hover ul ul ul ul {
	display:none;
}

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul ul li:hover ul {
	display:block;
} 



#nav {
	font:10px verdana;
    	background-color:#f9f9f9;
}

#nav a {
	color:FF7F00;
	padding:3px;
	text-decoration:none;
}

#nav a:hover {
	background-color:CCCCCC;
	color:#000;
}

#nav a.is_blind {
	color:#cfcfcf;
}

#nav a.is_blind:hover {
	color:#cfcfcf;
}

#nav ul {
	background-color:#fff;
	border:1px solid #999;
}

Razer2k · 11.05.2008, 19:57

Ja nun funktioniert es wunderbar

Besten dank an euch

Singal · 11.05.2008, 21:54

@Boris: Wo hab ich das denn gemacht? Ist es denn dann auf der CSS4You-Seite auch falsch?

Razer2k · 11.05.2008, 22:40

Komisch diese style.css funktioniert im IE diese allerdings nicht oO ?

zulujaner · 11.05.2008, 22:56

bei der Ausrichtung des Menu Containers kommt ein kleiner Trick zum Einsatz.

HTML-Code:

#menu {

	position: absolute; 
	width:800px;
	left:50%;
	margin-left:-400px;
	margin-top:100px;

width 800px gibt die Breite an. Left:50% sagt dem Container das seine Linke Seite er in der Mitte des Browserfensters anfangen soll(Zentriert eben) damit aber der Ganze Container Zentriert ist wird er wieder um seine halbe Breite mit margin-left: -400px ins minus(nach links) gerutscht.

Die Container Breite und der Margin-left Wert müssen als immier zusammen geändert werden.

800px - 400px
500px - 250px

bei deinem Beispiel margin-left:330px;

660px - 330px

Verstanden?

Das hat zur folge das dein Menü bei jeder Fenstergröße in der Mitte sitzt.
Das verwendet man sonst auch um eine ganze Seite zu Zentrieren.
Dieser Weg funktioniert auch vertikal. So kannst du einen Container horizontal und vertikal, zentriert, auf der Seite ausrichten

Dann viel Spaß...

Boris · 11.05.2008, 23:16

Zitat:

Zitat von Singal

@Boris: Wo hab ich das denn gemacht? Ist es denn dann auf der CSS4You-Seite auch falsch?

Jein, aber da steht auch:

Zitat:

Leider funktioniert das nicht beim Internet Explorer 5 und 5.5. Dieser zentriert <div>-Container mit text-align, obwohl diese Eigenschaft nicht dafür vorgesehen ist.

Ich sprach nie vom IE5 oder 5.5 ... vieeel zu alt.

Razer2k · 11.05.2008, 23:41

@ zulujaner :

Jap kapiert, bringt aber trotzdem nichts der IE streickt weiterhin