Menütext verschieben

[felis]

Ich habe eine Bitte:

Ich habe mir ein Menü gebastelt mit einer Grafik als Hintergrund für die Buttons (Rechteck mit abgerundeten Ecken)

Alles geht wunderbar: Der Menütext wird angezeigt und der Hintergrund für jeden Button auch, sogar der Hg für den Overeffekt geht (stolz auf mich )

Einziges Problem:
1. Mein Menüpunkt ist 60px hoch und der Text klebt am oberen Rand. Könnt ihr mir da weiterhelfen?

Wie spreche ich im css nur den Text an, ohne den Hg oder die ganze Navi zu verschieben???

2. Die Unterpunkte vom Menü sollen nicht so wie die Hauptpunkte zentriert sein sondern linksbündig. Das hab ich mit text-align:left; auch hinbekommen nur kleben die jetzt wieder ganz links und ich hätte sie gerne nur etwas eingerückt (2-3px oder so)

Ich hoffe sehr, dass ihr mir weiter helfen könnt!
Ein großes Danke schon im Vorraus!

[wildmieze]

zu 1)
Wenn alle Menüpunkte einzeilig sind, könnte line-height:60px; helfen.

zu 2)
müsste zB mit padding-left gehen.

Für genauere Antworten wäre Dein Code hilfreich, aber vielleicht reichen Dir ja die Stichworte zur Lösung der Probleme

[felis]

Hallo! Danke für Deine Antwort!

Ich poste mal was ich hab:

div id="navi">
<dl class="menu">
	<dt>
		<a href="unternehmen.html">Unternehmen</a>
	</dt>
    <dd>
        <a href="ueber.html">Über uns</a>
    </dd>
</dl>
<dl class="menu">
	<dt>
		<a href="unternehmen.html">Leistungen</a>

	</dt>
	<dd>
		<a href="l_unternehmen.html">Unternehmen</a>
		<a href="test.html">test</a>
		<a href="test2.html">Beschreibung</a>
		<a href="test3.html">test</a>
	</dd>
</dl>
<dl class="menu">
	<dt>
		<a href="neues.html">News</a>
	</dt>
</dl>

<dl class="menu">
	<dt>
		<a href="downloads.html">Downloads</a>
	</dt>
</dl>
<dl class="menu">
	<dt>
		<a href="kontakt.html">Kontakt</a>
	</dt>
</dl>

         </div>
<!-- Ende navibereich -->

Css:

a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}

 #positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;}
 #holder {position:absolute; width:150px; overflow:hidden; border:5px solid #000;}
 dl.menu {width:300px; float:left; margin:-32700px -150px 0 0;}
 dl.menu a {display:block; height:30px; color:#fff; font:normal 11px/28px verdana, sans-serif; text-decoration:none; text-align:center;}
/* Menü erste Ebene */
 dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;}
 dl.menu dt a {background-image:url(images/hgnavi.jpg); background-repeat:no-repeat; width:150px; height:60px; font-size:18px;  }
 dl.menu dt a:hover,
 dl.menu dt a:focus,
 dl.menu dt a:active
 {margin-right:1px; background-image:url(images/hgnaviover.jpg); background-repeat:no-repeat; font-size:18px;}

/* Untermenü */
 dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10;  }
 dl.menu dd a {background-image:url(images/hgup.jpg); background-repeat:no-repeat; width:150px; text-align:left; font-weight:bold; padding-left: 10px;}

 dl.menu dd a:hover,
 dl.menu dd a:focus,
 dl.menu dd a:active
 {margin-right:1px; background-image:url(images/hgupover.jpg); background-repeat:no-repeat; color:#ffffff; font-weight: bold;}
</style>

DAS MIT DEM PADDLING HAT FUNKTIONIERT! DANKE!
Aber wo muß das mit der line hight hin?

[wildmieze]

vermutlich musses hier mit rein.. einfach mal ausprobieren:

dl.menu dt a {background-image:url(images/hgnavi.jpg); background-repeat:no-repeat; width:150px; height:60px; font-size:18px; }

[felis]

vielen Dank! Das war genau richtig! Ich versuche immer noch das Menü zu verstehen! Jetzt bin ich einen Schritt weiter! Ich dachte ich muß den Text direkt be3schreiben mit text-...irgendwas. Drum war ich ganz auf dem Holzweg!

Nochmal vielen Dank!

[wildmieze]

gern geschehen

.. und so ganz verstehe ich dein Menu auch nicht *g* .. ich frage mich gerade, warum mein Nachbar dl.menu sehen soll - da komme ich mit einem Negativ-Margin von 32700 Pixeln nämlich ungefähr an *lach* .. aber seis drum, hauptsache, es funktioniert

[felis]

Hm, ok, jetzt hab ich ein anderes Problem, sobald ich das mit dem paddling einfüge sind plötzlich alle menüpunkte aufgeklapt und sichtbar,.

Das gleiche passiert wenn ich versuche die Menüpunte breiter zu machen.

[wildmieze]

Hmm .. merkwürdig ... beim padding könntest Du stattdessen versuchen, es hier einzufügen:

dl.menu dd {float:left; padding:30px 0 0 0;

beim padding die letzte Null - das ist links. Ob das jetzt hier den gewünschten Effekt hat, weiß ich auch nicht so genau .. aber probieren schadet ja nicht^^

[felis]

Das hat leider den selben Effekt.
Sobald ich irgendwas an Größen und Abständen ändere ist sofort alles sichtbar

Wie kann es das geben, dass ich den Menüpunkt z.B. nicht von 150px in 160px ändern kann?

[hero-master]

Hi
wenn du links einzeilig einen Abstand haben willst, dann kannst du auch mit text-indent arbeiten.
Wobei ich nicht der Ansicht bin, dass eine Definitionsliste für ein Menu geeignet ist! Ich weiß, wahrscheinlich hast du das von STu Nicols oder ähnlichen Seiten, aber es macht imho mehr Sinn mit unordered lists zu arbeiten, da du hier ja z.B. nicht das "Unternehmen" definierst, sondern es lediglich aufgliederst...

Hol dir doch mal ein anderes Menu, mit Listen wirds dann auch einfacher

[schollsen]

Ich find die Definitionsliste vollkommen in Ordnung.
Letztendlich empfinde ich einen Grundaufbau per dl semantischer,
als z.B. ein UL-Konstrukt mit Überschriften als Gliederung.
Bei der DL Variante besteht mehr Bezug.

Hier mal ein Beispiel

[hero-master]

Letztendlich empfinde ich einen Grundaufbau per dl semantischer,
als z.B. ein UL-Konstrukt mit Überschriften als Gliederung.

Darüber kann man wohl noch länger diskutieren (gehört ja auch nicht hier rein), ich bleibe bei meiner Sicht, da der Menupunkt ja nicht wirklich beschrieben wird, sondern nur aufgegliedert:

1. Menupunkt
1.1. Untermenupunkt 1
1.2. Untermenupunkt 2
1.3. Untermenupunkt 3
1.4. Untermenupunkt 4
2. Menupunkt
2.1. Untermenupunkt 1
2.2. Untermenupunkt 2
2.3. Untermenupunkt 3

Mehr Bezug dazu sehe ich bei deinem Beispiel nicht wirklich...
Aber im Zuge der neuen Forenstruktur, können wir doch gerne mal eine Diskussionsrunde starten, was so das TP darüber denkt

[felis]

Hm, also text-indent bewirkt gar nix,......die Menüpunkte stehen an der selben stelle.

padding-left rückt mir den Text an die richtige Stelle aber dann sind plötzlich alle Menüpunkte sichtbar = aufgeklappt (auch die UPs)

Ich würde gerne den Aufbau dieses Menüs etwas besser verstehen

Wofür sind diese beiden Zeilen:

#positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;}
 #holder {position:absolute; width:150px; overflow:hidden; border:5px solid #000;}

Und wo kann ich die Menüpunkte größer (breite) machen???