Anzeige
Tutorialbeschreibung

CSS Tutorial - Teil 3

CSS Tutorial - Teil 3

In diesem Teil beschreibe ich das <div> Element. Da es zu umfangreich wäre alles zu beschreiben, habe ich mich auf die wichtigsten Sachen beschränkt.
Hoffe natürlich das euch das reicht, was ihr zu lesen bekommt.


Was genau ist ein <div>?

Ein <div> ist ein Blockelement mit dem Internetseiten strukturiert werden. Die Abkürzung kommt von division ( Bereich ).Man spricht auch von "Containern".
Alles was in einem <div> steht, gehört zum Inhalt dieses Blockelements.

Man kann ein <div> nach Belieben ausrichten, formatieren, unsichtbar machen. Auch ist es kein Problem mittels der Eigenschaft "z-index" mehrere Container zu "stapeln".
Ebenso ist es möglich beliebig viele <div> ineinander zu verschachteln. Da sind dem Anwender keine Grenzen in der Anzahl gesetzt.

Schritt 2:

Wie sieht also ein solcher Container aus?

Ich werde immer wieder Eigenschaften nennen, wie z.B. float, color,... Lasst euch nicht beirren, diese werde ich die nächsten Tage in einer eigenen Datei vorstellen und beschreiben. Also, alles nacheinander.:-P

Beispiel:

<div></div>

Allerdings sieht man so noch gar nichts was sich hätte verändern können auf der Seite.

Wenn man jetzt mehrere <div> auf der Seite einsetzen möchte, sollte man die einzelnen Elemente kennzeichnen, benennen.
Dies kann man mit einem Selektor tun, entweder ID oder mit einer Klasse ( class ).
Der Unterschied zwischen beiden besteht darin, das der Wert einer ID nur einmal vorkommen darf. Der einer Klasse kann beliebig oft vorkommen.

In der CSS Datei wird vor den ID-Namen ein # gesetzt. Vor den einer Klasse ein .

Was man bei der Zentrierung eines <div> nicht mehr verwenden sollte, ist das Attribut align. Stattdessen sollte man per CSS ausrichten, da align in Zukunft entfallen soll.

Höhe/Breite:

Die Höhe und Breite kann man in px angeben aber auch in Prozent. Möchte man z.B. ein <div> haben das über die ganze Seite geht und nicht pixelgebunden sein soll nimmt man einfach 100%. Natürlich kann man auch weniger nehmen, halt so wie breit man das Element haben möchte.

Hintergrund:

Wem eine Hintergrundfarbe nicht ausreicht kann, der kann mittels CSS auch ein Hintergrundbild zuweisen.Die Eigenschaft dazu lautet background-image: url(hintergrund.gif). Bitte dabei auf die genaue Pfadangabe achten. Ein solches kann man bei Bedarf in horizontaler oder vertikaler Richtung, aber auch über den ganzen Container wiederholen lassen. Dazu gibt es die Eigenschaft repeat mit den Werten inherit, no-repeat, repeat, repeat-x und repeat-y.

Rahmen:

Mittels border kann man einem Container einen Rahmen zuweisen. Dort gibt es viele verschiedene Variationen. Aber auch gibt es Unterschiede bei der Darstellung in verschiedenen Browsern, z.B. kann man bei Mozilla Browsern einen runden Rahmen zuweisen, der im Internet Explorer allerdings eckig dargestellt wird.
Die Breite der Rhamen kann man beliebig einstellen, auch die Art z.B. durchgezogen, gepunktet, gestrichelt, doppelt usw.


Innen/Außenabstand:

Man kann den Innenabstand sowie den Außenabstand eines Containers einstellen, wie man es braucht. Mit padding wird der Innenabstand, und mit margin der Außenabstand eingestellt. Bei beiden Eigenschaften kann man entweder für jede Seite eine eigene Eigenschaft angeben z.B. margin:left; margin-top; . Auch kann man alles in einer margin angeben, aber man sollte die richtige Reihenfolge beachten. Diese ist oben, rechts, unten, links. Ansonsten wird die Eigenschaft nicht richtig interpretiert.

Somit kann man einen Container auch positionieren, wenn man z.B. von links und von oben einen bestimmten Abstand haben möchte ohne absolut positionieren zu müssen.

Fluß:

Wenn wir ein <div> links an den Seitenrand legen möchten und alles andere um dieses <div> "herumfließen" soll, so nehmen wir die Eigenschaft float.
Float kann die Werte none, inherit, left und right haben.
Somit werden alle anderen Elemente dieses <div> umfließen, also links liegen lassen.

 

Überlauf/Overflow:

Standardmäßig passt sich ein <div> in der Höhe dem Inhalt an. Dies kann man beeinflussen, wenn man z.B. einen Scrollbalken haben möchte.
Mit der Eigenschaft Overflow und den Werten hidden, scroll, visible und auto kann man dies einstellen.

 

Hoffentlich hat es euch ein wenig weitergeholfen!
Es gibt einiges zu beachten bez. der Anzeige diverser Elemente im Internet Explorer, aber darauf werde ich etwas später eingehen. So, ich denke das wären einige Infos, möchte auch nicht das es zu viel auf einmal wird.

Ich werde in den nächsten Tagen mal ausführlich über wichtige Eigenschaften und ihre Werte schreiben. Schreibt mir wie immer eure Kritik und evtl. Wünsche was ich vergessen habe und ihr denkt es wäre doch reinzubringen.

 
Bis zum nächsten Tutorial,

 
Peter


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von DrNormal
  • 24.11.2011 - 18:12

Gutes Tut, hat mir sehr gut weiter geholfen!

Portrait von stonetech
  • 29.11.2010 - 14:36

Danke für die Beschreibung, genau das was ich gerade brauche!

Portrait von Susum
  • 08.08.2010 - 16:38

danke

ich konnte alles gut nachvollziehen

Portrait von Muskelbiber
  • 16.04.2010 - 09:39

Schön erklärt Grade für Anfänger gut Daumen hoch

Portrait von JulianART
  • 06.04.2010 - 10:06

nice tut danke hat mir sehr geholfen :)

Portrait von Susanne_1108
  • 19.02.2010 - 11:01

Vielen Dank, das ist genau das richtig für mich als Anfägerin.
Servus Susanne

Portrait von Logifech
  • 21.10.2009 - 15:36

Gefällt mir echt gut Danke

Portrait von Fotowelt14
  • 02.10.2009 - 12:59

Eigentlich schon gut erklärt, aber ich denke wer sich mit der Webgestaltung befasst, holt sich Fachliteratur oder sucht im Internet spezifische Tutorials.
Denn dann wird auch die Anwendung von Div`s an Beispielen erläutert und der eigentliche Sinn erklärt.

Portrait von Flip_p
  • 23.06.2009 - 12:52

ja, ich bin einsteiger, und es ist gut erklärt!

Portrait von Harald_Kersting
  • 23.06.2009 - 09:34

Vielen Dank für das Tutorial. Für Einsteiger sehr gut erklärt. Wann geht es weiter ??

Portrait von roger1
  • 20.06.2009 - 16:05

Das war eine gute Einführung, wenn jetzt noch Beispiele folgen würden, wäre super.

Portrait von Onkeldopi
  • 19.04.2009 - 12:29

Ich weis nicht wie das tut gedacht war aber ich finde es etwas zu knapp,
alles wird nur angerissen aber nicht wirklich eingängig erkläert und ist eher ein Überblick über das was möglich WÄHRE und kein richtiges tutorial

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.10.2008 - 22:34

Hallo Thema ist sehr interessant, aber kannst Du auf die Zentrierung einer Seite über DIV genauer eingehen, ich habe das nicht verstanden.
Grüße Marco aus Bremen

Portrait von sabine67
  • 13.09.2008 - 22:03

vielen Dank für das Tut

Portrait von scully81
  • 12.06.2008 - 10:39

danke für deine Mühe! :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 12.05.2008 - 17:49

hammer gut die css tutorials

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.05.2008 - 00:28

thx... nettes tut! aber muss mich jetzt an erstma die praxis ran traun. paar bsp wären nett

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 20.02.2008 - 08:18

super erklährt!
danke

Portrait von m-steffen
  • 30.10.2007 - 13:38

ein prob. weniger-
aber nun 2 neue!!!!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 25.09.2007 - 18:41

eigentlich kein schlechtes tutorial, aber wie meine vorgänger schon gesagt haben sehr textlastig;.( und z.B. bei deinem letzten Punkt:"Überlauf/overflow" schreibst du mit denn eigenschaft ... kann man...machen. Ein Beispiel code wäre nicht schlecht und außerdem eine erklärung der einzelnen eigenschaften, was z.b. bedeutet auto genau ??

x
×
×