Avatar billede Rasmus Lund Nybegynder
14. maj 2006 - 01:34 Der er 10 kommentarer og
1 løsning

Centrering af tabel, mens indholdet i tabellen skal være left

Jeg ønsker at lave en html side, der er opsat i en tabel. Tabellen har en fast bredde, og er centreret midt på siden. Alt mit indhold skal have venstrejurstering (inde i tabellen).

Det virker fint i Firefox og Safari, men IE centrer browseren alt. Dvs. i IE står både tabellen centreret og tabellens indhold.

Er der nogen, der ved hvordan man sikre at tabellens indhold er venstrejursteret?

Se min kode herunder:

------------KODE------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>..-..</title>
{stylesheet}
</head>

<body>
<div align="center">
<table width="750" colspan="3" height="600" border="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td valign="top" height="111"><img src="uploads/images/design/overskrift.jpg" ></td>
  </tr>
  <tr>
    <td height="160" valign="top" background="uploads/images/design/sten.jpg">{global_content name="menu"}</td>
  </tr>
  <tr>
    <td valign="top" id="content">{content}</td>
  </tr>
 
  <tr>
    <td height="128" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="22"  valign="top">{global_content name="footer"}</td>
  </tr>
</table>
</div>
</body>
</html>
Avatar billede olebole Juniormester
14. maj 2006 - 01:40 #1
<ole>

<body>

<table style="margin:0 auto" width="750" colspan="3" height="600" border="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td valign="top" height="111"><img src="uploads/images/design/overskrift.jpg" ></td>
  </tr>
  <tr>
    <td height="160" valign="top" background="uploads/images/design/sten.jpg">{global_content name="menu"}</td>
  </tr>
  <tr>
    <td valign="top" id="content">{content}</td>
  </tr>
 
  <tr>
    <td height="128" valign="top">&nbsp;</td>
  </tr>
  <tr>
    <td height="22"  valign="top">{global_content name="footer"}</td>
  </tr>
</table>

</body>

/mvh
</bole>
Avatar billede olebole Juniormester
14. maj 2006 - 01:42 #2
- derudover passer denne DTD langt bedre til din kode, end den, du bruger nu:

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

Din kode har intet med XHTML at gøre  :)
Avatar billede Rasmus Lund Nybegynder
14. maj 2006 - 01:58 #3
tak for hjælpen...den er der næsten - den venstrejursterer fint indholdet, men den trækker mine bulletpoints langt til venstre.

før så koden for min bullets således ud:

<ul style="margin-left: -20px;">
    <li><a title="Tilbage til forsiden" href="index.php?page=15">FORSIDE OG NYHEDER </a></li>
    <li><a href="index.php?page=30">BILLEDER</a> </li>
    <li><a href="index.php?page=33">HUSORDEN</a> </li>
    <li><a href="index.php?page=34">SEV&AElig;RDIGHEDER</a> </li>
    <li><a href="index.php?page=35">RESTAURANTER</a> </li>
    <li><a href="index.php?page=36">KORT</a> </li>
    <li><a href="index.php?page=37">LINKS</a> </li>
    <li><a href="index.php?page=38">KONTAKT</a> </li>
    <li><a href="index.php?page=41">EIGENT&Uuml;MER</a> </li>
</ul>

Jeg var nødt til at sætte værdien til -20, ellers var de laceret alt for langt til højre. (i FF og Safari)

for at det ser godt ud nu (i EI) skal værdien være =25. Men så ser det helt galt ud i FF og Safari.

kan man lave det så det er placeret universalt?

har jeg skrevet det er xhtml?
Avatar billede olebole Juniormester
14. maj 2006 - 02:10 #4
Prøv med et link til siden  :)
Avatar billede olebole Juniormester
14. maj 2006 - 02:15 #5
- men prøv i øvrigt:
    <ul style="margin-left: 0px;padding-left: 0px">

FF og IE bruger padding og margin forskelligt på list-elementer  :)
Avatar billede Rasmus Lund Nybegynder
14. maj 2006 - 02:15 #6
Jeg fandt selv en løsning på hele problemet!
Jeg skrev blot følgende ind i mit CSS:

td, table, tr { text-align:left; }

Det virker perfekt!

Men tak for hjælpen alligevel.
Avatar billede Rasmus Lund Nybegynder
14. maj 2006 - 02:16 #7
lav et svar - så skal du nok få points.
Avatar billede olebole Juniormester
14. maj 2006 - 02:29 #8
Nej, det er en dårlig løsning. En lappeløsning, der grunder sig i din left-margin på listen, som i udgangspunktet er en dårlig løsning  :)

I CSS centrerer du et block-element med 'margin:0 auto'.
Når du får listerne til at opføre sig ens i IE og FF - og det gør du ved at sætte ens padding og margin - er det løsning den, der giver dig mindst problemer med fremtidige opdateringer af siden.

Hvis man ikke koder i overensstemmelse med standarderne, ender man i et kapløb med små-hacks, der skal reparere på, at intet opfører sig som forventet ... og det bliver værre og værre i takt med antallet af hacks  ;o)
Avatar billede olebole Juniormester
14. maj 2006 - 02:29 #9
:)
Avatar billede olebole Juniormester
14. maj 2006 - 02:31 #10
Du kan selv ændre værdien på margin og padding i eksemplet (14/05-2006 02:15:01). Bare du sætter begge - og værdien er ens
Avatar billede olebole Juniormester
14. maj 2006 - 15:33 #11
Tak for points  :)
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