Tutorials

Div optimierte Seite Tutorial

Einloggen
Benutzername:
Passwort:

Passwort vergessen?
Kostenlos
Anmelden
anzeigen
Div optimierte Seite


2522 - ntmb - 27.06.2006 09:48 Uhr - Version: 1 - - verlinken als BB-Code


So in diesen Tutorial werde ich euch mal zeigen, wie ihr für eure Seite ein eigenes Layout ganz ohne Tabllen macht, dies hat dann auch den Vorteil, dass es besser bei den Suchmaschinen ankommt.

Ich denke mal jeder kennt von euch den Befehl <div>, diesen benutzt ihr meistens um den Text links,mittig oder rechts zu positionieren, aber es geht auch mehr und zwar kann man auch seine Seite damit aufbauen.

1. Bei div gibt es noch einen sogenaten befehl float (style="float Smily NR:9 left oder right)" Smily NR:7 diesen brauchst ihr um das Design zu bauen.

So siehst der Grundaufbau aus:
1
2
3
4
5
6
7
8
9
10
<div align="center">
    <div style="width:800px">        
        <div style="height:100px;">Header</div>
        <div style="width:145px;float:left">Menü links</div>
        <div style="width:510px;float:left">Main<br><br><br></div>
        <div style="width:145px;float:right">Menü rechts</div>
        <br style="clear: both">
        <div style="height:30px;">Fonter</div>    
    </div>
</div>

Dies musst du zwischen <body></body> einbauen

Bei dem ersten DIV (<div align="center"> Smily NR:7 wird angeben, dass es mittig positioniert werden soll, darauf wird angeben, wie Breit die Seite sein soll (<div style="width:800px"> Smily NR:7 , in diesem Fall währe es 800px. Danach kommt der Header <div style="height:100px;">Header</div>, dort wird angeben, wie hoch er sein soll, hier ist er 100px hoch. Nun kommen wir zum wesentlichten Teil, hier musst du genau drauf achten, dass die Breite, der 3 Teile (Menü links, Main, Menü rechts) nicht die gesamt Größe übersteigt (hier: 800px). Du kannst auch die ganzen Teile auch beliebig von der Breite anpassen, aber wie gesagt du musst bedenken, dass es nicht die gesamt Größe übersteigen darf (!), dieser Tag (<br style="clear: both"> Smily NR:7 ist dafür zuständig, dass float beendet wird und darauf kommt der Fonter, dieser funktzioniert genau so wie der header, wo du höhe angeben musst

So nun kommen wir zu dem künstlerrichen Teil Smily NR:2

Den Grundbau kannst du natürlich anpassen, du könntest auch bei den jeweiligen Dingen einen Rahmen setzen, mehr dazu findest du unter http://de.selfhtml.org/css/eigenschaften/rahmen.htm.
Du musst, aber bedenken, dass wenn du bei Menü links oder sonstiges einen Rahmen von einen 1px machst die Breite um 2 abziehen musst, logischer weise währ es in diesem Fall die Breite 144px und bei border 2px -> 142px.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div align="center">
    <div style="width:800px;border:2px solid #000000;">        
        <div style="height:100px;border-bottom:2px solid #000000;background:#e7e7e7"><br><br>Header</div>
        <div style="width:143px;float:left;border-right:2px solid #000000;border-bottom:2px solid #000000;background:#5b5b5b">
        Menü links<br>Menü links<br>Menü links<br>Menü links<br>Menü links<br>Menü links
        </div>
        <div style="width:510px;float:left">
        Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>Main<br>
        </div>
        <div style="width:143px;float:right;border-left:2px solid #000000;border-bottom:2px solid #000000;background:#5b5b5b">
        Menü rechts<br>Menü rechts<br>Menü rechts<br>Menü rechts<br>Menü rechts<br>Menü rechts
        </div>
        <br style="clear: both">
        <div style="height:30px;border-top:2px solid #000000;background:#7b7b7b">Fonter</div>    
    </div>
</div>


So schließlich wollte ich euch noch sagen, dass man am besten ein Design hinkriegst, indem man etwas ausprobiert und sogesagt ein bisschen herumspielt, irgendwan kriegt man bestimmt ein Design hin, dass den eigenen Ansprüchen entspricht.

So hier noch ein nützliches Tutorial, das zu diesem Theman passt:
http://www.ntmb.de/tutorials/schnipsel_view_92.html


Ich hoffe ich konnte euch mit diesem Tutorials weiterhelfen
mfg Eugen

Mitglieder-Kommentare


#4 von mesti
super erklärt und einige sachen daraus konnte ich gebrauchen. Smily NR:2

jetzt nur noch so ein arbeiten in meine hp das es auch gut aus sieht Smily NR:2

bin ja anfänger.
Smily NR:2 Smily NR:2 Smily NR:2 Smily NR:2
#3 von snk
Sehr Gutes Tut^^

Ich habe bis jetz immer gern das 3x3 Tabellen-Raster verwendet da ich nie auf die Idee kam die Div's auch mal zu verschachteln und in der Größe vorher so genau zu definieren... Hab sie sonst nur mithilfe vom CSS Befehl "position" an die richtigen Stellen gesetzt.
Flamerbedarf zu verkaufen! Ich biete euch Feuer, Fackeln, Brandsätze und Großflächenbrände an. Sendet mir einfach eine PM. Bei Bedarf gibts auch Mistgabeln...
#2 von skater
alles gut erklärt, super!
#1 von Sniper
n1 Tut werde aba net draus schlau ....

Liebe Grüße
Sniper

Bei Fragen oder Probleme PM me oder schreib in das Forum

Nur registrierte Mitglieder könnten einen Kommentar schreiben.

Melde dich doch ganz einfach an, es ist kostenlos. :-)