Notifikationer

Markér alle som læst Log ud

para7 Nybegynder

09. november 2004 - 13:11 Der er 19 kommentarer og
1 løsning

Layer som flyder midt på siden

kan man på en enkel måde positionere et div så det flyder horisontalt og vertikalt i midten af en html side?

Synes godt om

para7 Nybegynder

09. november 2004 - 13:14 #1

Altså nok noget med %, fordi besøgende kommer med forskellige vinduesstørrelser.

Synes godt om

sbm Nybegynder

09. november 2004 - 13:15 #2

Ja. Du kan med javascript smage på browservinduets højde og bredde. Ligeledes kan du så også aflæse højden og bredden på dit layer, og så er resten simpel regning. :-)

Et eksempel på at smage på vinduets højde og bredde.

<html>
<head>
<script language=JavaScript1.2>
function checkSize() {
document.getElementById('tekst').innerHTML='Browserens opløsning: ' + document.body.clientWidth + ' x ' + document.body.clientHeight + '<br />';
}
</script>
<style type="text/css">
html {
margin : 0px;
height : 100%;
}
body {
margin : 0px;
height : 100%;
overflow: hidden;
color: #000000;
background-color: #FFFFFF;
}
</style>
</head>
<body onload="checkSize();" onresize="checkSize();">
<div bgcolor="#000033" id="tekst">tst</div>
</body>
</html>

Synes godt om

sbm Nybegynder

09. november 2004 - 13:17 #3

du behøver ikke at bruge procenter.

Hvis f.eks. browserens højde og bredde er 1000x600 og dit layer i midten er 300x200

så siger du ((browser bredde) - (layer bredde))/2 = x-placering
((browser højde) - (layer højde))/2 = y-placering

Synes godt om

para7 Nybegynder

09. november 2004 - 13:24 #4

tak sbm
Nu har jeg implementeret din kode, men jeg mangler at lave den "simple regning" :)
Hvordan får jeg det til at virke. Send lige svar for point.

Synes godt om

para7 Nybegynder

09. november 2004 - 13:25 #5

Her er min side:

<html>
<head>
<title>Fly In test</title>
<script language=JavaScript1.2>
function checkSize() {
document.getElementById('tekst').innerHTML='Browserens opløsning: ' + document.body.clientWidth + ' x ' + document.body.clientHeight + '<br />';
}
</script>
<style type="text/css">
html {
margin : 0px;
height : 100%;
}
body {
margin : 0px;
height : 100%;
overflow: hidden;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
</head>
<body onload="dynAnimation();checkSize()" onresize="checkSize();">

<div bgcolor="#000033" id="tekst">tst</div>
<table border=0 style="margin:20%;border:3px solid #cccccc"><tr><td>
<span id="fpAnimspiralFP1" style="position: relative !important">
<img src="img/npt-streamer.jpg" border="0">
</span>
<br><br>
<span id="fpAnimhopWordsFP1" style="position: relative !important">
Netværks Markedsføring
</span>
</td></tr></table>

</body>
</html>

Synes godt om

roenving Novice

09. november 2004 - 13:28 #6

Kig f.eks. på: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Synes godt om

para7 Nybegynder

09. november 2004 - 13:35 #7

Tak roenving
Men det ser også ud til at jeg kan bruge det her:

<table width="100%" height="100%" border=0 style="border:3px solid #cccccc">
<tr>
<td align="center" valign="middle">
<span>
Mit centrerede indhold
</span>
</td>
</tr>
</table>

Er det bedre med al det scripting?

Synes godt om

roenving Novice

09. november 2004 - 13:43 #8

Hvis man kan lave det på en måde, som betyder, at alle kan være med uanset browser og uanset de har javascript aktiveret, skal man bruge den, fremfor en løsning, som kun virker i nogle browsere og/eller ved stenalder-HTML !-)

Synes godt om

sbm Nybegynder

09. november 2004 - 14:17 #9

Jeg må kigge tilbage engang i aften når jeg kommer hjem. Jeg har liiiidt travlt lige nu. :-)

Synes godt om

para7 Nybegynder

09. november 2004 - 17:40 #10

Det er vist lidt overkill i forhold hvad jeg skal bruge det til med det scripting. Jeg klarer mig fint med stenalderregnestokken her.
Tak for nærmest overdådig hjælp :)

Synes godt om

para7 Nybegynder

09. november 2004 - 17:41 #11

Smid et svar hvis I vil have nogle point..

Synes godt om

para7 Nybegynder

09. november 2004 - 18:07 #12

sbm
Tak for din kode. Den viser vel det synlige område og ikke browservinduets størrelse. For der skal jo lige tillægges browserens hoved og bund.

Synes godt om

sbm Nybegynder

09. november 2004 - 20:20 #13

Den viser "kun" højde og bredde på indholdsvinduet. Værktøjslinie, scrollbar osv er trukket fra.

Synes godt om

para7 Nybegynder

09. november 2004 - 20:44 #14

Tak for den sbm. Den er ret smart. Jeg vil bruge koden på et andet tidspunkt :)

Synes godt om

sbm Nybegynder

09. november 2004 - 21:17 #15

Her er et eksempel på et layer der bliver vist i dokumentet. Jeg har taget udgangspunkt i dit eget. Jeg håber det giver mening. Den kræver stadig lidt tweaking, men den er der vist næsten.

<html>
<head>
<title>Fly In test</title>
<script language="JavaScript1.2">
msiebrowser=(document.all)?true:false;
var x = 0;
var y = 0;

function showBanner(){
document.getElementById('banner').style.display="inline";
}

function hideBanner(){
document.getElementById('banner').style.display="none";
}

function placeLayer() {
e=document.getElementById('banner');
x = (document.body.clientWidth - e.scrollWidth)/ 2;
y = (document.body.clientHeight - e.scrollHeight)/ 2;

if(msiebrowser){
e.style.top=y;
e.style.left=x;
}
else{
e.style.top=y+'px';
e.style.left=x+'px';
}
}
</script>
<style type="text/css">
html {
margin : 0px;
height : 100%;
}
body {
margin : 0px;
height : 100%;
overflow: hidden;
color: #000000;
background-color: #FFFFFF;
}
</style>

</head>
<body onload="placeLayer();showBanner();setTimeout('hideBanner()',5000);" onresize="placeLayer();">

<div id="banner" style="height: 100px; width: 200px; position: absolute; border: 3px solid green;">
Netværks Markedsføring
</div>
</body>
</html>

Synes godt om

para7 Nybegynder

09. november 2004 - 21:43 #16

Tak igen sbm
Ved resize af ruden forsvinder layeret altså. Det forsvinder også hvis jeg fokuserer på et andet vindue, der ligger ovenpå.

Synes godt om

sbm Nybegynder

09. november 2004 - 21:53 #17

Hmmm? Måske du ikke har bemærket at jeg sætter layeret til at forsvinde af sig selv efter fem sekunder? :-)

Synes godt om

sbm Nybegynder

09. november 2004 - 21:54 #18

Jeg har selv testet i MSIE 6 og Firefox, og der virker det fint.

Synes godt om

sbm Nybegynder

09. november 2004 - 21:55 #19

setTimeout('hideBanner()',5000)

kalder hideBanner med 5 sekunders forsinkelse. Den kan du bare fjerne, hvis det ikke er det du vil.

Synes godt om

para7 Nybegynder

10. november 2004 - 08:38 #20

OK, smart nok, den fangede jeg ikke i farten :)

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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