kronn.de – weblog » Blog Archive

Reset-Code

Eben bin ich über das „CodeViewer-Plugin“:http://elasticdog.com/2004/09/code-viewer/ gestolpert und habe es gleich mal bei mir installiert.

Praktisch kann ich jetzt also den Quellcode meiner reset.css einfach und schön hier darbieten, zusammen mit einem Downloadlink.

html,address,blockquote,body,div,dl,dt,dd,fieldset,form,h1,h2,h3,h4,h5,h6,ol,p,ul,li,center,hr,pre,table,tr,td,th,thead,tbody,tfoot,caption {
font-family:inherit; font-style:normal; font-weight:normal;
font-variant:normal; font-size:inherit; line-height:inherit;
text-align:left; text-decoration:none; padding:0; margin:0;
float:none; border:0px; display:block; cursor:default; }
span,a,img,abbr,code,em,strong,b,i,textarea,legend,button,input,object,select,var,tt,kbd,samp,small,sub,sup {
font:inherit; background:transparent; padding:0; margin:0;
color:inherit; display:inline; float:none; border:0; }
li { display:list-item; }
table { display:table; border-spacing:0; border-collapse:collapse; }
tr { display:table-row; }
th,td { display:table-cell; }
thead { display:table-header-group; }
tbody { display:table-row-group; }
tfoot { display:table-footer-group; }
caption { display:table-caption; }
colgroup { display:table-column-group; }
col { display:table-column; }
head { display:none; }
button,textarea,input,object,select { display:inline-block; }
/* Optionales */
html {
font-family:'Lucida Grande', 'Trebuchet MS', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
font-size:small; line-height:1.5em; }
a:link, a:visited, a:hover, a:active { cursor:pointer; }
input, textarea { cursor:text; }
ul li { list-style-type:square; }
ol li { list-style-type:decimal; }
Download this code: reset.css

Ich habe den „ursprünglichen Beitrag“:http://kronn.de/weblog/2004/10/30/css-reset/ leicht angepasst, da ich das CSS selbst in ein extra Verzeichnis kopiert habe.

[Update – 13.03.2005] Danke an „Gerrit“:http://praegnanz.de, der auf zwei weitere Eigenschaften „hingewiesen hat“:http://praegnanz.de/weblog/564/css-tabellen-resetten.

Abgelegt in: Code
Veröffentlicht am 04.11.2004 um 16:47
Dauerhafter Link zu "Reset-Code"

Comments (4)

Jörg Petermann

Habe vor kurzem das Posting mit dem CodeViewer-Plugin gefunden und fand die Grundidee dieses Tools ebenfalls ganz siper. Der Code ist zum Download bereit in einer Datei. Er wird einheitlich dargestellt und dann sehr übersichtlich angezeigt. Die wechselnden Farbbalken gefallen mir gut.

Bei mir hatte ich das Problem, dass meine Text-Spalte nicht so breit ist. Das gleiche trifft Dich ja auch. Zu lange Spalten sehen nicht so toll aus.

Ich werde die Idee aber weiter verfolgen und noch ein bisschen knobeln. Der Ansatz ist ausbaufähig.
kronn

Das schöne an diesem Plugin ist, dass ich die fragliche Datei nicht in den Beitrag einbinde, sondern nur ein spezielles XML-Tag einbaue, dass dann jedesmal die Datei aufruft. Das Plugin macht daraus dann eine geordnete Liste und CSS den Rest.

Meine Textspalte ist genau 65%-40px breit. Wenn also der Monitor und die Auflösung… Ansonsten gibt es ja die Scrollbalken.
Andererseits kann ich das Problem der Spaltenbreite aber auch durch Anpassung der Ausgangsdatei ändern.

Meinst du mit dem Ansatz den CodeViewer oder den CSS-Reset?
Jörg Petermann

Mit Ansatz meine ich ganz einfach die Idee zu dieser Lösung. Die finde ich wirklich schön modular und zukunftsorientiert. Änderst Du das Aussehen irgendwann, sind automatisch alle Codes geändert. Heute muss ich alle Code-Bausteine aus den Entries ggf. nacharbeiten. Das hier ist flexibler. Fast so wie mit CSS. Der Quellcode bleibt derselbe, nur die Darstellung ändert sich.

Bei variablen Spaltenbreiten muss das Design eben die Umbrüche abfangen. Ich habe Probleme beim Umbruch zu langer URL in der Spalte. Da diese das Layout normalerweise „sprengen“, habe ich die Spalte auf overflow: hidden; gesetzt.
Ist aber auch noch nicht DIE Lösung.

Mit PHP wäre das für mich einfacher, aber ich will das mal schön voneinander trennen. Muss es eben eine andere Lösung geben.
Die Änderung der Quell-Datei in der Breite ist sicher auch eine solche Möglichkeit, wenngleich nicht so schön.

Freue mich ansonsten auf Deine Gedanken zu den URLs. Hab noch mal einen Blick auf Whitespace getan, muss aber noch mal genauer schauen, was die Entries betrifft.
Jörg Petermann

Die Formatierung ist noch besser geworden. Toll.
Die Rollbalken sind eine Variante, die ein guten Kompromiss darstellt.
Alternativ ginge aus meiner Sicht auch ein Umbrechen/Abschneiden der Zeile und die Darstellung des Restes im gleichen Farbbalken in der nächsten Bildschirmzeile. Dann wären die Rollbalken nicht da.

November 2004
M	D	M	D	F	S	S
« Okt				Dez »
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