css padding Problem

Dieses Thema im Forum "Web Page Design" wurde erstellt von cym, 02.02.2005.

  1. cym

    cym Thread Starter MacUser Mitglied

    Beiträge:
    1.352
    Zustimmungen:
    9
    MacUser seit:
    03.05.2004
    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:
     
  2. joerns

    joerns MacUser Mitglied

    Beiträge:
    214
    Zustimmungen:
    3
    MacUser seit:
    27.08.2004
    Dafür solltest du wohl erstmal eine Frage verständlich formulieren, dann kann dir sicher geholfen werden...
     
  3. cym

    cym Thread Starter MacUser Mitglied

    Beiträge:
    1.352
    Zustimmungen:
    9
    MacUser seit:
    03.05.2004
    :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?
     
  4. Macsimilian

    Macsimilian MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    MacUser seit:
    07.10.2004
    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 ;-)
     
  5. stealth-ml

    stealth-ml MacUser Mitglied

    Beiträge:
    389
    Zustimmungen:
    10
    MacUser seit:
    13.02.2004
    ?????????

    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 :)
     
  6. beebop69

    beebop69 MacUser Mitglied

    Beiträge:
    457
    Zustimmungen:
    0
    MacUser seit:
    23.08.2004
    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?
     
  7. cym

    cym Thread Starter MacUser Mitglied

    Beiträge:
    1.352
    Zustimmungen:
    9
    MacUser seit:
    03.05.2004
    Danke für eure Antworten! :)
    Hat sich erledigt. Ich habe einfach bei der Höhe und Breite je 10px abgezogen.

    Gruss,
    cym :cool:
     
Die Seite wird geladen...