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

    Moin.
    Da ich meinen alten Thread dazu irgendwie nichtmehr finde (oder grade zu bld dazu bin :, ) bin ich mal so frei..
    Hab mich mal nach ner Ewigkeit wieder hingesetzt und ein Bildchen fr ein Layout gebastelt, und jetzt steh ich wieder vor dem Problem, wie coden.. 8|
    Ich hab bisher noch nichts mit divs gemacht (immer nur iframes ^^'';), hab zwar denk ich das Grundprinzip verstanden aber in der Umsetzung happerts noch gewaltig. Ich denke ich brucht einfach mal ne gut berschaubare Vorlage, bei der ich dann abgucken kann oder so..
    Naja, lange Rede kurzer Sinn, es geht um folgendes Bild:
    [ klicku ]
    Ich bruchte entweder ein Tutorial das gut erklrt wie man diese Art von Layout am besten codet (es sollte zentriert sein), oder jemanden der's mir zeigen kann ^^''
    Danke schonmal.

    baii,
    Hirami-chan

    Edit: Danke ^^



    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

    also mit divs geht es am besten =)

    Super wenn due Dreamweaver httest damit kannst du die Div super verschieben/vergrern ^^

    als ein div sieht so aus:

    div style="position: absolute; width: 437px; height: 324px; left:19px; top:123px"

    nur vorne musst du ein < und hinten ein > machen =)

    also ich denke die namen width und so erklren sich von selber wenn du noch probleme hast einfach melden =)



  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    27.02.2008 um 16:07 Uhr

    huhu ^^
    danke erstmal, das war aber nicht was ich meinte. Ich htte gerne eine Erklrung/Guide/Code, wie man das Layoutbild und den Hintergrund dafr immer exakt in die Mitte kriegt und wie man dann die einzelnen Mens am besten platziert, damit die auch je nach Fensterbreite am richtigen Platz sind.
    Vielleicht hat da ja jemand nen Guide fr, oder lsst sich das nur mit Tables machen? :o



  • HiramiUser ist offline
    Member


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    27.02.2008 um 16:07 Uhr

    Hoppla.. Alice, dein Forum spuckt ne Fehlermeldung aus, postet trotzdem, mag jetzt nicht nochmal auf zurck drcken sonst postet es den Beitrag nochmal :o



    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

    also div

    http://nekoji.de/Tutorials/tutorial.php?id=191

    oder wenn du eine art table machen willst aber viel freundlicher fr die browser/user dann hier

    http://nekoji.de/Tutorials/tutorial.php?id=287



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1058

    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

    Huhu ^^
    erstmal vielen dank, hab mich auch gleich mal rangemacht um es zu testen.
    Prinzip hab ich denk ich verstanden, nur irgendwo hunzt's.. irgendwo muss ein Fehler drin sein, die Zentrierung und die Navigationen wollen nicht klappen... :C

    Habs mal hochgeladen..:

    style.css
    index.html
    images

    (Die Bilder passen vom Aussehen her noch nicht ganz zusammen, aber das kann ich ja spter noch ndern..)

    Divs verwirren mich.. 8|



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1058

    28.02.2008 um 21:48 Uhr

    Wenn du ein Div all

    <div class="gemuese">tomate</div>
    hast dann muss dieses in der CSS auch mit
    .gemuese{ color: #fff;}
    angesprochen werden und nich mit
    #gemuse{color: #fff;}

    Die Raute(#) ist immer fuer id="blabla" zustaendig und der Punkt(.) fuer class="blabla"

    Aehm ja ich vergass dopelltes float kommt nicht so gut,
    tausch mal die position vom div recht mit dem div mitte

    Index:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> 
    
    <head>
    <title> </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </head>
    <body>
    
    <div id="warper">
    
    <div id="links"> </div>
    
    <div id="rechts"> </div>
    
    <div id="mitte"> </div>
    
    </div>
    
    </body>
    </html>
    


    CSS, so passen

    body {
        color: #435466;
        background: url(images/background.jpg) repeat;
        font: normal 11px Verdana;
        margin: 0px;
        padding: 0px:  
    }
    
    #warper{
    	width: 1050px;
    	margin: 0px auto;
    }
    
    #links {
    	float: left;
    	width: 200px;
    	margin: 0px;
    	padding: 0px;
    }
    
    #mitte {
    	padding: 0px;
    	margin: 0px 200px;	
    }
    
    #rechts {
    	float: right;
    	width: 200px;
    	margin: 0;
    	padding: 0;
    }
    
    
    #header {
    
    background: url(images/header.jpg) no-repeat;
    	height: 208px;
    	width: 633px;
    }
    
    #content_oben {
    
    background: url(images/content_top.jpg) no-repeat;
    	height: 36px;
    	width: 633px;
    }
    
    #content_mitte {
    
    background: url(images/content_mid.jpg) repeat-y;
    	width: 559px;
    	padding: 0px 37px 0px 37px;
    }
    
    #content_unten {
    
    background: url(images/content_down.jpg) no-repeat;
    	height: 36px;
    	width: 633px;
    }
    
    .navi_oben {
    
    background: url(images/navi_top.jpg) no-repeat;
    	height: 26px;
    	width: 168px;
    }
    
    .navi_mitte_s {
    
    background: url(images/navi_small_mid.jpg) repeat-y;
    	width: 118px;
    	padding: 0px 25px 0px 25px;
    }
    
    .navi_mitte_b {
    
    background: url(images/navi_big_mid.jpg) repeat-y;
    	width: 118px;
    	padding: 0px 25px 0px 25px; 
    }
    
    .navi_unten {
    
    background: url(images/navi_down.jpg) no-repeat;
    	height: 25px;
    	width: 168px;
    }
    


    #content_mitte is zB. schmaeler,
    weil man das Padding von der Breite/Hoehe abziehen sollte, dann stimmt es auch in andern Browsern ...

    Liebe Gruesse Alice



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


    Hirami

    Registriert: 15.04.2007
    Beitraege: 89

    28.02.2008 um 22:12 Uhr

    ah.. hatte mit dem punkt und raute nochmal kurz nachgegoogelt aber nix berzeugendes gefunden ^^'' Wieder was gelernt *swt*
    so, hab das jetzt mal so umgesetzt, und es klappt *-* dankeschn!
    Naja.. fast zumindest... Internetexplorer zickt rum.. ><
    [klick]
    In firefox ist es schn zentriert und alles, aber ie stckelt da den hintergrund an der rechten seite weg weil die breite ja kleiner ist... XO
    Kann man auch die Breite vom Hintergrundbild angeben, zustzlich zur Div-Breite?
    *verwirrt ist.*
    *SelfHtml absuch*

    E: Okay, das ganze shice IE spinnt rum, das will auch nicht zentrieren.. *ie hass* >:0

    Aber vielen dank fr deine Hilfe Alice! @.@ *verbeug*



    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: 1058

    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


       ALL-INKL.COM - Webhosting Server Hosting Domain Provider