Brauche Hilfe bezgl. DIV-Container

  • Hallo Zusammen.


    Ich hab mit CSS leider noch nicht so viel Erfahrung und stehe momentan vor einem Problem dass ich bisher nicht lösen konnte. Für Könner ist das vermutlich eine Kleinigkeit.


    Ich versuche mal mit Worten die Aufgabe zu schildern:
    Es gibt einen Content-Container in der Mitte der Website. In diesen Container möchte ich eine Grafik setzen (Zentriert) die ca. 900px breit und ca. 200px hoch ist (nur als Beispiel). Der Hintergrund dieser Grafik ist weiß.


    Auf der linken Seite der Grafik soll ein Foto und auf die rechte Hälfte kommt Text. Diese Grafik wird fortlaufend nach unten immer wiederholt, allerdings immer mit anderen Fotos bzw. Text.
    Wie soll ich die Container anlegen? Muss ich in den Content-Container erst einen weiteren Container setzen der die 900x200px-Grafik aufnimmt? Und in diesen Container wieder zwei Container für das Foto und den Text?


    Ich weiß es nicht wie es richtig ist und kriegs nicht hin.
    Vielleicht könnte mir bitte jemand einen Denkanstoß geben...


    DANKE!


    UWE

  • Hallo und herzlich willkommen im Forum! ;)


    HTML
    <section><!-- dein Container der den Inhaltsbereich umfasst --><!-- width: 1200px; (beispiel) -->
      <div id="first"> <!-- Foto --> <!-- CSS: float: left; -->
      </div>
      <div id="second"> <!-- deine Grafik --><!-- CSS: float: left; -->
      </div>
      <div id="third"> <!-- Text --> 
      </div>
    </section>


    Das ist jetzt nur ein kleiner Gedankenanstoß. Reicht dir das, damit du die Aufgabe schaffst?
    Es ist ja nicht so das ich dir nicht helfen will, sondern du sollst nur selber versuchen die Lösung zu finden! :D

  • Hallo Phip.


    Vorerst schon mal DANKESCHÖN! Das ist schon mal ein guter Anstoß. Ich werde das mal die nächsten Tage probieren. Bin momentan im Umzugsstress :(
    Ich sag dir dann bescheid.


    Nein, du hast natürlich recht... jeder muss auch ein bisschen selbst Erfahrung sammeln. Sofern ich trotzdem nicht weiter kommen sollte, würde ich mich nochmal melden und um Hilfe bitten.


    Schönen Sonntag!


    LG UWE

  • Hallo Phip.


    Klappt nicht oder bin zu doof. Ich hab dir mal schnell eine Beispielgrafik gemacht damit du sehen kannst was ich meine.
    Die Grafik (grau) ist im CONTENT-Container zentriert dargestellt.
    Vielleicht dürfte ich dich nochmals bemühen ?


    DANKE!


    Gruss
    UWE

  • Das Grundgerüst:
    [HTML]
    <div class="hintergrund">
    <img src="" class="bild" />
    <p class="text">


    </p>
    </div>
    [/HTML]


    Der CSS Code:
    [CSS]
    div.hintergrund {
    width: 900px;
    height: 200px;
    background: red; /* <- hintergrundbild einsetzen */
    }


    img.bild {
    width: 300px;
    height: 200px;
    background: blue; /* cerdeutlichung, einfach entfernen */
    float: left;
    }


    p.text {
    width: 600px;
    height: 200px;
    background: green;
    float: right;
    }
    [/CSS]


    Abstände und andere Formatierungen kannst du ja ganz einfach einbauen :love:

  • Hi Basiii.


    Jou... genau das ist es. Hab vielen Dank!!! :thumbup:
    Jetzt hab ich nur noch das Problem, dass ich das Ganze auf der Seite zentrieren muss. Muss ich dazu ALLES in einen weiteren Container setzen?
    Danke!


    PS: Ich habs jetzt einfach mit Margin Left in die Mitte gerückt. Oder gibt's eine bessere Variante?

  • CSS
    div.hintergrund {
      width: 900px;
      height: 200px;
      background: red; /* <- hintergrundbild einsetzen */
      margin: 0 auto; /* zentrierung */
    }


    Dein Weg ist aber auch nicht verkehrt und sogar besser, allerdings nur für den Fall das man weiß wo die Mitte ist :) Ansonsten mein Weg.
    Dabei geht es bei dem Wert "auto" hauptsächlich um mangelnde Kompatibilität bei älteren Browsern. Um eben diese würde ich mir aber heutzutage keine großen Gedanken mehr machen, selbst der IE schafft das wohl mittlerweile :love:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!