Text unten ausrichten in Navigationsleiste mit Bild

[VeaZea]

Hallo,

bei meiner neu erstellten Seite (das erste Mal mit CSS) habe ich zwei Probleme:

1.) Die Navigationsleiste soll ganz links beginnen. Damit der Text aber nicht ganz links an der Seite klebt, habe ich einen Abstand eingefügt, der jetzt aber auf der ganzen Seite sichtbar ist. Wie kann ich (nur) die Navigationsleiste ganz links positionieren?

2.) Der erste Punkt in der Navigationsleiste ist ein Bild, des bestimmt auch deren Höhe. Doch den Text (die anderen Menüpunkte) würde ich gerne am unteren Ende ausrichten. Mit text-align kam ich nicht weiter.

Ich hoffe, hier "Hilfe für Dummies" zu finden, also bitte für Anfänger erklären. Ganz, ganz herzlichen Dank!!!

Falls die Beschreibung schlecht ist und jemand die Seite sehen will, wenn man das hie nach www einfügt, sollte man dorthinkommen: vogelsberg-apotheke-schotten.de/indextest.html

Und ach ja, hier mein .ccs-Text:


body {
background-color: #FFFFCC;
margin-right: 60px;
margin-left: 60px;
}
h1 {
color: #336699;
font-style: normal;
font-size: 80px;
font-family: "Impuls BT"; trebuchet, arial, verdana, sans-

serif;
}
h2 {
color: #069;
font-style: normal;
font-weight: 90%;
font-size: 200%;
font-family: "Impuls BT", trebuchet, arial, verdana, sans-

serif;
}
p { font-style: normal;
font-weight: 100%;
font-size: 100%;
font-family: trebuchet, arial, sans-serif;
text-align: left;
letter-spacing: 0px;
}
a {
color: white;
text-decoration:none;
text-transform: capitalize;
}
a:hover {
color: black;
}
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding-top:8px;
padding-bottom:8px;

[toasted]

Hallo!

Da du den ganzen Body mit margin reinrückst, musst du das Navigations-div absolut positionieren:

Code: Alles auswählen

#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:absolute; top:0px; left:0px;
}

lg, Daniel

[toasted]

ps: Sorry, hatte die Textpositionierung vergessen

Auch die bekommst du mit folgenden argumenten hin:

Code: Alles auswählen

<font style="position:absolute; bottom:0px;">NAVIGATIONSTEXT</font>

[VeaZea]

Hallo Daniel,

vielen Dank, das Ausrichten der Navigationsleiste hat funktioniert. Mit dem Text darunter ist es nun allerdings so eine Sache.

Im html-Quelltext habe ich nach der Navigationsauflistung (</ul>) eingegeben:
<font style="position: absolute; bottom: 0px;">
--- dann kommt der Text und das Foto -
mit </font> vor </body> beendet

Der Text wird nun zwar unter der Navigationsleiste, doch dazwischen ist ein ziemlich großer Abstand. Ich hatte dann bottom: 140px eingegeben, dann sah es in Chrome und IE gut aus, doch in ragte der Text über die Navigationsleiste. Also habe ich es wieder auf 0px gesetzt, habe jetzt aber so viel Abstand dazwischen. Gibt es eine Lösung, wie ich das in allen Browsern kurz unter die Navigationsleiste positionieren kann (ohne static)?

Außerdem wundert mich, dass in Chrome und Firefox das Foto direkt neben dem Text erscheint und im IE erscheint das Foto am rechten Rand. Das stört mich jetzt weniger, doch kann man das auch einheitlich einstellen?

[VeaZea]

Hallo Daniel,

vielen Dank, das Ausrichten der Navigationsleiste hat funktioniert. Mit dem Text darunter ist es nun allerdings so eine Sache.

Im html-Quelltext habe ich nach der Navigationsauflistung (</ul>) eingegeben:
<font style="position: absolute; bottom: 0px;">
--- dann kommt der Text und das Foto -
mit </font> vor </body> beendet

Der Text wird nun zwar unter der Navigationsleiste, doch dazwischen ist ein ziemlich großer Abstand. Ich hatte dann bottom: 140px eingegeben, dann sah es in Chrome und IE gut aus, doch in Firefox ragte der Text über die Navigationsleiste. Also habe ich es wieder auf 0px gesetzt, habe jetzt aber so viel Abstand dazwischen. Gibt es eine Lösung, wie ich das in allen Browsern kurz unter die Navigationsleiste positionieren kann (ohne static)?

Außerdem wundert mich, dass in Chrome und Firefox das Foto direkt neben dem Text erscheint und im IE erscheint das Foto am rechten Rand. Das stört mich jetzt weniger, doch kann man das auch einheitlich einstellen?

In allen Browsern stimmen die Proportionen überhaupt nicht mehr, wenn ich mit Strg+ vergrößere oder Strg- verkleinere, es kommt z. B. auch zu Überlappungen. Kann man irgendwie einstellen, dass sich die Ansicht proportional vergrößert oder verkleinert?