Avatar billede mercutio Nybegynder
28. maj 2002 - 10:04 Der er 2 kommentarer og
3 løsninger

centrering af et layer, men hvordan?

Hvis jeg har et layer jeg angiver en absolute position hvordan kan jeg så gøre så det layer altid bliver centreret. top:0px; og måske left:center? :-)
Avatar billede pelkjaer Nybegynder
28. maj 2002 - 10:10 #1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.content {
    position:absolute;
    z-index:1;
    width:300px;
    height:300px;
    left:50%;
    top:50%;
    font-family:tahoma,arial,verdana;
    font-size:11px;
    text-align:justify;
    line-height:15px;
    border-width:1px;
    border-style:solid;
    border-color:#DDDDDD;
    margin-top:-150px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:-150px;
    padding:10px;
    background-color:#FFFFFF;
}
-->
</style>
</head>

<body>
<div class="content">
<p>centered div</p>
</div>
</body>
</html>
Avatar billede grydgaard Nybegynder
28. maj 2002 - 11:15 #2
er det inholdet af din layer der skal være centreret?
Avatar billede grydgaard Nybegynder
28. maj 2002 - 11:18 #3
Du kan prøve med <div align="center"> Det virker altid for mig. :)
Avatar billede tjacob Juniormester
28. maj 2002 - 13:06 #4
>>grydgaard: align="center" bliver overridet af position:absolute
-derudover er er align="center" ikke valid XHTML (men det er nok ligegyldigt her ;-))
Avatar billede helle_fred Nybegynder
29. maj 2002 - 12:19 #5
Du kan finde vinduets bredde med:
window.screen.width

og midtpunktet af vinduet:

window.screen.width/2

Du kender bredden af dit lag, og det skal så placeres i position:

left:(window.screen.width/2)-lagets_bredde/2

Dit problem er nu, at du skal skrive stylesheetet dynamisk - det kan du gøre med en write-sætning:

<script>
var laget_bredde=300
var t="<style>.content{position:absolute;z-index:1; width:300; height:300px;left:"
t=t+(window.screen.width/2)-lagets_bredde/2
t=t+";top:50%;font-family:tahoma,arial,verdana;font-size:11px;text-align:justify;line-height:15px; border-width:1px;border-style:solid;    border-color:#DDDDDD;margin-top:-150px;margin-right:10px; margin-bottom:10px; margin-left:-150px;padding:10px; background-color:#FFFFFF;}
</style>"
documents.write(t)
</script>


husk: ingen linjeskift i stylesheetet, når det skal skrives dynamisk

vh Helle
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