Hej
Er ny indenfor CSS og modtager med tak enhver hjælp. Jeg har
været nød til at inkluderer nogen kode for at illustrerer..
Har en boks med runde hjørner ("rounded-box"), der tilpasser sig
indholdet. Så langt så godt! Ønsker en boks med fast afstand til
højre og venstre margin (275px), således at det er højden af
boksen, der tilpasser sig indholdet!
Vha. z-index har jeg prøvet at lave en overskrift(Beta
class="tittel"), der går henover (ikke ovenfor) boksen. Er ikke
lykkedes. Desuden ville jeg gerne have sidste del af overskriften
(eta) topstillet. Heller ikke gevinst der.
Koden er som følger:
<html><head><title>X</title>
<style type="text/css">
body {background-color: #E6E6E6; margin: 0px; padding: 0px;
font-size: 16px; font-family: Georgia;}
div.rounded-box {position:relative; left: 245px; /*indsat*/
width: 600px; /*indsat*//*width: 20em;*/ background-color: #FFF;
margin: 3px; z-index: 1;}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#E6E6E6; overflow:hidden; z-index: 1;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside {position:relative;
font-size:150px; font-family:arial; color:#FFF; line-height:
40px; z-index: 1;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {position: relative; padding: 25px; color:#000;}
#titel {position:absolute 0px 0px 0px -100px; z-index: 2;}
span.a{ font-size: 200px;}
span.b{ font-size: 1,2em; padding: 0px 0px 0px 0px}
</style></head>
<body>
<div id="titel"><p><span class="a">B</span><span
class="b">ETA</span></p></div>
<div class="top-left-corner">
<div class="top-left-inside">•</div></div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">•</div></div>
<div class="top-right-corner">
<div class="top-right-inside">•</div></div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">•</div></div>
<div class="box-contents">Contents ..</div> <!-- end
div.box-contents --> </div> <!-- end div.rounded-box -->
</body></html>
--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! =>
http://www.html.dk/tutorials