CSS Am Bottom ausrichten

Dikra

http://www.mgc-metzingen.de/krebenstueble/index.php

Ich möchte, dass der orange Strich links unter der Navigation ganz nach unten kommt, also dass darunter kein grün mehr zu sehen ist. Leider bekomme ich das nicht hin.

Code

<div id="navi">




[img]bilder/logo.jpg[/img]


<div id="links">






<span class="navi">[url='restaurant.htm']&raquo; Restaurant / Weinstube[/url]</span>
<span class="navi">[url='speisen/index.htm']&raquo; Speisekarte[/url]</span>
<span class="navi">[url='wein/index.htm']&raquo; Weinkarte[/url]</span>


<span class="navi">[url='partyservice/index.htm']&raquo; Partyservice[/url]</span>
</p>










<span class="navi">[url='veranstaltungen.htm']&raquo; Veranstaltungskalender[/url]</span>
<span class="navi">[url='galerie/index.htm']&raquo; Bildergalerien[/url]</span>
</p>










[b]&Ouml;ffnungszeiten:[/b]




Di. - Fr. ab 17.00 Uhr, 


Sa. + So. ab 11.00 Uhr


Mo. Ruhetag






[b]Fr&uuml;hjahr bis Herbst


ab 11.00 Uhr 


ohne Ruhetag






[b]Tel. (0 71 51) 4 42 36[/b]


</p>
</div>
<div style="margin:auto 0 0 0;padding:0 0 0 0;">
[img]bilder/bg_navi_end.gif[/img]
</div>
</div>

Alles anzeigen

Hier noch der Ausschnitt aus der CSS:

Code

#navi {
position: fixed;
top: 0px;left: 0;height: 700px; width:310px;
background-image: url(bilder/bg_navi.gif);
float: left;
}
#links {
margin: 0 80px 0 90px;
font-family: Arial, Helvetica, serif;
font-size:11px;
color:#fff;
}
.navi {
display: block;
height:19px;
margin-top:4px;
border-bottom:1px solid #fff;
}

Alles anzeigen

sejuma

Deine Seite wird im IE und FF unterschiedlich angezeigt.

Ich würde deshalb folgende Änderungen vornehmen:

Zitat

#navi {
position: fixed;
top: 0px;left: 0;height: 700px; width:310px;
background-image: url(bilder/bg_navi.gif);
float: left;
}

rot: streichen, der IE6 kann position: fixed nicht interpretieren und im FF führt es offensichtlich dazu, dass die Navi nicht bis ans untere Ende angezeigt wird.

HTML:

Habe ich folgendes versucht:

Code

<div style="margin-top: 28px;">
[img]bilder/bg_navi_end.gif[/img]
</div>

Dikra

Tja, funktioniert soweit. Erstmal Danke dafür.

Bloss was passiert, wenn ich da noch einen weiteren Link einfüge? Bei Partyservice kommt nämlich später noch ein SubLink.

Außerdem dürfte nun die Navigation mitscrollen, was ich eigentlich verhindern wollte. Irgentwo hatte ich aber schon mal ne Lösung für das Fixed-Problem gesehen. Muss mal suchen

sejuma

Ich hätte an deiner Stelle die Navi nicht so breit gemacht, sondern auf die Breite des grünen Hintergrundes begrenzt und mit entsprechenden margin-Werten positioniert.

Die Grafik mit den drei Personen obendrüber angeordnet.
Dann definierst du für die Navi einen grünen Hintergrund (ohne die Grafik-Kachel)
und setzt einen border-Bottom in der braunen Farbe. Der ist dann automatisch immer unten.

Wenn du ferner bei der Navi den height-Wert weglässt, passt sie sich automatisch dem Inhalt an.

Um sie zu fixen könntest du auch die Höhe des #main begrenzen und ihm ein "overflow: scroll" zuweisen. Es gibt aber m.W auch einen Workarounfd für den IE6. Ist halt immer etwas komplizierter, solche Sonderdinge einzubauen.

Dikra

Danke sejuma,

ich hab zwar etwas gebraucht, bis ich den Vorschlag mit dem border-bottom verstanden habe, aber jetzt habe ich das so umgesetzt, wenn auch mit 2 border-bottom. Funktioniert tadellos.

Das mit dem fixen Menü habe ich vorerst aufgegeben.

Mittlerweile ist die Site auch schon weiter fortgeschritten. Das Menü links sollte komplett funktionieren. Die Links auf der Galerieseite führen dann allerdings ins Leere. Die Partyserviceseite hat noch dieselben Links wie die Speisekarte und vom oberen Menü funktioniert nur Home.

Auch wenn ich am Layout nichts ändern kann, bin ich Verbesserungsvorschlägen gegenüber aufgeschlossen.

Tags