Søg
Avatar billede krogstrup Nybegynder
16. juli 2005 - 13:06 Der er 18 kommentarer og
1 løsning

Centrere DIV vertikalt uden brug af TABLE

Jeg er løbet ind i et problem, jeg ikke rigtig kan finde en løsning på nogen steder.

Jeg har en DIV indeholdende mit sites design. Jeg ønsker at centrere denne DIV vertikalt på skærmen, men UDEN brug af en TABLE.

Jeg har fundet CSS "hacket" til at gøre det via negative margins, men da jeg ikke kender højden af min DIV (den er dynamisk) kan jeg heller ikke bruge denne løsning. Se evt. her:
http://www.wpdfd.com/editorial/thebox/deadcentre1.html

Jeg har altså brug for et script der aflæser
1) højden af browserens visnings-område
2) højden af min DIV

og derefter laver en matamatisk beregning for at afgøre hvor min DIV skal starte for at være centreret vertikalt.

Hvis højden af min DIV er højere end det mulige visningsområde skal min DIV blot sættes til at starte i toppen af siden.

Ligger nogen inde med sådan et script?

Det er selvfølgelig nødt til at virke cross-browser.
Avatar billede roenving Novice
16. juli 2005 - 13:30 #1
Skal du ikke bruge deadcentre4.html ?-)

-- og jeg tror du skal have fat i offsetHeight som alternativ til måling af højderne onload:

var winHeight = window.innerHeight ? window.innerHeight : window.documentElement ? window.documentElement.offsetHeight : document.body.offsetHeight;
var divHeight = document.getElementById('design').offsetHeight;
Avatar billede krogstrup Nybegynder
16. juli 2005 - 13:57 #2
Hej Roenving

Jeg er nået frem til følgende:

****************'

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

<html>
<head>
<title>Test</title>
<script>
function centerDiv(div){
  var winHeight = window.innerHeight ? window.innerHeight : window.documentElement ? window.documentElement.offsetHeight : document.body.offsetHeight;
  var winWidth = window.innerWidth ? window.innerWidth : window.documentElement ? window.documentElement.offsetWidth : document.body.offsetWidth;
  var divHeight = document.getElementById(div).offsetHeight;
  var divWidth = document.getElementById(div).offsetWidth;
  if(divHeight<winHeight) {
    var intDifHeight = winHeight - divHeight;
    document.getElementById(div).style.top = intDifHeight/2
  }
  else {
    document.getElementById(div).style.top = 0
  }
  if(divWidth<winWidth) {
    var intDifWidth = winWidth - divWidth;
    document.getElementById(div).style.left = intDifWidth/2
  }
  else {
    document.getElementById(div).style.left = 0
  }
}
</script>
<style>
html,body {width:100%; height:100%;}
</style>
</head>

<body onLoad="centerDiv('design');" onResize="centerDiv('design');">

<div id="design" style="position:absolute; left:0px; top:0px; width:400px; background:red;">test</div>

</body>
</html>

******************

Ovenstående virker tilsyneladende fint hvis man FJERNER henvisningen til DTD filen i DOCTYPE ?!? Men det ønsker jeg jo ikke !!!

Jeg er på bar bund...
Avatar billede krogstrup Nybegynder
16. juli 2005 - 14:04 #3
med DOCTYPE
http://fisker.wkh.dk/test4.html

uden DOCTYPE
http://fisker.wkh.dk/test5.html
Avatar billede roenving Novice
16. juli 2005 - 14:04 #4
-- du har jo ikke sat den obligatoriske enhed på længder i css !-)

-- tilføj  + "px"; ...
Avatar billede krogstrup Nybegynder
16. juli 2005 - 14:09 #5
Det er gjort nu - stadig samme resultat ?!?
Avatar billede roenving Novice
16. juli 2005 - 14:11 #6
Hvilke browsere bruger du ?-)

-- for det virker i begge mine ...
Avatar billede krogstrup Nybegynder
16. juli 2005 - 14:20 #7
aaah - skulle lige udvide min STYLE for html,body med:
margin:0px; padding:0px;

Nu virker det perfekt i begge browsere med DTD fil og uden mærkelige scrollbars...

YES YES YES
Avatar billede krogstrup Nybegynder
16. juli 2005 - 14:20 #8
Her er den endelige version:

****************************************''

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

<html>
<head>
<title>Test</title>
<script>
function centerDiv(div){
  var winHeight = window.innerHeight ? window.innerHeight : window.documentElement ? window.documentElement.offsetHeight : document.body.offsetHeight;
  var winWidth = window.innerWidth ? window.innerWidth : window.documentElement ? window.documentElement.offsetWidth : document.body.offsetWidth;
  var divHeight = document.getElementById(div).offsetHeight;
  var divWidth = document.getElementById(div).offsetWidth;
  if(divHeight<winHeight) {
    var intDifHeight = winHeight - divHeight;
    document.getElementById(div).style.top = intDifHeight/2 + "px";
  }
  else {
    document.getElementById(div).style.top = 0 + "px";
  }
  if(divWidth<winWidth) {
    var intDifWidth = winWidth - divWidth;
    document.getElementById(div).style.left = intDifWidth/2 + "px";
  }
  else {
    document.getElementById(div).style.left = 0 + "px";
  }
}
</script>
<style>
html,body {width:100%; height:100%; margin:0px; padding:0px;}
</style>
</head>

<body onLoad="centerDiv('design');" onResize="centerDiv('design');">

<div id="design" style="position:absolute; left:0px; top:0px; width:400px; background:red;">test</div>

</body>
</html>
Avatar billede krogstrup Nybegynder
16. juli 2005 - 14:21 #9
Kan du stå inde for den Roenving ?

Burde den fungere i alle nyere browsere ?
Avatar billede roenving Novice
16. juli 2005 - 14:28 #10
Der er nogle, som jeg ikke har overblik over (f.eks. khtml og Safari), men den burde opføre sig pænt med IE (men måske en anelse anderledes, hvis det ikke er ie6sp2 !-) og Gecko-browserne, og jeg ville forvente, at Opera også gjorde det pænt !o]

-- iøvrigt kan du sagtens flytte dine onload og onresize over i script-blokken, men du skal nok tage højde for, at menuen sikkert også bruger onload, så det f.eks. skal være:

window.onload = function(){
  centerDiv('design');
  milonicInit();
}
Avatar billede krogstrup Nybegynder
16. juli 2005 - 22:02 #11
Tak for al din hjælp :-)

Smider du et svar ?
Avatar billede roenving Novice
16. juli 2005 - 22:17 #12
Velbekomme '-)
Avatar billede roenving Novice
16. juli 2005 - 23:40 #13
-- og tak for point ;~}
Avatar billede olebole Juniormester
17. juli 2005 - 18:10 #14
<ole>

Med al respekt Krogstrup, så er det da en dårligere løsning at bruge script fremfor at bruge en enkelt tabel til at håndtere sit layout. Hvad er årsagen til det ønske?  :)

/mvh
</bole>
Avatar billede krogstrup Nybegynder
17. juli 2005 - 18:40 #15
Problemet er at jeg har brug for at kunne finde left og top positionen for det lag der skal centreres. Til det formål har jeg brugt det script som du har konstrueret (getPos). Men tilsyneladende fejler dette script (og alle andre jeg har kunne finde) når laget er indlejret i en tabel.

Derfor ønsker jeg en løsning hvor mit design lag ikke ligger i en tabel, så jeg ikke får nogen problemer med at aflæse koordinater for laget.
Avatar billede roenving Novice
17. juli 2005 - 18:42 #16
>>ole

-- problemet var at finde en top og left til milonic-menuen (som jeg ikke kender !-)
Avatar billede olebole Juniormester
17. juli 2005 - 19:23 #17
Okay, det er dét spm, der stadig spøger ... jeg har godt set, der har været gang i getPos(). Hvad kom I frem til - og er det muligt at lave et helt simpelt eksempel, hvor den ikke virker? Jeg ville gerne 'forske' lidt videre i problemet  :)

- og faktisk er det ikke 'mit script', men Thor Larholms (brugeren Jumper her fra Eksperten) ... det kan jeg desværre ikke tage credit for  ;o)
Avatar billede roenving Novice
17. juli 2005 - 19:27 #18
Du kan se problemformuleringen her, men det er jo ikke sikkert, krogstrup stadig har de benyttede eksempler oppe: http://www.eksperten.dk/spm/632890
Avatar billede olebole Juniormester
17. juli 2005 - 19:41 #19
- så skulle den være klaret  :)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »