nicht angemeldet
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.