Ergebnis 1 bis 5 von 5

Thema: CSS Am Bottom ausrichten

  1. #1
    Samurai
    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS Am Bottom ausrichten

    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">&raquo; Restaurant / Weinstube</span>
    <span class="navi">&raquo; Speisekarte</span>
    <span class="navi">&raquo; Weinkarte</span>
    
    <span class="navi">&raquo; Partyservice</span>
    </p>
    
    
    
    
    
    <span class="navi">&raquo; Veranstaltungskalender</span>
    <span class="navi">&raquo; Bildergalerien</span>
    </p>
    
    
    
    
    
    &Ouml;ffnungszeiten&#58;
    
    
    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
    
    
    
    Tel. &#40;0 71 51&#41; 4 42 36
    
    </p>
    </div>
    <div style="margin&#58;auto 0 0 0;padding&#58;0 0 0 0;">
    [img]bilder/bg_navi_end.gif[/img]
    </div>
    </div>
    Hier noch der Ausschnitt aus der CSS:
    Code:
    #navi &#123;
    position&#58; fixed;
    top&#58; 0px;left&#58; 0;height&#58; 700px; width&#58;310px;
    background-image&#58; url&#40;bilder/bg_navi.gif&#41;;
    float&#58; left;
    &#125;
    #links &#123;
    margin&#58; 0 80px 0 90px;
    font-family&#58; Arial, Helvetica, serif;
    font-size&#58;11px;
    color&#58;#fff;
    &#125;
    .navi &#123;
    display&#58; block;
    height&#58;19px;
    margin-top&#58;4px;
    border-bottom&#58;1px solid #fff;
    &#125;
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Deine Seite wird im IE und FF unterschiedlich angezeigt.

    Ich würde deshalb folgende Änderungen vornehmen:

    #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&#58; 28px;">
    [img]bilder/bg_navi_end.gif[/img]
    </div>

  3. #3
    Samurai
    Themenstarter

    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.

  5. #5
    Samurai
    Themenstarter

    Registriert seit
    30.09.2007
    Beiträge
    229
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.
    Wer andern eine Bratwurst brät, wird selbst zum Bratwurstbratgerät.
    Ron Stoppable

Ähnliche Themen

  1. Bild als Bottom mit Div ?
    Von Ole im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 31.12.2007, 13:55
  2. Div Positionierung - bottom
    Von sternli im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 26.08.2007, 19:01
  3. Border-Bottom nicht in Farbe
    Von maple im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.11.2006, 09:38
  4. top und bottom mit AS setzen
    Von Silvercat im Forum Flash Forum
    Antworten: 4
    Letzter Beitrag: 13.08.2006, 23:07
  5. css: border-bottom-color
    Von Rocco im Forum HTML & CSS Forum
    Antworten: 9
    Letzter Beitrag: 03.02.2005, 16:38

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •