✔ 2 spaltige Tabelle mit CSS ersetzen

Ich bin mir gerade nicht sicher, ob ich es dir in einem deiner vergangenen Themen schon mal vorgeschlagen hatte.

CSS: 
* {
margin:0;
padding:0;
}

Mit dem Universalselektor * wird zu Beginn eines Stylesheets zunächst für alle enthaltenden Block-Elemente (z.B. <div>, <form>, <h1-6>, <ul>, <p>, usw.) ihre voreingestellten Initialwerte dieser beiden Eigenschaften auf null zurückgesetzt, da sie sich in den Browsern (FF,Opera,Safari vs. IE) voneinander unterscheiden, und im späteren Verlauf des Stylesheets wird dort ein Außen- und/oder Innenabstand deklariert, wo er tatsächlich erwünscht ist.

mfg Maik
 
Ich bin mir auch nicht sicher, ob du es mir bereits vorgeschlagen hast. Jedenfalls habe ich immer wieder darueber nachgedacht, ob ich alles auf Null setzen soll oder eben nicht.
In gewisser Weise ist es dann "logischer", da alles was nicht deklariert wurde auch einfach Null ist, andererseits heisst es auch oft mehr Angaben machen zu muessen und bei Tags ueberhaupt erst mal dran zu denken (dies ist vielleicht aber nur eine Umstellung).

Ich hab auch einige Artikel zu dem Thema gelesen, ob es nun besser ist alles auf Null zu setzen oder nicht. Aber fuer meine Entscheidungsfindung haben sie nicht geholfen.

Bis jetzt hat mich davon abgehalten, dass ich meist schon mitten im Projekt war, wenn mich die Abstaende wieder mal "genervt" haben. Da es aber immer wieder Probleme mit den Aussen- und Innenabstaenden gibt ist es sicherlich einmal einen Versuch wert gleich zu Beginn eines neuen Projekts die Universalselektoren wie in deinem Beispiel zu verwenden.

Ich spiele mich gerade mit den Einstellungen etwas herum....


Was waere dann eine effiziente Art die Abstaende fuer den Absatz festzulegen ohne sich auf eine fixe Groesse festzulegen?

Mit br arbeiten ist ja nicht die beste Loesung. Gibt man die Abstaende fuer <p> an, so sollten diese moeglichst an die Schriftgroesse angepasst sein, wenn es verschiedene Stylesheets gibt, oder man muesste diese Abstaende in jedem Stylesheet extra angeben angepasst an die jeweilige Schriftgroesse.

Gibt es elegantere Loesungen?
 
Für das Einrichten der Abstände gibt es keine allgemeinverbindliche Regelung, oder ultimative elegante Lösung.

Da kommt es doch mehr auf den HTML-Elementtyp im Kontext zu den benachbarten bzw. übergeordneten Elementen an, also auf die einzelne Situation mit ihren Gegebenheiten, sowie das Augenmaß an, welche Angabe für den jeweiligen Innen- und/oder Außenabstand passend bzw. angebracht ist.

Wenn du keine fixe (absolute) Dimensionen festlegen willst, stehen dir hier genauso die relativen Maßeinheiten (em, ex, %) zur Auswahl - beispielsweise so:

CSS: 
* {
margin:0;
padding:0;
}
p {
margin:.75em;
font:normal 1em/1.2em verdana, sans-serif;
background:#f3f3f3;
}

mfg Maik
 
ok, danke!

Die relativen Masseinheiten scheinen mir hier dann wirklich sinnvoll zu sein um bei verschiedenen Schriftgroessen zum Beispiel immer noch proportional zu bleiben ohne viele fixen Groessen in die einzelnen Stylesheets schreiben zu muessen (da diese ja bei Aenderungen zum mitaendern waeren).

Bei dem Beispiel von oben habe ich diese auch hergenommen um trotzdem Abstaende bei den Absaetzen zu haben, da diese ja auf Null gesetzt wurden.

HTML: 
				<div style="float:left; padding-right:7px;">
						<img src="img/test.jpg" width="150" height="90" alt=""></div>
					<div>
						<p>Rechte Spalte</p>
						<p style="margin-top:1em;">Weiterer Text</p>

						<p style="margin-top:1em;">weiterer Text<br>
						noch mehr Text</p></div>
				
				
				<p style="clear:both;">Absatz nach dem float</p>

Sicher waere es mit <br> auch gegangen und wahrscheinlich schneller, aber ich habe immer wieder gelesen, dass man breaks so gut wie moeglich vermeiden soll um Abstaende damit zu definieren. Sicherlich ist die Gewichtung von einem Absatz schon etwas anderes, mich wuerde aber trotzdem interessieren wie ihr/du das mit den <br> so haelt. Sprich bei welchen Sachen ihr den Einsatz als gerechtfertigt seht.
Ich kann mir vorstellen, dass gerade, wenn man alle Abstaende auf Null gesetzt hat, so breaks sehr verlockend sind.
 
Wieso machst du aus den Abständen so eine Wissenschaft?

Nochmal zur Verdeutlichung: die eingangs eines Stylesheets zurückgesetzten Abstände dienen dazu, die unterschiedlichen Initialwerte in den Browsern auszugleichen bzw. zurückzusetzen, um so eine diskrepante Seitendarstellung in ihnen zu vermeiden (hierzu gab es in der Vergangenheit auch schon diverse Themen, wo genau dieses Problem aufgetreten ist, oder siehe auch dein Code in Post #8, in dem du den "Zeilenumbruch" fälschlicherweise der float-Eigenschaft zugeschrieben hattest).

Dort, wo im Dokumentfluß tatsächlich ein Außen- und/oder Innenabstand erwünscht ist, wird er für das (Block-)Element mit margin und/oder padding explizit festgelegt. Fertitsch ;-)

<br>-Tags dienen semantisch in der Tat nicht dazu, um Abstände zwischen Block-Elementen zu erzeugen, sondern einen "handelsüblichen" Zeilenumbruch im Fließtext (z.B. innerhalb eines Textabsatzes <p>) einzurichten - siehe http://de.selfhtml.org/html/referenz/elemente.htm#br.

Wie gesagt, alles keine große Sache, die es wert ist, sich sieben oder acht Beiträge lang darüber den Kopf zu zerbrechen - zumal wir hier mittlerweile gehörig vom ursprünglichen Thema (2-spaltige Tabelle mit CSS ersetzen) abgekommen sind.

Du kannst es natürlich auch weiterhin so handhaben, wie in der Vergangenheit, nur mußt du dann bei dem einen oder anderen Block-Element seine voreingestellten Polsterungseigenschaften berücksichtigen und ggfs. entsprechend handeln, wenn die Darstellung in dem einen oder anderen Browser vom Soll-Zustand abweicht.

mfg Maik
 
Weil man nur durch Neugier weiter kommt, deshalb.

Und es immer hilfreich ist von guten Leuten zu lernen.

...auch wenn es 8 posts braucht ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück