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
left oder right)" 
diesen brauchst ihr um das Design zu bauen.
So siehst der Grundaufbau aus:
1 |
<div align="center">
|
Dies musst du zwischen <body></body> einbauen
Bei dem ersten DIV (<div align="center">
wird angeben, dass es mittig positioniert werden soll, darauf wird angeben, wie Breit die Seite sein soll (<div style="width:800px"> , 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"> 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
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 |
<div align="center">
|
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
#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.
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...
#1 von Sniper
Liebe Grüße
Sniper
Bei Fragen oder Probleme PM me oder schreib in das Forum
n1 Tut werde aba net draus schlau ....
Liebe Grüße
Sniper
Bei Fragen oder Probleme PM me oder schreib in das Forum
jetzt nur noch so ein arbeiten in meine hp das es auch gut aus sieht
bin ja anfänger.