1x bewertet

Div positionieren

von yumi  |  23.02.2007 um 23:28 h
CSS Grundlagen
Typ: CSS Grundlagen
Stufe:Einfach Mittelmäßig
Ihr könnt euren Text oder eure Bilder auch mit div ausrichten :)

Dazu braucht ihr eigentlich nur einen einfach Code in euren Body Breich einfügen, vergesst aber nicht nachher noch alles mit </div> zu schließen ;)

<div style="position: absolute; top:ZAHLpx; left:ZAHLpx;">

Bei top:ZAHL; fügt ihr den Abstand des Texfeldes/der Grafik von oben ein und bei left:ZAHL; den Abstand vom linken Rand.

Jetzt wollt ihr aber das euer text in jeder Auflösung ganz unten ist? Ganz einfach: ersetzt top: durch bottom:

<div style="position: absolute; bottom:ZAHLpx; left:ZAHLpx;">

Und wenn ihr euren Text rechts haben wollt, einfach left: durch right: ersetzen.

Jetzt könnt ihr aber noch bestimmen wie breit und hoch euer Textfeld wird.
Fügt dazu width(Breite): und height (Höhe): Werte ein:

<div style="position: absolute; top:ZAHLpx; left:ZAHLpx; width:ZAHLpx; height:ZAHLpx; overflow:auto; ">

Jetzt müsst ihr noch entscheiden ob ihr von oben nach unten oder von links nach rechts scrollen wollt. Wenn ihr von links nach rechts scrollen wollt, fügt overflow-y:hidden; ein, wenn ihr von oben nach unten (das ist meistens der Fall) scrollen wollt dann overflow-x:hidden; . Ihr könnt es auch so machen das der text nach unten unedlich weiter geht ohne das er in einem fenster steht, entfernt dafür einfach height:ZAHLpx; overflow:auto; .

Jetzt könnt ihr aber euer Textfeld noch stylen :)
Fügt dafür einfach verschiedene Codes ein, ein paar Beispiele:

background-color: #FFFFFF; -> Hintergrundfarbe des ganzen Textfeldes
color: #000000; -> Farbe der Schrift
font-family: tahoma; -> Schriftart
text-weight: bold; -> der ganze Text ist fett
text-decoration: underline; -> der ganze Text ist unterstrichen
letter-spacing: 1px; -> Zwischen den Buchstaben ist ein Pixel Abstand


Diese Liste könnte man natürlich noch ewig so weiterführen Smilie

Viel Spass



1 Kommentare




Kritiker

Man sollte jedoch das Positionieren generell lassen und lieber mit Margin/Padding arbeiten.
Trotzdem nett erklärt ;D
am 29.11.2009 um 21:36 Uhr