Antworten auf deine Fragen:
Neues Thema erstellen

Hilfe bei Umsetzung einer Navigation

DarkLhykos

Designer

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:

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>

Code:
#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;
}
 
Zuletzt bearbeitet:

simonpicos

Mod | Forum

AW: Hilfe bei Umsetzung einer Navigation

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

DarkLhykos

Designer

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.
 

Myhar

Hat es drauf

AW: Hilfe bei Umsetzung einer Navigation

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

HTML:
#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

Designer

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.

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

simonpicos

Mod | Forum

AW: Hilfe bei Umsetzung einer Navigation

Nimm das übergeordnetste Element und setz es auf den CSS-Code:
HTML:
margin: auto;
Dann isses immer in der Mitte.
 

DarkLhykos

Designer

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

Mod | Forum

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
HTML:
margin-left: xyz px;
padding-left: xyz px;
 

DarkLhykos

Designer

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

Hat es drauf

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:
HTML:
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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben