CSS-(Verständnis?)Problem

Mastercooling

God

Saturday, April 5th 2008, 7:09pm

1

Hi,

ich bin gerade dabei mit CSS herumzuexperimentieren.
Ich habe eine Seite angelegt, die einen Header (class="header"), eine Navigation("navigation") und zwei Spalten(class="spalte1", class="spalte2") hat. Die zwei Spalten liegen in einer weiteren Zelle (class="spalten")

Ich habe das ganze mit verschiedenen Hintergrundfabren belegt.
So sieht das ganze jetzt aus.
-klick-

und hier der CSS-Ausschnitt:

Source code

.spalte1 {
    width:400px;
    height:500px;
    float:left;
    margin:0px 15px 0px 15px;
    padding:0px;
    background-color: #FF3333;
    }

.spalte2 {
    width:280px;
    height:500px;
    float:right;
    margin:0px 15px 0px 15px;
    padding:0px;
    background-color:#FF0000;
    }

Jetzt möchte ich aber das padding inerhalb der zwei Spalten ändern, sodass der Text nicht am Rand klebt.

Also änder ich im CSS den Wert bei padding einfach mal auf 5px.

Source code

.spalte1 {
    width:400px;
    height:500px;
    float:left;
    margin:0px 15px 0px 15px;
    padding:5px;
    background-color: #FF3333;
    }

.spalte2 {
    width:280px;
    height:500px;
    float:right;
    margin:0px 15px 0px 15px;
    padding:5px;
    background-color:#FF0000;
    }

und mir wird die ganze struktur durcheinander geworfen.
-klick-

Ich dachte der Wert bei padding würde den Abstand zum Rand innerhalb festlegen. An den gegebenheiten außen herum wird doch da nichts geändert. Dafür ist doch m.E. "margin" zuständig.

Für mich sieht es so aus, dass das Padding nicht nach innen geht sondern der Rand einfach um 5px nach außen geschoben wird. Ist das Normal?

Kann mir jemand erklären was ich falsch mache?

Gruß Hanni

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Saturday, April 5th 2008, 7:36pm

2

Nein, das ist nur beim IE so (gewesen).

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Saturday, April 5th 2008, 7:46pm

3

Danke Yogi aber so ganz verstehe ich es logisch noch nicht.

So wie ich es verstehe gebe ich z.B. an

width:170px;
height:170;
padding:5px;

Am Ende ist der Kasten dann aber 180x180 oder?

Gruß

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Saturday, April 5th 2008, 8:05pm

4

Genau. Wenn du Padding(/Margin/Border) hinzufügst, musst du das von "width", der Breite des reinen Inhalts, abziehen, damit der Container nicht so breit wird, dass umgebrochen werden muss, wie du es erlebt hast.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Sunday, April 6th 2008, 2:07pm

5

Jetzt hab ich aber schon das nächste Problem, im FF sieht die Seite größtenteils normal aus.

Im IE6 hingegen sieht rutscht die Klasse "spalte" einfach nach unten. Ich bin das ganze mehrmals durchgegangen und weiß nun leider nicht mehr weiter.

Vielleicht könnte mal jemand kurz übers CSS drüber schauen.
Sobald ich die width von der Klasse ".gesamt" auf beispielsweise 1000 setze, klappts auch im IE. Irgendwie sind die Margins und Paddings immer doppelt so breit wie im FF.

Hier die Seite

Und hier das CSS

Source code

body {
    height:100%;
    vertical-align: top;
    text-align: center;
    margin:0px;
      padding-top:0px;
      background:#fff;
      font: Georgia, Verdana, sans-serif;
      color:#000000;
      font-size:13px;
    background-color: #878787;
        }

html {
  }



.gesamt {
   width:850px;
   height:100%;
   margin: 35px auto 0px auto;
   padding:0px;
   background-color: #FFFF99;
   }

.header {
    width:850px;
    height: 80px;
    margin:0px;
    padding:0px;
    }

.navigation {
    width:150px;
    height:300px;
    float:left;
    margin:25px 0px 0px 15px;
    padding:6px 0px 0px 0px;
    background-color: #FF9933;
}

.spalten{
     width:655px;
     height:500px;
     float:right;
     margin:25px 15px 0px 15px;
     padding:0px;
     background-color: #FF6633;
}
.spalte1 {
    width:390px;
    height:490px;
    float:left;
    margin:0px 15px 0px 15px;
    padding:5px;
    background-color: #FF3333;
    }

.spalte2 {
    width:175px;
    height:490px;
    float:right;
    margin:0px 15px 0px 0px;
    padding:5px;
    background-color:#FF0000;
    }

.footer {
    clear:both;
    width:850px;
    height:55px;
    }

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Sunday, April 6th 2008, 8:48pm

6

Der IE hat einen Standards-compliant- und einen alten Quirks-Mode. Letzterer hat IIRC auch den Box-Model-Fehler und du müsstest dort andere Breitenangaben verwenden.

Wichtig ist jetzt, dass du den Standards-compliant-Mode ansprichst. Dazu solltest du einen vernünftigen DOCTYPE gesetzt haben und die XML-Präambel (<?xml ... ?>) weglassen.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Sunday, April 6th 2008, 9:54pm

7

hi yogi,

ich bin dir wirklich dankbar, dass du dich dem Thema annimmst.
Das Problem ist nur, das ich gerade erst mit dem Thema beginne und deshalb mit deinen Aussagen recht wenig anfangen kann.

Könntest du das noch etwas genauer ausführen?

Was meinst du mit "vernünfitgen DOCTYPE"?
Und eine XML-Präambel habe ich dich m.E. gar nicht verwendet.

Ist ja nicht so das ich nichts tue, im Netz habe ich
folgendes gefunden. Leider kann ich damit auch recht wenig anfangen.

Die Größen der divs müssten doch m.E. passen.

Ich habe gesamt mit 850. Da ist alles drin.

Dann habe ich meine Navigation mit insgesamt 165
Und ich habe meinen spalten-div mit insgesamt 685

Das ergibt zusammen m.E. 850. Müsste also doch genau passen.
Oder hab ich wieder nen denkfehler drinnen?

Ich hätte halt gerne das das ganze im IE und im FF möglichst gleich aussieht.

Danke und Gruß

Hanni

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Sunday, April 6th 2008, 10:42pm

8

Idealerweise stellst du mal die betroffene Seite online.

Informationen über DOCTYPE bekommst du bei SelfHTML. Ich empfehle dir dabei den für XHTML 1.0 Strict. Mit einem Validator wie z.B. dem vom W3C kannst du überprüfen, ob du die entsprechenden Richtlinien auch einhältst.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Sunday, April 6th 2008, 11:12pm

9

ich habe die betroffene Seite doch schon online (s.o.)

www.eshb.de/eshb

Habe nun die Größenangaben der divs nochmals um die Pixel der margins und paddings verkleinert und nun geht es auch im IE.

Sieht allerdings immer noch anders als im FF aus.

Versteh ich trotzdem nicht so ganz, denn selbst wenn der Box-Model Bug zutreffen würde, was ja beim 6er IE nicht der Fall sein sollte, würde der IE die width nehmen ohne noch padding dazu zu addieren. Das heißt die DIVs müssten im IE ja nochmal um den Wert des Paddings kleiner sein und auf jeden Fall hinpassen.

Wo ist mein Denkfehler?

Gruß

DrStrange

Senior Member

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 5:08pm

10

Der IE addiert das padding dazu, bei FF ist es "inclusiv".

Tipp/Trick: Container in gewünschter Breite definieren.
Dann darein einen Container mit padding legen. Dann gibt der äußere die gewünschte Breite vor, der innere sorgt aber für einen entsprechenden Randabstand.

When you come across a big kettle of crazy, it's best not to stir it.

Muhahahahahaha, pwned du kacknoob!
*gockel gockel boaarrcck*

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 5:13pm

11

Hi,

danke für die Info.

Mein Problem war aber, dass der IE das margin immer doppelt genommen hat. Gebe ich 10px an, nimmt er 20px.

Da ich bei der navigation und bei den Spalten "float:right" verwende kann das der IE wohl nicht.

Ein display:inline hat geholfen:

Siehe hier

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 5:36pm

12

DrStrange: Solche Layout-Container sind aber im Hinblick auf Semnatik äußerst ungern gesehen

Quoted from "Hanni"

Mein Problem war aber, dass der IE das margin immer doppelt genommen hat. Gebe ich 10px an, nimmt er 20px.

Die Angabe bezieht sich immer nur auf eine Seite, von daher ist das schon richtig so.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 6:03pm

13

Quoted from "Y0Gi"

DrStrange: Solche Layout-Container sind aber im Hinblick auf Semnatik äußerst ungern gesehen

Die Angabe bezieht sich immer nur auf eine Seite, von daher ist das schon richtig so.

Wenn ich angebe

	Source code
1	margin: 10px 10px 10px 10px;

dann sollte der IE doch auf jeder Seite 10px Margin machen oder nicht?

Er hat aber immer 20px auf jeder Seite gemacht.

Liege ich da richtig?

Gruß

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 6:33pm

14

Achso. Also bei `padding: 10px;` gäbe es auf jeder Seite 10 px drauf und die Breite würde sich um 20 px erhöhen. Bei `margin` und auch `border` analog. Wenn du `margin` *und* `padding` je auf 10 px setzt, macht das in der Breite entsprechend 40 px mehr.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Mastercooling

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 6:36pm

15

Genau,

wenn ich nur Border 1px auf einen Container setze der z.B. 140px breit ist, bleibt der dann 140, d.h. der äußerste Pixelrand wird dur border ersetzt oder ist der Container dann 142 in der Breite?

Gruß

Y0Gi

God

Re: CSS-(Verständnis?)Problem

Monday, April 7th 2008, 6:56pm

16

Border sollte draufgerechnet werden, vgl. auch obige Skizze.

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)