Avatar billede franklinpaper Nybegynder
25. august 2006 - 21:48 Der er 8 kommentarer og
1 løsning

Midterstilling af indhold, resulterer i delvis usynliggørelse.

Goddag.

Ved anvendelse af nedenstående CSS kode, midterstilles alt indhold. Dette er efter hensigten, men et problem forekommer.
Dette i form af, at ved anvendelse af meget lav opløsning (800 x 600), etc. midterstilles siden, dog med det problematiske faktum at indholdet fra øverste venstre hjørne udelukkes fra siden, hvorimod resten af siden tilgængeliggøres ved hjælp af scroll-bars.
Dette ligeledes ved åbning af siden i småt browser-vindue.

Jeg vil være yderst taknemmelig for løsningen af dette problem, og takker mange gange på forhånd for ethvert indlæg!

      <style type="text/css">
        <!--
        body {
            margin:0px
        }
       
        #horizon {
            position: absolute;
            top: 50%;
            left: 0px;
            width: 100%;
            height: 0px;
            overflow: visible;
            visibility: visible;
            display: block;
        }
       
        #content {
            border:1px solid #000;
            position: absolute;
            left: 50%;
            width: 250px; /* bredden på content div'en */
            margin-left: -125px; /* skal sættes til det halve af bredden */
            height: 70px; /* højden på content div'en */
            top: -35px; /* skal være det halve af højden */
        }
        -->
        </style>
    </head>

    <body>
        <div id="horizon">
            <div id="content"></div>
        </div>
    </body>
Avatar billede mclemens Nybegynder
25. august 2006 - 22:36 #1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

      <style type="text/css">
        <!--
html,body{margin:0px;padding:0px;height:100%;}
     
#middle{height:100%;width:100%;border-collapse:collapse;}
     
        #content {
            border:1px solid #000;
            width: 250px; /* bredden på content div'en */
            height:70px;
            margin:0px auto;
        }
        -->
        </style>
    </head>

    <body>

<table id="middle"><tr><td>
            <div id="content"></div>
</td></tr></table>

    </body></html>
Avatar billede mclemens Nybegynder
25. august 2006 - 22:38 #2
... hvis du vil undgå problemet, kan det ikke gøres uden tabellen ...
- når et object bliver placeret via. absolute er indholdet ikke tilgængelig når det ryger ovenud eller ud til venstre for - det kan ikke undgåes at opstå ved placering med absolute med negativ margin ... desværre :)
Avatar billede mclemens Nybegynder
25. august 2006 - 22:40 #3
#middle td{padding:0px;} ... jeg manglede lige den ...
Avatar billede mclemens Nybegynder
25. august 2006 - 22:41 #4
^ - hmm, den css del var vist ikke nødvendig alligevel :D
Avatar billede franklinpaper Nybegynder
26. august 2006 - 09:17 #5
Mange tak!
Jeg har forsøgt, men kan ikke få min tabel placeret i midterstillingen, er der nogle id'er der skal angives, eller hvorledes fungerer det?
- på forhånd tak!
Avatar billede mclemens Nybegynder
26. august 2006 - 09:22 #6
#middle{height:100%;width:100%;border-collapse:collapse;}

skal måske rettes til:

#middle{position:absolute;top:0px;left:0px;height:100%;width:100%;border-collapse:collapse;}
Avatar billede mclemens Nybegynder
26. august 2006 - 09:24 #7
de to andre css defineringer fra 25/08-2006 22:36:34 skal også bruges,
husk id på tabellen og content (eksemplet virker hos mig)
Avatar billede franklinpaper Nybegynder
26. august 2006 - 09:34 #8
Mange tak! Problemet er løst, jeg takker mange gange!
Avatar billede mclemens Nybegynder
26. august 2006 - 09:38 #9
Velbekom, og tak for point :)
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