Benutzerdefinierte Suche

css padding Problem

  1. cym

    cym Thread StarterMacUser Mitglied

    Mitglied seit:
    03.05.2004
    Beiträge:
    1.348
    Zustimmungen:
    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:
     
  2. joerns

    joernsMacUser Mitglied

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

    cym Thread StarterMacUser Mitglied

    Mitglied seit:
    03.05.2004
    Beiträge:
    1.348
    Zustimmungen:
    9
    :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

    MacsimilianMacUser Mitglied

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

    stealth-mlMacUser Mitglied

    Mitglied seit:
    13.02.2004
    Beiträge:
    387
    Zustimmungen:
    10
    ?????????

    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 :)
     
    stealth-ml, 02.02.2005
  6. beebop69

    beebop69MacUser Mitglied

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

    cym Thread StarterMacUser Mitglied

    Mitglied seit:
    03.05.2004
    Beiträge:
    1.348
    Zustimmungen:
    9
    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...
Ähnliche Themen - css padding Problem
  1. dennz2017
    Antworten:
    2
    Aufrufe:
    314
  2. mingorius
    Antworten:
    4
    Aufrufe:
    362
  3. hello
    Antworten:
    1
    Aufrufe:
    239
  4. Hoooray
    Antworten:
    2
    Aufrufe:
    336
    Hoooray
    21.07.2015
  5. Kemna
    Antworten:
    6
    Aufrufe:
    570