Padding zerstört Layout

**derHund** · 22.06.2006, 15:16

width/height vertragen sich nicht mit padding, nicht wirklich.

Ähm, einfachste Lösung: Nicht den äußeren Bereichen padding, sondern den inneren margin geben.

**Lennie** · 22.06.2006, 15:22

ok probiere ich mal aus... genau wie bei dem padding dann immer margin-top:; ne?

**Lennie** · 22.06.2006, 15:24

Code:

#header{
 position:relative; 
 height:240px; 
 background-image:url(header.jpg); 
 width:100%;
 margin-top:17px;
 margin-left:8px;
}

So habe jetzt versucht das menu inne ecke des headers zu packen,
das layout wird aber wie beim padding zerstört

**wahsaga** · 22.06.2006, 15:42

Möchtest du vielleicht erstmal genauer definieren, was du eigentlich mit "zerstört" meinst ...?

Und beschäftige dich mal mit dem Stichwort Box Model.
Dass width und height um ein eventuelles Padding erweitert werden, ist nämlich absolut korrekt.

**Lennie** · 22.06.2006, 15:47

Also: Durch das Padding verschiebe ich sozusagen den Div Container,
statt das der Inhalt im Div zur Seite geschoben wird, schiebt sich der inhalt zusammen um die im Padding angegebenen werte.
Wie du sagst sozusagen: erweitert.

Wie der Hund gesagt hat:

Nicht den äußeren Bereichen padding, sondern den inneren margin geben

Ich weiß nur leider nicht, wie ich nur den Inneren teil verschiebe, was er glaube ich meinte.
Und mit margin und padding weis ich nur soweit als dass in diesem Falle dasselbe bewirkt

**wahsaga** · 22.06.2006, 15:57

Original geschrieben von Lennie
Also: Durch das Padding verschiebe ich sozusagen den Div Container,

Nein, ganz bestimmt nicht.
Padding ist Innenabstand.

Ich weiß nur leider nicht, wie ich nur den Inneren teil verschiebe, was er glaube ich meinte.

Und ich weiß immer noch nicht, was du eigentlich erreichen willst.

Und mit margin und padding weis ich nur soweit als dass in diesem Falle dasselbe bewirkt

Nein, ganz bestimmt nicht.
Margin ist Außenabstand.

**Lennie** · 22.06.2006, 16:01

Original geschrieben von Lennie
Also: Durch das Padding verschiebe ich sozusagen den Div Container,

Nein, ganz bestimmt nicht.
Padding ist Innenabstand.

so scheint es jedenfalls auf meiner seite... anders kann ich ncioht erklären, wie es zerstört wird...

ch weiß nur leider nicht, wie ich nur den Inneren teil verschiebe, was er glaube ich meinte.

Und ich weiß immer noch nicht, was du eigentlich erreichen willst.

ich will erreichen, dass der inhalt in meinen div bereichen an eine bestimmte stelle im div bereich geschoben wird

nd mit margin und padding weis ich nur soweit als dass in diesem Falle dasselbe bewirkt

Nein, ganz bestimmt nicht.
Margin ist Außenabstand.

wieso wurde mir dann von der hund dazu geraten?

**Kropff** · 22.06.2006, 16:27

ich verstehe einige deiner anweisungen nicht, warum machst du aus maincol ein inline element, und warum setzt du ständig position: relative, wenn dann die positionsangaben fehlen. aber ein

PHP-Code:


#maincol

{

  width:660px; 

  padding-left: 20px;

}

bringt auf jeden fall schon mal was, der rest ist das selbe

gruß
peter

**derHund** · 22.06.2006, 16:27

wieso wurde mir dann von der hund dazu geraten?

Bitte richtig zitieren, komme sonst nicht mit

Weil es nen Browser gibt, der sich bei diesen Dingen immer ein wenig verrechnet, die Programmierer habens halt nicht so mit dem W3C. Darum sollst Du width/height nicht mit zugehörigem padding kombinieren. Kanst Du machen - mußt dann aber den einen Browser getrennt behandeln.

Vielmehr sollst Du die Abstände durch innenliegende Elemente erzeugen, ob per margin oder padding mußt/kannst Du je nach Design entscheiden. So mach ichs zumindest seit Urzeiten (wegens o.g. Problem). Ist auch einfacher, als ständig rumzuhacken.

Gib der <h2> in Deiner #maincol mal nen padding oder margin.

**Kropff** · 22.06.2006, 18:58

Weil es nen Browser gibt, der sich bei diesen Dingen immer ein wenig verrechnet

wer kümmert sich denn noch um den ie 5.x? also ich seit einem jahr nicht mehr.

also einfach mit padding arbeiten, und den wert dann von width und height abziehen, dann paßt es wieder.

gruß
peter

**derHund** · 22.06.2006, 19:37

wer kümmert sich denn noch um den ie 5.x? also ich seit einem jahr nicht mehr.

Habe es mir eben so angewöhnt, und da es im Markup immer Elemente gibt, die so liegen, ist auch kein Problem.

**Lennie** · 22.06.2006, 19:51

Original geschrieben von Kropff

also einfach mit padding arbeiten, und den wert dann von width und height abziehen, dann paßt es wieder.

Hi, THX, dies scheint die beste art zu sein, aber leider komm ich da nicht zurecht, wenn ich das im css umsetzen will:
[CODE]
#pagewidth{
text-align:left;
width:880px;
}

#header{
position:relative;
height:240px;
background-image:url(header.jpg);
width:100%;
margin-top:17px;
margin-left:8px;
}
[CODE]

Hier ist mein erstes Problem, hier könnte ich einfach die width angabe aus dem pagewidth ausschneiden und in den header css teil fügen, und dann könnte ich höhe und breite ordentlich ausrichten, wenn ich aber aus dem pagewidth die angabe entziehen würde, bekäme ich probleme mit den left und main container, die ja noch einzelne angaben haben:
[CODE]
#leftcol{
width:200px;
height:500px;
float:left;
position:relative;
background-image:url(left.jpg);
}

#maincol{background-image:url(content.jpg);
float: right;
height:500px;
display:inline;
position: relative;
width:680px;
}
[CODE]
wie amche ich das in diesen fall?

**Lennie** · 22.06.2006, 20:09

habs hinbekommen... nen bisschen von jeder methode benutzt...

Padding zerstört Layout