nicht angemeldet
Div mit Hintergrundbild passt sich nicht automatisch der Höhe an
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.
-
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.
Eine Suche in der Suchmaschine deiner Wahl hat dir für dieses Problem noch keine Lösung gezeigt? Glaube ich nicht.
-
Eine Suche in der Suchmaschine deiner Wahl hat dir für dieses Problem noch keine Lösung gezeigt? Glaube ich nicht.
Nach einer Lösung habe ich schon länger gesucht, aber wahrscheinlich fehlen mir die passenden Stichwörter.
Nach einem komplett anderen Ansatz habe ich aber noch nicht gesucht, weil ich dachte, dass mein DIV-Höhe-Problem sich eventuell einfach lösen lässt. Was aber scheinbar nicht der Fall ist?
-
-
Om nah hoo pez nyeetz, stfischr!
Divs sind ohne (minimalinversive) Eingriffe nur so hoch wie ihr Inhalt es erfordert.
Matthias
--
-
Divs sind ohne (minimalinversive) Eingriffe nur so hoch wie ihr Inhalt es erfordert.
Ah, danke für die Antwort, bedeutet das, dass es per CSS lösbar ist oder muss ich da an irgendwelchen DOCTYPEs rumpfuschen? Letzteres kommt für mich nicht in Frage.
-
Om nah hoo pez nyeetz, stfischr!
Ah, danke für die Antwort, bedeutet das, dass es per CSS lösbar ist
ja, und zwar durch weglassen der beiden Problem-Divs, wenn es tatsächlich nur ein grüner Streifen sein soll
oder wenn es tatsächlich Grafiken sind, sollten die Problem-Divs Kinder des Inhalts-divs werden, damit sie dessen Höhe übernehmen können, diese kannst du dann absolut zum Inhalt positionieren.
Matthias
--
-
Om nah hoo pez nyeetz, stfischr!
oder wenn es tatsächlich Grafiken sind, sollten die Problem-Divs Kinder des Inhalts-divs werden, damit sie dessen Höhe übernehmen können, diese kannst du dann absolut zum Inhalt positionieren.
Das würde ich für alle 8 Divs machen, nicht nur für 2 wie im Beispielquelltext. Das gute daran ist, unabhängig von Höhe und Breite des Inhalts passen sich die äußeren dem Inhaltsdiv an.
-
für neue Browser gibts Border-image.
-
nur wegen "runder Ecken" würd ich aber keinen Aufstand machen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style> #inhalt {background-color: red ; padding: 0 10px; position: relative} .rahmen {height: 100%; background-color: blue; position: absolute; width: 10px; top: 0} #links { left: -10px } #rechts { right: -10px } </style> </head> <body> <div id="inhalt">Inhalt <div class="rahmen" id="links"></div> <div class="rahmen" id="rechts"></div> </div> </body> </html>Matthias
--
-
Vielen vielen Dank, für deine Hilfe, habs hinbekommen.
Also das Beispiel war nicht Transparent aber das soll es noch werden, von daher mussten es Graphiken sein. Ich habe jetzt nur den linken und rechten DIV ins InhaltsDIV geschoben aber es passt sich alles super der Größe an. Genau so wollte ichs haben.
Hier der aktuelle Code:
<?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"> 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 { position: absolute; top:0px; left:0px; background: #e6eec7 url(../graphics/left.png) repeat-y scroll left center; float: left; min-width: 6px; min-height: 18px; max-width: 18px; height: 100%; margin: 0; border: 0; padding: 0; } div.rightnavigation { position: absolute; top:0px; right:0px; background: #e6eec7 url(../graphics/right.png) repeat-y scroll right center; float: right; min-width: 6px; min-height: 18px; max-width: 18px; height: 100%; margin: 0; border: 0; padding: 0; } div.centernavigation { position: relative; top:0px; left:0px; 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; } </style> </head> <body> <div id="navigation"> <div class="lefttopnavigation"> </div> <div class="righttopnavigation"> </div> <div class="topnavigation"> </div> <div class="centernavigation"> <div class="leftnavigation"> </div> <div class="rightnavigation"> </div> hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf hzjfztdtstsdrzdizuitztztztztzit z8itzitzit7i9titigtizgtizgtzgfgf 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>Man beachte die Veränderungen an den DIVs "centernavigation", "leftnavigation" und "rightnavigation" und deren Stylesheets.
Wegen neueren Browsern, ich will wenigstens bis zum IE7 abwärtskompatibel sein, muss da nicht perfekt aussehen, sollte aber noch benutzbar sein. Aber da muss ich mir sowieso erstmal wieder nen Windowssystem beschaffen, damit ich mit dem IE mal testen kann.
Danke nochmal. :)
-
-
-
-