CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

xcover Nybegynder

27. november 2009 - 01:36 Der er 5 kommentarer

DIV i midten

Hejsa,

Jeg kunne rigtig godt tænke mig en div ligesom mange sikkert kender fra diverse galleri´er.

Altså en div på 100% højde og 100% brede som er transparent.
Inde i den div skal så være en anden div som ikke er transparent, men som er i center både horizontal & vertical.

Kan i hjælpe ?

Jeg har selv forsøgt uden held:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="da" />
<style>
body {
font-size:14px;
margin: 0px;
height:100%;
padding: 0px;
}
html {
height:100%;
margin: 0px;
padding: 0px;
}
</style>
<title>Div test</title>
</head>

<div id="div_boks" name="div_boks" style="background-color:blue; width:100%; height:100%; position:fixed; top:0px; margin:0px auto; opacity:0.4;filter:alpha(opacity=40)">
<div style="width:500px; height:400px; background-color:red; margin: 0px auto; border:1px solid #000000;">CENTER DIV</div>
</div>

Synes godt om

cronaldo Nybegynder

27. november 2009 - 02:22 #1

Tjekker du siden i IE eller i en anden browser :) ?

Synes godt om

preppydude Nybegynder

27. november 2009 - 08:23 #2

Prøv det her:

<html>
    <head>
        <title>xcover</title>
        <style type="text/css">
        div#box {
            margin: 50% 0 0 50%;
            position: absolute;
            background: red;
            height: 400px;
            width: 500px;
            top: -200px; /* halvdelen af højden */
            left: -250px; /* halvdelen af bredden */
        }
        </style>
    </head>
    <body>
        
        <div id="box">
            TEKST
        </div>
    
    </body>
</html>

Synes godt om

xcover Nybegynder

27. november 2009 - 13:26 #3

cronaldo
Jeg bruger FireFox 3 :) Og det skal helst også virker i IE8

preppydude
Så får jeg blot en rød kasse i bunden af siden ?

Synes godt om

mclemens Nybegynder

27. november 2009 - 13:35 #4

Preppydude kom bare til at bytte rundt
på margin og top/left defineringer ;)

div#box {
margin: -200px 0 0 -250px;
position: absolute;
background: red;
height: 400px;
width: 500px;
top: 50%;
left: 50%;
}

Synes godt om

preppydude Nybegynder

28. november 2009 - 10:27 #5

@mclemens:
Korrekt. ;)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS