T Type Medlem sedan mars 2002 1 239 inlägg Frågan 22 feb. 2009 13:50 #1 Hejhttp://www.alistapart.com/articles/onionskin/ och http://www.alistapart.com/articles/cssdropshadows/ utan att lyckas. Jag bifogar en bild med hur jag vill ha det. Det är viktigt att jag kan bestämma skuggfärg med vanlig färg (inte bakgrundsbild).
Observera att rutan också ska vara centrerad i höjd och bredd.
Så här ser koden ut just nu:
<html>
<head>
<title>Test</title>
<style>
.container {
width:760px;
height:462px;
text-align:left;
background-color:#FFF;
margin:-10px 0px 0px -10px;
}
body{
text-align:center;
background-color:#527db5;
}
#distance{
height:50%;
margin-bottom:-232px;
}
.wrap{
background-color:#345989;
position:relative;
width:760px;
height:462px;
margin:0 auto;
padding:0 10px 10px 0;
}
</style>
</head>
<body>
<div id="distance"></div>
<div class="wrap">
<div class="container">
test
</div>
</div>
</body>
</html>
Tack på förhand!
T Type Medlem sedan mars 2002 1 239 inlägg <html>
<head>
<title>Test</title>
<style>
.container {
width:760px;
height:462px;
text-align:left;
background-color:#FFF;
position:relative;
top:-5px;
left:-5px;
}
body{
text-align:center;
background-color:#527db5;
}
#distance{
height:50%;
margin-bottom:-232px;
}
.wrap{
background-color:#345989;
position:relative;
width:760px;
height:462px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="distance"></div>
<div class="wrap">
<div class="container">
test
</div>
</div>
</body>
</html>
Nu löstes problemet (position:relative och left o top). Om det finns bättre förslag tas de tacksamt emot :)
T Type Medlem sedan mars 2002 1 239 inlägg <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<style>
.container {
width:760px;
height:462px;
background-color:#FFF;
position:relative;
top:-5px;
left:-5px;
}
body{
background-color:#527db5;
height:100%;
}
.wrap{
background-color:#345989;
position:absolute;
width:760px;
height:462px;
top:50%;
margin-top: -231px;
left:50%;
margin-left: -380px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
test
</div>
</div>
</body>
</html>
När jag la till doctype funkade inte min gamla lösning alls (varför?). Löste det på ett annat sätt.
Mysko Medlem sedan juli 2007 1 068 inlägg :i Efter som det är skarpa kanter på din skugga så skulle jag ha löst det med ett extra div-lager bakom, och anropat den med class för att kunna byta färg.
T Type Medlem sedan mars 2002 1 239 inlägg
Mysko skrev:
:i Efter som det är skarpa kanter på din skugga så skulle jag ha löst det med ett extra div-lager bakom, och anropat den med class för att kunna byta färg.
Nu förstår jag inte riktigt hur du menar... Kan du visa genom ett exempel?
Mysko Medlem sedan juli 2007 1 068 inlägg Ska göra mitt bästa när jag kommit hem från jobbet, hoppas att jag inte tagit mig vatten över huvudet och missförstått nått här. ;) :)
Mysko Medlem sedan juli 2007 1 068 inlägg Nått i den här stilen skulle jag ha gjort för att efter likna exempelbilden du har.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ny sida 1</title>
<style type="text/css">
<!--
h1 { font-size: 24px; }
body {bgcolor: #CCCC99;}
#skugga {background: #66ccff;}
-->
</style>
</head>
<body>
<div style="position: absolute; width: 341px; height: 346px; z-index: 1; left: 126px; top: 95px; id="lager1" id="skugga">
</div>
<div style="position: absolute; width: 341px; height: 346px; z-index: 1; left: 119px; top: 89px; background-color: #6699FF" id="lager2">
</div>
</body>
</html>
T Type Medlem sedan mars 2002 1 239 inlägg Ja, det är ju ungefär så jag gör. Skillnaden är att jag inte använder absolut position på mina lager. Istället använder jag negativ marginal.
