Loading...   Upload Image

zentriertes Div-LayoutForum » Webzone » (X)HTML & CSS » zentriertes Div-Layout

Neues Thema verfassen Neues Thema

  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    26.02.2008 um 19:45 Uhr



    Der Beitrag wurde insgesamt 2 mal editiert, zuletzt 26.02.2008 um 22:47 Uhr ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    27.02.2008 um 15:18 Uhr



  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    27.02.2008 um 16:07 Uhr



  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    27.02.2008 um 16:07 Uhr



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 27.02.2008 um 16:08 Uhr ...
  • MindFreakUser ist offline
    Newbie



    Registriert: 16.02.2008
    Beitraege: 16

    27.02.2008 um 19:36 Uhr



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    28.02.2008 um 13:36 Uhr

    Hallo Hirami,

    ich haette die Grafik anders erstellt,
    dann waere es viel ein einfacher gewesen...



    Naemlich ohne Hintergrundbild ....

    Den Hintergrund kannst du spaeter mit CSS bestimmen, dazu reicht dir eine kleine Grafik die kachelbar ist



    Die Grafik haette ich wie wie folgt zerschnippelt:

    Der Header ...


    Fuer den Contentbereich ...

    Oberes Teil


    Mittleres Teil, welches per CSS dazu veranlasst wird sich zu wiederholen


    Unteres Teil


    Fuer die Boxen jeweils rechts und links,
    das selbe Spiel wie schon mit dem Content

    Oberer Teil


    Mittlerer Teil, welcher per CSS dazu gebracht wird sich nach unten hin zu wiederholen, bei bedarf


    Unterer Teil


    Nun gehst du her und erstellst dir 3 Div-Container,

    <div id="links">fuer die linke spalte, bekommt eine feste Breite per CSS verpasst</div> 
    <div id="mitte">fuer die mittlere Spalte, bekommt eine feste Breite per CSS verpasst>/div>
     <div id="rechts">fuer die rechte Spalte, bekommt eine feste Breite per CSS verpasst</div>

    Diese 3 Div's packst du in noch ein Div,
    welchem du per CSS margin: 0px auto; zuweist ...
    <dic id="warper">
    <div id="links">fuer die linke spalte</div> 
    <div id="mitte">fuer die mittlere Spalte</div>
     <div id="rechts">fuer die rechte Spalte</div>
    </div>


    Das Div id="links" bekommt per CSS float: left; zugewiesen, genauso wie das mittlere Div auch,
    so dass diese sich nun nebeneinander befinden, anstatt untereinander.

    Damit haettest du dann schonmal das Grundgeruest , durch das Div id="warper" werden die andern drei nun immer mittig gehalten ...

    Fuer den Content brauchst du 3 Div's

    <div id="content_oben>
    bekommt als Hintergrundbild die Grafik fuer den oberen Teil des Contents, per CSS zugewiese,es muss eine Hoehe definiert werden, damit auch die ganze Grafik sichtbar ist
    #content_oben{
    background: url(content_oben.jpg) no-repeat;
    height: 38px;
    width: 632px;
    }
    </div>
    <div id="content_mitte">
    die mittlere Grafik wird diesem Div, als Hintergrundgrafik per CSS zugewiesen
    
    #content_mitte{
    background: url(content_mitte.jpg) repeat-z;
    width: 632px;
    }
    </div>
    <div id="content_unten">
    
    bekommt als HG Bild die untere Grafik zugewiesen, auch mit fester Hoehe, damit die ganze Grafik sichtbar ist
    
    #content_unten{
    background: url(content_unten.jpg) no-repaet;
    height: 37px;
    width: 632px;
    }
    </div>


    Der Content waechst bei viel Text nun nach unten hin mit...

    Fuer die Boxen machst du das Selbe wie fuer den Content, aber mit einer class anstatt einer ID,
    damit die CSS Anweisung mehrmals auf der Seite verwendet werden kann...

    <div class="box_oben"></div>
    <div class="box_mitte"></div>
    <div class="box_unten"></div>


    So sieht dann das komplette Konstruckt aus ...

    <dic id="warper">
    
    <div id="links">
    <div class="box_oben"></div>
    <div class="box_mitte"></div>
    <div class="box_unten"></div>
    
    <br /><br />
    
    <div class="box_oben"></div>
    <div class="box_mitte"></div>
    <div class="box_unten"></div>
    </div>
    
    <div id="mitte">
    
    <div id="header">Headergrafik</div>
    
    <div id="content_oben"></div>
    <div id=content_mitte">
    Lorem ipsum dolor sit amet, consectetur, adipisci velit 
    </div>
    <div id="conent_unten"></div>
    
    </div>
    
    
    <div id="rechts">
    <div class="box_oben"></div>
    <div class="box_mitte"></div>
    <div class="box_unten"></div>
    <br /><br />
    <div class="box_oben"></div>
    <div class="box_mitte"></div>
    <div class="box_unten"></div>
    </div>
    
    </div>




    ... { signatur } ...
  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    28.02.2008 um 20:04 Uhr



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    28.02.2008 um 21:48 Uhr



    ... { signatur } ...
  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    28.02.2008 um 22:12 Uhr



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 28.02.2008 um 22:26 Uhr ...
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    29.02.2008 um 01:33 Uhr

    So jetzt schaust du mal bitte genau nach,
    was ich dir gepostet hatte unter Index ...

    Und dann schauste dir deine Index nochmal genau an,
    dann wirst du bestimmt feststellen,
    dass du keinen Doctype angegeben hast!

    Wenn kein Doctype gesetzt ist,
    dann verfaellt der IE automatisch in den Quriksmodus,
    dieser ruft bei deinem Layout dieses nette Aussehen hervor!

    Also Doctype angeben und die Sache sollte gegessen sein ;)

    Liebe Gruesse Alice



    ... { signatur } ...

[ 1 ] 2 » ... Letzte » Seite 1 von 2


Affiliates:   Colorful Gfx  •   Design Grafixx  •   Pat DG  •   Blue-Graphics  •   Gallery Yuri  •   The Seduction  •   Chibi Graphics  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider 

Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /www/htdocs/v089174/ice/counter/includes/mysql.class.php on line 165

Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /www/htdocs/v089174/ice/counter/includes/mysql.class.php on line 165

Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /www/htdocs/v089174/ice/counter/includes/mysql.class.php on line 165

Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /www/htdocs/v089174/ice/counter/includes/mysql.class.php on line 165

Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /www/htdocs/v089174/ice/counter/includes/mysql.class.php on line 165