nicht angemeldet
Positionen Div
Hallo,
ich absolviere gerade einen Studiengang in Webdesign, bin aber kompletter Neuling mit CSS & Programmierung und so. Gerade die Positionierung der einzelnen Sachen auf einer Webseite bereitet mir Kopfschmerzen. Nun habe ich auf einem Arbeitsblatt meines Dozenten folgende ausführungen erhalten:
ZITAT:
-------------------------------
Sobald Sie ein Element auf eine Internetseite setzen müssen Sie sich Gedanken dazu machen, wo und wie das Element angezeigt werden soll: gleich am Rand, mit einem gewissen Abstand von rechts oder halb über einem anderen Element. Außerdem regeln Sie über die Positionierung auch den Textfluss um die Elemente.
Bei der Positionierung mit den Cascading Style Sheets stehen Ihnen zwei Möglichkeiten offen:
Die absolute Position: Sie bezieht sich ausschießlich auf den Fensterrand.
<html>
<head>
<title>ein Titel</title>
</head>
<body>
<div style="position:absolut";>
<p>absolute Positionierung</p>
</div>
</body>
</html>
Die relative Position: Sie bezieht sich auf das vorherige Element.
<html>
<head>
<title>ein Titel</title>
</head>
<body>
<div style="border: none;background-color:#c0c0c0; float:left; height:2cm; width:2cm;>
<p>Das graue Kästchen steht links neben dem Text</p>
</div>
</body>
</html>
-------------------------------
ZITAT ENDE
Allerdings tut sich beim Eingeben der Beispiele nichts, bzw. erscheinen die Elemente nicht dort, wo sie angegeben sind. Ich kann mir irgendwie darauf keinen Reim machen, zumal ich in selfhtml gelesen habe, dass absolut auch relativ ist. Kann mir mal jemand helfen?
-
Bin zwar auch kein Profi...
<div style="position:absolut";>
aber eigentlich sollte das "position:absolute" heißen...
<div style="border: none;background-color:#c0c0c0; float:left; height:2cm; width:2cm;>
<p>Das graue Kästchen steht links neben dem Text</p>
</div>hier fehlt zumindest ein " am Schluss vom DIV Container
-
Hi,
ich absolviere gerade einen Studiengang in Webdesign, bin aber kompletter Neuling mit CSS & Programmierung und so.
Derjenige, der diese Aufgabe verbrochen hat, offensichtlich auch. ;-)
Sobald Sie ein Element auf eine Internetseite setzen müssen Sie sich Gedanken dazu machen, wo und wie das Element angezeigt werden soll: gleich am Rand, mit einem gewissen Abstand von rechts oder halb über einem anderen Element.
schön und gut, aber dies betrifft weniger die Positionierung als die Abstände, also margin und padding.
Außerdem regeln Sie über die Positionierung auch den Textfluss um die Elemente.
nö. Angaben zu position haben nichts mit Textumfluß zu tun - dazu ist float dar (und float *kann* auch zur Positionierung eingesetzt werden).
Bei der Positionierung mit den Cascading Style Sheets stehen Ihnen zwei Möglichkeiten offen:
Die absolute Position: Sie bezieht sich ausschießlich auf den Fensterrand.Unsinn - auf das nächsthöhere Vorfahrenelement, das nicht stativ postioniert ist. Diesen Fehler begehen eigentlich nur Anfänger.
<div style="position:absolut";>
war dies eigentlich ein Tippfehler von Dir?
Abgesehen davon wirrd hier ohne weitere Angaben nichts positioniert.Die relative Position: Sie bezieht sich auf das vorherige Element.
Noch größerer Unsinn. Relative Positionierung ist position:relative - float würde ich wirklich nicht hierunter bezeichnen).
<div style="border: none;background-color:#c0c0c0; float:left; height:2cm; width:2cm;>
Oops. border:none für ein DIV, wozu? Dimensionen in cm für den Bildschirm?
<p>Das graue Kästchen steht links neben dem Text</p>
Das ist ungenau. Der graue Kasten wird vom Text umflossen, was sich bei genügend Text bemerkbar macht. Um den Text komplett daneben zu positionieren benötigt man margin und eine ausreichende Breite.
Ich kann mir irgendwie darauf keinen Reim machen, zumal ich in selfhtml gelesen habe, dass absolut auch relativ ist. Kann mir mal jemand helfen?
Ich kann Dir nur raten, solche Aufgaben mit Vorsicht zu genießen und SELFHTML zu Rate zu ziehen, um nicht völlig Falsches zu lernen.
freundliche Grüße
Ingo-
Danke für die schnellen Antworten,
die Tippfehler waren nicht von mir, die waren vom Aufgabenblatt. :P Na ja, ich werde mir auf alle Fälle nochmal alles in SelfHTML durchgucken.
Das ist einfach irre schwer wenn man von allen Seiten unterschiedliche Infos bekommt, und dazu dann noch jeder Browser was anderes anzeigt. :(Vielen Dank für die Hinweise.
-
Hi,
die Tippfehler waren nicht von mir, die waren vom Aufgabenblatt. :P
ohje... was ist denn das für eine Ausbildungsstelle?
Na ja, ich werde mir auf alle Fälle nochmal alles in SelfHTML durchgucken.
Insbesondere - auch für den Aufgabensteller - empfehle ich nachzuschlagen:
position: "Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend. Denn absolute verhält sich durchaus relativ, wie die inneren div-Elemente im obigen Beispiel zeigen: relativ nämlich zum Rand des Elternelements, vorausgesetzt dieses Elternelement ist mit absolute, fixed oder relative positioniert. Wenn sonst kein Elternelement existiert, ist das body-Element das Elternelement. Die Angabe relative bezieht sich dagegen auf die Normalposition des Elements selbst. Die Angabe position: legt noch nicht fest, wo genau ein Element beginnen soll. Die Angabe ist nur sinnvoll, wenn Sie zugleich die gewünschte Startposition angeben."
float: "Mit float: können Sie bestimmen, dass nachfolgende Elemente das aktuelle Element bzw. den aktuellen Bereich umfließen."
margin und padding: Manche "Programmierer" glauben, ein Element absolute positionieren zu müssen, um die Default-Abstände des body-Elements zu umgehen.
CSS-basierte Layouts, Einführung: "Die CSS-Eigenschaft Seite position sollten Sie für CSS-Layouts nur im Ausnahmefall verwenden und die hierdurch mögliche Überlagerung von Elementen bei Schriftvergrößerung sowie die Platzierung außerhalb des sichtbaren Bereichs in kleinen Browserfenstern berücksichtigen."
CSS-basierte Layouts, Beispiele: Ein einfaches Beispiel für ein zweispaltiges Layout mittels float.
freundliche Grüße
Ingo
-
-