Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Einfache Bearbeitung der Menubar...“

Jonas800

Newbie

Hallo zusammen

Für mein erstes Projekt mit Dreamweaver CS4 möchte ich meine Menubar (besteht nicht aus aufklappbaren Elementen, sondern ist eine einfache Navigationsleiste) bearbeiten. Erstellt ist sie also schon:

Bild 1

Jetzt möchte ich diese ein wenig bearbeiten:
- Alles soll auf eine Zeile
- Die Schrift soll kleiner werden
- Der Text soll zentriert werden
- Die Menüpunkte sollten einen grauen Farbverlauf haben (unten dünkler, oben heller), wenn die Maus nicht darüberfährt
- Die Menüpunkte sollten einen farbigen Farbverlauf haben, sobald sich die Maus auf einem Menüpunkt befindet.

Im Buch "Adobe Dreamweaver CS4 - Der praktische Einstieg" von 'Hussein Morsy wird beschrieben, wie man solche Menüleisten gestaltet - und zwar wie folgt:

"Sie sollten nun die CSS-Klassen der Datei SpryMenuBarHorizontal.css sehen.

> Innenabstände ändern:
Doppelklicken Sie auf die CSS-Regel ul.MenuBarHorizontal und deaktivieren Sie in der Kategorie Box unter Margin (Rand) die Checkbos für alle gleich. Geben Sie anschliessend folgendes ein:
[...]

> Hintergrundfarbe entfernen
Für die Hintergrundfarbe ist die CSS-Regel ul.MenuBarHorizontala zuständig. Klicken sie doppelt auf diese Regel und entfernen Sie den Farbcode im Feld Background-Color in der Kategorie Hintergrund. Klicken Sie anschliessend auf OK."
Näher wird auf die Bearbeitung nicht eingegangen.

Bei mir sehen ja die CSS-Stile für die Menubar so aus:

Bild 2

>> Woher weiss ich aber, welches dieser Punkte ich auswählen muss, damit ich die oben genannten Designvorstellungen erreiche?
>> Wie gelange ich zu den oben genannten Designvorstellungen?
>> Egal auf welchen Stil (siehe zweites Bild) ich klicke, es öffnet sich immer folgendes Fenster (siehe drittes Bild). Woher weiss ich, bei welchem Stil ich welche dieser Möglichkeiten (Hintergrund, Box,...) ich auswählen muss, damit ich eine bestimmte Veränderung bewirken kann?


Bild 3

Ich hoffe, ihr könnt mir helfen.

Gruss Jonas
 

AW: Einfache Bearbeitung der Menubar...

Du solltest dich eventuell mall mit den Grundlagen befassen, Bild 2 und Bild 3 sind identische Angaben, nur andere Bedienoberfläche.
Klicke in Bild 3 auf Hintergrund und du kannst die Hintergrundfarbe ändern......
 

Jonas800

Newbie

AW: Einfache Bearbeitung der Menubar...

Nochmals:

Egal, ob ich ul.MenuBarHorizontal (siehe Bild 2, erster Punkt in der Auflistung) oder ul.MenuBarActive (siehe Bild 2, zweiter Punkt), oder ul.MenuBarHorizontal li (siehe Bild 2, dritter Punkt), etc. etc. auswähle, es erscheint immer das gleiche Fenster (Bild 3).
In der Layout.css erscheint eine ähnliche Auflistung. Klicke ich dort auf body, so erscheint das Fenster (Bild 3), klicke ich auf ...#footer so erscheint das gleiche Fenster, hat aber andere Auswirkungen in einem anderen Bereich.
Beachte, dass ich auf Bild 2 nur den oberen Bereich, also unter "Alle Regeln" und NICHT den unteren Bereich, also unter "Eigenschaften für..."! Das war mir schon klar, das der untere Bereich dasselbe ist wie Bild 2, einfach anders gestaltet!

Klicke in Bild 3 auf Hintergrund und du kannst die Hintergrundfarbe ändern......
Jetzt habe ich soeben herausgefunden, wie ich es anstellen kann.

Dennoch bleibt die Frage offen:
>> Wie erkenne ich welche Regel ich für welche Veränderung nehmen muss. Mit "ul.MenuBarHorizontala" verändere ich beispielsweise den Hintergrund der einzelnen Menüpunkte - wie kann man das aus dem Namen "ul.MenuBarHorizontala" herauslesen? Einfach durch ausprobieren?

Gruss Jonas

Okay, hab es jetzt geschafft, dass der Text in der Mitte ist, dass der Hintergrund einen Farbverlauf hat bzw. einen farbigen Farbverlauf bei Mauskontakt (Mouseover) und dass die Menüpunkte sich automatisch der Textlänge anpassen. Jetzt muss ich nur noch die gesamte Menubar in die Mitte (center) verschieben
zwinker.gif
- ich probiers noch weiter aus.

Gruss Jonas

EDIT: habe "default" bei der Weite der einzelnen Menüpunkte eingegeben. So passt sich die Breite der Menüpunkte dem Menütext an. Bei der Benutzeroberfläche (doppelklick auf die Regel) kommt jedoch die Meldung: "default ist kein Standardwert für diese CSS-Eigenschaft - Trotzdem verwenden" und dann kann man zwischen JA und NEIN auswählen. Ich mache natürlich jedes Mal "Ja", schliesslich funktioniert es ja, oder wird es dann im Browser falsch dargestellt?
 
Zuletzt bearbeitet von einem Moderator:

Jonas800

Newbie

AW: Einfache Bearbeitung der Menubar...

Ich führe gerade Selbstgespräche :). Nein, ich möchte nur mitteilen, dass ich jetzt eigentlich alles selbst bearbeiten konnte.

Unter ul.MenuBarHorizontal li konnte ich bei folgenden Punkten folgendes Ergebnis erzielen:

Block
>> Text-align = center
Verschiebt den Text in die Mitte eines Menüpunktes

Box
>> With = auto
Positioniert den Text eines Menüpunktes in die Mitte des Buttons
>> Padding Right = 2px
Rechts neben jedem Menüpunkt erscheint ein kleiner Abstand (so kann man die einzelnen Buttons besser unterscheiden)

Positionierung
>> Placement Left = [Anzahl Pixel]px
Damit lässt sich die gesamte Menubar nach links verschieben. Damit kann man die gesamte Menubar in die Mitte der Seite verschieben.

Beachtet:
- Dies ist eine Aufstellung über meine Aktionen mit entsprechendem Resultat
- Diese Aufstellung dient jenen Nutzern, die die gleiche Fragestellung haben. Nutzer mit den gleichen Fragen können diese Aufstellung als möglichen Ansatz für ihr Problem verwenden
- Ausserdem dient diese Aufstellung jenen Usern, die bessere Tipps für mich hätten. Mit den obigen Einstellungen habe ich meine Vorstellung erreicht, aber möglicherweise gäbe es auch bessere Wege
- Wichtig: Speichert sicherheitshalber die Datei zuerst, bevor ihr die obigen Einstellungen in etwa anwendet. Bei mir hat es funktioniert, ob es überall funktioniert, kann ich leider nicht sagen.

Gruss Jonas
 

Jonas800

Newbie

AW: Einfache Bearbeitung der Menubar...

Okay.. doch noch etwas:

Ich möchte ja die gesamte Menübar in der Mitte haben, jedoch kann ich das nie so wirklich genau hinkriegen, weil in der Entwurfansicht die Menubar an einer völlig anderen Position ist wie im Browser (bzw. in der Live-Ansicht).

Entwurf:


Live-Ansicht:


Alles in allem gefällt mir die Live-Ansicht sowieso nicht: die Schrift ist zu etwas zu dick (in der Entwurfansicht ist möglicherweise die Schrift etwas unscharf, dies liegt jedoch am Bild. Im Original ist die Schrift scharf und dünn).
Weiter ist die Menubar in der Live-Ansicht immer etwas verschoben..

>> Wie kann ich also die Menubar exakt in die Mitte platzieren?
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben