Søg
Avatar billede fozzyc Nybegynder
19. december 2006 - 21:33 Der er 16 kommentarer

Centrering af indhold

Hej
Jeg vil gerne have indholdet på denne side centreret på siden både vertikalt og horizontalt. Det ser rigtigt ud i Dreamweaver med nedensående kode, men teksten "test" står stadig i toppen i både IE og Firefox. Nogen der kan hjælpe?

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" valign="middle">test</div></td>
  </tr>
</table>
</body>
</html>
Avatar billede simplus Nybegynder
19. december 2006 - 21:42 #1
Det virker her både i IE,FF og Opera så jeg ved ikke helt hvad du gør forkert..

Prøv at indsætte en doctype:

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

Derudover har du lukket et div tag uden at åbne et ???
- med andre ord, slet </div> da du ikke bruger den alligevel
Avatar billede fozzyc Nybegynder
19. december 2006 - 21:48 #2
Har jeg prøvet nu, stadig uden held. Du kan evt se det her: www.renesejling.dk/sites/scr/test.html
Avatar billede henrik6666 Nybegynder
19. december 2006 - 22:17 #3
Jeg er ikke helt klar over hvor browservenligt nedenstående er og om du kan bruge det men det du laver er ikke rigtigt og husk at kontrollere i forskellige skærmopløsninger også.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>
        <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
        <title>Dead Centre</title>
        <style type="text/css" media="screen"><!--
body
    {
    color: white;
    background-color: #003;
    margin: 0px
    }

#horizon       
    {
    color: white;
    background-color: #0ff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content   
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: #f00;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

.bodytext
    {
    font-size: 14px
    }

.headline
    {
    font-weight: bold;
    font-size: 24px
    }

#footer
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

a:link, a:visited
    {
    color: #06f;
    text-decoration: none
    }

a:hover
    {
    color: red;
    text-decoration: none
    }

.captions 
    {
    color: white;
    font-size: 10px;
    line-height: 14px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: left
    }

#caption1   
    {
    padding-left: 6px;
    border-left: 1px dashed #66c;
    position: absolute;
    top: -80px;
    left: -200px;
    width: 250px;
    height: 80px;
    visibility: visible;
    display: block
    }

#caption2   
    {
    padding-left: 6px;
    border-left: 1px dashed #66c;
    position: absolute;
    top: 92px;
    left: 125px;
    width: 250px;
    height: auto;
    visibility: visible;
    display: block
    }

--></style>
    </head>

    <body>
        <div id="horizon">
            <div id="content">
                <div class="bodytext"><div id="caption1" class="captions">The cyan box 'horizon' is positioned absolutely 50% from the top of the page, is 100% wide and has a nominal height of 1px. Its overflow is set to  'visible'.</div>
                    This text is<br>
                    <span class="headline">DEAD CENTRE</span><br>
                    and stays there!
                    <div id="caption2" class="captions">The red 'content' box is nested inside the 'horizon' box and is 250px wide, 70px high and is positioned absolutely 50% from the left - but has a negative margin that is exactly half of its width, -125px. To get it to centre vertically, it has a negative top position that is exactly half of its height, -35px.</div>
                </div>
            </div>
        </div>
        <div id="footer">
            <a href="deadcentre3.html">
            back</a></div>
       
    </body>

</html>

Fundet her : http://www.wpdfd.com/editorial/thebox/deadcentre4.html
Avatar billede steen_hansen Forsker
19. december 2006 - 22:21 #4
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<style type="text/css">
<!--[if IE]>
<style type="text/css">
.tablecontent {
border-collapse: collapse;
}
<![endif]-->
.start {
width: 300px;
margin: 0px auto;
position: absolute;
left: 50%;
margin-left: -335px;
height: 200px;
top: 50%;
margin-top: -271px;
}
.tablecontent {
width: 600px;
height: 400px;
border-spacing: 0px;
margin: 0px auto;
}
</style>
<title>Min side</html>
</head>

<body>

<table class="tablecontent">
    <tr>
        <td style="width: 600px; line-height: 400px; text-align: center; vertical-align: middle;">Test</td>
    </tr>
</table>

</body>

</html>


Det skulle vist virke :o)
Avatar billede simplus Nybegynder
19. december 2006 - 22:23 #5
Ellers prøv noget som fx:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" style="margin: 25% auto;">
  <tr>
    <td>test</td>
  </tr>
</table>
</body>
</html>
Avatar billede steen_hansen Forsker
19. december 2006 - 22:23 #6
henrik6666, !DOCTYPE bliver ikke angivet, der mangler et link. Bare til en orientering :o)
Avatar billede fozzyc Nybegynder
19. december 2006 - 22:24 #7
Ser ud til at virke, tak. Hvordan giver jeg point?
Avatar billede steen_hansen Forsker
19. december 2006 - 22:25 #8
Sorry, der var lige et par fejl:



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

<html>

<head>
<style type="text/css">
<!--[if IE]>
<style type="text/css">
.tablecontent {
border-collapse: collapse;
}
<![endif]-->
.start {
width: 300px;
margin: 0px auto;
position: absolute;
left: 50%;
margin-left: -300px;
height: 200px;
top: 50%;
margin-top: -200px;
}
.tablecontent {
width: 600px;
height: 400px;
border-spacing: 0px;
margin: 0px auto;
}
</style>
<title>Min side</html>
</head>

<body>

<table class="tablecontent">
    <tr>
        <td style="width: 600px; line-height: 400px; text-align: center; vertical-align: middle;">Test</td>
    </tr>
</table>

</body>

</html>
Avatar billede steen_hansen Forsker
19. december 2006 - 22:29 #9
Du beder den eller de personer, som du mener har leveret løsningen om at lægge et svar. Herefter markerer du dem alle, og trykker på knappen Accepter, eller fordeler pointene, som du synes. Jeg er ikke med.
Avatar billede fozzyc Nybegynder
19. december 2006 - 22:32 #10
simplus løsning virker og er ganske simpel. Du må gerne ligge et svar. Tak
Avatar billede simplus Nybegynder
19. december 2006 - 22:34 #11
Jeg samler ikke på point. Snup dem selv.
God jul
Avatar billede fozzyc Nybegynder
19. december 2006 - 22:37 #12
hvis nogle vil have dem så svar :)

god jul
Avatar billede steen_hansen Forsker
19. december 2006 - 22:51 #13
For en god ordens skyld kommer det lige een gang til, og denne gang rigtigt. God fordøjelse :o)



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

<html>

<head>
<style type="text/css">
.tablecontent {
width: 600px;
margin: 0px auto;
position: absolute;
left: 50%;
margin-left: -300px;
height: 400px;
top: 50%;
margin-top: -200px;
}
<!--[if IE]>
<style type="text/css">
.tablecontent {
border-collapse: collapse;
}
<![endif]-->
</style>
<title>Min side</html>
</head>

<body>

<table class="tablecontent">
    <tr>
        <td style="width: 600px; line-height: 400px; text-align: center; vertical-align: middle;">Test</td>
    </tr>
</table>

</body>

</html>


God jul til dig også :o)
Avatar billede henrik6666 Nybegynder
19. december 2006 - 22:54 #14
Nej tak - mit var bare et hurtigt link forslag fordi der ikke var svaret med andet og Simplus er det bedste forslag der overraskende virker i IE,OP,NS og FF
Avatar billede jokkejensen Novice
19. december 2006 - 23:47 #15
skulle I være på udkig efter nogle lidt flottere løsninger, er der en masse hvis i søger på google...

http://www.google.dk/search?hl=da&q=dead+centre+html&meta=

ex er det her løst med et div : http://www.aplus.co.yu/lab/rdc/
Avatar billede olebole Juniormester
20. december 2006 - 14:05 #16
<ole>

henrik6666 >> Det er ikke spor overraskende - men lige efter bogen  ;o)

jokkejensen >> Ekspemplet bag det sidste link kan næsten ikke blive ringere ... absolut ikke et eksempel til efterfølgelse!  =)
/mvh
</bole>
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
I går 13:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715: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
White papers
Flere white papers »