divejbba: Rahmen mitfließen lassen

Hallo,

ich möchte meine Webseite endlich mal Tabellenfrei gestalten, da es für die gestalterischen Sachen ja CSS gibt. Nun habe ich aber ein kleines Problem. Meine Webseite bisher sah so aus:

http://home.arcor.de/divejbba/test/museum.html

Dabei habe ich das Bild und den Text daneben mit Tabellen so gestaltet, dass es so aussieht, wie ich es haben wollte.

Nun möchte ich das gerne mit CSS machen. Ich habe den Ansatz auch schon hinbekommen, aber der Rahmen fließt nicht mit.

http://home.arcor.de/divejbba/test/index.html

Hier bleibt der grüne Rahmen oben stehen. Der sollte aber eigentlich unter dem Bild oder Text enden, je nachdem, was weiter unten ist.

Hat jemand einen Vorschlag, woran das liegen könnte?

MfG
divejbba

  1. Hallo,

    Nun möchte ich das gerne mit CSS machen. Ich habe den Ansatz auch schon hinbekommen, aber der Rahmen fließt nicht mit.

    http://home.arcor.de/divejbba/test/index.html

    http://forum.de.selfhtml.org/faq/#Q-19

    Hier bleibt der grüne Rahmen oben stehen. Der sollte aber eigentlich unter dem Bild oder Text enden, je nachdem, was weiter unten ist.

    In welchem Browser? In meinen nicht.

    Opera macht den Rahmen um das DIV#cleft wirklich nur 200px breit, wie gefordert. Das ließe sich durch Verwendung von min-width umgehen.

    Der grüne Rahmen um DIV#content geht aber in allen meinen Browsern bis unten.

    viele Grüße

    Axel

    1. In welchem Browser? In meinen nicht.

      In meinen Browsern (IE6, FF0.9.3 & Moz.1.73) sieht das so aus

      http://home.arcor.de/divejbba/test/ansicht01.jpg

      Opera macht den Rahmen um das DIV#cleft wirklich nur 200px breit, wie gefordert. Das ließe sich durch Verwendung von min-width umgehen.

      cleft benutze ich doch garnicht. Ach Du bist doch derjenige, der mir schon einmal geantwortet hatte ;-) Du hast wahrscheinlich noch die alte Ansicht in Deinem BrowserCache. Drücke SHIFT+Reload ...

      Ich hatte das damals ausprobiert mit Deinem Vorschlag (vertical-align:top;) aber irgendwie bekomme ich das nicht so richtig hin. Wie schon gesagt, ich wollte es wenigstens einmal wirklich nur mittels CSS und möglichst ohne Tabellen. Nur so lernt man auch, wie das mittels CSS funktionieren kann. imho

      Der grüne Rahmen um DIV#content geht aber in allen meinen Browsern bis unten.

      Genau der läuft bei mir eben nicht bis unter das Bild, sondern hört beim IE genau oberhalb des Bildes auf und bei FF und Moz. irgendwo im Bild.

      Ich weiß im Moment nicht, warum ...

      MfG
      divejbba

  2. Hi,

    Nun möchte ich das gerne mit CSS machen. Ich habe den Ansatz auch schon hinbekommen, aber der Rahmen fließt nicht mit.

    http://home.arcor.de/divejbba/test/index.html

    abgesehen davon, daß Du den Aufruf der Seite durch fehlende Verlinkung erschwerst, habe ich zumindest keine Lust, mir nach Aufruf und Ansicht des Quelltextes auch noch hiervon
     <style type="text/css" media="screen">@import "style.css";</style>
     <style type="text/css" media="screen">@import "style2.css";</style>
    die vielleicht verantwortliche Datei in meine Adreßleiste zu übertragen.
    Mache es uns in Deinem eigenen Interesse bitte nicht so umständlich. Keiner wird bei in einer reinen Beispielseite nicht ausgelagerte Styles monieren.

    freundliche Grüße
    Ingo

    1. Hallo,

      Mache es uns in Deinem eigenen Interesse bitte nicht so umständlich. Keiner wird bei in einer reinen Beispielseite nicht ausgelagerte Styles monieren.

      Du hast recht, deshalb nur als Tip, falls sie Dir nicht bekannt sein sollten: noch leichter hat man es mit DOM-Inspector und Web-Developer-Extension für den Firefox.

      Gruß
      Vaclav

      1. Du hast recht, deshalb nur als Tip, falls sie Dir nicht bekannt sein sollten: noch leichter hat man es mit DOM-Inspector und Web-Developer-Extension für den Firefox.

        Kannte ich bis dato auch noch nicht. Muss ich unbedingt mal ausprobieren. Benutze nämlich hauptsächlich auch den FF.

        Gruß
        divejbba

    2. abgesehen davon, daß Du den Aufruf der Seite durch fehlende Verlinkung erschwerst, habe ich zumindest keine Lust, mir nach Aufruf und Ansicht des Quelltextes auch noch hiervon

      Sorry, so besser?

      http://home.arcor.de/divejbba/test/index.html

      War nicht mit Absicht. Ich bin erst das zweite Mal hier und wusste bis jetzt niocht wie das geht.

      Mache es uns in Deinem eigenen Interesse bitte nicht so umständlich. Keiner wird bei in einer reinen Beispielseite nicht ausgelagerte Styles monieren.

      Tschuldigung, habe es abgeändert. Ich hoffe das ist jetzt besser so.

      MfG
      divejbba

  3. Hallo,

    Hier bleibt der grüne Rahmen oben stehen. Der sollte aber eigentlich unter dem Bild oder Text enden, je nachdem, was weiter unten ist.

    Hat jemand einen Vorschlag, woran das liegen könnte?

    Floatende Elemente beeinflussen die Höhe ihres Elternelementes nicht. Du kannst danach ein nicht floatendes Element mit der Eigenschaft clear: einfügen. Dein div.content wird es umschließen.

    Hintergrundwissen: http://positioniseverything.net/articles/float-theory.html

    Beachte auch: http://positioniseverything.net/articles/float-bugs-1.html

    Diese Site wird dir bei der Beschäftigung mit CSS noch öfter nützlich sein.

    Gruß
    Vaclav