Tutorial... aber ich verzweifel grad dran :-(

**walterschmitz** · 16.07.2011 09:29

Hallo,

habe erst eben das Tutorial gefunden, weil ich erst jetzt mit HTML und CSS zu tun habe.

Dafür erst einmal danke, dass man sich die Mühe gemacht hat.

Ich bin aber gerade bei Aufgabe 1 also die rote Box links und oder egal in welcher Ecke zu positionieren.

Dazu hab ich erstmal die margin und paddings auf 0 gesetzt und wollte sie einzeln so setzen, dass es passt... je nach Aufgabe.

1. Aufgabe nur mit Margin-Werte arbeiten.

Hier erstmal der Quellcode allgemein:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Boxmodell Übung</title>
<style type="text/css">
#grosse_box {
   width:500px;
   height:500px;
   background-color:#ffff00;
   margin-top:0px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:0px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   }
   
#kleine_box {
  width:50px;
  height:50px;
  background-color:#ff0000;
  margin-top:0px;  
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
  padding-top:0px;
  padding-right:0px;
  padding-bottom:0px;
  padding-left:0px;
  }       
</style>
</head>

<body>
<div id="grosse_box">

 <div id="kleine_box"></div>

</div>
</body>
</html>

Aufgabe:

Um sich nun mit diesen beiden Attributen etwas vertraut zu machen, habe ich hier eine kleine Aufgabe für euch. Wir habe in folgendem Text eine grosse gelbe Box in welcher in der rechten Ecke oben eine kleine rote Box positioniert ist.
- Die erste Aufgabe ist es die kleine rote Box mit dem Attribut margin in der unteren rechten Ecke der gelben Box zu positionieren.
- Die zweite Aufgabe ist es die kleine rote Box mit dem Attribut padding in der Ecke rechts unten zu positionieren.
Die zweite Aufgabe ist nicht ganz so einfach zu lösen wie die erste. Ich wünsche euch viel Spass beim rätseln und rumprobieren. Einfach den Quelltext in einen Editor kopieren und los geht´s...

für unten rechts in die Ecke heisst das für mich, dass ich die Box von Oben und von links um 450 px verschieben muss.

Also... eingefügt

Code:

#kleine_box {
   width:500px;
   height:500px;
   background-color:#ffff00;
   margin-top:450px;
   margin-right:0px;
   margin-bottom:0px;
   margin-left:450px;
   padding-top:0px;
   padding-right:0px;
   padding-bottom:0px;
   padding-left:0px;
   }

Dabei verschiebt sich aber interessanterweise die gelbe Box inkl. der roten Box um 450 nach rechts und nach unten.

Warum ist das so?

Oder hab ich das mit dem übergeordneten Box falsch verstanden?
Eigentlich ist das DIV große Box doch die übergeordnete Box, sodass der Abstand zur übergeordneten großen Box dann von oben (oben, rechts, unten, links) 450,0,0,450 sein sollte
wenn ich das margin in die große Box einfüge, dann verschiebt sie sich auch... wo ist der Fehler im Kopf...

Danke euch für kurze Hilfe

**wildmieze** · 16.07.2011 13:09

Meines Erachtens hast Du keinen Fehler im Kopf

.. das müsste der "collapsing margins"-Effekt sein. Google mal danach. Wenn Du der Elternbox (dem großen, gelben div) zB ein padding-top von 1px gibst, müsste der Effekt verschwinden, wenn ich es richtig in Erinnerung habe.
.. und ich gehe davon aus, daß die 500px Höhe/Breite der kleinen, roten Box ein Tippfehler ist ..?

**walterschmitz** · 16.07.2011 23:10

ja... 500px ist noch ein Tippfehler... gemeint ist natürlich 50px... danke für den Tippfehler.

bei dem anderen werde ich es ausprobieren.
Danke dafür... ich schau mal, was dann rauskommt.

**walterschmitz** · 17.07.2011 00:28

übrigens... danke... ich habe es probiert und es funktioniert

Sehr sehr gut...
Dann kann ich mich in die weiteren Aufgaben des Tutorials verstricken

zur Startseite vom TP

Thema: Tutorial... aber ich verzweifel grad dran :-(

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Tutorial... aber ich verzweifel grad dran :-(

Ähnliche Themen

Gut das heise dran gedacht hat

Fehlermeldung xtCommerce... hab nix dran gemacht

Kostenloser Webhoster mit allem drum und dran

Fastenzeit: Wer hält sich dran?

Aktive Benutzer

Aktive Benutzer