Hi,
also ich habe folgendes Problem. Ich habe mir ein Template erstellt und eine externe CSS-Datei eingebunden. Das klappt soweit auch alles super. Das Design der Seite basiert auf divs. Nun würde ich gerne anstelle der eckigen Rahmen runde Ecken haben. Nach einigem Suchen habe ich auch eine Möglichkeit gefunden, dies Browserunabhängig zu realisieren.
Dazu benutze ich miteinander verschachtelte Div-Container.
Hier der HTML-Code erstmal:
<body>
<!-- ###DOCUMENT_BODY### START -->
<div class="box"><div class="ro"><div class="lo"></div></div>
<div id="title">
<div id="logo" style="background:url(fileadmin/images/hg.gif);">
###LOGO###
</div>
<div id="zertifikat">
###ZERTIFIKAT###
</div>
<div id="schrift">
<font style="font-size: 17px;font-weight: bold; float:right;">BLUME ELEKTRONIK</font><br>
<font style="font-size: 17px;font-weight: bold; float:right;">Distribution GmbH</font>
</div>
</div>
<div class="ru"><div class="lu"></div></div></div>
Der dazugehörige CSS-Code lautet wie folgt:
/* Container für die Kopfzeile (Logo, Zertifikat, Schriftzug) */
div#title {
width:100%;
height:10%;
border:1px solid black;
}
/* Einstellungen für die runden Ecken */
div.box {
background-color:transparent;
background-image:url(fileadmin/images/box_all.gif);
margin:0;
padding:0;
font-size:1px;
border:1px solid black;
}
div.ro {
background-color:transparent;
background-image:url(fileadmin/images/ro_all.gif);
background-position:top right;
background-repeat:no-repeat;
height:7px;
margin:0px;
padding:0px;
font-size:1px;
}
div.lo {
background-color:transparent;
background-image:url('fileadmin/images/lo_all.gif');
background-position:top left;
background-repeat:no-repeat;
height:7px;
margin:0px;
padding:0px;
font-size:1px;
}
div.ru {
background-color:transparent;
background-image:url(fileadmin/images/ru_all.gif);
background-position:bottom right;
background-repeat:no-repeat;
height:7px;
margin:0px;
padding:0px;
font-size:1px;
}
div.lu {
background-color:transparent; background-image:url(fileadmin/images/lu_all.gif);
background-position:bottom left;
background-repeat:no-repeat;
height:7px;
margin:0px;
padding:0px;
font-size:1px;
}
}
Die border-Anweisungen dienen nur zur Sichtbarkeit der einzelnen Container.
Die Bilder die eingebunden sind, sind zum einen die 4 Ecken und eine Bild um die Zwischenräume zu füllen.
Lieder habe ich nun das Problem, dass er mir diese Hintergrundbilder nicht anzeigt. An anderen Stellen habe ich Bilder aus dem selben Verzeichnis eingebunden und es funktioniert.
Ich wäre froh, wenn einer von euch mir helfen könnte.
Viele Grüße
LightGuardian