ilch Forum » Allgemein » HTML, PHP, SQL,... » -Boxen horizontal nebeneinander!

Geschlossen
  1. #1
    User Pic
    pixeltec Mitglied
    Registriert seit
    18.04.2012
    Beiträge
    12
    Beitragswertungen
    1 Beitragspunkte
    Hallo erstmal!

    Zu erst: habe die Website noch nicht fertig und daher auch keinen Link!
    Mein Problem: Ich erstelle mit <div id="x"> die Klassen welche ich in der style.css dann bearbeite. Ich möchte mehrere <div>-Klassen horizontal nebeneinander anordnen. Man könnte das zwar mit html und Tabellen machen, aber das ist nicht Zeitgemäß. Ich habe es mit "float: left" usw versucht, die Problematik besteht aber darin das meine Seite zentriert ist, was dann diese Klassen linksbündig anordnet, und den Befehl "float: center" o.Ä. nicht existiert soweit ich weiß. Kann mir jemand helfen, wie ich die Klassen horizontal und zentriert nebeneinander anordnen kann?

    Auszug aus der html:
    ...
    <center>
    			<body style="background-color:#000000" link="#C0C0C0" vlink="#C0C0C0" alink="#C0C0C0">	
    		<div id="body">	
    <div id="info_left"></div>
    		<div id="info_mid"></div>
    		<div id="info_right"></div> </center>
    ...


    In der css:
    ...
    #info_left {
    background: url(img/HFG_44.jpg);
    width: 400px;
    height: 244px;
    float: left;
    }
    #info_mid {
    background: url(img/HFG_48.jpg);
    width: 10px;
    height: 244px;
    float: left;
    }
    
    #info_right {
    background: url(img/HFG_46.jpg);
    width: 444px;
    height: 244px;
    float: left;
    }
    ...



    Zuletzt modifiziert von pixeltec am 16.08.2012 - 19:32:49
    Besucht mich auf: pixeltec.pi.funpic.de/
    Logos, Grafiken, Photogearbeitung
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Man muß auch nicht mit <center> arbeiten um eine webseite zu zentrieren.
    Genauso gehören soweit es geht auch alle formatierungen in die css.
    Einen Logischen aufbau der Page planen macht vieles einfacher.

    Als Beispiel :

    ...
    <body>
    <div id="wrapper"><!-- Wrapper umfasst die Page --->
         <div class="div_1"></div>
         <div class="div_2"></div>
         <div class="div_3"></div>     
    </div><!--Wrapper Ende--->
    </body>
    ...


    viel mehr benötigst du innerhalb der html schon fast nicht.
    Den rest kannst du dann alles über css steuern.

    ...
    body {
    background-color: #000000;
    margin: 0 auto;  */ dadurch wird die Seite zentriert /*
    ...
    ...
    }
    
    div#wrapper {
    width: 854px;
    ...
    }
    eine höhe brauchst du hier nicht dadurch bleibts dynamisch
    
    .div_1 {
    width: ??;
    height: ??;
    float: left;
    }
    
    .div_2 {
    width: ??;
    height: ??;
    float: left;
    }
    
    .div_3 {
    width: ??;
    height: ??;
    float: left;
    }


    So nur mal als grobes beispiel.

    Die gesamte breite der 3 boxen darf nicht breiter als der Wrapper werden, ansonsten findet ein zeilenumbruch statt.
    Benutzt du padding/margin um abstände zwischen den boxen zu erstellen, mußt du die jeweiligen werte von der breite der boxen abziehen, damit es weiterhin passt.
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Rock@wulf Hall Of Fame
    Registriert seit
    03.06.2004
    Beiträge
    3.282
    Beitragswertungen
    239 Beitragspunkte
    Servus,

    -->>Photogearbeitung

    Netter Vertipper zunge

    Ich hoffe wir reden dabei von fest codierten Boxen.

    Dynamische boxen kann man so einfach nicht nebeneinander hinbiegen.
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    Wizzard26 Mitglied
    Registriert seit
    05.03.2009
    Beiträge
    259
    Beitragswertungen
    33 Beitragspunkte
    Anhand des einleitungspost bin ich mal von Statischen boxen ausgegangen, der Wrapper bezieht sich ja schließlich auf den kompletten komplex, jenachdem was noch alles mit aufgebaut wird. Anders würde man denke ich ne verschachtelung voziehen.


    Greetz Wizz
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    pixeltec Mitglied
    Registriert seit
    18.04.2012
    Beiträge
    12
    Beitragswertungen
    1 Beitragspunkte
    @ Rock@wulf: Auf den Vertipper wurde ich schon so oft angesprochen, dass ich ohne ihn schon garnicht mehr leben kann!

    An euch beide:
    Ich habe es mit den Boxen hinbekommen, habe aber ebenfalls eine kleine tabelle eingebaut um mir selbst es etwas zu vereinfachen. Danke hierfür glücklich

    Hier die Seite um ie es sich handelt: jabbawkztest.funpic.de/
    Nein ich gründe keine Organsiation, mir ist das nur als Beispiel für eine Seite eingefallen! Inhalt wird noch fertig gemacht!
    Besucht mich auf: pixeltec.pi.funpic.de/
    Logos, Grafiken, Photogearbeitung
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    Rock@wulf Hall Of Fame
    Registriert seit
    03.06.2004
    Beiträge
    3.282
    Beitragswertungen
    239 Beitragspunkte
    ZitatZitat geschrieben von pixeltec

    @ Rock@wulf: Auf den Vertipper wurde ich schon so oft angesprochen, dass ich ohne ihn schon garnicht mehr leben kann!


    Na dann :p
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten