• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

2 <div> Elemente nebeneinander und Mittig

andy-1988

Neues Mitglied
Hey leute!

Hab folgendes Problem: Ich möchte zwei <div> Elemente nebeneinander platzieren... Allerdings auch so ausrichten damit sie immer mittig in der Browserbreite ausgerichtet sin. Hab schon mehrmals herumprobiert.. aber schaffs einfach nicht :(

Wär toll wenn ihr mir helfen könntet!

mfg Andy-1988
 
Werbung:
Du könntest eines der beiden divs mit css floaten und anschließend beide mit einem weiteren div (um die beiden herum) gruppieren und dieses dann zentrieren:

HTML:
<div class="container">
  <div class="float">Links</div>
  <div>Rechts</div>
</div>
CSS:
Code:
div.container {margin:0 auto}
div.float {float:left}
 
Das hab ich schon probiert.. haut aber irgendwie nicht hin.. dann wird das element mit float:left am linken browserrand dargestellt... Zumindest im Firefox.. muss ehrlich gstehen, habs im internet explorer noch nicht probiert...
 
Werbung:
In etwa so? Bin mir aber nicht sicher ob das jetzt ganz richtig is wegen dem Clear. Ob das mit divs allerdings am besten zu lösen ist ist fraglich. Jenachdem was du machenwillst?

index.htm
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
    <head>
        <link href="style.css" type="text/css" rel="stylesheet" media="screen" />
    </head>
    <body>
        <div id="div_drumrum"> 
                <div id="eins">Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div Erster Div</div>
                <div id="zwei">Zweiter Div<br /> Zweiter Div Zweiter Div Zweiter Div Zweiter Div Zweiter Div   Zweiter Div Zweiter Div Zweiter Div Zweiter Div Zweiter Div   Zweiter Div Zweiter Div Zweiter Div Zweiter Div Zweiter Div  Zweiter Div Zweiter Div Zweiter Div Zweiter Div Zweiter Div    Zweiter Div Zweiter Div Zweiter Div Zweiter Div Zweiter Div </div>
            <p>Der geht drumdrum. Unten.</p>
        </div>
    </body>
</html>
style.css
Code:
html{
    background-color: blue;
    }
    #div_drumrum
    {
        border:1px solid white;
        width:95%;
        margin:0.6em auto;
        background-color: green;
        height: auto;
    }
    #eins {
    float: left; 
    background-color: black;
    width: 49%;
    color: white;
    border: 1% solid white;
    }
    #zwei {
    float: right; 
    background-color: black;
    width: 49%;
    color: white;
    border: 1% solid white;
    }
    #footer
    {clear: both;
    border: 1px solid black;
    background-color: silver;}
 
Ja genau so sollte es aussehen! mit dem Ganzen will ich das Design meiner Homepage (viele grafiken im Hintergrund) aufteilen bzw erstellen
 
Design mit vielen Grafiken im Hintergrund?
Hört sich für mich an wie "slicen" und nach einer nicht im WWW umsetzbaren Idee, aber ich kann mich natürlich irren. Bei 10, die sowas falsches machen, kann ja auch mal einer dabei sein, der sich richtig Gedanken gemacht hat.
 
Werbung:
Ja ist ne geslicte grafik mit der ich das Design erstellen will.. Im prinzip aber net sooo viele grafiken. Eine oben über die Breite von 900px; darunter brauch ich eben zwei "Spalten" daher die <div>-Elemente. In der linken wird das menü + eine kleine werbegraifk eingefüht und in der rechten soll dann nur der Inhalt stehen.
Darunter kommt wieder eine grafik über die gesamte Breite von 900px und mein Design wäre fertig. Ich hab somit eigentlich nur oben und Unten die Grafik.

Wer für dies eine Bessere Lösung als mit diesen Div elementen hat, darf sie mir natürlich gerne sagen, bin jederzeit bereit weiter zu lernen und mich zu verbessern ;)
 
Ja ist ne geslicte grafik mit der ich das Design erstellen will.. Im prinzip aber net sooo viele grafiken. Eine oben über die Breite von 900px; darunter brauch ich eben zwei "Spalten" daher die <div>-Elemente.
Du weißt, dass "slicen" nicht für das WWW geeignet ist? Zum einen ist da die fixe Breite, zum anderen vergisst Du, dass die Schriftgröße variieren kann und wenn Du dann überall <div>s einstreust, wirst Du den Anforderungen von HTML nicht gerecht. Layout macht man weder mit Tabellen noch mit divs.

Wer für dies eine Bessere Lösung als mit diesen Div elementen hat, darf sie mir natürlich gerne sagen, bin jederzeit bereit weiter zu lernen und mich zu verbessern ;)
Besser? Sinnvoll! Lerne, was HTML ist und zeichne Deinen Inhalt logisch aus (Stichwort: Semantik). Du rollst das Feld von hinten auf und wirst dann überall anecken, anstatt vorne zu beginnen. Du hast nur Augen für Dein Layout und vernachlässigst HTML ganz.

Du darfst gerne wieder fragen, es wird bestimmt jetzt noch nicht alles klar sein. Aber erkundige Dich erstmal. Zumindest den Begriff "Semantik" wirst Du sicher nachschlagen.
Ich will nur nicht wieder einen Roman schreiben....kannst ja auch im Forum nach "Semantik" suchen, da findest Du sicher etliches!
 
Jetzt weiß ich gar nicht mehr weiter... auf einigen Seiten liest man damit heut zu tage keine Tabellendesigns mehr verwendet werden, sonder div designs.. und hier erfahre ich nun damit mit div elementen keine designs erstellt werden?!?!? Zum andern soll die Seite eine definierte Breite erhalten... Ich wüsste nicht wie es sonst mit einer Grafik als Header funktionieren sollte.. zumindest nicht so wie ich sie jetzt im moment habe bzw. Brauche...

ich hab hier mal das bild hochgeladen, wie die seite dann einmal aussehen sollte....
http://free.pages.at/andy-1988/design.jpg
 
Werbung:
Jetzt weiß ich gar nicht mehr weiter.
Das tut mir leid.

auf einigen Seiten liest man damit heut zu tage keine Tabellendesigns mehr verwendet werden, sonder div designs.
Naja, was soll ich sagen? Das ist leider völliger Blödsinn. Wer das sagt, hat meistens noch vor kurzem begeistert Tabellenlayouts gemacht und hat einfach noch nicht kapiert, wozu HTML eigentlich da ist. Nicht, um zu Layouten, daher ist es egal, ob Du mit <table> oder <div> layoutest, beides ist HTML und damit ist beides gleich falsch.
Layout macht man mit CSS!

und hier erfahre ich nun damit mit div elementen keine designs erstellt werden?!?!?
Damit bist Du wieder auf eines der größten Probleme des Internets gestoßen, jeder behauptet was anderes, nicht nur in bezug auf Webdesign, sondern auch Medizin,Mietrecht usw. Aber wer sagt nun die Wahrheit? :-)

Wenn Du verstanden hast, wozu HTML da ist (nur zur logischen Inhaltsauszeichnung, siehe auch "Semantik"), dann wirst Du auch kapieren, warum man mit keinem Tag Layout macht, auch nicht mit <div>.

Zum andern soll die Seite eine definierte Breite erhalten... Ich wüsste nicht wie es sonst mit einer Grafik als Header funktionieren sollte.. zumindest nicht so wie ich sie jetzt im moment habe bzw. Brauche.
Eine fixe Breite hat halt Nachteile. Horizontale Scrollbalken sind etwas, das absolut nervt. Wenn Du dann noch viel Text auf Deiner Seite hast, wo man tatsächlich hin- und herscrollen muss, wenn man den lesen will, dann ist ein supermegageiles Banner ein schlechter Tausch gegen viele genervte Besucher.
Manchmal gehts gut, andere Male nicht. Jedoch wirst Du die, die Deine Site wegen sowas sofort wieder verlassen kaum in Deinen Statistiken haben, noch geben Dir solche Leute Rückmeldung, d.h. wenn Du nur positive Rückmeldungen bekommst, heißt das nicht, dass nicht sogar mehr Leute mit negativen Erfahrungen auf Deiner Site waren.

Das ist schon ein Thema für sich. Aber man muss sich wenigstens bewusst sein, dass nicht jeder mit den gleichen Voraussetzungen im WWW unterwegs ist, wie man selbst. Man muss ein Fenster nicht maximieren, manche haben etliche Tool- und Sidebars, der Viewport ist bei den meisten Menschen sehr unterschiedlich. Die Auflösung ist sogar völlig irrelevant. Und dann ist da auch noch die Schriftgröße, die jeder unterschiedlich einstellen kann...

ich hab hier mal das bild hochgeladen, wie die seite dann einmal aussehen sollte.
Das ist nun nicht wirklich besonders schwer. Man kann die Seite auch mit einer variablen Breite machen. Was das Banner angeht, würde ich an Deiner Stelle folgendes machen:

Du machst zwei Bilder draus. Da Du im Banner ja Content hast (also die Überschrift), musst Du diesen Content auch per <img> einbinden, innerhalb eines <h1> wahrscheinlich. Dieses Image sollte nur den Text enthalten. Keine Flammen.

Die Flammen würde ich als eigenes Bild erstellen und als Hintergrundbild einbinden (Hintergrundbilder nutzt man ja, wenn man keinen Content hat, und das Bild nur zur Zierde dient). Die Flammen am rechten Rand sehen ja aus, als würden sie kleiner werden. Wenn das Banner in einer Farbe ausläuft, kannst Du dem <h1> (dem Du die Flammen als background-image zugewiesen hast) zusätzlich diese Farbe als Hintergrundfarbe geben. Dann merkt das niemand, dass das Banner in großen Viewports irgendwann aufhört.

Das Feuerwehrauto sollte dann natürlich auch ganz drauf sein, nicht nur halb, weil dann merkt man, wenn das Banner zu Ende ist. Man könnte es vielleicht auch nach links packen, aber dann müsste Dein Content-Image (das mit der Überschrift) ja weiter nach rechts rutschen und dann läufst Du wieder Gefahr, dass die Seite zu breit wird.

Viel geredet...aber vielleicht hast Dus sogar verstanden ;-)
 
Zurück
Oben