Avatar billede mpj86 Nybegynder
05. juni 2003 - 23:56 Der er 10 kommentarer og
1 løsning

Lægge skygge på table?

Hej

Hvordan lægger man en skygge på en table??
Avatar billede roenving Novice
05. juni 2003 - 23:59 #1
Prøv denne, som olebole har fremstillet (http://www.eksperten.dk/spm/342379 )

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title> TITLE </title>

<META NAME="Keywords" CONTENT="olebole,http://www.eksperten.dk/spm/342379">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.shadeHolder {
    position: relative;
}
.shadeTBL {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 5;
    background-color: #ffffff;
}
.shader {
    position: absolute;
    background-color: #000080;
}
</style>
<script type="text/JavaScript">
var startOpacity = 25; // Sæt selv start-opaciteten
var d=document;
function gA(o,tN){return o.getElementsByTagName(tN)}
function pI(s){return parseInt(s)}
function doShade(tbl) {
    var w, h, a, offset, opac, cont = (d.all)? tbl.parentElement : tbl.parentNode;
    w=pI(tbl.offsetWidth); h=pI(tbl.offsetHeight);
    a = new Array();
    var steps = (d.all && !window.createPopup)? 1 : 4; // Antal skygge-steps
    for (var i=1; i<steps+1; i++) {
        offset = i + "px";
        opac = startOpacity / i;
        a[a.length] = '<img class="shader" src="spacersort.gif" ';
        a[a.length] = 'style="width:'+w+'px;height:'+h+'px;left:'+offset+';top:'+offset+';z-index:'+i+';';
        if (d.all) a[a.length] = 'filter:alpha(opacity='+opac+')">';
        else a[a.length] = '-moz-opacity:'+(opac/100)+'">';
    }
    cont.innerHTML += a.join("");
}

function initShadeTBLs() {
    if (d.layers) return;
    var aTbl = gA(d,"TABLE");
    for (var i=0; i<aTbl.length; i++) {
        if ( aTbl[i].className=="shadeTBL" ) doShade( aTbl[i] );
    }
}
window.onload = initShadeTBLs;
</script>
</head>
<body>

<div class="shadeHolder">
    <table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
    <tr>
        <td>Lorem ipsum dolor sit amet, consectetur<br>
            adipisicing elit, sed do eiusmod tempor incididunt<br>
            ut labore et dolore magna aliqua.</td>
    </tr>
    </table>
</div>

<br><br>

<div class="shadeHolder">
    <table class="shadeTBL" cellspacing="0" cellpadding="0" border="3">
    <tr>
        <td>Ut enim ad minim veniam, quis nostrud<br>
            exercitation ullamco laboris nisi ut aliquip ex<br>
            ea commodo consequat. Duis aute irure dolor in<br>
            reprehenderit in voluptate velit esse cillum</td>
    </tr>
    </table>
</div>

</body>
</html>
Avatar billede pelkjaer Nybegynder
06. juni 2003 - 00:27 #2
<html>
<head>
<style type="text/css">
.mytable {
  float: left;
  width: 250px;
  height: 250px;
}
#mytableContent {
  border: 1px none;
  background-color: #FF0000;
  position: relative;
  left: -2px;
  top: -2px;
}
#mytableHolder {
  position: relative;
  background: #000000;
  margin: 4px;
}
</style>
<body>
<div class="mytable" id="mytableHolder">
<div class="mytable" id="mytableContent">
Hey der...
</div>
</div>
</body>
</html>
Avatar billede pelkjaer Nybegynder
06. juni 2003 - 00:28 #3
testet i IE6, NS6 og Opera 7
Avatar billede roenving Novice
06. juni 2003 - 00:33 #4
Citat olebole i ovennævnte spm -- har selv kun testet hans løsning i IE6:

Det virker i IE5.5+, NS6+ og Mozilla. Opera skulle kunne forstå det fra version 7 ... version 6 var en ussel bruser, der er skiftet ud af de fleste.
I IE4 til og med 5.0 burde den lave en hård, massiv skygge ... har ikke testet.
Avatar billede pelkjaer Nybegynder
06. juni 2003 - 00:35 #5
Så vil jeg da lige indskyde at mit eks virker i den usle Opera 6 *rofl*

Men usel er den ja.. =oD

Roenving>>Er du på en form for instant messaging?
Avatar billede roenving Novice
06. juni 2003 - 00:36 #6
Næh, hvorfor ?-)
Avatar billede pelkjaer Nybegynder
06. juni 2003 - 00:37 #7
no reason special :)
Avatar billede roenving Novice
06. juni 2003 - 00:39 #8
>>pelkjaer
-- men jeg sidder og roder i min editor, så jag har E og Hotmail åbne, samt en opdaterings-rutine, så hver gang jeg lige skal undgå de der ornsvage koder et sekund kigger jeg efter ...
Avatar billede pelkjaer Nybegynder
06. juni 2003 - 00:42 #9
*LOOOL* livet er også andet end E *G*
Avatar billede mpj86 Nybegynder
06. juni 2003 - 00:48 #10
takker roenving skriv lige som et svar..
Avatar billede roenving Novice
06. juni 2003 - 02:00 #11
Velbekomme '-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester