Unauffindbares 4-fach Padding!

[Bathroth]

Hey Leute,

Bin neu im Forum, aber nicht neu mit Html.
Habe aber nun ein Problem was ich zum ersten mal festgestellt habe muss ich sagen, obwohl ich schon eingies mit Html Php und Geschichten gearbeitet habe:

Und zwar habe ich meine Seite mit nem Mix aus Tables und Div-Boxen aufgebaut.
Nun habe ich die seite auf 1000px ausgelegt und über das Integrierte Webdesigntool von Chrome mal genau geschaut wie breit die Seite ist. und mir ist aufgefallen das sie 988px breit war und ein stück des Bildes im design abgeschnitten wurde.

Durch genaues untersuchen ist mir aufgefallen das alle tables, tds und trs ein Padding haben:

	padding-left: 1px;    padding-right: 1px;    padding-bottom: 1px;    border-top-width: 1px;

Ich weiß das ist nun der Code aus CSS aber hab es einfach kopiert aus dem Chrome Tool.
Diese Daten standen unter "User Agent Stylesheet".

In der Css Dateien steht nix davon drinne. Ich habe den Fehler "behoben" da ich allen tables zeilen etc die Paddings manuel ausgestellt habe. Ebenfalls war in dem User agent Stylesheet:

border-spacing: 2px;

Nun meine Frage. Wo kommen diese Einstellungen her da ich nix in meinen Css Dateien stehen haben! Ebenfalls bei einem Kumpel wirds abgeschnitten. Getestet hab ich es selber unter Chrome und Firefox.

ich weiß nicht genau ob diese Frage eher in den CSS oder den HTML bereich gehört, da ich nicht weiß womit der Fehler zusammenhängt.

Wäre Dankbar wenn ihr mir helfen könntet, da ich nicht überall in die Table die Klassen einfügen will da die Tabellen unterschiedlich sind und es mir sehr viel mehr Code machen würde.

Mit freundlichen Grüßen und danke im vorraus!
Bathroth

 

[mermshaus]

Willkommen im Forum.

Vermutlich alle Browser haben eine Art internes „Default-Stylesheet“, das sie sozusagen automatisch immer als erstes Stylesheet einer Seite auswerten. Davon bekommst du normalerweise wenig mit, aber dort ist zum Beispiel dann definiert, dass h1-Elemente standardmäßig in größer und fett gerendert werden, dass p-Elemente Abstände haben, dass Links blau und unterstrichen dargestellt werden… So was in der Art.

Das sind Voreinstellungen, die du explizit überschreiben musst, wenn du sie verändern möchtest.

Wäre Dankbar wenn ihr mir helfen könntet, da ich nicht überall in die Table die Klassen einfügen will da die Tabellen unterschiedlich sind und es mir sehr viel mehr Code machen würde.

Mit den CSS-Selektoren für die Elemente table, tr, td, … kannst du das Aussehen aller Tabellen zentral anpassen.

td, th {
    padding: 5px;
}

Für einen bestimmten Bereich kannst du das Aussehen anpassen, indem du diesen Bereich im HTML-Code mit einem Rahmen-Element umgibst.

<div class="content">
    <table>…</table>
    <table>…</table>
    <table>…</table>
</div>

Selektoren wie .content table { … } beziehen sich dann nur auf alle Tabellen dieses Abschnitts.

Abschließend noch der Hinweis, dass Tabellen (table-Element) zur Darstellung tabellarischer Daten (etwa der Bundesliga-Tabelle im Fußball) gedacht sind, nicht zu Layoutzwecken hinsichtlich des Aufbaus der Gesamtseite. Dafür sollten beispielsweise div-Elemente und Floating genutzt werden.

Falls du damit noch nicht gearbeitet hast, hier ein Link zu einem Artikel darüber:

- Float: Die Theorie

Das sieht komplizierter aus, als es ist. Eine Einführung dazu solltest du auch in jedem Buch oder Tutorial zum Thema finden.

 

[Bathroth]

Willkommen im Forum.

Vermutlich alle Browser haben eine Art internes „Default-Stylesheet“, das sie sozusagen automatisch immer als erstes Stylesheet einer Seite auswerten. Davon bekommst du normalerweise wenig mit, aber dort ist zum Beispiel dann definiert, dass h1-Elemente standardmäßig in größer und fett gerendert werden, dass p-Elemente Abstände haben, dass Links blau und unterstrichen dargestellt werden… So was in der Art.

Das sind Voreinstellungen, die du explizit überschreiben musst, wenn du sie verändern möchtest.



Mit den CSS-Selektoren für die Elemente table, tr, td, … kannst du das Aussehen aller Tabellen zentral anpassen.

td, th {
    padding: 5px;
}

Für einen bestimmten Bereich kannst du das Aussehen anpassen, indem du diesen Bereich im HTML-Code mit einem Rahmen-Element umgibst.

<div class="content">
    <table>…</table>
    <table>…</table>
    <table>…</table>
</div>

Selektoren wie .content table { … } beziehen sich dann nur auf alle Tabelle dieses Abschnitts.

Abschließend noch der Hinweis, dass Tabellen (table-Element) zur Darstellung tabellarischer Daten (etwa der Bundesliga-Tabelle im Fußball) gedacht sind, nicht zu Layoutzwecken hinsichtlich des Aufbaus der Gesamtseite. Dafür sollten beispielsweise div-Elemente und Floating genutzt werden.

Falls du damit noch nicht gearbeitet hast, hier ein Link zu einem Artikel darüber:

- Float: Die Theorie

Das sieht komplizierter aus, als es ist. Eine Einführung dazu solltest du auch in jedem Buch oder Tutorial zum Thema finden.

Vielen Dank für den Beitrag. Er hat mir sehr weitergeholfen.

Mir ist bewusst das Tabellen nicht die beste Variante sind für den Seitenaufbau, vorallem da der IE irgendwann nicht mehr mit tables in tables klarkommt. Nur ich bin nicht so 100% sicher mit den Div-Aufbauten.

Aber du hast mich nun überzeugt den Aufbau neu zu gestalten mit Div-Boxen. Inwieweit ich das Floating reinnehme werde ich noch sehen. Auf den ersten Blick scheint es schon recht kompliziert. Aber ich werde mich mal Durchwuseln!

Und das mit dem User Agent Stylesheet hätte ich nicht gedacht das es vom Browser kommt. Da ich es mit Verschiedenen Browsern und Systemen durch Freunde probiert hatte.

Eine Frage habe ich dann noch. Haben in den stylesheets der Browser ebenfalls für die Div-Boxen standartkonfigurierungen?
Oder sind nur die HTML-Tables so infiziert davon?

Festgestellt habe ich bisher nur:

display:block;

Oder muss ich nicht unbedingt aufpassen das meine Div-Boxen auf einmal ein Standartpadding haben?

Vielen Dank aber für den Beitrag, hat mir sehr weitergeholfen.

Mit freundlichen Grüßen,
Bathroth

 

[mermshaus]

Und das mit dem User Agent Stylesheet hätte ich nicht gedacht das es vom Browser kommt. Da ich es mit Verschiedenen Browsern und Systemen durch Freunde probiert hatte.

Ich glaube, eine übergeordnete Vorgabe vom W3C (den Leuten, die festlegen, wie HTML funktioniert) gibt es hinsichtlich eines browserinternen Standard-Stylesheets nicht. Ich vermute, es hat sich für die Browserhersteller einfach als praktikabel erwiesen, sich auf eine Art gemeinsamen Weg zu „einigen“. In Nuancen unterscheidet sich das Rendering von HTML-Code ohne eigene CSS-Anweisungen aber mit Sicherheit in verschiedenen Browsern.

Soweit ich weiß, sind zahlreiche Aspekte des HTML-Renderings auch überhaupt nicht offiziell definiert. Wenn ich mich recht erinnere, gilt das unter anderem für etliche Dinge im Bereich der Darstellung von Tabellen. Der Standard (zumindest der vor HTML Version 5) bleibt da glaube ich relativ vage, was Regeln für Raumaufteilung der Spalten oder für Breiten und Abstände von Rahmen oder Zellen angeht. Dort ist dann semantisch eher von „sichtbarem Abstand“ die Rede, ohne dass genau definiert wird, ob das nun eher 1 Pixel oder eher 10 Pixel sind.

Anders gesagt: Wenn zwei Browser eine Sache unterschiedlich darstellen, ist es durchaus möglich, dass beide im Sinne der Spezifikation richtig liegen. Das sind aber Feinheiten, die für die tägliche Arbeit nicht wirklich wichtig sind, denn die verbreiteten Browser haben sich – um den Bogen zu deiner Beobachtung zu schlagen – sehr aneinander angeglichen.

Dass du aber sagst, dass der IE mit Tabellen in Tabellen irgendwann nicht mehr klarkommt, kann genau eine Folge davon sein, dass der IE einen leicht „abweichenden“ Algorithmus zur Darstellung verwendet.

User Agent ist eine abstrakte Bezeichnung für Programme wie Browser.

- User Agent

Eine Frage habe ich dann noch. Haben in den stylesheets der Browser ebenfalls für die Div-Boxen standartkonfigurierungen?
Oder sind nur die HTML-Tables so infiziert davon?

div-Elemente haben display: block; gesetzt, ja. Ansonsten meines Wissens nichts – jedenfalls nichts, was Auswirkungen auf die unmittelbare Darstellung hat.

Die Default-Styles sind übrigens prinzipiell einsehbar. Für neue Firefox-Versionen habe ich es gerade nicht gefunden, aber das hier scheint eine Auflistung für den IE zu sein:

- Internet Explorer UA Style Sheets

Wenn Browser so was nicht eingebaut hätten, würde jedes HTML-Dokument ohne eigene Style-Angaben vermutlich als langer String dargestellt werden, in dem alle Texte der Seite unformatiert hintereinander stehen.

 

[Bathroth]

Ich glaube, eine übergeordnete Vorgabe vom W3C (den Leuten, die festlegen, wie HTML funktioniert) gibt es hinsichtlich eines browserinternen Standard-Stylesheets nicht. Ich vermute, es hat sich für die Browserhersteller einfach als praktikabel erwiesen, sich auf eine Art gemeinsamen Weg zu „einigen“. In Nuancen unterscheidet sich das Rendering von HTML-Code ohne eigene CSS-Anweisungen aber mit Sicherheit in verschiedenen Browsern.

Soweit ich weiß, sind zahlreiche Aspekte des HTML-Renderings auch überhaupt nicht offiziell definiert. Wenn ich mich recht erinnere, gilt das unter anderem für etliche Dinge im Bereich der Darstellung von Tabellen. Der Standard (zumindest der vor HTML Version 5) bleibt da glaube ich relativ vage, was Regeln für Raumaufteilung der Spalten oder für Breiten und Abstände von Rahmen oder Zellen angeht. Dort ist dann semantisch eher von „sichtbarem Abstand“ die Rede, ohne dass genau definiert wird, ob das nun eher 1 Pixel oder eher 10 Pixel sind.

Anders gesagt: Wenn zwei Browser eine Sache unterschiedlich darstellen, ist es durchaus möglich, dass beide im Sinne der Spezifikation richtig liegen. Das sind aber Feinheiten, die für die tägliche Arbeit nicht wirklich wichtig sind, denn die verbreiteten Browser haben sich – um den Bogen zu deiner Beobachtung zu schlagen – sehr aneinander angeglichen.

Dass du aber sagst, dass der IE mit Tabellen in Tabellen irgendwann nicht mehr klarkommt, kann genau eine Folge davon sein, dass der IE einen leicht „abweichenden“ Algorithmus zur Darstellung verwendet.

User Agent ist eine abstrakte Bezeichnung für Programme wie Browser.

- User Agent



div-Elemente haben display: block; gesetzt, ja. Ansonsten meines Wissens nichts – jedenfalls nichts, was Auswirkungen auf die unmittelbare Darstellung hat.

Die Default-Styles sind übrigens prinzipiell einsehbar. Für neue Firefox-Versionen habe ich es gerade nicht gefunden, aber das hier scheint eine Auflistung für den IE zu sein:

- Internet Explorer UA Style Sheets

Wenn Browser so was nicht eingebaut hätten, würde jedes HTML-Dokument ohne eigene Style-Angaben vermutlich als langer String dargestellt werden, in dem alle Texte der Seite unformatiert hintereinander stehen.

Vielen Dank für die Kompetenzen antworten. In vielen Foren kommt dann da raus: google selbst oder sowas.

Hat mir sehr weitergeholfen und so Hintergrundwissen kann man immer gebrauchen. Nun weiß ich auf jeden Fall wonach ich suchen muss wenn ich mal wieder so einen Fehler habe.

Nebenbeibemerkt habe ich nun meine Seite auf Div-Boxen umgebaut und 2 floats eingebaut.

Ob ich das Floating richtig gemacht habe weiß ich nicht, Funktionieren tut es auf jeden fall !

Linke Navigationsleiste: float:left
Mittlerer Content: float:left
Rechter Content/adds: float:right

Ungefähr so richtig?

Danke auf jeden fall für die kompetenten Beiträge.

Mit freundlichen Grüßen,
Bathroth

 

[mermshaus]

Richtig oder falsch ist schwer zu sagen, weil das natürlich auch mit dem von dir gewünschten Verhalten zusammenhängt.

Es gibt aber ausreichend Anleitungen im Web dazu. Suchbegriffe wären beispielsweise „css column layout“ oder auf Deutsch eben „css spaltenlayout“. Dort kannst du dir verschiedene Ansätze ansehen.