Style-Teil von HTML nach CSS
yogi
Style-Teil von HTML nach CSS
yogi
Der Martin
Gunnar Bittersmann
Matthias Apsel
JürgenBHallo allerseits
Vor Jahren habe ich eine Homepage für die Berichterstattung unserer Reisen gebastelt, die noch Frames verwendet. Nun möchte ich für zukünftige Berichte die Frames eliminieren und gleichzeigig die Formatierung über CSS einbinden. So habe ich als erstes in einer der bestehenden Seiten die Formattierung mit
<style type="text/css">
body {
font: normal 100.01% Helvetica, Arial, sans-serif;
color: black; background-color: white;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
margin: 0; padding: 0;
}
p {
margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */
}
p a { color:black; /* Farbe des 'zurueck'-Links */ }
html { padding: 0; }
#fixiert {
position: absolute;
top: 1em; left: 1em;
width: 10em;
background-color: white;
border: 1px solid silver;
}
html>body #fixiert { /* nur fuer moderne Browser! */
position: fixed;
}
#Inhalt {
margin-left: 12em; padding: 0 1em;
margin-right: 2em; padding: 0 1em;
/* border-left: 2px ridge gray; border-right: 2px ridge gray; border-top: 2px ridge gray; border-bottom: 2px ridge gray; */
}
* #Inhalt { /* versteckt vor Netscape 4 */
background-color: #ffffe0;
}
#Inhalt h2 {
font-size: 1.2em;
margin: 2em 5% 2em;
color: maroon;
border-bottom: 1px solid silver;
}
#Inhalt p {
font-size: 1em;
margin: 1em 0;
}
#Inhalt #Fusszeile {
font-size: 0.9em;
margin: 200em 0 0; padding: 0.1em;
text-align: center;
background-color: #fed; border: 1px solid silver;
}
h1 {
font-size: 1.5em;
margin: 0.5em; padding: 0.3em;
text-align: center;
background-color: #fed;
border: 2px ridge gray;
}
#float_left_3col {width: 450px; float: left; margin-right: 10px; }
#float_right_3col {width: 450px; float: right; margin-left: 10px; }
#float_left_2col {width: 300px; float: left; margin-right: 10px; }
#float_right_2col {width: 300px; float: right; margin-left: 10px; }
#float_left_1col {width: 150px; float: left; margin-right: 10px; }
#float_right_1col {width: 150px; float: right; margin-left: 10px; }
</style>
definiert und habe das gewünschte Resultat erhalten. Dann habe ich alles zwischen <style type="text/css"> und </style> in eine .CSS Datei verschoben und die in der HTML-Seite eingebunden.
Das hat dann aber nicht so ausgesehen wie gewünscht.
Was muss bei so einem Auslagern beachtet werden, ändert sich da eventuell die Syntax?
Zu meinen Kenntissen: Ich verstehe zwar etwas von Software, habe aber nie mit CSS gearbeitet.
Gruss yogi
-
Hi,
Dann habe ich alles zwischen <style type="text/css"> und </style> in eine .CSS Datei verschoben
aber hoffentlich nicht einschließlich dieser Tags? Das wäre nämlich ein häufiger Fehler. In einer externen CSS-Ressource steht nur CSS.
und die in der HTML-Seite eingebunden.
Wie genau?
Das hat dann aber nicht so ausgesehen wie gewünscht. Was muss bei so einem Auslagern beachtet werden, ändert sich da eventuell die Syntax?
Nein. Das gesamte Stylesheet in eine externe Datei, ohne die oben erwähnten Tags. Die sind nur für die Kennzeichnung von CSS innerhalb der HTML-Ressource.
So long, Martin
--
Mir geht es gut. Ich mag die kleinen Pillen, die sie mir dauernd geben. Aber warum bin ich ans Bett gefesselt? Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
und die in der HTML-Seite eingebunden.
Wie genau?
Liebes Äffchen, vielen Dank für den Hinweis, ein kleiner, unscheinbarer Punkt hatte sich da an die falsche Stelle eingeschlichen!
Das mit dem Äffchen ist anerkennend gemeint! Vor Jahrzehnten, als ich noch beruflich voll Software entwickelt habe, hat man oft einen Fehler einfach nicht gefunden. In solchen Fällen wurde ein Teammitglied gebeten, einem über die Schulter zu schauen und zu helfen. Kaum stand die Person absulut wortlos hinter einem sah man auch schon den Fehler. Das ging bestens und irgendwann sagte dann ein "Über-die-Schulter-Gucker": "Setz dir doch ein Äffchen auf die Schulter, das tut den gleichen Dienst!". Von da an wurde bei einer Fehlersuche nur noch nach einem "Äffchen" gerufen.
Gruss yogi
-
-
@@yogi:
Da musstest du aber GANZ tief Luft holen, um die Staubschicht von der Vorlage deines Stylesheets wegzublasen!
<style type="text/css">
BTW,
type="css"ist in HTML nicht mehr erforderlich.body { font: normal 100.01% Helvetica, Arial, sans-serif;
Die
100.01%waren IIRC vor Urzeiten mal dazu, irgendwelche Rundungsfehler von irgendwelchen Browsern zu beheben. Sollte heutzutage100%sein. Oder (was aufs Gleiche rauskommt)1em. Da Default (ebenso wienormal), kann das entfallen. Also nurfont-familyangeben. Mittlerweile gibt’s auch Neue Helvetica (und nicht etwa Helvetica Neue). Also wenn man eine Schrift ohne jeglichen Charakter (Erik Spiekermann) haben möchte:body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
min-width: 40em; /* Mindestbreite verhindert Anzeigefehler in modernen Browsern */
„Verhindert Anzeigefehler in modernen Browsern“? – ähm nö. Mindestbreite ist auch Unsinn. Die meisten heute verwendeten Geräte sind deutlich schmaler als 40em. Auf denen müsste man entweder die Schrift bis zur Unkenntlichkeit verkleinern, um eine Zeile ganz auf den Schirm zu bekommen, oder ständig hin- und herscrollen. Beides blöd.
Sinnvoll hingegen ist die Angabe einer _Maximal_breite für Fließtext, weil sich Text mit zu langen Zeilen schlecht liest. Und dafür ist
max-width: 40emgar kein so schlechter Wert.p { margin: 3em 0 0 3em; /* Positionierung des 'zurueck'-Links */ }
p?? Wirklich alle Absätze? Oder hast du nur dieses eine p-Element auf der Seite?p a { color:black; /* Farbe des 'zurueck'-Links */ }
p a?? Wirklich alle Links in allen Absätzen? Oder hast du nur diesen einen Link in einem p-Element auf der Seite? Und ist die Wegnahme der farblichen Hervorhebung von Links wirklich sinnvoll?html>body #fixiert { /* nur fuer moderne Browser! */
LOL.
html>bodyversteht schon der IE 7. Und der ist nun wahrhaft kein moderner Browser.* #Inhalt { /* versteckt vor Netscape 4 */
ROTFL. Netscape 4!
Zu meinen Kenntissen: Ich verstehe zwar etwas von Software, habe aber nie mit CSS gearbeitet.
Dann ist es nicht gut, ein uraltes Stylesheet von irgendwem als Grundlage zu nehmen, ohne es zu verstehen.
LLAP
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
@@yogi:
Da musstest du aber GANZ tief Luft holen, um die Staubschicht von der Vorlage deines Stylesheets wegzublasen!
Na ja, sooooo tief muss ich nun nicht Luft holen, das Stylesheet habe ich genau seit einer Woche, es stammt von und macht eigentlich genau das, was ich mir so vorstelle.
Irgendwie muss ich ja anfangen, warum also nicht mit einem Beispiel von SELFHTML? Und nun bin ich dabei, mich in das ganze einzuarbeiten. Deine weiteren Bemerkungen und Hinweise werde ich genau ansehen und hoffentlich dabei etwas lernen.
FFPX
yogi
-
-
Hallo,
Na ja, sooooo tief muss ich nun nicht Luft holen, das Stylesheet habe ich genau seit einer Woche, es stammt von und macht eigentlich genau das, was ich mir so vorstelle.
Könntest du bitte den Link korrigieren? Ich vermute mal, du steckst momentan grade nicht in einer Zeitschleife.
Gruß Kalk
ooops! manchmal gehen so simple Sachen wie copy/paste schief http://de.selfhtml.org/css/layouts/fixbereiche.htm#definieren
hoffe es stimmt jetzt!
Gruss yogi
-
Hallo,
Na ja, sooooo tief muss ich nun nicht Luft holen,
http://de.selfhtml.org/css/layouts/fixbereiche.htm#definieren
Da solltest du wirklich nicht tief Luft holen. Hast du die Jahreszahl unten gesehen? Da ist soviel Staub drauf, dass du dir beim Einatmen quasi direkt ein Lungenkarzinom holst...
Gruß Kalk
-
Da solltest du wirklich nicht tief Luft holen. Hast du die Jahreszahl unten gesehen? Da ist soviel Staub drauf, dass du dir beim Einatmen quasi direkt ein Lungenkarzinom holst...
Das ist eine selfhtml Seite. Wenn das so eine Kathastrophe ist, warum ist sie dann noch da??
Gruss yogi
-
Om nah hoo pez nyeetz, yogi!
Das ist eine selfhtml Seite. Wenn das so eine Kathastrophe ist, warum ist sie dann noch da??
Weil leider noch keiner Zeit hatte, die Seite vom Netz zu nehmen. Die Vorbereitungen dazu sind schon weit gediehen. Den Hinweis auf der Seite nebst Link hast du großzügig übersehen?
„Die aktualisierten Inhalte dieser Seite finden Sie im Wiki unter CSS/Anwendung und Praxis/feststehender footer.“
Matthias
-
Hallo Matthias,
Den Hinweis auf der Seite nebst Link hast du großzügig übersehen?
du solltest dem Hinweis aufs WIKI position:fixed;width:100vw;height:100vh geben.
Gruß, Jürgen
-
Hallo,
du solltest dem Hinweis aufs WIKI position:fixed;width:100vw;height:100vh geben.
m.E. würde allein schon position:fixed; genügen
Gruß Kalk
-
Om nah hoo pez nyeetz, Tabellenkalk!
m.E. würde allein schon position:fixed; genügen
Prima Idee, habe ich umgesetzt. Ich bin auf die Zugriffszahlen gespannt.
Februar 2014
Oktober 2014
März 2015
Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Das hätte ich nicht erwartet: ca. 4000 Seitenzugriffe mehr als an den vergangenen Samstagen.
http://www.browser-statistik.de/benutzer/wiki.selfhtml.org/
Matthias
-
Om nah hoo pez nyeetz, Matthias Apsel!
Das hätte ich nicht erwartet: ca. 4000 Seitenzugriffe mehr als an den vergangenen Samstagen. http://www.browser-statistik.de/benutzer/wiki.selfhtml.org/
Und am Ende des Tages waren es mal eben doppelt so viele Besucher wie sonst an einem Samstag.
Matthias
-
-
Om nah hoo pez nyeetz, Jörg Reinholz!
genau. 500 Server-Fehler.
Matthias
-
genau. 500 Server-Fehler.
Ja. Ich hatte gerade etwas an der .htaccess optimieren wollen und einen Typo drin. Geht jetzt aber. Falls was anderes angezeigt wird liegt es am Cache.
Jörg Reinholz
-
-
-
-
Om nah hoo pez nyeetz, Matthias Apsel!
m.E. würde allein schon position:fixed; genügen Prima Idee, habe ich umgesetzt. Ich bin auf die Zugriffszahlen gespannt.
Februar 2014
Oktober 2014
März 2015
Eine Woche später
Matthias
-
-
-
-
„Die aktualisierten Inhalte dieser Seite finden Sie im Wiki unter CSS/Anwendung und Praxis/feststehender footer.“
Den Hinweis habe ich gesehen und genau gelesen, und da steht "feststehender footer". Ich wollte aber ein auf der linken Seite feststehendes Inhaltsverzeichnis, daher habe ich sie nicht angesehen. Ich habe mir die Seite nun angeschaut und es scheint, dass das noch besser meinen Vorstellungen entspricht. Danke für den Hinweis.
yogi
-
-
-
-
-
-
-
