background-img

[romy]

Hallo und sonnige Grüße,

nach längerem Zögern wollte ich mich jetzt doch mal mit meiner Website beschäftigen und mich ein wenig einarbeiten. Ich habe seit längerem nicht gemacht in HTML + CSS und bräuchte mal einen Denkanstoss.

http:\\www.romy-b.de

In dem Inhalts-Div hätte ich gern ein background-img.

<auszug aus der css-Datei>
div.inhalt {
  background-image:url("bilder\sonnenblume_blass.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  width:50em;
  height:35em;
  border:0.1em dotted grey;
  text-align:center;
  vertical-align:middle;
  margin:0.2em;
  padding:0.4em;
}
</auszug>

Ich habe den Befehl aus SelfHTML kopiert um Schreibfehler auszuschließen. Ich habe das Bild als Img eingebunden um auch da Schreibfehler auszuschließen. Ich habe die restlichen CSS-befehle aus den Klammern entfernt um dort Fehler auszuschließen. Trotzdem wird das Bild nicht sichtbar, weder im Body-Tag, noch, wenn ich den Befehl direkt in den Style des Div's einbinde.

was kann ich tun?

vielen Dank

ciao
romy

[Lachgas]

吃了吗, romy？

http:\\www.romy-b.de

Du machst einen Elementarfehler: Verwende Slashes, keine Back-Slashes!

==> http://www.romy-b.de

℆, ℒacℎgas

[alfie]

Hallo romy!

Du machst einen Elementarfehler: Verwende Slashes, keine Back-Slashes!

falls dir das zu lakonisch ist:

in deiner index.html sollte stehen:
<link rel="stylesheet" type="text/css" href="css/start.css">
dann wird das style-sheet auch gefunden und verwendet.

im body funktioniert anschliessend:
<img src="bilder/sonnenblume_blass.jpg" width="100%" height="100%">

mfg Alfie

[romy]

Hi alfie,

deiner index.html sollte stehen:
<link rel="stylesheet" type="text/css" href="css/start.css">
dann wird das style-sheet auch gefunden und verwendet.

ich bin jetzt etwas mehr verwirrt als vorher. Das Stylesheet wird erkannt, ob mit Backslash oder Slash. ich dachte erst der Browser cached, aber das ist auch nicht Fall. Ich habe jetzt alle Slashes in Backslashes umgewandelt, kein Erfolg.
Fällt Dir noch was ein?

ciao
romy

[romy]

Hi ,»» Hi alfie,

kleiner Zusatz:

das CSS:
div.inhalt {
  background-image:url("bilder/sonnenblume_blass.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  width:50em;
  height:35em;
  border:0.1em dotted grey;
  text-align:center;
  vertical-align:middle;
  margin:0.2em;
  padding:0.4em;
}

wenn ich das img einfüge (und nicht auskommentiere) wird es mit backslash als auch mit Slash angezeigt

ciao
romy

[Gunnar Bittersmann]

romy,

wenn ich das img einfüge (und nicht auskommentiere) wird es mit backslash als auch mit Slash angezeigt

MSIE unter MS Windows?

Erwarte nicht, dass andere Browser/Betriebssyteme ebnso tolerant sind.
Gunnar

[romy]

Hi Gunnar,

MSIE unter MS Windows?

ja, erwarte ich auch nicht ;) ich war verwirrt darüber. Ansonsten war es nur ein Schreibfehler. (Der Firefox hat es auch gemacht ;))

einen schönen Tag noch.

ciao
romy

[Gunnar Bittersmann]

Hi romy,

einen schönen Tag noch.

?? Lang ist er nicht mehr. Und eigentlich ist Nacht.

In welcher Zeitzone ist L. AN DER P.?

Gunnar

[romy]

Guten Morgen Gunnar,

einen schönen Tag noch.
?? Lang ist er nicht mehr. Und eigentlich ist Nacht.
In welcher Zeitzone ist L. AN DER P.?

mhm... :)

ich meinte doch den nächsten Tag, ähhh ...

ciao
romy

[Gunnar Bittersmann]

romy,

mhm... :)

hilft nicht herauszufinden, wo L. AN DER P. liegt.
Hat L. AN DER P. einen Weisheitszahn?

ich meinte doch den nächsten Tag, ähhh ...

Ach so … na denn danke gleichfalls.
Gunnar

[romy]

Hi Gunnar,

hilft nicht herauszufinden, wo L. AN DER P. liegt.
Hat L. AN DER P. einen Weisheitszahn?

Ja, ursprünglich sollte allerdings ein aufgeschlagenes Buch dargestellt werden.

L. = Leipzig
P. = Pleiße

ciao
romy

[Axel Richter]

Hallo,

wenn ich das img einfüge (und nicht auskommentiere) wird es mit backslash als auch mit Slash angezeigt

Ja, wenn Du in der Ressource
http://www.romy-b.de/
das Bild
<img src="bilder/sonnenblume_blass.jpg" width="100%" height="100%"/>
referenzierts, wird es mit dem URI
http://www.romy-b.de/bilder/sonnenblume_blass.jpg
angefordert.

Wenn Du aber in der Ressource
http://www.romy-b.de/
<link rel="stylesheet" type="text/css" href="css/start.css">

div.inhalt {
  background-image:url("bilder/sonnenblume_blass.jpg");

referenzierst, wird es dort mit dem URI
http:/www.romy-b.de/css/bilder/sonnenblume_blass.jpg
angefordert.

Alles klar?

viele Grüße

Axel

[romy]

Hallo Axel,

http:/www.romy-b.de/css/bilder/sonnenblume_blass.jpg
angefordert.
Alles klar?

klar,

danke wirklich, (Wald und Bäume, oder wie ging das Sprichwort) ;)

einen schönen Karfreitag noch...

ciao
romy

[romy]

Hallo und frohe Ostern,

ich hätte da noch eine Frage. Warum sieht die Schriftgrösse so klein aus im Firefox und Opera? Ich nehme an, dass der IE falsch interpretiert und damit ein gutes Ergebnis vorgaukelt. Könnte ich noch einen Tip haben, wo ich falsch liege.

Vielen Dank

http://www.romy-b.de
http://www.romy-b.de/css/start.css

ciao
romy

[Ingo Turski]

Hi,

ich hätte da noch eine Frage. Warum sieht die Schriftgrösse so klein aus im Firefox und Opera? Ich nehme an, dass der IE falsch interpretiert und damit ein gutes Ergebnis vorgaukelt.

die font-size:0.5em; sind in meinem IE genauso schlecht lesbar wie im Firefox.

freundliche Grüße
Ingo

[romy]

Hi Ingo,

die font-size:0.5em; sind in meinem IE genauso schlecht lesbar wie im Firefox.

irgendjemand hat meinen IE auf "große Schriftarten" gestellt ;)
das muss ja verwirren.

vielen Dank und frohe Ostern

ciao
romy

[Gunnar Bittersmann]

romy,

Warum sieht die Schriftgrösse so klein aus im Firefox und Opera?

Hilft dir dieser Thread?
Gunnar

[romy]

Hi Gunnar,

Hilft dir dieser Thread?

ja, danke, ich denke mit 1em kann ich mich anfreunden.

vielen Dank

ciao
romy

[Axel Richter]

Hallo,

ich hätte da noch eine Frage. Warum sieht die Schriftgrösse so klein aus im Firefox und Opera?

Die Schrift sieht bei mir in allen Browsern gleich klein aus, 0.5em eben, wie angegeben. Warum willst Du eine so kleine Schrift? Für die Problematik mit em-Schriftgrößen siehe: http://www.1ngo.de/web/em.html.

http://www.romy-b.de
http://www.romy-b.de/css/start.css

Das größte Problem hast Du aber noch mit der Positionierung der DIV-Elemente. Diese kümmern sich als Block-Elemente nicht um text-align, außer im IE. Hierzu siehe: http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm.

Weiterhin hast Du das Box-Model http://de.selfhtml.org/css/formate/box_modell.htm noch nicht richtig verstanden. Auch hier macht der IE im quirks mode (ohne korrekten Doctype) eine Ausnahme. Was Du nicht beachtest ist, dass width nur die Inhalts-Breite angibt. Padding und Border liegen _außerhalb_ von width. Ein Element mit width:100% und padding:10px (Menü) ist also, bei gleicher Bezugsgöße für 100%, breiter als eins mit width:100% und padding:3px (Inhalt).

viele Grüße

Axel

[romy]

Hi Axel,

Warum willst Du eine so kleine Schrift? Für die Problematik mit em-Schriftgrößen siehe: http://www.1ngo.de/web/em.html.

wollte ich nicht, habe nur im IE "große Schrift" eingestellt ohne es zu wissen.

»»http://aktuell.de.selfhtml.org/tippstricks/css/ausrichtung/index.htm.

das hat sehr geholfen wie auch das:

Weiterhin hast Du das Box-Model http://de.selfhtml.org/css/formate/box_modell.htm noch nicht

ich habe jetzt mal ein wenig damit rumgespielt, bin aber noch nicht ganz zufrieden. Mich würde interessieren, wie ich es berechnen kann, wenn ich die width und height - Angaben in Prozent machen möchte, aber border in px. Oder ist das der völlig falsche Ansatz?

ciao
romy

[Orlando]

Hallo romy,

Mich würde interessieren, wie ich es berechnen kann, wenn ich die width und height - Angaben in Prozent machen möchte, aber border in px.

Im Endeffekt gar nicht.

Oder ist das der völlig falsche Ansatz?

Ja. „px” lassen sich nicht skalieren, du kannst allerdings auch solche Wünsche z.B. mit „em“ umsetzen, du musst nur ein bisschen mit den Werten spielen und die teilweise unterschiedliche Rundung der Browser berücksichtigen. Da ergeben sich manchmal Werte wie 1.236 em, damit’s in allen Browsern gleich aussieht. Probleme entstehen dadurch aber nicht.

Grüße
Roland

[romy]

Hallo Roland,

Ja. „px” lassen sich nicht skalieren, du kannst allerdings auch solche Wünsche z.B. mit „em“ umsetzen, du musst nur ein bisschen mit den Werten spielen und die teilweise unterschiedliche Rundung der Browser berücksichtigen. Da ergeben sich manchmal Werte wie 1.236 em, damit’s in allen Browsern gleich aussieht. Probleme entstehen dadurch aber nicht.

danke Dir, ich versuche es mal, aber mir reicht eigentlich schon die Aussage, dass ich nicht schiefliege, wenn ich "mit den Werten spiele"
Man scheint eben doch nicht immer alles "berechnen " zu können ;)

Frohe Ostern

ciao
romy

[Ashura]

Hallo Orlando.

Ja. „px” lassen sich nicht skalieren, (...)

Sagt wer? Wenn ich meine Bildschirmauflösung herunterschalte, ist ein Pixel größer, als wenn ich sie hochschalte.

Somit habe ich ein Pixel skaliert.

Gruß, Ashura

[Orlando]

Hallo Ashura,

Ja. „px” lassen sich nicht skalieren, (...)

Bildschirmauflösung herunterschalte […] Somit habe ich ein Pixel skaliert.

Wenn ich kräftig an einem OLED ziehe, skaliert ein Pixel mechanisch. Ist das für romy in irgendeiner Form relevant?

Grüße
Roland

[Ashura]

Hallo Orlando.

Ist das für romy in irgendeiner Form relevant?

Nein, es war nur als Bemerkung gedacht und an dich gerichtet.

Gruß, Ashura

[Gunnar Bittersmann]

Orlando,

„px” lassen sich nicht skalieren,

So sollte es sein. Aber Millionen DAWs trieben Schindluder damit und machten ihre Webseiten durch winzige, fest angegebene Schriftgrößen (fast) unbenutzbar.

Daruf reagierten (einige) Browserhersteller und machten px skalierbar. Damit heißt px wohl nicht mehr Pixel …

Gunnar