• 20.07.2025, 01:47
  • Registrieren
  • Anmelden

  • Du bist nicht angemeldet.

 

CSS-(Verständnis?)Problem

Mastercooling

God

CSS-(Verständnis?)Problem

Samstag, 5. April 2008, 19:09

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:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.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.

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.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

Samstag, 5. April 2008, 19:36

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

Samstag, 5. April 2008, 19:46

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

Samstag, 5. April 2008, 20:05

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

Sonntag, 6. April 2008, 14:07

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

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

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

Sonntag, 6. April 2008, 20:48

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

Sonntag, 6. April 2008, 21:54

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

Sonntag, 6. April 2008, 22:42

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

Sonntag, 6. April 2008, 23:12

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

Montag, 7. April 2008, 17:08

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

Montag, 7. April 2008, 17:13

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

Montag, 7. April 2008, 17:36

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


Zitat von »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

Montag, 7. April 2008, 18:03

Zitat von »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

Quellcode

 
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

Montag, 7. April 2008, 18:33

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

Montag, 7. April 2008, 18:36

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

Montag, 7. April 2008, 18:56

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)