nicht angemeldet Ingo Siemon
Ingo Siemon
Dennis
Gunnar Bittersmann
Dennis
Detlef G.
Ingo Siemon
Ingo Siemon
Ingo Siemon
Liebe Leute
Ich bin noch relativ nei mit CSS zugange.
Nun géht es mir darum, Bilder mit CSS einzubinden.
Ich habe da schon viel bei SelfHTML und Googe gelesen,
aber so ganz verstanden habe ich es noch nicht.
Da mein Doctype ja "XHTML 1.0 Strict" lautet,
muss ich das <img>-Tag doch auch mit diesem Backslash schliessen ... oder?
Also so: <img src="Artikel/2001007-b.jpg" />
^^^
Und dann habe ich gelesen, dass ich das <img>-Tag garnicht einfach
so "alleine" setzen darf, sondern nur in ein Block-Element.
Heisst das nun dass es so nicht richtig ist:
<img src="Artikel/2001007-b.jpg" />
sondern z.B. so:
<p><img src="Artikel/2001007-b.jpg" /></p>
Wem weise ich denn dann das StyleSheet für z.B. einen Rahmen zu?
Dem <img>-tag oder dem <p>-tag?
Da ich wiegesagt durch Googeln und SelfHTMLn da noch nicht
so richtig schlau draus geworden bin, würde ich mich über Eure
Hilfe wieder seher freuen.
Gruß
ingo
Hi Ingo!
Da mein Doctype ja "XHTML 1.0 Strict" lautet,
muss ich das <img>-Tag doch auch mit diesem Backslash schliessen ... oder?
Das ist richtig.
Und dann habe ich gelesen, dass ich das <img>-Tag garnicht einfach
so "alleine" setzen darf, sondern nur in ein Block-Element.
Wenn "alleine" bedeutet, dass du es im Body definieren willst, dann darfst du das nicht.
<p><img src="Artikel/2001007-b.jpg" /></p>
Wem weise ich denn dann das StyleSheet für z.B. einen Rahmen zu?
Dem <img>-tag oder dem <p>-tag?
Diese Entscheidung liegt bei dir. Du kannst generell jede CSS-Eigenschaft auf jedes HTML-Element anwenden.
MfG Hopsel
Lieber Hopsel
Danke für Deine schnelle Hilfe!
Wenn "alleine" bedeutet, dass du es im Body definieren willst, dann darfst du das nicht.
Ich meinte das so, wie in folgenden Quelltext:
---------------------------------------------------------------
MudGuard
Der Martin<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />
<title>SPACEart</title>
</head>
<body>
<h1>Neuheiten</h1>
<h2>Star Wars : AT-AT (Einzelstück)</h2>
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>
<img src="Artikel/2001007-b.jpg" />
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>
</body>
</html>
---------------------------------------------------------------
So darf ich es also nicht?
Gruß
Ingo
Hi Ingo!
So darf ich es also nicht?
Ich sage nie, du _darfst nicht_ oder _musst_ dieses oder jenes machen. Letztendlich kannst du über alles selbst entscheiden. (Tschuldigung, da kam der Freiheitskämpfer in mir raus ;-) )
SELHTML kann dir allerdings Ratschläge geben...
MfG Hopsel
Hi Ingo,
Wenn "alleine" bedeutet, dass du es im Body definieren willst, dann darfst du das nicht.
Ich meinte das so, wie in folgenden Quelltext:
<body>
<h1>Neuheiten</h1><img src="Artikel/2001007-b.jpg" />
<p>Lore ipsum...</p>
</body>
In diesem Fall wäre img ja ein direktes Kindelement von body, deshalb...
So darf ich es also nicht?
... nein.
MfG, Dennis.
Lieber Dennis
<body>
<h1>Neuheiten</h1><img src="Artikel/2001007-b.jpg" />
<p>Lore ipsum...</p>
</body>
In diesem Fall wäre img ja ein direktes Kindelement von body, deshalb ... nein.
OK, sach ich doch :)
Gruß
Ingo
So darf ich es also nicht?
Ingo,
„Ob du recht hast oder nicht, sagt dir gleich das Licht.“
Live long and prosper,
Gunnar
PS. Kennt den Spruch noch wer?
Hallo Gunnar.
„Ob du recht hast oder nicht, sagt dir gleich das Licht.“
PS. Kennt den Spruch noch wer?
Nein, nur das vermeintliche Original:
„Ob ihr wirklich richtig steht, seht ihr wenn das Licht aufgeht.“
Einen schönen Montag noch.
Gruß, Ashura
Nein, nur das vermeintliche Original:
403 Forbidden. :-(
Als Michael Schanze damals „1, 2 oder 3“ moderiert hatte, hieß es „Ob ihr Recht habt oder nicht, sagt euch gleich das Licht.“
Das ist schon eine ganze Weile her … aber originaler.
Live long and prosper,
Gunnar
Hallo Gunnar.
Nein, nur das vermeintliche Original:
403 Forbidden. :-(
Merkwürdig. Ich hätte schören können, dass ich den Link richtig kopiert hatte...
Als Michael Schanze damals „1, 2 oder 3“ moderiert hatte, hieß es „Ob ihr Recht habt oder nicht, sagt euch gleich das Licht.“
Das ist schon eine ganze Weile her … aber originaler.
Wie gesagt: ich kenne nur die andere Version.
Einen schönen Montag noch.
Gruß, Ashura
Hi,
Das ist schon eine ganze Weile her … aber originaler.
Plopp!
cu,
Andreas
Plopp!
Das heißt? ;-)
Live long and prosper,
Gunnar
Hi Ingo,
Da mein Doctype ja "XHTML 1.0 Strict" lautet,
muss ich das <img>-Tag doch auch mit diesem Backslash schliessen ... oder?
Also so:<img src="Artikel/2001007-b.jpg" />
^^^
Wenn du jetzt statt Backslash einfach nur Slash sagst, hast du recht - Backslash ist der hier: \ ;-)
<p><img src="Artikel/2001007-b.jpg" /></p>
Wem weise ich denn dann das StyleSheet für z.B. einen Rahmen zu?
Dem <img>-tag oder dem <p>-tag?
Dem img-Tag, da im P-Tag ja noch weitere Text Informationen (z.B. eine Bildunterschrift) stehen können, die du ja vermutlich nicht eingerahmt haben willst. Wobei du das letztendlich natürlich selber entscheiden kannst.
MfG, Dennis.
Lieber Dennis
Wenn du jetzt statt Backslash einfach nur Slash sagst, hast du recht - Backslash ist der hier: \ ;-)
Ups, ja ist natürlich klar :)
Dem img-Tag, da im P-Tag ja noch weitere Text Informationen (z.B. eine Bildunterschrift) stehen können, die du ja vermutlich nicht eingerahmt haben willst. Wobei du das letztendlich natürlich selber entscheiden kannst.
OK, ich habe da nun folgendes Dilemma:
Dem <p>-Element habe ich bei mir generell einen Rahmen
mit padding:5px zugeordnet, weil ich das immer in so weissen Rahen haben möchte.
Die Bilder sollen auch diesen weissen Rahmen haben,
aber ohne padding.
Wenn ich nun dem <img>-Element einen bordern gebe,
klappt das auch wunderbar. Nur sorgt dann eben noch das
<p>-Element (was ich ja "darumlegen" muss) auch noch für einen
zweiten Rahmen. Wie kann ich das denn amgeschicktesten lösen.
Unten nochmal der neue Quelltext und die CSS-Datei zur Verdeutlichung.)
Ist da nun eine ID für das <p>-Element angesagt?
Gruß
Ingo
HTML
---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="css-screen.css" />
<title>SPACEart</title>
</head>
<body>
<h1>Neuheiten</h1>
<h2>Star Wars : AT-AT (Einzelstück)</h2>
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>
<p><img src="Artikel/2001007-b.jpg" /></p>
<p>Es handelt sich um den Original Modell-Bausatz der Firma mpc/ERTL aus dem Jahr 1989. Die vorderen Beine und das Kontroll-Modul ("Kopf") sind beweglich. Die Base und der Snow Speeder sind nicht enthalten. -- ACHTUNG: wir haben nur ein einziges Exemplar !</p>
</body>
</html>
---------------------------------------------------------------------
CSS
---------------------------------------------------------------------
* html body {font-size:101%;}
html {
scrollbar-base-color:#004559;
scrollbar-3d-light-color:#FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-darkshadow-color:#004559;
scrollbar-face-color:#235F70;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-track-color:#004559;
}
body {
background-color : #235f70;
font-family : Arial, Verdana, Helvetica, sans-serif;
color: #ffffff;
}
h1, h2, p {
background-color: #004559;
padding: 5px;
border: 1px solid #ffffff;
width: 498px;
margin: 10px 0 0;
}
h1,h2 {
font-weight: bold;
color: #fff000;
}
h1 {
font-size:1.7em;
}
h2 {
font-size:1.2em;
}
img {
border: 1px solid #ffffff;
}
---------------------------------------------------------------------
Hi Ingo,
OK, ich habe da nun folgendes Dilemma:
Dem <p>-Element habe ich bei mir generell einen Rahmen
mit padding:5px zugeordnet, weil ich das immer in so weissen Rahen haben möchte.
Du vergibts padding, weil du einen Rahmen haben willst? Warum vergibst du nicht einfach direkt border?
Die Bilder sollen auch diesen weissen Rahmen haben,
aber ohne padding.
Wenn ich nun dem <img>-Element einen bordern gebe,
klappt das auch wunderbar. Nur sorgt dann eben noch das
<p>-Element (was ich ja "darumlegen" muss) auch noch für einen
zweiten Rahmen. Wie kann ich das denn amgeschicktesten lösen?
Ist da nun eine ID für das <p>-Element angesagt?
Eine ID halte ich nicht für angebracht, da es ja mehrere Bilder
geben könnte und jede ID ja nur einmal im Dokument vorkommen darf.
Du könntest z.B. <p class="picture"> verwenden und das dann so
gestalten:
p
{
/* Normale Absätze mit Rahmen */
border: 5px solid #ffffff;
}
p.picture
{
/* Bilderabsätze ohne Rahmen */
border: none;
/* Bildunterschrift klein und grau */
font-size:0.8em;
color: #dedede;
}
p.picture img
{
/* Weißen Rahmen für Bilder */
display: block; /* bin mir nicht ganz sicher, ob man das braucht */
border: 5px solid #ffffff;
}
Du könntest aber natürlich auch einfach die img in ein anderes Element
als p packen (z.B. div) oder den Rahmen doch für p und nicht für img
vergeben.
MfG, Dennis.
Hi,
Nur sorgt dann eben noch das
<p>-Element (was ich ja "darumlegen" muss) auch noch für einen
zweiten Rahmen.
Es ist mMn nicht sinnvoll, nur weil es die DTD vorschreibt, alle Bilder in ein Extra-Element zu packen. Nomalerweise stehen Bilder ja nicht alleine, sondern sind in einem Absatz integriert oder mit mehreren Elementen in einem DIV gruppiert. Einen ansonsten leeren Absatz finde ich dann auch nicht angemessen.
XHTML will Dich zu logisch strukturiertem Quelltext zwingen, nicht aber, daß Du um jedes inline-Element ein Block-Element setzt.
Also: Du hast einen Inhaltsbereich mit verschiedenen Elementen. Überlege Dir, welche Elemente sinnvoll gruppiert werden könnten und setze um diese ein DIV. Wenn Du nun sagst: "alle", dann setzt Du das DIV eben um alle Elemente und kannst es später ggfls. noch für allg. Seitenformatierungen nutzen, z.B. wenn Du die Seite mal zentrieren möchtest.
* html body {font-size:101%;}
ich weiß ja, daß Du dies von hier hast, aber Hacks solltest Du nach Möglichkeit vermeiden. Mit
body {font-size:100.1%;} kommt jeder Browser klar.
html {
scrollbar-[...]
Du willst doch valide Seiten, oder? Dann verzichte drauf oder lagere diese Definitionen über Conditional Comment für den IE aus. Und übrigens erreichst Du damit die 5er IEs nicht - dazu solltest Du diese IE-Eigenschaften für html,body angeben.
font-family : Arial, Verdana, Helvetica, sans-serif;
Du gibst hier einfach ohne Überlegung willkürliche Schriftarten an. Verdana hat eine sehr große Laufweite, während Arial und Helvetica unter Windows AFAIK gleich dargestellt werden, unter anderen Betriebssystemen jedoch häufiger Helvetica anzutreffen ist als Arial und Helvetica AFAIK auch besser aussieht.
Diese Definitionen können nun dazu führen, daß auf dem einen Rechner Arial mit geringer Laufweite verwendet wird und auf dem anderen Verdana mit großer Laufweite, obwohl auch Helvetica zur Verfügung stünde. Wenn Du also große Laufweite willst, dann definiere:
Verdana, Helvetica, Arial, sans-serif;
und ansonsten:
Helvetica, Arial, Verdana, sans-serif;
freundliche Grüße
Ingo
Lieber Ingo
Sorry, dass ich noch weiter nerve :)
Aber da ich noch neu bin im Umgang mit CSS,
haperts bei mir noch etwas mit dem kompletten Verständnis.
XHTML will Dich zu logisch strukturiertem Quelltext zwingen, nicht aber, daß Du um jedes inline-Element ein Block-Element setzt.
Also: Du hast einen Inhaltsbereich mit verschiedenen Elementen. Überlege Dir, welche Elemente sinnvoll gruppiert werden könnten und setze um diese ein DIV. Wenn Du nun sagst: "alle", dann setzt Du das DIV eben um alle Elemente und kannst es später ggfls. noch für allg. Seitenformatierungen nutzen, z.B. wenn Du die Seite mal zentrieren möchtest.
Bei mir auf der Seite soll es später einen Bereich geben,
in dem die Überschriften (h1 und h2), die Teste und die Bilder
immer in so Kästen mit weißen Rahmen eingeschlosen sind.
So wie Du es im Grunde hier sehen kannst: <//http://www.spaceart.de/_WC3_Test.shtml>
Dabei sollen all diese Elemente immer untereinander angeordnet werden
und immer einen Abstand zum obigen Element von 10px haben.
Ganz unten in diesem Posting findest Du wieder den dazugehörigen
neuen Quelltext und die CSS-Datei.
Wie Du sehen kannst, habe ich also nun um all diese Elemente
(h1, h2, p und img) ein DIV gesetzt. Und dem body-Element
habe ich dann in der CSS-Datei einen border und ein margin zugewiesen.
Das müsste doch nun eigentlich eine gute Lösung sein.
Zumal in dann später meine Navi ja auch in ein DIV schmeissen kann
und dieses dann positionieren.
Habe ich das nun richtig verstanden?
Ich möchte es halt von Anfang an richtig lernen und mir nicht
gleich wieder blöde Tricksereien angewöhnen :-)
Das einzige, was mich nun noch wundert ist, dass der Abstand
zwischen dem Bild und dem darunter liegendem p größer als 10px ist.
Und zwar im IE, FF und OP.
Angucken kannst Du es hier: <//http://www.spaceart.de/_WC3_Test.shtml>
Kann ich daraus schliessen, dass zum img-Element noch ein "internes
margin-bottom" oder so gehört, welches die Browser addieren?
Oder dass dieses "interne margin-bottom" einfach größer ist,
als meine gewünschten 10px und somit meines überschreibt?
Oder ist das alles der totale Unsinn?
* html body {font-size:101%;}
ich weiß ja, daß Du dies von hier hast, aber Hacks solltest Du nach Möglichkeit vermeiden. Mit
body {font-size:100.1%;} kommt jeder Browser klar.
Sicher? Ich meine mich zu erinnern, dass ich den rat bekommen hatte,
diesen einen Hack anzuwenden, weil irgendwelche Browser mit font-size:100.1%
doch wieder Probleme haben.
html {
scrollbar-[...]
Du willst doch valide Seiten, oder? Dann verzichte drauf
Naja, diese eine Sache w mit den farbigen Scrollbalken würde ich mir
doch gerne "gönnen", zumahl es ja nur da in der CSS auftaucht
und auf den sonstigen Code keine auswirkung hat.
Meinst Du nicht, das man das bringen könnte (bitte bitte :-))
oder lagere diese Definitionen über Conditional Comment für den IE aus.
Aber das geht doch nur in der HTML-Datei und nicht in der CSS-Datei ... oder?
Und da möchte ich das nicht haben, dann würde ich sogar lieber darauf verzichten.
Und übrigens erreichst Du damit die 5er IEs nicht - dazu solltest Du diese IE-Eigenschaften für html,body angeben.
Das soll doch aber wieder nicht funktionieren bei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
font-family : Arial, Verdana, Helvetica, sans-serif;
Du gibst hier einfach ohne Überlegung willkürliche Schriftarten an.
Ja, das habe ich vor damals, als ich mit HTML angefangen habe,
einfach mal so irgedwoher übernommen, ohne groß nachzudenken.
Verdana hat eine sehr große Laufweite, während Arial und Helvetica unter Windows AFAIK gleich dargestellt werden, unter anderen Betriebssystemen jedoch häufiger Helvetica anzutreffen ist als Arial und Helvetica AFAIK auch besser aussieht.
Diese Definitionen können nun dazu führen, daß auf dem einen Rechner Arial mit geringer Laufweite verwendet wird und auf dem anderen Verdana mit großer Laufweite, obwohl auch Helvetica zur Verfügung stünde. Wenn Du also große Laufweite willst, dann definiere:
Verdana, Helvetica, Arial, sans-serif;
und ansonsten:
Helvetica, Arial, Verdana, sans-serif;
Ich möchte ja eigentlich gar keine größen Laufweiten.
Ist dann Helvetica, Arial, sans-serif; noch sinnvoller?
Gruß
Ingo
Hi,
Wie Du sehen kannst, habe ich also nun um all diese Elemente
(h1, h2, p und img) ein DIV gesetzt. Und dem body-Element
habe ich dann in der CSS-Datei einen border und ein margin zugewiesen.
Das müsste doch nun eigentlich eine gute Lösung sein.
Zumal in dann später meine Navi ja auch in ein DIV schmeissen kann
und dieses dann positionieren.
Habe ich das nun richtig verstanden?
Im Pronzip ja. Du solltest diesem DIV dann noch eine ID geben, damit Du es, wenn das Menü dazu kommt, formatieren kannst. Eine Navigation muß übrigens nicht in ein DIV gesetzt werden...
Angucken kannst Du es hier: <//http://www.spaceart.de/_WC3_Test.shtml>
nö. Du meinst wohl http://www.spaceart.de/_WC3_Test.shtml.
Kann ich daraus schliessen, dass zum img-Element noch ein "internes
margin-bottom" oder so gehört, welches die Browser addieren?
Nein. Ein img wird normalerweuse an der Grundlinie einer Textzeile ausgerichtet und deshalb ein paar Pixel für Unterlängen reserviert. Dies kannst Du vermeiden, wenn Du es display:block formatierst.
* html body {font-size:101%;}
ich weiß ja, daß Du dies von hier hast, aber Hacks solltest Du nach Möglichkeit vermeiden. Mit
body {font-size:100.1%;} kommt jeder Browser klar.Sicher? Ich meine mich zu erinnern, dass ich den rat bekommen hatte,
diesen einen Hack anzuwenden, weil irgendwelche Browser mit font-size:100.1%
doch wieder Probleme haben.
Jein. Du hattest den Rat bekommen, 101% vor anderen Browsern zu verbergen und diesen solltest Du vergessen und einfach 100.1% verwenden.
oder lagere diese Definitionen über Conditional Comment für den IE aus.
Aber das geht doch nur in der HTML-Datei und nicht in der CSS-Datei ... oder?
Du kannst in der HTML-Datei inerhalb eines CC eine externe CSS-Datei nur für Win-IEs referenzieren. Nebenbei kannst Du diese dann auch für sämtliche evtl. notwendigen Korrekturen für IEs verwenden und bist nicht auf CSS-Hacks angewiesen.
Und übrigens erreichst Du damit die 5er IEs nicht - dazu solltest Du diese IE-Eigenschaften für html,body angeben.
Das soll doch aber wieder nicht funktionieren bei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Wieso nicht? Der IE6 im standard-compliant mode berücksichtigt die Definitionen für html und 5er-IEs die für body.
> Ich möchte ja eigentlich gar keine größen Laufweiten.
> Ist dann Helvetica, Arial, sans-serif; noch sinnvoller?
Ja. Es sei denn, Du gibst sehr kleine Schriftgrößen an - die sind nur in Verdana oder ähnlichen Fonts noch einigermaßen lesbar. Tahoma hat übrigens eine noch geringere Laufweite.
freundliche Grüße
Ingo
--
[[barrierefreie Webseitenerstellung](http://www.1ngo.de/web/) » [Suchmaschinenoptimierung](http://www.1ngo.de/web/seo.html) | [em?](http://www.1ngo.de/web/em.html)] ([Hommingberger Gepardenforelle](http://www.1ngo.de/hommingberger-gepardenforelle/);-)
Lieber Ingo
Im Pronzip ja. Du solltest diesem DIV dann noch eine ID geben.
OK, wird gemacht. Danke für den Hinweis.
Dies kannst Du vermeiden, wenn Du es display:block formatierst.
Funtioniert wunderbar. Danke.
Jein. Du hattest den Rat bekommen, 101% vor anderen Browsern zu verbergen und diesen solltest Du vergessen und einfach 100.1% verwenden.
Ok, dann mache ich das mal schnell.
Du kannst in der HTML-Datei inerhalb eines CC eine externe CSS-Datei nur für Win-IEs referenzieren.
Was ist denn ein "CC"?
Wieso nicht? Der IE6 im standard-compliant mode berücksichtigt die Definitionen für html und 5er-IEs die für body.
OK.
Tahoma hat übrigens eine noch geringere Laufweite.
Hab ich mir gerade mal angesehen, gefällt mir aber nicht so gut.
Ich werds erstmal bei Helvetica, Arial, sans-serif; belassen.
Danke und Gruß aus Münster
Ingo
Hi Ingo,
Du kannst in der HTML-Datei inerhalb eines CC eine externe CSS-Datei nur für Win-IEs referenzieren.
Was ist denn ein "CC"?
MfG, Dennis.
Hallo Dennis,
Was ist denn ein "CC"?
da hast du das Fettnäpfchen aber voll getroffen!
Es gibt wohl gewisse Wortpaare im Englischen, die immer wieder verwechselt werden, so zum Beispiel
command [ko'ma:nd] (BE), [ko'mæ:nd] (AE): Anweisung, Befehl
comment ['koment]: Kommentar
In diesem Fall ist es natürlich besonders gemein, wo doch command (Anweisung) auch plausibel klingt. Gemeint sind aber Conditional Comments, wie es im verlinkten SELFHTML-Abschnitt auch richtig beschrieben wird. Comment deshalb, weil die Anweisungen durch einen HTML-Kommentar maskiert werden.
So long,
Martin
PS: Sind in Unicode eigentlich auch die richtigen Symbole für die internationale Lautschrift definiert? Schade, dass die zumindest in den Windows-Fonts nicht enthalten sind...
Grüezi!
PS: Sind in Unicode eigentlich auch die richtigen Symbole für die internationale Lautschrift definiert? Schade, dass die zumindest in den Windows-Fonts nicht enthalten sind...
Ja, sind sie. Siehe http://www.unicode.org/charts/symbols.html, links unten.
In meiner Schriftart Quivira sind sie auch enthalten. (Allerdings verwende ich zur Erstellung ein sehr preiswertes Programm, das leider kein Hinting kann, weswegen sie auf dem Bildschirm sehr unscharf erscheint. Gedruckt ist sie aber gestochen scharf.)
Weitere Schriftarten sollten sich ergoogeln lassen... am besten nach "ipa unicode font" oder so was suchen.
Viele Grüße vom Længlich
Hi Der,
In diesem Fall ist es natürlich besonders gemein, wo doch command (Anweisung) auch plausibel klingt.
Durch das if ist es aber auch ein "Conditional Command" - welche Idioten haben das auch "Conditional Comment" genannt? Die haben sich gefälligst mal nach mir zu richten!!!!!11
;-)
MfG, Dennis.
Lieber Detlef
Du kannst in der HTML-Datei inerhalb eines CC eine externe CSS-Datei nur für Win-IEs referenzieren. Nebenbei kannst Du diese dann auch für sämtliche evtl. notwendigen Korrekturen für IEs verwenden und bist nicht auf CSS-Hacks angewiesen.
Ja, das isz ja auch mal wiederne echt gúte Idee.
Ich habe das nun so gemacht:
<!--[if IE]>
<style type="text/css">@import url(css-IE.css);</style>
<![endif]--><
Und meine spezielle IE-CSS sieht dan eben so aus:
html,body
{
scrollbar-base-color: #004559;
scrollbar-3d-light-color: #FFFFFF;
scrollbar-arrow-color: #FFFFFF;
scrollbar-darkshadow-color: #004559;
scrollbar-face-color: #235F70;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-track-color :#004559;
}
Ach übrigens, dann kan ich doch dieses "font-size:100.1%;" da auch
gleich mit "reinschmeissen".
Gruß
Ingo
Hi,
Ach übrigens, dann kan ich doch dieses "font-size:100.1%;" da auch
gleich mit "reinschmeissen".
warum? Dies ist eine für alle Browser nützliche Definition, die Du zusätzlich um eine Default-Schriftfamilie erweitern kannst.
Ingo
Lieber Ingo
Ach übrigens, dann kan ich doch dieses "font-size:100.1%;" da auch
gleich mit "reinschmeissen".
warum? Dies ist eine für alle Browser nützliche Definition, die Du zusätzlich um eine Default-Schriftfamilie erweitern kannst.
Ach ja, stimmt ja, diesen CSS-Hack für den IE mit 101% hatte
ich ja schon wieder gecancelt.
Gruß
Ingo
Hallo Ingo,
du hast hier viele Threads jeweils zu Einzelproblemen der Unsetzung deiner
Seite mit CSS begonnen.
Besser wäre es, wenn du für weitere Fragen einen der bereits bestehenden
Threads verwenden würdest. Wenn du vor dem Abschicken die Vorschaufunktion
benutzt, kannst du auch den Titel des Postings anpassen.
Du kannst davon ausgehen, dass jemand, der dir bereits geholfen hat, immer
wieder in den Thread hereinschaut, ob du weitere Fargen stellst. Ob dieser
allerdings einen neuen Thread von dir liest, ist eher Zufall.
Noch Etwas grundsätzliches zu deiner Herangehensweise:
Du versuchst jetzt Stück für Stück deine Seiten zu schreiben und zu
formatieren. Diese Vorgehensweise ist bei CSS-Layout nicht sehr sinnvoll.
Vergesse als erstes das gewünschte Layout!
Überlege stattdessen, was alles einen Seite enthalten soll, Kopf, Navi,
Inhalt, News oder was auch immer.
Schreibe dieses vernünftig und sinnvoll strukturiert in den HTML-Quelltext.
Überlege dann, welche Teile zusammengehören und also auch gruppiert werden
sollten. Gruppiere diese mit Blockelementnen (z.B. Div).
Klassifiziere diese Gruppen, wo nötig.
Schaue dir das Ergebnis ohne CSS an.
Frage dich, ob diese sehr einfache Darstellung übersichtlich und vernünftig
benuztzbar ist. Denke daran inetwas so sieht es eine Suchmaschine, ein
Nutzer mit Uraltbrowser, oder liest es ein Screenreader vor.
Erst, wenn das OK ist, ist deine Seite fertig für die Gestaltung mit CSS.
Du nimmst dein gewüschtes Layout zur Hand und definierst die notwendigen
Eigenschaften, Farben, Abstände, Border, Floats, Schriftarten und -größen
usw.. Dazu verwendest du wenn möglich die Elementnamen, wenn das nicht
möglich ist, die bereits vorhandenen Klassen.
Nur wenn wenn das nicht geht, und nur dann, fügst du noch zusätzliche
Klassen oder im absoluten Notfall zusätzliche Elemente ein.
Und dann habe ich gelesen, dass ich das <img>-Tag garnicht einfach
so "alleine" setzen darf, sondern nur in ein Block-Element.
Heisst das nun dass es so nicht richtig ist:
<img src="Artikel/2001007-b.jpg" />
sondern z.B. so:
<p><img src="Artikel/2001007-b.jpg" /></p>
Diese Frage wäre bestimmt überhaupt nicht aufgetaucht, wenn dir die
komplette Seitenstruktur mit Navi und Inhaltsbereich bewusst gewesen wäre.
Auf Wiederlesen
Detlef
Lieber Detlef
Besser wäre es, wenn du für weitere Fragen einen der bereits bestehenden
Threads verwenden würdest. Wenn du vor dem Abschicken die Vorschaufunktion
benutzt, kannst du auch den Titel des Postings anpassen.
OK, werde ich so machen in Zukunft.
Obwohl ich bisher immer gedacht hatte, es sei sinnvoller
und vor allem übersichtlicher, für jedes Anliegen/Problem
einen eigenen Thread zu eröffnen.
Noch Etwas grundsätzliches zu deiner Herangehensweise:
Du versuchst jetzt Stück für Stück deine Seiten zu schreiben und zu
formatieren. Diese Vorgehensweise ist bei CSS-Layout nicht sehr sinnvoll ...
Da ich bei diesem ganzen CSS-Layout noch neu bin, bitte ich da um Nachsicht.
Ich denke halt immer noch irgendwie in Frames.
Aber ich verspreche hoch und heilig, dass ich ernsthaft dabei bin,
mir das abzugewöhnen.
Deshalb bin ich auch immer noch an das Layout meiner bisherigen
Seite "gefesselt". Es ist halt für einen CSS-Beginner nicht so ganz
einfach, sich von diesem ganzen Gedankengut zu trennen ... verstehst Du?
Früher hat man das immer alles schön mit Frames uns blinden Tabellen
zusammengebaut und das ist ja bei CSS die völlig falsche Sichtweise.
Hast Du nicht eine gute Idee für mich, wie ich den Bereich
sozusagen gestalten kann, der dann im Browser-Fenster mit dessen
Breite "mitwächst".
Im Grunde möchte ich schon auf der linken Seite oder oben die
Navigation anordnen. Vielleicht auch links und rechts, so wie
auf dieser Grafik
Nur das mit diesen untereinander angeordneten Bildern
mach dann bei breiten Browserfenstern nicht mehr so viel Sinn.
Ich finde das hier auch sehr schick: http://cssdesign.e-workers.de/start.php
Aber der hat es mit seinen umbrechenden Texten im mittleren Bereich
natürlich etwas leichter als ich :)
Fällt Di da was gutes ein ?
Übrignes ... nicht dass Du nun denkst, ich will Deinen Rat nicht
befolgen. Aber meine Inhalte (Kopf, Navi, Inhalt, News usw.) stehen
im Grunde alle schon fest, da ich ja diesen Frame-Shop schon lange betreibe. Auch was davon zusammengehört und wi ich das in etwa
gruppieren will, weiss ich ja schon.
Nur ist mein großes Hauptproblem eben die eigentliche
Darstellung/Präsentation der Produke in einem nicht fix-breitem CSS-Layout.
Ich hoffe übridens Deine Rat natürlich richtig verstanden zu haben.
Über weitere Hilfe mit meinem Dilemma von Dir/Euch würde ich mich
wirklich RIESIG freuen.
Gruß
Ingo
Hi,
Hast Du nicht eine gute Idee für mich, wie ich den Bereich
sozusagen gestalten kann, der dann im Browser-Fenster mit dessen
Breite "mitwächst".
Im Grunde möchte ich schon auf der linken Seite oder oben die
Navigation anordnen. Vielleicht auch links und rechts, so wie
auf dieser Grafik
diese Grafik stellt ein typischen Tabellen- oder Frameset-Layout dar. Typisch deshalb, weil hier spezifische Eigenschaften dieser Elemente benötigt werden: der "*" bei Frames bzw. die Flexiblen Breiten von Tabellen. Sowas bietet das Box-Modell leider nicht und erfordert entweder ein Umdenken - weg von den Spalten - oder Workarounds, mit denen Du Dich am Anfang besser noch nicht beschäftigen solltest.
Eine (CSS-)Box nimmt:
Du hast nun wegen den Bildern einen Mittelteil mit fester Breite in px. Dadurch scheidet eine prozentuale "Spaltenaufteilung" aus.
Würdest Du die Seitenbereiche floaten lassen oder positionieren, dann nehmen sie sich den für den Inhalt nötigen Platz, aber nicht mehr.
Noch erschwerend hinzu kommt Dein Wunsch nach gleichen "Spaltenhöhen". Spalten gibt es nach dem CSS-Boxmodell nicht, abgesehen von Tabelleneigenschaften, die man aber browserübergreifend nur mit HTMl-Tabellen erreicht.
freundliche Grüße
Ingo
Lieber Ingo
diese Grafik stellt ein typischen Tabellen- oder Frameset-Layout dar.
Ok, vergiss die Grafik. Die bringt irgendwie nicht rüber, was ich meine.
Hier mal eine URL mit vielen meiner Meinung nach typischen
CSS-Layouts: http://webhost.bridgew.edu/etribou/layouts/index.html
Das sind doch im Grunde auch alles "mehrspaltige" Layouts.
Oder sind das jetzt alles wieder so für bestimmte Browser
hingetrickste Layouts?
Also ich rede da jetzt nicht von der Komplexität dieser
ganzen schicken Kästen usw., sondern nur davon, das z.B.
speziell bei diesem Layout http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html
bei Größenveränderung des Browserfensters die beiden "Spalten"
recht und links ja gleich breit bleiben und nur die Mitte sich
zusammenschiebt.
Und bei Schriftgradgröen-Änderung wachsen alle Boxen ("Spalten") mit.
das ist doch im Grunde eine sehr elegante und schicke Lösung.
Oder siehst Du das anders?
Ich würde mich sehr freuen, wenn Du mir zu diesem Layout
bzw. dessen Funtionalität bei verschiedenen Fenster- und Schriftgrößen
nochmal Deine Meinung sagen könntest.
Gruß
Ingo
Hi,
Also ich rede da jetzt nicht von der Komplexität dieser
ganzen schicken Kästen usw., sondern nur davon, das z.B.
speziell bei diesem Layout http://webhost.bridgew.edu/etribou/layouts/skidoo_too/index.html
bei Größenveränderung des Browserfensters die beiden "Spalten"
recht und links ja gleich breit bleiben und nur die Mitte sich
zusammenschiebt.
Und bei Schriftgradgröen-Änderung wachsen alle Boxen ("Spalten") mit.das ist doch im Grunde eine sehr elegante und schicke Lösung.
ja, deshalb findest Du so ein Prinzip auch vorrangig in SELFHTML. ;-)
z.B. auch hier: http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm und sogar mit Erklärung...
freundliche Grüße
Ingo
Lieber Ingo
ja, deshalb findest Du so ein Prinzip auch vorrangig in SELFHTML. ;-)
z.B. auch hier: http://de.selfhtml.org/css/layouts/anzeige/3spaltig.htm und sogar mit Erklärung...
Jou, wunderbar.
Ich werde nun mal sehen, ob ich das Sinnvoll für meinen Online-Shop anwenden kann.
Vielen Dank und Gruß aus Münster
Ingo
Hallo Detlef G.,
Noch Etwas grundsätzliches zu deiner Herangehensweise:
Du versuchst jetzt Stück für Stück deine Seiten zu schreiben und zu
formatieren. Diese Vorgehensweise ist bei CSS-Layout nicht sehr sinnvoll.
Zur Vorgehensweise beim Layouten mit CSS habe ich einmal ein hübsches Animated GIF gefunden (weiss leider nicht mehr wo, deshalb ohne Quellenangabe):
Webdesign mit CSS (Animated GIF, ~900 KB)
Gruss aus Luzern,
Daniel
Hallo daniel84.
Sehr schön und aufschlussreich.
Einen schönen Montag noch.
Gruß, Ashura
Lieber Detlef
Noch Etwas grundsätzliches zu deiner Herangehensweise:
Du versuchst jetzt Stück für Stück deine Seiten zu schreiben und zu
formatieren. Diese Vorgehensweise ist bei CSS-Layout nicht sehr sinnvoll.
Vielen Dank für Deinen Hinweis.
Ich habe dazu unter folgendem Link etwas gepostet:
https://forum.selfhtml.org/?t=114290&m=728243
Gruß
Ingo
