TypeMedlem sedan mars 20021 239 inlägg Hej
Jag vill få till en skugg-effekt utan bild. Har försökt med hjälp av http://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!
TypeMedlem sedan mars 20021 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 :)
TypeMedlem sedan mars 20021 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.
MyskoMedlem sedan juli 20071 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.
Men jag antar att det är lite för enkelt ;).
TypeMedlem sedan mars 20021 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.
Men jag antar att det är lite för enkelt ;).
Nu förstår jag inte riktigt hur du menar... Kan du visa genom ett exempel?
MyskoMedlem sedan juli 20071 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. ;) :)
MyskoMedlem sedan juli 20071 068 inlägg Nått i den här stilen skulle jag ha gjort för att efter likna exempelbilden du har.
Kan inte garantera att koden är perfekt...... men det funkar.
<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>
TypeMedlem sedan mars 20021 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.
