nicht angemeldet
Hallo.
Ich möchte eine Umrandung mit runden Ecken und transparent werdenden Rändern basteln. Da CSS3 noch nicht wirklich überall unterstützt wird muss ich es mit CSS2 und DIVs mit Hintergrundbildern machen. Eigentlich klappt das ganz gut aber die DIVs "leftnavigation" und "rightnavigation" wollen nicht automatisch ihre Höhe anpassen, dass heißt sie sind zu klein und es ergibt keine durchgehenden Kanten.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Designstudie</title>
<style type="text/css">
body
{
color: black; background-color: white;
background: #fff url(../graphics/hintergrund2.jpg) no-repeat fixed top left;
font-size: 1px;
font-family: Helvetica,Arial,sans-serif;
margin: 0;
border: 0;
padding: 0;
}
div.lefttopnavigation
{
background: transparent url(../graphics/topleft.png) no-repeat scroll left top;
float: left;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
margin: 0;
border: 0;
padding: 0;
}
div.righttopnavigation
{
background: transparent url(../graphics/topright.png) no-repeat scroll right top;
float: right;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
margin: 0;
border: 0;
padding: 0;
}
div.topnavigation
{
background: #e6eec7 url(../graphics/top.png) repeat-x scroll center top;
min-width: 18px;
min-height: 18px;
width: auto;
max-height: 18px;
margin: 0 18px;
border: 0;
padding: 0;
}
div.leftnavigation
{
background: #e6eec7 url(../graphics/left.png) repeat-y scroll left center;
float: left;
min-width: 6px;
min-height: 18px;
max-width: 18px;
height: auto;
margin: 0;
border: 0;
padding: 0;
}
div.rightnavigation
{
background: #e6eec7 url(../graphics/right.png) repeat-y scroll right center;
float: right;
min-width: 6px;
min-height: 18px;
max-width: 18px;
height: auto;
margin: 0;
border: 0;
padding: 0;
}
div.centernavigation
{
top: 0px;
background: #e6eec7;
min-width: 18px;
min-height: 18px;
width: auto;
height: auto;
margin: 0 6px;
border: 0;
padding: 0;
}
div.leftbottomnavigation
{
background: transparent url(../graphics/bottomleft.png) no-repeat scroll left bottom;
float: left;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
margin: 0;
border: 0;
padding: 0;
}
div.rightbottomnavigation
{
background: transparent url(../graphics/bottomright.png) no-repeat scroll right bottom;
float: right;
min-width: 18px;
min-height: 18px;
max-width: 18px;
max-height: 18px;
margin: 0;
border: 0;
padding: 0;
}
div.bottomnavigation
{
background: #e6eec7 url(../graphics/bottom.png) repeat-x scroll center bottom;
min-width: 18px;
min-height: 18px;
width: auto;
max-height: 18px;
margin: 0 18px 0 18px;
border: 0;
padding: 0;
}
div#navigation
{
position: absolute;
font-size: 1.2em;
float: left;
width: 180px;
margin: 168px 10px 10px 10px;/*oben rechts unten links*/
border: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="navigation">
<div class="lefttopnavigation">
</div>
<div class="righttopnavigation">
</div>
<div class="topnavigation">
</div>
<div class="leftnavigation">
</div>
<div class="rightnavigation">
</div>
<div class="centernavigation">
hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf
hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf
hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf
hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf
hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf
</div>
<div class="leftbottomnavigation">
</div>
<div class="rightbottomnavigation">
</div>
<div class="bottomnavigation">
</div>
</div>
</body>
</html>
Dieser Quelltext resultiert in folgendem Output:
Aber eigentlich soll der grüne Rahmen komplett drumherum laufen. Ich hab mal noch die DIVs markiert:
Ich hatte auch noch nen Thread gefunden der ein ähnliches Problem behandelt aber eine Lösung gabs da nicht. http://forum.de.selfhtml.org/?t=198175
Falls jemand was weiß würde ich mich freuen, vielleicht kann man diese Design ja auch ganz anders umsetzen, ich bin für alles offen.