nicht angemeldet
Skalierbare Box mit abgerundeten Ecken
Hi,
bin ich zu Doof??
Ich versuche gerade die skalierbare Box mit abgerundeten Ecken von SELFHTML
meinen vorstellungen entsprechend anzupassen. (gerade ist gut, seit Tagen sitz ich schon dran)
Das funktioniert auch, wenn ich die Style angaben in der HTML Datei lasse,
das ist ja aber nicht Sinn und Zweck von CSS, also habe ich die CSS
angaben dementsprechend in die CSS datei gepackt.
Die CSS Datei binde ich mit diesem Link
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!--[if lt IE 6]><style type="text/css"></style><![endif]-->
in die HTML Datei ein.
Aber irgendwie werden diese angaben ignoriert. Die background-image werden nicht angezeigt.
Funktioniert nur, wenn ich die Style angaben in der HTML Datei stehen lasse.
So sieht die CSS Datei aus:
body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background-color: white;
margin:0 5%;
}
div {
margin:0;
}
.ro {
background-image: url('reoben.gif') top left no-repeat;
}
.lo {
background-image: url('lioben.gif') top left no-repeat;
}
.ru {
background-image: url('reunten.gif') bottom right no-repeat;
}
.lu {
background-image: url('liunten.gif') bottom left no-repeat;
}
.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}
.inhalt p {
margin:0;
padding:0;
}
_____________________________________________________________________
So sieht die HTML Datei aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!--[if lt IE 6]><style type="text/css"></style><![endif]-->
</head>
<body>
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<p>Lorem ipsum dolor .....</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
_____________________________________________________________________
Meine versuche in abgekürzter Form:
#ro {
background-image: url('reoben.gif') top left no-repeat;
}
div#lo { <!--in der HTML datei mit <div id="lo">-->
background-image: url('lioben.gif') top left no-repeat;
}
Woran liegt es, das ich die background-image nicht eingebunden krieg??
Wie gesagt, wenn ich den HTML Code von SELFHTML einfach übernehme,
die Bilder in den selben Ordner, in dem auch die HTML Datei ist lege, klappt es.
_____________________________________________________________________
Als bsp. noch der Code, mit dem es klappt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beispiel Runde Ecken</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
/* grundlegende Seiteneinstellungen*/
body {
font:100% Verdana, Arial, Helvetica, sans-serif;
background-color:#F1EDCF;
margin:0 5%;
}
h1,h2,h3 {
font-family:"Times New Roman", "Trebuchet MS", Georgia, serif;
font-weight:normal;
color:#667553;
}
h1 {
font-size:250%;
}
h2 {
font-size:200%;
}
h3 {
font-size:150%;
}
/* hier beginnt das für die Box relevante CSS */
div {
margin:0;
}
.ro {
background:url(roundedbox_ro.gif) top right no-repeat;
}
.lo {
background:url(roundedbox_lo.gif) top left no-repeat;
}
.ru {
background:url(roundedbox_ru.gif) bottom right no-repeat;
}
.lu {
background:url(roundedbox_lu.gif) bottom left no-repeat;
}
.inhalt {
margin:0;
padding:2.5em 2.5em 3.5em 2.5em;
}
.inhalt p {
margin:0;
padding:0;
}
-->
</style>
~~~~~~html
</head>
<body>
<h1>Beispielseite „Runde Ecken“</h1>
<h2>Fertige Box </h2>
<div class="ro">
<div class="lo">
<div class="ru">
<div class="lu">
<div class="inhalt">
<p>Lorem ipsum dolor....</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Wenn ich den oben stehenden Code so wie er ist in die HTML Datei übernehme funktioniert es.
Danke im voraus.
Grüße,
Engin
GYRO
--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
-
hi,
Aber irgendwie werden diese angaben ignoriert. Die background-image werden nicht angezeigt.
Funktioniert nur, wenn ich die Style angaben in der HTML Datei stehen lasse.Du hast vermutlich nicht berücksichtigt, dass die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Du hast vermutlich nicht berücksichtigt, dass die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden.
Doch hab ich auch versucht,
.ro { background-image: url('./bild/reoben.gif') top left no-repeat; }Die Bilder natürlich auch in den Ordner /bild/ gepackt.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
In welchem Ordner ist denn deine CSS-Datei?
Beispiel: Bilder in /bilder/
CSS in /css/
dann wäre der relative Pfad, um aus dem CSS auf ein bild zu verweisen ../bilder/bild.gifGrüße,
Yordan-
Hi,
In welchem Ordner ist denn deine CSS-Datei?
Ich hab ein Ordner der css heisst, da drin liegt die Datei
/style.css also heisst es ja /css/style.cssUnd für die Bilder habe ich einen Ordner der bild heisst,
../bild/irgendeinbild.gifIch hab das ja schon oft gemacht, darum verzweifel ich grad ein bisschen, ich versteh nicht wo der Fehler ist.
Wenn ich meine im Netz stehende Seite auf Localhost bearbeite funktionieren die angaben ja so wie es sein soll, bisschen kann ich ja auch schon.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hallo,
Achte auf Groß- und Kleinschreibung. Im Gegensatz zum lokalen Server erkennen viele Webserver keine Unterschiede, d. h. <a href="index.html"> würde nicht funktionieren, wenn die Datei Index.html heißt.
gruß aus Hosena
-
Hi,
Achte auf Groß- und Kleinschreibung. Im Gegensatz zum lokalen Server erkennen viele Webserver keine Unterschiede, d. h. <a href="index.html"> würde nicht funktionieren, wenn die Datei Index.html heißt.
Oben im thread stehen ja die Codeschnipsel, es funktioniert ja auch,
wenn ich die Style angaben im HTML Dokument lasse, ich kann ja nicht viel falsch machen, wenn ich die Style angaben ausschneide und in die
CSS Datei einfüge.
Ich hab ja meine Seite mit CSS gestaltet, darum Wundert es mich,
warum ich jetzt so viel schwierigkeiten mit so ner kleinigkeit hab.Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
-
-
-
-
hi,
Doch hab ich auch versucht,
.ro {
background-image: url('./bild/reoben.gif') top left no-repeat;
}> Die Bilder natürlich auch in den Ordner /bild/ gepackt. ./ referenziert den aktuellen Ordner. Da dein Stylesheet in /css liegt, müsste also dein Bild unter /css/bild/reoben.gif abrufbar sein. gruß, wahsaga -- /voodoo.css: #GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi wahsaga!
Da dein Stylesheet in /css liegt, müsste also dein Bild unter /css/bild/reoben.gif abrufbar sein.
Aber das widerspricht doch deiner Aussage, dass "die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden."
Denn die CSS-Datei liegt ja vermutlich im Ordner css. Also wäre /bild/reoben.gif oder ../bild/reoben.gif richtig, je nach dem, welche Ordnerstruktur der OP gewählt hat.
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)-
hi,
Da dein Stylesheet in /css liegt, müsste also dein Bild unter /css/bild/reoben.gif abrufbar sein.
Aber das widerspricht doch deiner Aussage, dass "die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden."
Wieso widerspricht das der Aussage?
./ am Anfang der genannten Bildadresse steht für das aktuelle Verzeichnis - aktuell hier aus "Sicht" der CSS-Ressource.
Also ist /css aktuell, und darunter soll ein Verzeichnis bild liegen, und darin reoben.gif.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi wahsaga!
Danke. Verstanden! :-)
MfG H☼psel
--
"It's amazing I won. I was running against peace, prosperity, and incumbency."
George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
-
-
Hi,
Denn die CSS-Datei liegt ja vermutlich im Ordner css. Also wäre /bild/reoben.gif oder ../bild/reoben.gif richtig, je nach dem, welche Ordnerstruktur der OP gewählt hat.
/bild/reoben.gif und ../bild/reoben.gif ist doch das gleiche oder täusch ich mich jetzt??
Ich hab es mit beiden versionen Probiert, erfolglos.Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
hi,
/bild/reoben.gif und ../bild/reoben.gif ist doch das gleiche oder täusch ich mich jetzt??
In einem Spezialfall ist es das gleiche, sonst nicht.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
Hi,
./ referenziert den aktuellen Ordner.
Da dein Stylesheet in /css liegt, müsste also dein Bild unter /css/bild/reoben.gif abrufbar sein.
Ist ja nicht so, das ich der totale Newbie bin, hab ja schon bisschen gelernt,
ich hab alles probiert, direkt in den htdocs Ordner die Bilder abgelegt und mit.ro { background-image: url('reoben.gif') top left no-repeat; }versucht.
So z.b. hab ich das mit der Infobox gemacht:
background-image: url('../bild/spanback.gif'); background-repeat: no-repeat;So hab ich es auch jetzt probiert, erfolglos, ich versteh das nicht.
Und ich achte natürlich auf Groß und Kleinschreibung.Das komische ist ja, dass wenn ich die Style angaben direkt in das HTML Dokument schreibe, es dann funktioniert.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
hi,
Ist ja nicht so, das ich der totale Newbie bin, hab ja schon bisschen gelernt,
ich hab alles probiert, direkt in den htdocs Ordner die Bilder abgelegt und mit.ro {
background-image: url('reoben.gif') top left no-repeat;
}> versucht. Und dieses CSS steht jetzt \_wo\_? gruß, wahsaga -- /voodoo.css: #GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
.ro {
background-image: url('reoben.gif') top left no-repeat;
}> Und dieses CSS steht jetzt \_wo\_? im Ordner /css/style.css Ich hab für alles jeweils ein Ordner, Bilder in /bild/ CSS in Ordner /css/ html in Ordner /shtml/ Grüße, Engin GYRO -- [Dilated peoples](http://de.wikipedia.org/wiki/Dilated_Peoples)|[Team Vestax](http://klickandsurf.de/bild/vestax.JPG) Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
hi,
background-image: url('reoben.gif') top left no-repeat;
Und dieses CSS steht jetzt _wo_?
im Ordner /css/style.css
Damit komme ich auf die Aussage
Ist ja nicht so, das ich der totale Newbie bin
zurück, sage dazu "oh doch" - lege dir das Kapitel Referenzieren in HTML ans Herz, und möchte noch mal nachfragen, wo genau denn jetzt dein Problem liegt, die eingangs schon getätigte Aussage,
dass die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden
zu verstehen?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
dass die url-Angaben für Hintergrundbilder auf den Pfad der CSS-Ressource bezogen werden
Ok, dann würde mich aber interessieren, warum es mit der gleichen Methode
bei meiner aktuellen Seite geht.Wie kann es sein, das Style angaben nicht in der Datei stehen,
wenn sie auf dem Server sind??} .ro { background:transparent url(reoben.gif) no-repeat scroll right top; }Die Style angaben sind direkt im HTML Dokument.
Im Firebug ist nur ~~~css
}
.ro {
}
.lo {
}
.ru {
}
.lu {
}zu sehen. [so auch nicht](http://klickandsurf.de/testgehtnicht1.shtml) Das selbe Ergebnis wie bei dem bsp. vorher [auch nicht](http://klickandsurf.de/testgehtnicht2.shtml) [auch nicht](http://klickandsurf.de/testgehtnicht3.shtml) Wieso werden die CSS angaben nicht angezeigt?? Grüße, Engin GYRO -- [Dilated peoples](http://de.wikipedia.org/wiki/Dilated_Peoples)|[Team Vestax](http://klickandsurf.de/bild/vestax.JPG) Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
Ok, lag wohl an meinem Firebug, die sache mit dem nicht lesen der CSS angaben, hier noch die Links zu den CSS Dateien:
Style10
Style11
Style12
Style13Die bilder sind in allen in Ordnern.
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
-
-
-
-
-
-
-
-
-
Hi,
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!--[if lt IE 6]><style type="text/css"></style><![endif]-->> Aber irgendwie werden diese angaben ignoriert. Beide? Die zweite Zeile würde ich als Browser auch ignorieren. Was sollte sie bewirken? Kalle-
Hi,
Beide? Die zweite Zeile würde ich als Browser auch ignorieren. Was sollte sie bewirken?
Ist nur ein Kommentar.
Ehrlich gesagt weiss ich es nicht:( Ich lerne by doing, darum ist bei mir viel Copy&Paste,
ich weiss, mann sollte wissen was man tut, aber ist echt schwierig bei
der Arbeit konzentriert zu lesen.
Da kommt der eine und will Kaffee, der andere braucht kleingeld, die meisten wollen ins Internet und und und.Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
Beide? Die zweite Zeile würde ich als Browser auch ignorieren. Was sollte sie bewirken?
Ist nur ein Kommentar.
Nicht ganz. Die Internet Explorer interpretieren solche Kommentare.
<!--[if lt IE 6]><style type="text/css"></style><![endif]-->
bedeutet: Falls du ein Internet Explorer bist, kleiner als Version 6, führe alles aus bis zum Abwinken [endif].
Allerdings steht da nichts zum Ausführen.
Du kannst sehrt wohl für den IE eine _zusätzliche_ CSS- Datei laden:
<!--[if IE]><link rel='stylesheet' type='text/css' href='css/ie.css'><![endif]-->
und darin stehen zusätzliche Angaben, die nur der IE sieht. Warum? Damit er manchmal standardtauglich wird.
Kalle
-
Hi,
Du kannst sehrt wohl für den IE eine _zusätzliche_ CSS- Datei laden:
<!--[if IE]><link rel='stylesheet' type='text/css' href='css/ie.css'><![endif]-->
und darin stehen zusätzliche Angaben, die nur der IE sieht. Warum? Damit er manchmal standardtauglich wird.
Gehört das zu der Familie der Hacks über die ich hier oft lese??
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
hi,
<!--[if IE]>...<![endif]-->
Gehört das zu der Familie der Hacks über die ich hier oft lese??
Nein, eigentlich nicht.
Als "CSS-Hacks" bezeichnet man idR. bewusste Abweichungen von der korrekten Syntax, die standardkonforme Browser ignorieren - bestimmte Browser aber nicht, d.h. sie interpretieren gewisse fehlerhafte Notationen, und man kann ihnen so ein von der "normalen", für alle (übrigen) Browser gedachten, abweichende Formatierung für bestimmte Elemente andrehen.
Dann gibt es noch die Möglichkeit, Selektoren zu nutzen, die bestimmte Browser(-versionen) (noch) nicht verstehen - z.B. den Attributselektor. Dann formatiert man ein Element einmal über einen "schwächeren" Selektor für ältere Browser gesondert - und für neuere, die diesen "spezielleren" Selektor verstehen, wiederum anders.
In manchen Fällen nutzt man auch Selektoren, die zwar syntaktisch nicht fehlerhaft sind - aber eigentlich unsinnig, sie können gar nichts selektieren. Der Star-HTML-Hack dürfte das berühmteste Beispiel sein -
* html div { ... }- dürfte eigentlich gar nichts selektieren, weil html kein Vorfahrenelement hat. Hindert IE-Versionen <= 6 aber nicht daran, ihn trotzdem auf (in diesem Falle) Div-Elemente innerhalb des HTML-Dokumentes anzuwenden - also hat man damit eine weitere Möglichkeit, gesondert von anderen Browsern zu formatieren.
Was du oben hast sind wie gesagt aber keine CSS-Hacks, sondern die sog. Conditional Comments - eine Erfindung von Microsoft, die nur der IE interpretiert. Damit kann man in dem wiederum eigene <style>-Bereiche oder externe Stylesheets per <link> einbinden, die andere Browser nicht "sehen" - schliesslich ist es eigentlich ein Kommentar, der gar nicht interpretiert werden dürfte. Der IE tut dann aber so, als wäre kein Kommentar drumherum, und als würde das Element ganz normal im Dokument stehen.
Auch eine Art "Abfrage" auf verschiedene IE-Versionsnummern ist damit möglich.CSS-Hacks haben den Nachteil, dass sie wenig verlässlich sind, insb. im Hinblick auf die Zukunft - die Fehlinterpretation einer Selektor- oder Eigenschaften-Notation könnte in zukünftigen Versionen eines Browsers entfallen, dass Darstellungsproblem, welches man damit über eine gesonderte Formatierung beheben wollte, aber nach wie vor existent sein - bzw. genauso andersherum: Darstellungsproblem eigentlich weg, Hack wird aber noch interpretiert - Browser bekommt spezielles CSS, was jetzt eigentlich unnötig, ggf. sogar "falsch" ist.
Allerdings haben Hacks den kleinen Vorteil, dass es auch welche für andere Browser als den IE gibt - falls man mal in einem der anderen Browser etwas korrigieren muss.
Wenn es um reine IE-Probleme geht, wird aber im allgemeinen den Conditional Comments der Vorzug gegeben.Weitere Informationen zu den Stichworten CSS-Hacks sowie Conditional Comments finden sich zahlreich im Archiv und im WWW.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
Hallo Engin
bin ich zu Doof??
Möchtest du eine ehrliche Antwort? ;-)
So sieht die CSS Datei aus:
.ro {
background-image: url('reoben.gif') top left no-repeat;
}Als bsp. noch der Code, mit dem es klappt:
.ro {
background:url(roundedbox_ro.gif) top right no-repeat;
}Fällt dir ein Unterschied auf?
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi,
bin ich zu Doof??
Möchtest du eine ehrliche Antwort? ;-)
Wenn´s der Sache dient ;-)
.ro {
background:url(roundedbox_ro.gif) top right no-repeat;
}Fällt dir ein Unterschied auf?
Sorry, war mein fehler, ich hab den Code von der Self seite genommen und
nicht den von mir angepassten.
Hier zur korrektur:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Beispiel Runde Ecken</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> <!-- /* grundlegende Seiteneinstellungen */ body { font:100% Verdana, Arial, Helvetica, sans-serif; background-color:white; margin:0 5%; } /* hier beginnt das für die Box relevante CSS */ div { margin:0; } .ro { background:url(reoben.gif) top right no-repeat; } .lo { background:url(lioben.gif) top left no-repeat; } .ru { background:url(reunten.gif) bottom right no-repeat; } .lu { background:url(liunten.gif) bottom left no-repeat; } .inhalt { margin:0; padding:2.5em 2.5em 3.5em 2.5em; } .inhalt p { margin:0; padding:0; } --> </style> ~~~~~~html </head> <body> <div class="ro"> <div class="lo"> <div class="ru"> <div class="lu"> <div class="inhalt"> <p>Lorem ipsum dolor ....</p> </div> </div> </div> </div> </div> </body> </html>Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hallo Engin
Sorry, war mein fehler, ich hab den Code von der Self seite genommen und
nicht den von mir angepassten.
Hier zur korrektur:OK - dann nochmal:
Aus so geht´s
.ro { background:url(reoben.gif) top right no-repeat; }Aus der CSS-Datei von so geht´s nicht
.ro {background-image: url('../bild/reoben.gif') top right no-repeat; }Fällt dir der Unterschied auf?
Wenn nicht, schau dir den Unterschied zwischen Hintergrundbild und Hintergrund allgemein an.
(Mir fiel es auch erst auf, nachdem ich mich gewundert hatte, dass Firebug tatsächlich keine Eigenschaft anzeigt.)Übrigens - mit einem CSS-Validator hättest du es mit Sicherheit ganz schnell selbst gefunden.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlef,
Übrigens - mit einem CSS-Validator hättest du es mit Sicherheit ganz schnell selbst gefunden.
Tatsächlich, mir war garnicht in den Sinn gekommen, den CSS Code zu validieren.
Im korrigierungswahn hab ich zwar alles verstellt, das lässt sich aber auch richten.Danke an alle;)
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hi,
gelöst wurde das ganze wie folgt:
_________________________________
CSS Dateibody { font:100% Verdana, Arial, Helvetica, sans-serif; background-color: white; margin:0 5%; } div {margin:0 0;} .ro {background-image: url(reoben.gif); background-position: top right; background-repeat: no-repeat;} .lo {background-image: url(lioben.gif); background-position: top left; background-repeat: no-repeat;} .ru {background-image: url(reunten.gif); background-position: bottom right; background-repeat: no-repeat;} .lu {background-image: url(liunten.gif); background-position: bottom left; background-repeat: no-repeat;} .inhalt {margin: 0 0; padding:2.5em 2.5em 3.5em 2.5em; } .inhalt p { margin:0 0; padding:0 0; }Der Validator hatte etwas gegen die kurzschreibform
.lu { background-image: url(liunten.gif) bottom left no-repeat;und gegen
div { margin:0;mit einem
div {margin:0 0;}ging es dann.
_______________________________________
HTML Datei<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Autos&zubehör</title> <meta name="Description" content="Startseite für INTCASE Internet Terminal"> <meta name="Keywords" content="fahren, ersatzteile, zubehör, reifen, Startseite, startseite, INTCASE,intcase, Internet, Terminal, terminal, Firmenverzeichnis, Branchenbuch, städteverzeichnis, TV ,spiele, suche, neu, alles auf einen Blick"> <meta name="Author" content="Engin Yildiz"> <meta name="Copyright" content="Engin Yildiz"> <meta NAME="language" CONTENT="de"> <meta NAME="robots" CONTENT="index,follow"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="/style.css"> </head> <body> <div class="ro"> <div class="lo"> <div class="ru"> <div class="lu"> <div class="inhalt"> <p>Lorem ipsum dolor...</p> </div> </div> </div> </div> </div> </body> </html>Auf dem Server hab ich alles direkt ins Wurzelverzeichnis abgelegt,
style.css die Bilder und natürlich die HTML Datei.Danke nochmal an alle ;)
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.-
Hallo Engin
Der Validator hatte etwas gegen die kurzschreibform
Das glaube ich nicht.
Du hattest allerdings nicht die Kurzschreibweise verwendet sondern background-image, welches als Eigenschaft _nur_ die Grafikresource und keine weiteren Eigenschaften enthalten darf.Auf dem Server hab ich alles direkt ins Wurzelverzeichnis abgelegt,
style.css die Bilder und natürlich die HTML Datei.Auch das wäre wohl nicht nötig gewesen.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Hi Detlef,
nach überarbeitung funktioniert es jetzt so wie es soll :)
Hier nochmal die überarbeitete Version für´s Archiv.________________________________________________________
CSS Dateibody { font:100% Verdana, Arial, Helvetica, sans-serif; background-color: white; margin:0 5%; } div {margin:0 0;} .ro {background: url(/bild/reoben.gif) top right no-repeat;} .lo {background: url(/bild/lioben.gif) top left no-repeat;} .ru {background: url(/bild/reunten.gif) bottom right no-repeat;} .lu {background: url(/bild/liunten.gif) bottom left no-repeat;} .inhalt {margin: 0 0; padding:2.5em 2.5em 3.5em 2.5em; } .inhalt p { margin:0 0; padding:0 0; }______________________________________________________________
HTML Datei<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Autos&zubehör</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="/css/style21.css"> </head> <body> <div class="ro"> <div class="lo"> <div class="ru"> <div class="lu"> <div class="inhalt"> <p>Lorem ipsum dolor...</p> </div> </div> </div> </div> </div> </body> </html>_______________________________________________________________
Gute Nacht
Grüße,
Engin
GYRO--
Dilated peoples|Team Vestax
Gibst du einem Mann einen Fisch, nährt er sich einmal. Lehrst du ihn das Fischen, nährt er sich sein ganzes Leben.
-
-
-
-
-
-
