[CSS] div padding problem

[forTeesSake]

hi un dhallo,

habe ein problem.

ich habe ein div mit der eigenschaft "padding: 30px; width: 210px"

im IE wird das div auch mit 210 pixeln angezeigt.

im firefox ist das div auf einmal 240 = 210+30 pixel breit.

kennt jemand dieses verhalten? und ist da der IE oder der firefox falsch gewickelt. ich denke ja mal der firefox...

hintergrund ist dass ich ein div mit einem 1 pixel border habe. darin steht ein text der von links einen abstand von 30 pixeln haben soll..

wenn ich code posten soll einfach bescheid geben, aber mehr viel als das oben wirds nicht

vielen dank

[forTeesSake]

entschuldigung, die style anweisung heisst natürlich

"padding-left: 30px; width: 210px"

[tobias-digital]

entschuldigung, die style anweisung heisst natürlich

"padding-left: 30px; width: 210px"

Der Firefox interpretiert die (X)HTML- und CSS-Standards zu annähernd 100% richtig. Der IE interpretiert diese falsch. Mehr dazu hier: http://tantek.com/CSS/Examples/boxmodelhack.html

[forTeesSake]

ok, ich vergass. ich werds morgen mal probieren ob es so klappt.

verstehn tu ichs aber dann noch lange nicht denn meiner meinung nach ist der IE richtig wenn er mir bei width 210px auch ein div mit 210px präsentiert, der firfox hingegen eines mit 240px hinlegt...

aber erstmal vielen dank für die schnelle antwort!

[tobias-digital]

Also es ist ja nun hinlänglich bekannt, dass der IE durch die Versionen Probleme mit dem CSS Box Modell hat. Und was der IE da macht ist ja auch total unlogisch. Wenn ich ne Box habe mit Weite 100px, dann ist doch nur logisch, dass der Innenrand noch zu Breite dazu addiert wird, weil was passiert denn wenn ich meiner 100px breiten Box nen padding von 60px gebe? Dann ist ja der Innenrand insgesamt breiter (120px) als die Box selber. Deshalb muss der Innenrand natürlich dazu addiert werden, hier wäre also die Gesamtbreite 220px (Bei 0px border und 0px margin).

Gruß, Tobias

[bmg4ever]

übrigens kann der internetexplorer das box-modell auch!

dazu sollte man ihn nur aus dem quircks-mode schicken.

http://www.css4you.de/wsdoctypeswitch/

dazu reicht es einfach einen gültigen html-doctype anzugeben.

[forTeesSake]

jupp du hast völlig recht wobei ich bei deinem beispiel zu 120 px gesamtbreite tendiere wie du auch zuerst beschrieben hast.

vielen dank für deine antwort. ich denke das war wieder mal so ne frage die immer wieder auftritt und bei der sich manche leute einfach nur denken "hey-das müsste ja nun hinlänglich bekannt sein". also danke für deine antwort.

forTeesSake

[forTeesSake]

soderla. jetzt hab ichs mir durchgelesen und bin verwirrter als vorher.

ich sehe mir das ganze mit dem IE 6 und zum vergleich mit dem firefox an.

dem text nach zu schliessen sollte wohl im IE irgendein breitenfehler aufrtreten. tuts aber nicht.

das stylesheet ist:

div.boxtest { 

  border:20px solid;

  padding:30px;

  background: #ffc;

  width:300px;

}

die resultierende box ist in beiden browsern 400px breit. so solls doch auch sein oder?

aber ich habe schon ein grundsätzliches verständnisproblem wenn in dem text davon gesprochen wird dass der IE wohl fälschlicherweise das padding einer box nicht "aussen anhängt" sondern nach innen abgträgt.

hallo? das ist doch die definition von padding oder? oder wozu ist dann "margin" da?

ICH DACHTE: eine 300px box mit 50px margin hat eine breite von 400.

eine 300px box mit 50px padding hingegen hat eine breite von 400.

und jetzt ist das offensichtlich nicht so und beides das selbe. komisch, denn was macht denn ein <td> in einer tabelle mit padding? das <td> hat eine breite und das padding wird innerhalb abgetragen...

verwirrt...

[Krain]

Es wird alles zu der Breite dazu addiert, ist auch nur so haltbar, wenn man mal darüber nachdenkt.

Margin+Border+Padding+width/height = Breite bzw. Höhe des Elements.

Gruß

Markus

[forTeesSake]

halt stop alles zurück. ich hab nun die einfachste lösung gefunden.

ich plaziere einfach um mein div mit padding noch ein div

.containerNavPoints{

	width: 210px;

}


.navLev1{

	height: 27px;

	font-weight: bold;

	font-size: 12px;

	border-bottom: 1px solid #00775B;

	line-height: 24px;

	margin: 0px;

	padding: 0px;

	padding-left: 35px;

}


<div class="containerNavPoints">

    <div class="navLev1">Navpunkt</div>

    <div class="navLev1">Navpunkt</div>

    <div class="navLev1">Navpunkt</div>

    <div class="navLev1">Navpunkt</div>

</div>

manchmal sind die einfachsten die besten lösungen...

vielen dank

[Aiun]

an dieser Stelle würde ich dich fragen warum du für die Navpoints überhaupt divs benutzt...warum keine Tabelle, Liste, oder einfach Links (ich vermute mal jeder Punkt ist ein Link)

[forTeesSake]

an dieser Stelle würde ich dich fragen warum du für die Navpoints überhaupt divs benutzt...warum keine Tabelle, Liste, oder einfach Links (ich vermute mal jeder Punkt ist ein Link)

gute frage. offensichtlich habe ich mich nach jahrelanger tabellenquälerei und der erkenntnis wie einfach alles mit divs geht so verliebt, dass ich die <ul> möglichkeit gar nicht mehr in betracht gezogen habe.

ich denke ich werde das umstellen.

aber immerhin habe ich nun auch mal dieses "problem" gehabt und die box-model geschichte endlich mal durchgearbeitet und kapiert.

vielen dank für die anmerkung!

[Aiun]

ich sage ja nicht grundsätzlich das es schlecht ist. es gibt gründe, bei denen es 'egal' ist, ob Div oder LI, weil es dann vom CSS abhängt. Genauso kann es ja sein, das du aufklapp-sachen machen willst, oder noch anderen Inhalt mit in das Div rein etz.

[geloescht_JesterDay]

warum keine Tabelle, Liste, oder einfach Links (ich vermute mal jeder Punkt ist ein Link)

Tabellen zum Layout sind böse

CSS zum Layout ist gut

Gegen eine ul spricht, dass sie in den Browsern unterschiedlich dargestellt werden (IMHO). Klar kann man mit CSS am Aussehen was ändern, aber bei FF sind die li weiter eingerückt als im IE/Opera, da hilft auch CSS nix.

Zumindest ist das meine Erfahrung.

Ansonsten wurde es ja schon angesprochen: http://css4you.de/wsboxmodell/index.html

Breite und Höhe eines Elements setzt sich laut der CSS-Regel wie folgt zusammen:

Die gesamte Breite = linker Außenabstand + linke Rahmenbreite + linker Innenabstand + Breite des Inhalts + rechter Innenabstand + rechte Rahmenbreite + rechter Außenabstand.

[Aiun]

Jester, ich sagte nichts davon mit Tabellen zu Layouten, sondern zu Strukturieren. und wenn er es als Liste darstellen will, untereinander / nebeneinander. Listen aber nicht passen (u.a. aus den von dir genannten gründen) dann sind Tabellen ein gutes Mittel dazu.

Letztlich ist es eine sehr gute sache, seine Seite erstmal mti Tabellen einzuteilen, je nachdem was man machen will.

[geloescht_JesterDay]

Jester, ich sagte nichts davon mit Tabellen zu Layouten, sondern zu Strukturieren.

Was aber im Endeffekt ja dasselbe ist. Und Layout-(Strukturierungs-)Tabellen sind eben böse

Tabellen sind dazu da, Tabellen darzustellen.

Was spricht denn dagegen, Links in DIVs nebeneinander / untereinander (oder beides gemischt) anzuordnen? Klar ist manchmal von der Struktur her (also der Textstruktur bzw. -auszeichnung) eine <ul> angebrachter, aber mit der geht eben nicht alles wie man es will.

Letztlich ist es eine sehr gute sache, seine Seite erstmal mti Tabellen einzuteilen, je nachdem was man machen will.

Keine gute Sache, denn Layouttabellen sind böse

[Aiun]

ich widerspreche dir auf schärfste

gug dir einfach mal den Quellcode hier vom Forum an

aber ich glaube wir sollten es dabei belassen das es da einfach unterschiedliche Ansichten gibt.

[geloescht_JesterDay]

ich widerspreche dir auf schärfste

gug dir einfach mal den Quellcode hier vom Forum an

Naja, das Forum hier ist aber nicht Maß aller Dinge und schon gar nicht valides HTML

Zum Thema "Tabellen zum 'Strukturieren' von Menüpunkten sind keine Layouttabellen":

Bei HTML geht es erstmal um den Text. Den reinen Text und mehr nicht. Dieser Text fängt irgendwo an und hört irgendwo auf. Quasi eine lange Textzeile. Um gewissen Stellen in diesem Text aber besondere Bedeutung zu geben, kannst du den Text mithilfe von HTML-Tags Strukturieren oder Auszeichnen. Also z.B. die ersten 5 Worte zwischen <h1> und </h1> schreiben. Damit werden sie als Überschrift (1. Ordnung) ausgezeichnet. Danach folgt ein bereich, der zw. <p> und </p> steht. Das ist ein Absatz, der inhaltlisch zusammengehörigen Text enthält und sich in gewisser Weise von Text davor und dem danach absetzt. Zwischendurch kommt immermal wieder ein Text zw. <a> und </a>. Dabei handelt es sich um Links, die auf einen Inhalt verweisen, der im Text zw. den Links kurz beschrieben ist.

Das alles sind Tags, mit denen du dem Inhalt eine gewisse Struktur geben kannst, ohne dass du dafür sehen musst, wie der Text optisch im Browser dargestellt wird (ohne anspruch auf Vollständigkeit). Alles andere, was nur dazu da ist, um den Text im Browser aussehen zu lassen, wie du es gerne hättest, hat mit der Textstrukturierung nichts zu tun und wird schlechthin als Layout bezeichnet. Denn all das ist nur dazu da, dass der Text ein gewissen Aussehen hat, wenn er im Browser angezeigt wird. Für den Inhalt und die Gewichtung des Textes hat er keinerlei Bedeutung.

Seitdem CSS in HTML eingeführt wurde (vor 10 Jahren AFAIR), sollte man das LAyout vom Inhalt trennen. Also in den Text selber nur die Tags, die für dessen Bedeutung wichtig sind. Alles, was nichts damit zu tunhat und nur dazu da ist, das Aussehen zu beeinflussen sollte ausgelagert werden.

Dazu wurden noch 2 Tags eingeführt (<div> und <span>). Diese Tags haben für den Inhalt auch keinerlei Bedeutung, sie sind aber auch nur als "Behälter" für Text gedacht. Diesen Behältern kann dann, über CSS aus dem Text ausgelagert, je nach wunsch ein gewisses aussehen etc. zugewiesen werden. Sie haben zwar auch nichts mit dem Inhalt zu tun, sind aber eher als eine Art Hilfslinien zu sehen, um die Trennung Inhalt/Layout zu erreichen.

Von daher ist dein Widerspruch abgelehnt und deine Tabellen zur Aufbereitung der Menüpunkte sind Layouttabellen.

qed.

P.S. Sogar <br /> Tags sind eigentlich Layout Elemente. Ein Text geht solange, wie er angezeigt werden kann und wird dann automatisch (wenn nicht ausgeschalten) umgebrochen. Eine Trennung im Text wird durch Absätze erzeugt. Am Ende einer Zeile ein <br /> zu machen, ist also eigentlich auch nur dem Aussehen, also dem Layout, dienlich. (Wobei man sich darüber bestimmt streiten könnte und das schon eine sehr strenge Auslegung wäre)

[Aiun]

ok....starten wir die diskussion doch

eigentlich "kann" man Layout und Inhalt nicht 100% voneinander trennen.

Wenn ich bestimmte Informationen auf eine HTML-Seite schreibe, dann bereits mit dem Gedanken, sie in einer bestimmten weise anzuzeigen.

Dabei lege ich 'selten' die details fest (Farbe, Border). Weis aber schon, das ich es als Tabelle anzeigen will (Formular, Kalender, Member-Liste)

Durch die Tatsache das ich weis das es als Tabelle angezeigt werden soll, bestimme ich ja den Detailgrad der Informationen (z.B. Bei Memberliste zeige ich noch E-Mail und ICQ an)

Ohne zu wissen "wo" ich meine Navigation hinmache, würde ich nicht auf die idee kommen zu bestimmen, "was" da hinkommt.

Denn wenn ich z.B. Navigationselemente horizontal anordne, will ich nicht das sie umgebrochen werden, sondern nur so viele hinsetzen wie hinpassen.

Oder beispiel: Wikipedia, da gibts in den beiträgen immer wieder Tabellen mit querverweisen oder Details o.ä. Diese Informationen wären vermutlich nicht da, wenn der Autor nicht wüsste das sie als Tabelle angezeigt werden.

CSS bestimmt details, Tabellen und die Anordnung der Elemente gehört aber zur Struktur.

Mit CSS sage ich die Ränder der Tabelle, Farben und Formattierung.

Ich glaube wir reden aber von einem Thema, bei dem sich die besten der besten noch nicht einig sind. Ich habe kürzlich einen Text über usability gelesen in dem stand, das man "nur" Links unterstrichen machen soll, nichts anderes. Das man keine bildchen einbauen soll....etz.

Frage zu letzt...Jester, gibts von dir ne Seite die ohne Tabellen gemacht ist / ich mir mal angugen kann ?

[forTeesSake]

ok, den oberen rest könnt ihr unter euch ausmachen wobei ich eher auf jesetrs seite bin. zum, thema

Frage zu letzt...Jester, gibts von dir ne Seite die ohne Tabellen gemacht ist / ich mir mal angugen kann ?

möchte ich nur sagen, dass ich meine seiten fast nur noch ausschliesslich ohne tabellen baue und auf die schöne und absolut exakte positionierung über <div> elemente zurückgreife.

und da ist dann die trennung von inhalt und struktur schon nahezu perfekt, denn ich brauche ja nur eine id bzw. klasse für meine <div> und wo die dann im quelltext stehen ist ja egal da die positionierung über das css stattfindet.

immer wieder gerne zu diesem thema ziteirt: die seite

http://www.csszengarden.com/

die acuh völlig ohne tables auskommt und somit in den unterschiedlichsten designs dargestellt werden kann...

viele grüße

[tobias-digital]

Ich glaube wir reden aber von einem Thema, bei dem sich die besten der besten noch nicht einig sind.

Ich habe nur seltsamerweise in den letzten zwei-drei Jahren keinen "Besten der Besten" gelesen oder gehört, der Tabellenlayouts präferiert, fördert oder produziert. Im Gegenteil.

... http://www.csszengarden.com/...

*zustimm* oder http://www.cssbeauty.com

[geloescht_JesterDay]

eigentlich "kann" man Layout und Inhalt nicht 100% voneinander trennen.

[...]

Frage zu letzt...Jester, gibts von dir ne Seite die ohne Tabellen gemacht ist / ich mir mal angugen kann ?

Doch, kann man schon. Inhalt ist Inhalt und der sollte auch ganz ohne Layout vernünftigt rüberkommen. Klar muss man beim aufbau der Seite schon ein gewissen LAyout im Kopf haben, das bezieht sich dann aber auch die Divs/Spans und IDs/Klassen.

Wine Seite, die noch nicht 100% fertig ist, hab ich dir als PM geschickt. Die Template steht da aber schon und ist ohne Tabellen "gelayoutet". Und hat ein horizontales und ein vertikales Menü. Vielleicht ändere ich noch Kleinigkeiten daran, aber du wolltest ja nur sehen, ob das so geht

Ach ja:

Der Zengarden war auch die Seite, die mich von CSS überzeugt hat Seitdem benutz ich keine Tabellen mehr, ausser ich werde irgendwie gezwungen dazu

[Aiun]

werde mir das 'natürlich' ansehen.

Aber ich behaupte das ganz ohne Tabellen es einfach nicht geht. Ansonsten simuliert man, je nachdem, Tabellen mithilfe des CSS.

Wenn ich mir Zengarden anguge, gibts da sicher einiges für mich an wissen rauszuholen

ein beispiel wo ich nicht wüsste es mit CSS & Divs umzusetzen:

ich habe drei spalten, Name, E-Mail und ... einen Link mit dem festen titel "website"

das ganze für alle Mitglieder. Ich möchte das Name so viel Platz einnimmt wie verfügbar. E-Mail so viel wie nötig und der Link einen festen wert hat.

Das ganze aber für alle Einträge der "dargestellten" Tabelle. Also die breite des E-Mail Feldes sollte bei allen Zeilen gleich sein.

mir ist grade noch ne andere CSS-Frage eingefallen, mache ich aber in eigenem Thema.

[tobias-digital]

Aber ich behaupte das ganz ohne Tabellen es einfach nicht geht.

Also ich entwickle seit zwei Jahren Seiten die ohne Tabellenlayouts auskommen. Meine neueste ist http://www.50plusneuss.de

[Aiun]

hab mir ein paar dinge angesehen. Bisher sind die meisten Seiten die ohne Tabellen auskommen solche, die feste breite und höhe angeben.

Kritik 1:

<tr>

<td>Name</td>

<td>Mail</td>

<td>ICQ</td>

</tr>[/PHP]

zeigt die Zusammgehörigkeit von Informationen

[PHP]<div>Name</div>
<div>Mail</div>
<div>ICQ</div>

dagegen nicht, es sei denn ich schreibe

<div>

<div>Name</div>

<div>Mail</div>

<div>ICQ</div>

</div>

[/PHP]

aber dann kann ich direkt eine Tabelle benutzen ^^ (bei einer Mehrzeiligkeit hätte ich 3 verschachtelte Divs...

ich benutze divs auch zum allgemeinen Layout. Wenn es aber um Inhalt geht, der nunmal Tabellenförmig ausgegeben werden soll oder sammlungen von informationen würde ich nie von <li> und <table/tr/td> abkehren, denn dafür sind die Dinger da.

Kritik2:

ich habe beispiele für 3 Spalten-Layout gesehen, aber das scheinen alles workarounds zu sein, für beispiele in denen eine Tabelle deutlich besser eingesetzt wäre. Natürlich stimmt es, das das Design dann nicht so schnell austauschbar wäre.

Aber sagen wir ich habe ... 100 Menüpunkte (in 10 Bereiche geteilt) in einem Vertialen (Div-)Menü, ich tausche das CSS aus und mache aus dem vertikalen ein horizontales menü. Die 100 punkte passen nebeneinander nicht hin. 10 Menüs nebeneinander, deren unterpunkte jeweils untereinander sind, will der Kunde nicht haben weils es "dumm" aussieht. Dann sagt er ok, dann lieber eigene Seiten für die Bereiche, in denen nur ihre eigenen unterpunkte gezeigt werden.

Dann muss ich den Inhalt sowieso umbauen.

---

HTML "funktioniert" doch nur, weil für die Elemente vorgegeben ist, wie sie angeordnet / gezeichnet werden.

100% trennung ist mit XML möglich, aber XML kann auch nur dann angezeigt werden, wenn es in HTML oder ähnliches 'transformiert' (XSLT) wird. Andernfalls weis der Interpreter nicht, wie er den Baum anzeigen lassen soll.

(lasst mich leben wenn ich schwachsinn rede)

so, jetzt muss ich mein eigenes zeug erstmal durchlesen und sehen ob da das steht was ich sagen wollte....^^