Hilfe bei Umsetzung einer Navigation

[DarkLhykos]

Hallöchen,

ich habe in Photoshop eine kleine Navigation erstellt:



Nun soll diese in (x)HTML und CSS umgesetzt werden, dabei kommen mir auch schon die Probleme.
Das DropDown funktioniert super, wenn ich jetzt allerdings versuche das Menü weiter in die Mitte zu rücken, und den grünen Border hinzufüge funktioniert nichts mehr.


Würde mich über Hilfe freuen

Hier mal der bisherige Code:

<div id="nav">
<ul class="nav">

<li><a href="#">Startseite</a>

<ul>
<li><a href="#">Wilkommen</a></li>
<li><a href="#">Was machen wir ?</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</li>

<li><a href="#">Downloadbereich</a>
<ul>
<li><a href="#">Alle Downloads</a></li>
<li><a href="#">Top 10</a></li>
<li><a href="#">Suche</a></li>
</ul>
</li>

</ul>

</div>

#nav ul {
	padding:0;
	margin:0;
}


#nav li {
	float:left;
	width:9em;
	position: relative;
	list-style-type: none;
}

#nav li ul a {
	margin-left: 1em;
}

#nav li ul {
	left:-9999px;
	position:absolute;
}

#nav li:hover ul {
	left:auto;
}

#nav li:hover {
		background: #121212;
}

#nav a {
	color: #FFFFFF;
	text-decoration:none;
}

#nav {
	background: #1b1a1a;
	width: 830px;
	height: 40px;
	border: 1px solid #686666;
	margin: 5px auto;
}

 

[simonpicos]

AW: Hilfe bei Umsetzung einer Navigation

also wo willst du deinen border drumrummachen? ich verstehe deine probleme nicht so ganz...

 

[DarkLhykos]

AW: Hilfe bei Umsetzung einer Navigation

Hab das Bild jetzt hoch geladen, hatte es vergessen.
Der Border soll unter dem ersten <li> Element zu sehen sein, wenn ich das Menü aufklappe.

 

[simonpicos]

AW: Hilfe bei Umsetzung einer Navigation

#xyz{     border-top-width: 2px;
                         border-top-color: #dein grünton in hex-farbe;

 

[Myhar]

AW: Hilfe bei Umsetzung einer Navigation

Du musst nicht deinem ersten li sondern dem ul einen border-top geben:

#nav li:hover ul {
	left:auto; 
           border-top:1px solid green;
}

Was dein Problem mit dem in die Mitte rücken angeht: Kannst du das noch genauer formulieren? Ich habe das nicht verstanden.

L. G.

 

[DarkLhykos]

AW: Hilfe bei Umsetzung einer Navigation

Danke schon mal wegen dem Border

Soblad ich hier das Margin oder Padding ändere, verschiebt sich zwar das Menü, aber wenn ich in das DropDown Menü gehen will verschwindet es wieder.

#nav ul {
	padding:0;
	margin:0;
}

 

[simonpicos]

AW: Hilfe bei Umsetzung einer Navigation

Nimm das übergeordnetste Element und setz es auf den CSS-Code:

margin: auto;

Dann isses immer in der Mitte.

 

[DarkLhykos]

AW: Hilfe bei Umsetzung einer Navigation

Gut das mit der Mitte geht so, aber die Beiden <li> Elemente kleben noch so aneinander.
Sie sollen ja noch diesen Trennstrich bekommen und ca. 30px auseinander sein.
Das würde mich noch interessieren, also wie der Trennstrich hineinkommt ohne eine durchgezogene grüne Linie.


LG

 

[simonpicos]

AW: Hilfe bei Umsetzung einer Navigation

Also ich kapier nich ganz was du meinst, aber margin geht immer beim Außenabstand und padding beim Innenabstand

margin-left: xyz px;
padding-left: xyz px;

 

[DarkLhykos]

AW: Hilfe bei Umsetzung einer Navigation

Es geht mir darum, dass eine Art Div-Container in das DropDown hinein soll und genau da macht er das nicht mehr mit, der Grüne Border wird einfach mitgezogen (was nicht sein soll).

 

[Myhar]

AW: Hilfe bei Umsetzung einer Navigation

Dazu brauchst du keinen div Container. Du kannst <li> Tags genauso stylen wie ein <div>
Oder was ist der Sinn deines zusätzlichen markups?
Und ich weiß ehrlich gesagt noch immer nicht, was du genau erreichen willst. Es kann auch sein, dass du, abhängig von deinen designwünschen wirklich nicht um ein zusätzliches Element (vllt ein span) umhin kommst.
Der Abstand der li Elemente lässt sich so lösen:

li {margin:15px 0; } /*Dann gibt es nach oben und unten einen 15px abstand, was in Summe 30px ist*/

Was du mit der nicht durchgezogenen Linie meinst erschließt sich mir jedoch nicht.

L. G.