css padding Problem

cym

cym

Aktives Mitglied
Thread Starter
Dabei seit
03.05.2004
Beiträge
1.363
Reaktionspunkte
9
Hallo zusammen

Ich taste mich langsam an css-layer ran. Von verschiedenen Webseiten kopierte ich den Code raus um da abzuschauen etc...

Das Problem:
Wenn ich bei einem layer padding: 5px schreibe, verschiebts sich der ganze layer. Vielleicht sollte das so sein, aber da habe ich noch keine Ahnung.

Hier den Code: (Das Stylesheet baute ich nur in der Seite, damit es einfacher ist zu pröbeln.)
Code: 
<html>
  
  <head>
  	<title>test</title>
  	<style type="text/css">
  	body 	{ background: #f5f5f5 }
 	#ol 	{ background-color: #ff8c00; clear: none; border-top: 1px solid #000; border-left: 1px solid #000; position: absolute; top: 10px; left: 10px; width: 170px; height: 200px; display: block }
 	#or		 { background-color: #dcdcdc; border-top: 1px solid #000; border-right: 1px solid #000; position: absolute; top: 10px; left: 180px; width: 500px; height: 200px; visibility: visible; display: block }
 	#navi 	{ background-color: #000; border-right: 0px solid #000; border-left: 0px solid #000; position: absolute; top: 210px; left: 10px; width: 670px; height: 40px; visibility: visible; display: block }
 	#ul	 { background-color: #e2e198; padding: 5px; border-bottom: 1px solid #000; border-left: 1px solid #000; position: absolute; top: 250px; left: 10px; width: 170px; height: 280px; visibility: visible; display: block }
 	#ur 	{ background-color: #fee9a9; margin: 0px; padding: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; position: fixed; top: 250px; left: 180px; width: 500px; height: 280px; display: block }
 	.body 	{ font-family: 'Trebuchet MS', Verdana, sans-serif, Arial; font-size: 12px; font-weight: normal; color: 000000 }
  	</style>
  </head>
  
  <body>
  	<div id="ol"></div>
  	<div id="or"></div>
  	<div id="navi"></div>
 	<div id="ul" class="body"><p align="justify">Test Text Test Text Test Text Test Text Test Text Test Text Test Text ...</p></div>
 	<div id="ur" class="body"><p align="justify">Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text Test Text ...</p></div>
  </body>
  
  </html>

Ich hoffe, die Profis können mir helfen :)

Gruss,
cym :cool:
 
Dafür solltest du wohl erstmal eine Frage verständlich formulieren, dann kann dir sicher geholfen werden...
 
joerns schrieb:
Dafür solltest du wohl erstmal eine Frage verständlich formulieren, dann kann dir sicher geholfen werden...
Zum Vergrößern anklicken....
:rolleyes: Wenn ich bei padding einen Wert eintrage, verschiebt er sich nach rechts und unten. Wie kann man das ändern, dass er an der gleichen Stelle bleibt?
 
ich weiss jetzt nicht genau was du meinst, aber ich denke mal das es sowas hier ist

bei padding: 5px; verschiebt sich ja alles also schreibst du padding-left: 5px; wenn du das polster nur links haben möchtest ;-)

das gleiche geht mit rechts padding-right; padding-bottom für unten und padding-top für oben guck dir einfach mal z.B. die SelfHTML CSS referenz an

den link weiss ich nicht mehr genau aber gib es einfach bei google ein ;-)
 
?????????

padding besagt, dass der text innerhalb des layers verschoben wird. ein margin würde, meines erachtens, den layern verschieben.

kann aber auch sein, dass ich dich nicht richtig verstanden habe :)
 
dem box-model de w3c zufolge werden padding, border und margin bei z.b. einer breite von 200px hinzuaddiert.
beispiel:
width:200px
margin:10px
padding:5px
border: 1px solid black

das ergibt: 200 + 20 (margin) + 10 (padding) + 2 (border)= 232px

vielleicht verschiebt sich deshalb dein layer? hast du das nicht bedacht?
Ach ja, der doctype innerhalb einer html-datei ist auch noch wichtig in dem fall.
was steht da bei dir?
 
Danke für eure Antworten! :)
Hat sich erledigt. Ich habe einfach bei der Höhe und Breite je 10px abgezogen.

Gruss,
cym :cool:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten