Avatar billede kennedk Nybegynder
21. april 2007 - 17:16 Der er 3 kommentarer

Nyt lag med opacitet, hjælp

Hej jeg har en side, der er i en tabel, som sætter min side i midten af skærmen.

på min side er der en menu og en boks med tekst i og et billede.

Så vil jeg gerne lave et lag oven på min tekst td, hvor der fx er 50% opacitet på, men på alt tekst og billeder der bliver sat ind på det skal have en opacitet på 100%

<html>
<head>
    <style>
        .overlag{
            position: absolute;
            z-index: 1;
            background-color: red;
            color: blue;
            width: 100%;
            height: 100%;
            filter:alpha(opacity=50);
            -moz-opacity:0.5;
        }
    </style>
</head>

<body>

<table height="100%" border=1 width="100%">
    <tr>
        <td align="center">
            <table border=1 width=400 height=300>
                <tr>
                    <td>
                        Menu<br>
                        tralala<br>
                        huhu
                    </td>
                    <td valign="top">
                        <div class="overlag">HEj</div>
                        Noget tekst<br>
                        <img src="wetche/billede_leg/DSC01077.jpg" width="300" height="225" alt="">
                    </td>
                </tr>
            </table>       
        </td>
    </tr>
</table>

</body>
</html>


Men jeg har lidt problemer med det, som i kan se hvis i taget koden i IE så er feltet den rigtige størrelse, men ikke med opacitet på , og hvis det er i firefox, så vises opciteten, men kassen er alt for stor

Håber i kan hjælpe
Avatar billede roenving Novice
22. april 2007 - 01:45 #1
Et absolut positioneret element skal positionere sig i forhold til det nærmest omkransende element, der er positioneret, er der ingen, skal det forholde sig til dokument-elementet ...

-- har du prøvet at se, hvad der sker, hvis du laver et rigtigt html-dokument med doctype på ?-)

-- prøv at have dette som det allerførste:

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

...

PS. Vender nok ikke tilbage lige de første par dage !-)
Avatar billede kennedk Nybegynder
22. april 2007 - 08:03 #2
Der er det samme i firefox, men i ie er der opstået et nyt problem. den står slet ikke hvor den skal..
Men man kan jo ikke angive med pixels, når selve designet bliver centeret, og det sker jo med procent.
Avatar billede kennedk Nybegynder
23. april 2007 - 00:27 #3
jeg kom frem til dette.. men jeg tror at det kan løses meget nemmere, men hvordan?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
   
    <style>
        body{
       
        }
        #table{
            width: 100%;
            height: 100%;
        }
        #table1{
            width: 300px;
            height: 200px;
            border-width: 1px;
            border-color: red;
            border-style: solid;
        }
        #div{
            padding: 0px;
            margin: 0px;
            position: absolute;
            z-index: 12;
            background-color: white;
            width: 248px;
            color:Red;
            height: 198px;
            filter:alpha(opacity=40);
            -moz-opacity:0.4;
            font-size: 15px;
            display: block;
        }
        #overlaget{
            position: absolute;
            z-index: 13;
            font-weight: bold;
            width: 248px;
            height: 198px;
            color: red;
            font-size: 15px;
            display: block;
        }
    </style>
</head>

<body>
<table id="table">
    <tr>
        <td align="center">
            <table id="table1" cellpadding="0" cellspacing="0" border=0>
                <tr>
                    <td width="50" style="font-size: 15px; border-right-width: 1px; border-right-color: black; border-right-style: solid;">menu</td>
                   
                    <td valign="top" style="background-image: url(file:///C|/Documents%20and%20Settings/All%20Users/Dokumenter/Billeder/Billedeksempler/Solnedgang.jpg);">
                   
                        <div id="div">
                        &nbsp;
                        </div>
                        <div id="overlaget">Tekst</div>
                        &nbsp;
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
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