Marktplatz Downloads Tutorials Forum

Designnation bietet auch:

Tutorial hinzufügen

Beliebte Links Weitere Optionen

Tutorial suchen

Titel

Schlüsselwörter

(X)HTML / CSS Tutorial: CSS 3 Spaltenlayout, 4.01 Valide, ab IE 6, FF 1.5, Opera 8



Ranking: +7   Kommentare: 7   |   Bewertung: Keine Berechtigung!  

Also dies ist mein zweites Tuturial und ich hoffe es funktioniert hier einwandfrei.

Vorwort:
Ich habe mir mal gedacht (nachdem cih mir mal die tutorials hier durchgeblättert habe) mach mal ein Tut für CSS+HTML
das ein 3Spaltenlayout anzeigt mit folgenden aufbau

Seitenaufbau
Seitenaufbau


Es ist Valide zum Doctype strict.dtd html v4.01 und wird in den browsern Internet Explorer ab version 6 Firefox ab version 1.5 und Opera ab version 8 gleich angezeigt.

Nun zum Tutorial:

Schritt 1:



Als erstes erstellen wir das html Grundgerüst

Code:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>Seitentitel</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

  </head>

 <body>

 </body>

</html>




Das sieht dann so aus. Wir haben hier das grundgerüst mit Dokumentdeklaration und dem charset was wichtig ist um es zu validieren (validome.org oder validator.w3.org).


Schritt 2:



Im zweiten Schritt kommt jetzt das Boxmodell in den Body bereich, das dann so aussieht:

Code:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title>Seitentitel</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

  </head>

 <body>

  <div id="box">

   <div id="header">Header</div>

   <div id="content">

    <div id="navi">Navigationslinks</div>

    <div id="contentarea">Seiteninhalt, Texte etc.</div>

   </div>

   <div id="footer">Footer</div>

  </div>

 </body>

</html>




Ich habe hier folgende ID's definiert:
box = sie umfasst das layout und hält es in einen kasten fest sodass die anderen Divlayer nicht im Browser umherirren.
header= ganz klar diese box beinhaltet den Header, dem Titelbild der seite.
content= eine weitere box, die die Navigation und den Contentbereich einschließt.
navi= die Navi ist selbstverständlich für die liste der links verantwortlich.
contentarea= hier kommt der seiteninhalt rein der auf der seite angezeigt wird
footer= ein footer der automatisch der seitenhöhe mitwandert und immer direkt unterm content sich wiederfindet.


Schritt 3:



Ich hoffe ihr seit bis hier hin mitgekommen, aber ich denke dazu wäre jeder hier in der lage.

Schritt 4:



Nun zum eigentlichen CSS teil der das Style anzeigt:

Code:




/*Styleangaben*/



* {

  padding: 0;

  margin: 0;

  border: 0;

}



body {

  margin: 5px;

}



#box

{

  width: 800px;

  margin: 0 auto;

}



#header {

  width: 800px;

  height: 160px;

  background-color: #ff0000;

}



#content {

  width: 800px;

  height: 400px;

}



#navi {

  width: 150px;

  height: 400px;

  float: left;

  background-color: #ffff00;

}



#contentarea {

  width: 650px;

  height: 400px;

  float: right;

  background-color: #0000ff;

}



#footer {

  width: 800px;

  height: 20px;

  background-color: #00ffff;

}




wir haben im ersten Block
das *
das ist der HTML Star Hack und macht es möglich gesonderte einstellungen für den IE 6+ zu definieren.

im zweiten Block
haben wir im bodytag den margin auf 5px gesetzt. Das setzt die seite oben 5 Pixel von rand hinunter.

im dritten Block
ist die box definiert, die die ganze seite umfasst mit einer breite von 800pixeln.

im vierten Block
ist der Header definiert mit 800x160pixeln, dies kann mit der höhe beliebig angepasst werden.

im fünften Block
ist der content definiert. der die navi und den content zusammen schließt.

im sechsten Block
ist die navi definiert. die eine breite 150px hat.

im siebten Block
ist die contentarea definert. mit einer breite von 650px (sodass mit auf 800px kommt 150px + 650px = 800px).

im achten Block
ist der footer definiert. er hat eine breite von 800px und wandert mit der contentlänge immer mit.


Wichtig: Block 5 - Block 7
Hier ist eine höhe von 400px angegeben. diese könnt ihr ruhig entfernen oder anpassen. die höhe ist nur definiert um das layout mit der festen größe sichtbar zu machen also überflüssg ;-)

also ich hoffe es ist verständlich rübergekommen und ihr könnt damit etwas anfangen bei fragen stehe ich euch gerne zur verfügung: ICQ: 287-036-951

greetz
Venomace

Veröffentlicht von: Venomace
Veröffentlicht am: 20 Aug. 2008
Bookmarks: social bookmarking yigg it Linkarena Technorati Yahoo Mr. Wrong
Schlüsserwörter: CSS grundgerüst HTML layout sheet style Stylesheet


Themenverwandte Tutorials


Kommentar(e) (7)


CptOsyrix sagt:

Vielen Dank für dieses Tut. Es hat mir prima geholfen und ist auch gut und verständlich erklärt. Das man einige Vorkentnisse braucht, ist wohl klar =)

Vielen Dank !

22 Dec. 2009 09:36:29 • Antworten


m4nu sagt:

kann mir das mal bitte einer mit dem class nocheinmal erklären?

27 Jun. 2009 10:16:01 • Antworten


deleted_1456821596 sagt:

Warum verwendest du IDs? - Du weist hoffentlich wann man id und wann man class verwendet oder?

Desweiteren ist es vorteilhafter, wenn man immer den direkten css pfad angibt.

bspw für folgenden aufruf:

html:

Code:



<div class="container">
<div class="status"></div>
</div>



css:
.container {}
.container .status {}



Zuletzt bearbeitet am: 5 May. 2009 18:50:19

5 May. 2009 18:49:27 • Antworten


Th0ma5 sagt:

Dieser Beitrag wurde leider gelöscht!

Zuletzt bearbeitet am: 25 Oct. 2008 20:09:22

25 Oct. 2008 20:07:42 •


manuakasam sagt:

Weiterhin werden für Content und Navigation zwei verschiedene Boxen benutzt, was zwar in Ordnung ist, jedoch unter Umständen zu einem unschönen Effekt führt.
Was nämlich: wenn Content und Navigation immer gleichlang angezeigt werden sollen?
Dies muss in einem solchen Tutorial erläutert werden.

6 Oct. 2008 10:53:58 • Antworten


jormungand sagt:

Ich finds ganz gut. Ein guter Weg die beliebten Frames zu umgehen. Schön, dass du den Quelltext unter dem Screenshot erläutert hast.

3 Oct. 2008 11:08:37 • Antworten


metsieder sagt:

ich seh aber nur 2 spalten oO
desweiteren steht ziehmlich viel blödsinn drinnen...

22 Aug. 2008 15:39:40 • Antworten



Anfang

<<

1

>>

Ende

Kommentar eintragen


!! Jetzt kostenlos anmelden oder einloggen und mitdiskutieren!


Partner: • Designer in ActionFlash HilfeTutorials.dePixelio.deFlashstar BlogLizenzfreie Bilder