Søg
Avatar billede mini-me Nybegynder
13. september 2005 - 14:55 Der er 18 kommentarer og
1 løsning

DIV Layer centreret i både højde og bredde

Hej,

Hvordan laver jeg et div layer som står placeret lige midt på skærmen altså både horisontalt og vertikalt.
Avatar billede mm12010 Nybegynder
13. september 2005 - 15:06 #1
det kunne så således ud:

<style type="text/css">
html,body,#container{height:100%;width:100%;margin:0px;padding:0px;text-align:center;}
</style>

...

<table id="container" cellspacing="0" cellpadding="0">
  <tr>
    <td><div style="margin:auto;height:200px;width:200px;border:1px solid black;">&nbsp;</div></td>
  </tr>
</table>
Avatar billede roenving Novice
13. september 2005 - 15:10 #2
Prøv f.eks. deadcentre: http://www.wpdfd.com/editorial/thebox/deadcentre4.html !-)
Avatar billede mini-me Nybegynder
13. september 2005 - 15:16 #3
MM12010: Den skal gerne flyde frit... så jeg kan ligge den "henover" en anden tabel...
Avatar billede mm12010 Nybegynder
13. september 2005 - 15:18 #4
så er det roenving's løsning du skal sigte efter
Avatar billede mini-me Nybegynder
13. september 2005 - 15:35 #5
Skal jeg bruge al den kode som der viss på deadcentre?? det er da ikke bare lige til...
Avatar billede roenving Novice
13. september 2005 - 15:38 #6
Der er da ikke voldsomt meget, se f.eks. dette eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Total centreret</title>
<meta name="Generator" content="Stone's WebWriter 4" />
<meta name="keywords" content="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;}
#centercontainer{position:absolute;top:50%;width:100%;height:1px;overflow:visible;background:cyan;}
#centerbox{position:absolute;left:50%;height:300px;width:400px;margin-top:-150px;margin-left:-200px;background:red;}
#textbox{position:absolute;top:50%;height:108px;margin-top:-54px;width:100%;vertical-align:center;text-align:center;}
.h3text{font-size:24px;}
.h1text{font-size:40px;color:yellow;font-weight:900;}
</style>
<script language="javascript" type="text/javascript">

</script>
</head>
<body>
  <div id="centercontainer">
    <div id="centerbox">
      <div id="textbox">
        <span class="h3text">Denne tekstbox er placeret</span><br>
        <span class="h1text">absolut i midten</span><br>
        <span class="h3text">af skærmbilledet - cross-browser</span>
      </div>
    </div>
  </div>
</body>

</html>
Avatar billede mini-me Nybegynder
13. september 2005 - 15:50 #7
roenving det virker perfekt :) smid et svar..
Avatar billede roenving Novice
13. september 2005 - 17:04 #8
Velbekomme '-)
Avatar billede roenving Novice
13. september 2005 - 17:21 #9
-- og tak for point ;~}
Avatar billede jesper-moeller Nybegynder
14. september 2005 - 21:19 #10
For at fuldende roenving's svar vil jeg foreslå noget ala følgende

/* ie mac style */
#centerbox{position:absolute;height:300px;width:400px;top:50px;left:50px;background:red;}
/* start machack \*/
#centerbox{position:absolute;left:50%;height:300px;width:400px;margin-top:-150px;margin-left:-200px;background:red;}
/* slut machack */

da ie mac ikke kan lide negative margin (Siden vil stå halvejs ude af browseren)
Komments skal med.
Har slet ikke chekket den top / left jeg har givet den... men ret den evnt..selv til...
Avatar billede roenving Novice
14. september 2005 - 21:27 #11
IE mac ?-)

-- findes den på andre end webudvikleres computere ...

*lol*

-- med macOS har der, i de sidste mange versioner, fulgt en ganske udmærket browser med, som godt nok ikke kan 100% det samme som IE/win, men idag er det faktisk sådan, at Safari i forhold til IE/Mac er mere kompatibel med M$-browseren (f.eks. fortolkes css bedre, javascript-implementationen er tættere på osv. osv. !-)
Avatar billede jesper-moeller Nybegynder
14. september 2005 - 21:43 #12
*S* roenving
Siger ikke det er mange der vil besøge siden med den browser....men fixet er simpelt så hvorfor ikke..*S*
desuden bliver man overasket over HVOR gamle systemer der til tider logger på rundt omkring...*S*
Avatar billede roenving Novice
14. september 2005 - 22:03 #13
Præcis omkring den browser, er jeg faktisk begyndt at have den mening, at den faktisk kun findes, fordi webudviklere af den lidt ældre skole tror, at de også skal være kompatible med den ...

-- og du har helt ret i, at hacket ikke er nogen stor omvej, men jeg hader den slags, så personligt har jeg droppet v4-browsere og altså også den slags finurligheder (hvem har iøvrigt f.eks. Mosaic med på deres kompatibilitets-liste mere !-)

-- af andre finurligheder, jeg totalt skøjter forbi, kan minus-javascript-browsere, ingen css-understøttelse, VGA-skærme oma.

-- hvis jeg skal producere noget, som også skal se designet ud på f.eks. håndholdte devices, må man bare tænke anderledes (den tid, den sorg !-)
Avatar billede jesper-moeller Nybegynder
14. september 2005 - 22:47 #14
Mon man overhoved kan få Mosaic til at køre på et mutidigt OS  ??

Tror mere grunden til den findes(og bruges) er det er hvad der er at få af IE til Mac OS9....
bruger den kun til at se HVOR gorv fejlvisningerne er.... ikke nødvenigvis at gøre mine sider kompertible med den (men er fejlen stor kan jeg nu godt rette på det)

Havde dog et tilfælde hvor en kunde brokkede sig over en side ikke vistes ordenligt på hans komputer på kontoret...Det viste sig han brugte IE5 på win98 *S* (og det er kun 6mrd, siden) .... Så tror pokker.hvisse dele ikke virkede ordenligt hos ham..*G*.... der var min 5.1.7 handy...*S* ....
Avatar billede roenving Novice
14. september 2005 - 22:54 #15
-- tjah, jeg vandt jo lige en 400Mz-maskine ved Hardware-kast, hvor '98 er præinstalleret, den har jeg da tænkt mig at stille op til IE5/5.5, så jeg kan checke ved behov !-)
Avatar billede jesper-moeller Nybegynder
14. september 2005 - 23:08 #16
Hardware kast ??? ....*G*..... Jamen tillykke ...*S*
Avatar billede roenving Novice
14. september 2005 - 23:13 #17
Se her: http://www.hardwarekast2005.frac.dk/ !-)
Avatar billede olebole Juniormester
15. september 2005 - 00:44 #18
<ole>

En stor atlet med en glorværdig fremtid bag sig:
    http://www.hardwarekast2005.frac.dk/foto/hardwarekast2005-063.html

/mvh
</bole>
Avatar billede jesper-moeller Nybegynder
15. september 2005 - 00:48 #19
Gad vide om det ville blive en suces hvis man kombinere det med den finske soprt "Kone løb" ....*G*
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 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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
16/1016:25 En "Gammel" & "Retro" PC Service ? Husker ikke navnet .... Af Ikke-ekspert i Diverse
16/1016:17 Jeg har lige købt en Samsung mobil telefon Af Strawberry i Mobiltelefoner
16/1013:20 Lotus Approach Af Carsten i Andet software
15/1015:34 Epson scanner forbinder ikke til computer Af bbkdk i Printere
11/1013:35 Bruger på Win11 Af lurup i Browsere
White papers
Flere white papers »