nicht angemeldet
Dieser CSS-Code "Quälcode"?
MudGuard
Der MartinHallo!
Viele Leute haben diesen folgenden Code als "Quälcode" bezeichnet...
Was findet ihr denn daran auszusetzen?
body {
color: #000000;
background-color: #D2A74C;
background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;
font-size: 12pt;
font-family: Helvetica, Arial, sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
vertical-align: middle;
}
div#page {
text-align: left;
vertical-align: top;
margin: 10px;
padding: 0px;
width: 760px;
border-width: 0px;
}
h1 {
font-size: 18pt;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 10px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
text-align: center;
vertical-align: bottom;
background: url("../pictures/gfx/layout_yellow/header.gif") no-repeat #D2A74C;
border-width: 1px;
border-style: solid;
border-color: #9F601C;
}
ul.navi {
width: 200px;
margin-top: 0px;
margin-bottom: 10px;
padding: 0px;
border-width: 1px;
border-style: solid;
border-color: #9F601C;
background: #D2A74C;
vertical-align:middle;
}
ul#leftnavi {
text-align:left;
float: left;
margin-left: 0px;
margin-right: 10px;
}
ul#rightnavi {
text-align:right;
float: right;
margin-left: 10px;
margin-right: 0px;
}
ul.navi li {
list-style: none;
margin-top: 10px;
margin-bottom: 0px;
padding: 0px;
}
ul#leftnavi li {
margin-left: 20px;
margin-right: 0px;
}
ul#rightnavi li {
margin-left: 0px;
margin-right: 20px;
}
ul.navi a {
display: block;
font-weight: bold;
text-decoration: none;
}
ul.navi a:link {
color: #000000;
}
ul.navi a:visited {
color: #000000;
}
ul.navi a:hover {
color: #9F601C;
}
ul.navi a:active {
color: #9F601C;
}
div#content {
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 10px;
padding: 10px;
background: #D2A74C;
border-width: 1px;
border-style: solid;
border-color: #9F601C;
}
p#footer {
clear: both;
font-size: 8pt;
margin: 0px;
padding: 4px;
text-align: center;
vertical-align: middle;
background-color: #D2A74C;
border-width: 1px;
border-style: solid;
border-color: #9F601C;
}
Mit freundlichen Grüßen,
Adrian
-
Hallo Adrian.
Was findet ihr denn daran auszusetzen?
body {
/.../
background-color: #D2A74C;
background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;Dies kannst du zusammen fassen: background: `#D2A74C url("../pictures/gfx/layout_yellow/bg.gif") repeat;`{:.language-css} > `font-size: 12pt;`{:.language-css} Diese Maßeinheit ist denkbar ungeeignet, nutze lieber em oder %. > ~~~css /*...*/ > vertical-align: middle; > }Dies ist in dieser Konstellation beim body-Element unwirksam.
~~~css
div#page {
/.../
vertical-align: top;Siehe oben. > ~~~css /*...*/ > width: 760px;Warum dieser nutzlose Wert? Wenn das Browserfenster kleiner ist, muss horizontal gescrollt werden.
~~~css
border-width: 0px;
}
Oder einfach border:none; > ~~~css h1 { > /*...*/ > margin-top: 0px; > margin-left: 0px; > margin-right: 0px; > margin-bottom: 10px;Dies kannst du zusammen fassen:
margin: 0 0 10px 0;~~~css
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;Dito. > ~~~css /*...*/ > border-width: 1px; > border-style: solid; > border-color: #9F601C; > }Dies kannst du zusammen fassen:
border:1px solid #9F601C;Viele Leute haben diesen folgenden Code als "Quälcode" bezeichnet...
Wenn die Qual hier der Verzicht auf kürzere Schreibweisen ist, dann ist es einer.
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo!
~~~css
/.../
vertical-align: middle;
}> > Dies ist in dieser Konstellation beim body-Element unwirksam. > > > ~~~css div#page { > > /*...*/ > > vertical-align: top;Siehe oben.
Wie kann ich das denn machen? Alle meinen immer: Bloß keine Tabellen missbrauchen... ^^
Mit freundlichen Grüßen,
Adrian-
Hallo Adrian.
Wie kann ich das denn machen?
Was meinst du?
Alle meinen immer: Bloß keine Tabellen missbrauchen... ^^
Besser ist das.
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo!
Wie kann ich das denn machen?
Was meinst du?
Mittig ausrichte...
Mit freundlichen Grüßen,
Adrian-
Hallo Adrian.
Wie kann ich das denn machen?
Was meinst du?
Mittig ausrichte...
Vertikal?
Das ist nicht ganz trivial, wie dieser aktuelle Thread zeigt: https://forum.selfhtml.org/?t=118485&m=759595Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo!
daraus werd ich nicht schlau, da hab ich nu keine lösung gefunden, nur wie mans nicht macht.
aber wie macht man es denn nun???Mit freundlichen Grüßen,
Adrian-
Hallo Adrian.
aber wie macht man es denn nun???
Leider ist dies momentan nur mit festgelegten Werten für margin-(top|bottom) machbar. (Theoretisch auch noch mit einer Spielerei mit enorm großer Schriftgröße, so dass vertical-align wirken kann.)
Einen schönen Sonntag noch.
Gruß, Ashura
-
-
-
-
-
-
Hallo!
font-size: 12pt;Diese Maßeinheit ist denkbar ungeeignet, nutze lieber em oder %.
Hehe, "denkbar ungeeignet" ist Ansichtssache. Naja, ich willst versuchen.
Da es sich aber auf die Elternelementschriftgröße bezieht, muss ich ja irgendwann mal etwas definiert haben. Oder ist dann die Standardgröße beim body automatisch definiert?
Und muss ich dann so lange ausprobieren mit em, bis ich die Angaben einigermaßen passend habe für das Boxmodell, oder gibt es da Tricks?Mit freundlichen Grüßen,
Adrian-
Hallo Adrian.
Da es sich aber auf die Elternelementschriftgröße bezieht, muss ich ja irgendwann mal etwas definiert haben. Oder ist dann die Standardgröße beim body automatisch definiert?
Das ist sie immer. Im Browser ist immer irgendeine Standardschriftgröße festgelegt.
Und muss ich dann so lange ausprobieren mit em, bis ich die Angaben einigermaßen passend habe für das Boxmodell, oder gibt es da Tricks?
Gibst du beispielsweise 1em an, so ist die Schriftgröße genau so groß, wie die im Browser festgelegte Schriftgröße.
Hinzu kommt hier natürlich noch die in modernen Browsern einstellbare Mindestschriftgröße, bei mir zum Beispiel 12px.Einen schönen Sonntag noch.
Gruß, Ashura
-
Hallo!
wenn ich aber jetzt meine boxen in em mit margin vom rand entferne
(modell: 3 spalten mit überschrift und fußzeile, selfhtmlbsp),
dann kann es doch passieren, dass meine inhaltsseite bei zu kleiner schrift die navigation und shoutbox überlagert?Mit freundlichen Grüßen,
Adrian
-
-
-
Hi,
/*...*/
background-color: #D2A74C;
background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;Dies kannst du zusammen fassen: background: #D2A74C url("../pictures/gfx/layout_yellow/bg.gif") repeat;
Vorsicht: das Ergebnis ist unterschiedlich (bzw. sollte es zumindest in korrekten Browsern sein)!
Bei Getrenntschreibung wie bei Adrian:
Die Hintergrundfarbe wird auf #D2A74C gesetzt.
Unmittelbar danach wird die Hintergrundfarbe auf Transparent gesetzt (so wie auch background-position auf 0% 0% und background-attachment auf scroll gesetzt wird).Die Hintergrundfarbe ist bei Adrian also transparent.
Bei Deinem Code wird aber die Hintergrundfarbe auf #D2A74C gesetzt.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
/*...*/
background-color: #D2A74C;
background: url("../pictures/gfx/layout_yellow/bg.gif") repeat;Dies kannst du zusammen fassen: background: #D2A74C url("../pictures/gfx/layout_yellow/bg.gif") repeat;
Vorsicht: das Ergebnis ist unterschiedlich (bzw. sollte es zumindest in korrekten Browsern sein)!
[...]
Die Hintergrundfarbe ist bei Adrian also transparent.
Bei Deinem Code wird aber die Hintergrundfarbe auf #D2A74C gesetzt.Ah, stimmt. Die background-Eigenschaft vereint ja alle anderen background-*-Eigenschaften, also wird bei einer solchen Konstellation immer der Standardwert übernommen, welcher vorherige Angaben überschreibt.
Korrekt?
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hi,
Ah, stimmt. Die background-Eigenschaft vereint ja alle anderen background-*-Eigenschaften, also wird bei einer solchen Konstellation immer der Standardwert übernommen, welcher vorherige Angaben überschreibt.
Korrekt?
Für CSS 2/2.1: im Prinzip ja.
Daß vorherige Werte überschrieben werden, hat nichts mit der Zusammenfassung zu tun, das ist die normale Kaskade.
Aber background setzt erstmal die 5 einzelnen Eigenschaften auf ihre initial values und überbügelt dann mit den tatsächlich angegebenen Werten.Für CSS 3: nein. Dort setzt background nicht alle background-Eigenschaften (z.B. background-break wird nicht per background gesetzt).
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
Für CSS 3: nein. Dort setzt background nicht alle background-Eigenschaften (z.B. background-break wird nicht per background gesetzt).
→ Notiz an mich: endlich einmal den CSS3-WD durchlesen.
Einen schönen Sonntag noch.
Gruß, Ashura
-
Hi,
Hallo MudGuard.
Für CSS 3: nein. Dort setzt background nicht alle background-Eigenschaften (z.B. background-break wird nicht per background gesetzt).
→ Notiz an mich: endlich einmal den CSS3-WD durchlesen.
Welchen?
CSS3 kommt in vielen kleinen Einzelpaketen, die auch unterschiedlichen Status haben (Selectors ist Candidate Recommendation, Positioning existiert noch nicht, ...)cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Hallo MudGuard.
→ Notiz an mich: endlich einmal den CSS3-WD durchlesen.
Welchen?
CSS3 kommt in vielen kleinen Einzelpaketen, die auch unterschiedlichen Status haben (Selectors ist Candidate Recommendation, Positioning existiert noch nicht, ...)Ich kompiliere alle Module zusammen und bestaune das Gesamtwerk.
Einen schönen Sonntag noch.
Gruß, Ashura
-
-
-
-
-
-
-
Hallo Adrian,
Viele Leute haben diesen folgenden Code als "Quälcode" bezeichnet...
das muss dich nicht beunruhigen. Unter Programmierern ist "Quälcode" im deutschen Sprachraum schon seit Jahren als scherzhafte Schreibweise für den Quellcode gebräuchlich, und es scheint sich jetzt auch bei den Webautoren langsam zu etablieren. No offense intended...
So long,
Martin
--
Irgendwann in grauer Vorzeit benutzte einer unserer prähistorischen Vorfahren ein Schimpfwort anstelle der Keule.
Die Zivilisation hatte begonnen.
-
Moin!
Viele Leute haben diesen folgenden Code als "Quälcode" bezeichnet...
Was findet ihr denn daran auszusetzen?
Er ist in einigen Punkten durchaus optimierungsfähig, was Anzahl der Zeilen und Sinnhaftigkeit der Einheiten angeht. Aber so ganz extrem, wie "Quälcode" es andeuten würde, ist es nicht.
> body { > color: #000000; /* Es gibt auch die Kurzform #000 für diese Farbe */ > background-color: #D2A74C; > background: url("../pictures/gfx/layout_yellow/bg.gif") repeat; /* Weiter unten konntest du die Zusammenfassung von background-color und background noch */ > font-size: 12pt; /* Für Bildschirmdarstellung verwende nicht pt, sondern px - oder eine relative Einheit deiner Wahl. Für Druckstylesheets hingegen ist pt, cm, mm oder in eine gute Einheit */ > font-family: Helvetica, Arial, sans-serif; > margin: 0px; > padding: 0px; > text-align: center; > vertical-align: middle; /* Das vertical-align wirkt sicherlich nicht so, wie du es dir vorstellst. Es zentriert vertikal INNERHALB der Textzeile, nicht innerhalb des gesamten Bodys. Dafür bräuchte es eine Tabellenzelle oder ein Element, welches wie eine formatiert ist (display:table-cell). */ > } > [...] > > h1 { > font-size: 18pt; > margin-top: 0px; > margin-left: 0px; > margin-right: 0px; > margin-bottom: 10px; /* Das kann man auch zusammenfassen zu: margin: 0px 0px 10px 0px; /* Die Reihenfolge startet oben und geht im Uhrzeigersinn rundherum. Fehlen hinten Werte, wird der Wert der gegenüberliegenden Seite verdoppelt. */ > padding-top: 0px; > padding-left: 0px; > padding-right: 0px; > padding-bottom: 5px; /* dito */ > text-align: center; > vertical-align: bottom; > background: url("../pictures/gfx/layout_yellow/header.gif") no-repeat #D2A74C; > border-width: 1px; > border-style: solid; > border-color: #9F601C; /* Diese Border-Angaben gehen auch prima in genau eine Zeile: */ border: 1px solid #9F601C; > } > > ul.navi { > width: 200px; > margin-top: 0px; > margin-bottom: 10px; > padding: 0px; > border-width: 1px; > border-style: solid; > border-color: #9F601C; > background: #D2A74C; /* Mit background wird wesentlich mehr gesetzt, als mit background-color. Es ist eventuell ratsam, hier also background-color zu schreiben. */ > vertical-align:middle; > } [...]- Sven Rautenberg
--
My sssignature, my preciousssss!-
Hi Sven,
/* Mit background wird wesentlich mehr gesetzt, als mit background-color. Es ist eventuell ratsam, hier also background-color zu schreiben. */
kannst du das kurz erläutern?
Schöne Grüße
Julian--
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
http://derjulian.net-
Hallo Julian.
/* Mit background wird wesentlich mehr gesetzt, als mit background-color. Es ist eventuell ratsam, hier also background-color zu schreiben. */
kannst du das kurz erläutern?
Siehe nebenan.
Einen schönen Montag noch.
Gruß, Ashura
-
Hi Ashura,
/* Mit background wird wesentlich mehr gesetzt, als mit background-color. Es ist eventuell ratsam, hier also background-color zu schreiben. */
kannst du das kurz erläutern?
Siehe nebenan.
wenn ich es richtig interpretiere, macht es aber nur einen Unterschied, ob ich "background:red" oder "background-color:red" schreibe, wenn ich anschließend weitere Angaben für den Hintergrund setze, weil der zuerst durch "background-color" angegebene Wert dann überschrieben werden kann.
Schöne Grüße
Julian--
"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook
http://derjulian.net-
Hallo Julian.
wenn ich es richtig interpretiere, macht es aber nur einen Unterschied, ob ich "background:red" oder "background-color:red" schreibe, wenn ich anschließend weitere Angaben für den Hintergrund setze, weil der zuerst durch "background-color" angegebene Wert dann überschrieben werden kann.
Wenn du mit Hintergrund hier wirklich die allgemeine background-Eigenschaft meinst, dann ja.
Einen schönen Dienstag noch.
Gruß, Ashura
-
-
-
-