Menubar wird nicht richtig positioniert

[Crizzo]

Für eine gute Hilfe, wäre es doch ganz gut, wenn du eine aussagekräftige Problembeschreibung posten würdest, oder?

[lokalbook]

Hey,

sorry jo ist ein bisschen wenig gewesen war aber zu diesem Zeitpunkt noch mit dem Handy online, ich habe noch das Problem mit der Menubar und zwar mit dem Anpassen der Menubar ob du mir da helfen kannst damit das sauber dargestellt wird nebeneinander:

Link: http://www.lokalbook.de/lokalbook

Damit es so aussieht, die Länge ist egal wenn diese Menubar ein bisschen länger ist als der gesamte Header die kann ich selbst noch anpassen:

Nur mit Paint zusammengebastelt: http://lokalbook.de/divbug.png

Danke, Gruß Tobi

[Crizzo]

Deine Elemente sind überhaupt nicht gruppiert, nicht gefloatet. Deshalb ordnen sie sich in den normalen Fluss ein, wenn du das "position:absolute" wegnimmst. Und der ist bei "block"-Elementen, was Divs nun mal sind: untereinander.

Jetzt machst du folgendes, du nimmst deinen ganzen Menubuttons das Div und position, left und top weg und packst sie alle in eine Liste.

Code: Alles auswählen

<ul>
<li>Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
</ul>

Danach liest du bitte hier: http://xhtmlforum.de/40267-faq-h-ufig-g ... html#faq15 Dann weißt du, wie du es so hinbekommst, damit es funktioniert und gut aussieht.

[lokalbook]

Code: Alles auswählen

<ul id="navigation">
<li id="id01-lay-giga-home-13"><strong>Testmenu 1<span></span></strong></li>
<li id="id01-lay-giga-home-14"><a href="#">Testmenu 2<span></span></a></li>
<li id="id01-lay-giga-home-21"><a href="#">Testmenu 3<span></span></a></li>
<li id="id01-lay-giga-home-22"><a href="#">Testmenu 4<span></span></a></li>
<li id="id01-lay-giga-home-23"><a href="#">Testmenu 5<span></span></a></li>
<li id="neue-server-generation"><a href="#">Testmenu 6<span></span></a></li>
</ul>

Code: Alles auswählen

* {
	margin: 0;
	padding: 0;
	}

#navi {
	list-style: none;
	float: left;
	width: 100%;
	}

#navi li {
	float: left;
	width: 50px;
	}

#navi #id01-lay-giga-home-13 {
	width: 60px;
	}


#navi #id01-lay-giga-home-14 {
	width: 60px;
	}

#navi #id01-lay-giga-home-21 {
	width: 60px;
	}

#navi #id01-lay-giga-home-22 {
	width: 60px;
	}

#navi #id01-lay-giga-home-23 {
	width: 60px;
	}

#navi #neue-server-generation {
	width: 60px;
	}

#navi a,
#navi strong {
	display: block;
	height: 30px;
	width: 100%;
	position: relative;
	overflow: hidden;
	}
	
#navi span {
	position: absolute;
	width: 100%;
	height: 30px;
	top: 0;
	left: 0;
	background: url(navi.png);
	}

#navi #home a span {
	background-position: 0 0;
	}

#navi #home a:hover span,
#navi #home strong span {
	background-position: 0 -30px;
	}

Weiter weiß ich leider nicht hab nicht eine gesamte Grafik hab für jeden Balken eine eigene Grafik Beispiel menupunk1.png, menupunkt2.jpg

Gruß Tobi

[Crizzo]

Achtung, du hast eine falsche ID vergeben. Im HTML-Code heißt es id="navigation" und im CSS nur #navi. Das muss schon einheitlich sein.


Du hast schon jedem <li> eine ID gegeben. Da kannst du dem jetzt ganz einfach dem <span> die Grafik als Hintergrund geben. Sieht dann z.B. so aus:

Code: Alles auswählen

#id01-lay-giga-home-13 span {
	background: url(menupunk1.png);
	}
/* Das muss natürlich auch jeder haben: */
#navi li span {
position: absolute;
	width: 100%;
	height: 30px; 
	top: 0;
	left: 0;
}

Höhe und so musst du natürlich anpassen. Am besten wäre es halt, wenn der Button für den normalen Modus und MouseOverModus die gleiche Grafik hätte und man sie nur verschiebt. Dann hat man nicht so ein Nachladeruckler, wenn der User mit der Maus drüber geht.

Statt hier das so oft zu schreiben:

Code: Alles auswählen

#navi #id01-lay-giga-home-13 {
   width: 60px;
   }


#navi #id01-lay-giga-home-14 {
   width: 60px;
   }

#navi #id01-lay-giga-home-21 {
   width: 60px;
   }

#navi #id01-lay-giga-home-22 {
   width: 60px;
   }

#navi #id01-lay-giga-home-23 {
   width: 60px;
   }

#navi #neue-server-generation {
   width: 60px;
   }

mach doch einfach

Code: Alles auswählen

#navi li {
width: 60px; 
}

PS: Hast du eigentlich mal ein Buch zu CSS gelesen?

[lokalbook]

Buch habe ich mir noch keines zugelegt.

Ich hab den PHP Code jetzt so:

Code: Alles auswählen

<ul id="navi">
<li id="id01-lay-giga-home-13"><strong>Testmenu 1<span></span></strong></li>
<li id="id01-lay-giga-home-14"><a href="#">Testmenu 2<span></span></a></li>
<li id="id01-lay-giga-home-21"><a href="#">Testmenu 3<span></span></a></li>
<li id="id01-lay-giga-home-22"><a href="#">Testmenu 4<span></span></a></li>
<li id="id01-lay-giga-home-23"><a href="#">Testmenu 5<span></span></a></li>
<li id="neue-server-generation"><a href="#">Testmenu 6<span></span></a></li>
</ul>

CSS Code:

Code: Alles auswählen

#id01-lay-giga-home-13 span {
   background: url(menupunk1.png);
   }

#id01-lay-giga-home-14 span {
   background: url(menupunk2.png);
   }

#id01-lay-giga-home-21 span {
   background: url(menupunk3.png);
   }

#id01-lay-giga-home-22 span {
   background: url(menupunk4.png);
   }

#id01-lay-giga-home-23 span {
   background: url(menupunk5.png);
   }

#neue-server-generation {
   background: url(menupunk6.png);
   }

#navi li span {
position: absolute;
   width: 100%;
   height: 30px; 
   top: 0;
   left: 0;
}

Passt das so? Da muss ich ja nur noch die Höhe der Grafiken anpassen sonst nichts, oder? Und ich habe noch den Effekt darunter, das beim drüber fahren eine andere Grafikfarbe kommt bsp: http://lokalbook.de/lokalbook/hp/menuba ... osting.gif

Danke Gruß Tobi

[Crizzo]

Ob das so passt siehst du doch, wenn du es auf deiner Website einbaust.

@Effekt beim Maus drüber fahren.

Das machst du ganz einfach per background-position.

Sieht dann z.B. so aus:

Code: Alles auswählen

/* Standard: blauer Teil sichtbar */
#id01-lay-giga-home-13 span {
   background-image: url(menupunk1.png);
background-position: left top ; 
   }
/* Und jetzt mit Maus drüber, schiebt es das orangefarbene in den Focus */
#id01-lay-giga-home-13 a:hover span {
   background-image: url(menupunk1.png);
background-position: left bottom ; 
   }

Einfach mal probieren. Die "width" und "height" Angabe müssen natürlich für deine Buttons auf 174px respektive 49px sein.
Also bei #navi span die Höhe ändern und bei

Code: Alles auswählen

#navi #id01-lay-giga-home-14 {
   width: 60px;
   }

die Breite. Nicht die 100% Angabe löschen!

[lokalbook]

Hallo,

das mit dem drüber fahren das eine andere Color kommt hab ich noch nicht eingebaut, ich steck da jetzt noch fest was ist daran falsch:

http://lokalbook.de/lokalbook/

Und die ganzen Menupunkte sind ja nicht nötig die stehen auf der Grafik drauf:
•Testmenu 1•Testmenu 2•Testmenu 3•Testmenu 4•Testmenu 5...

Danke Gruß

[Crizzo]

Hallo,

das mit dem drüber fahren das eine andere Color kommt hab ich noch nicht eingebaut, ich steck da jetzt noch fest was ist daran falsch:

Fast der komplette CSS-Code für die Navigation fehlt, der ist immer noch nicht da.

Und die ganzen Menupunkte sind ja nicht nötig die stehen auf der Grafik drauf:
•Testmenu 1•Testmenu 2•Testmenu 3•Testmenu 4•Testmenu 5...

Nein, die sind nicht unnötig. Stehen lassen. Nicht jeder surft mit eingeschalteten Grafiken und Co. Google kann auch keine Grafiken lesen.

[lokalbook]

kannst du mir helfen den css code für die menubar zusammenzuschreiben blick da nicht ganz durch auch nicht wegen den 5 Menupunkten wie verschwinden die dann quasi das man nur die Grafik sieht?