/ Forside/ Teknologi / Udvikling / HTML / Spørgsmål
Login
Glemt dit kodeord? 		Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
1  molokyle 11184
2  Klaudi 5506
3  bentjuul 3377
4  severino 2040
5  smorch 1950
6  strarup 1525
7  natmaden 1396
8  scootergr.. 1320
9  e.c 1150
10  miritdk 1110
Table auto bredde driller i IE
Fra : Dennis85 		Vist : 643 gange
500 point
Dato : 29-10-07 17:09
Hejsa kære kanduer

Jeg har fået et lille problem med min nye side.
Det drejer sig om, at min table skal stilles i midten, med automatisk bredde på begge sider, det har jeg derved angivet som width="*". I FireFox går dette glat, men i både IE og Opera (og sikkert flere), går det rigtigt skidt!
Hvordan omgår jeg dette, uden at skulle give bredden et præcist tal, og helst heller ikke en procent. Jeg vil gerne have den justerer sig selv.
Koden og siden kan ses på http://dslj.frac.dk/

Jeg håber nogen kan hjælpe.

Hilsen Dennis

 
 
Kommentar
Fra : ajuul

Dato : 29-10-07 20:28
Det må være noget i stil med:
1)
Kode
<div align="center">
<table width="75%">
...
</table>
</div>

eller blot:
2)
Kode
<table width="75%" align="center">...</table>


/ajuul

Kommentar
Fra : Dennis85

Dato : 29-10-07 20:36
Som jeg skriver i mit første indlæg vil jeg helst undgå % tal mm.
Men det kan være det bliver den eneste vej ud hvis der ikke er andre der har et bud?

Divs har jeg ikke lyst til at bruge, og der kan jeg vel heller ikke bruge auto bredde?

Kommentar
Fra : ajuul

Dato : 29-10-07 20:45
Øh... ups... Det var skisme osse sandt... ingen procent-tegn.

Men hvis du har angivet bredden i tabellen til 100% og de forskellige bredder i pixel-størrelser, så vil jeg da anbefale, at du bare udelader width="*" i de to yderste celler.

/ajuul

Kommentar
Fra : smorch

Dato : 30-10-07 00:54
Prøv nedenstående - det virker for mig i IE7 og 4FOX

Sorry - men % tegnene er det eneste jeg lige umiddelbart kan få til at fungere

se evt. http://trojel-overnatning.dk/kandutest2.html i begge browsere.

Mvh

sMorch

Kode
<html>
<head>
<title>DENNIS STEINER LIND JØRGENSEN: ONLINE CV</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
p,ul{font-family:Arial;font-size:10pt;color:#ABABAB;}
a:link,a:visited,a:active{font-family:Arial;font-size:10pt;color:#ABABAB;text-decoration:underline;color:#ABABAB;}
a:hover{font-family:Arial;font-size:10pt;color:#ABABAB;text-decoration:underline;color:#D0448B;}
.gal{border: 2px #94A7B6 solid;}
</style>
</head>
<body bgcolor="#EBEBEB" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--
   * Online CV og portfolio for Dennis Steiner Lind Jørgensen
   * Udviklet og kodet af: Dennis Steiner Lind Jørgensen, maniactor@gmail.com
   * Grafik af: Dennis Friis Rasmussen, dennisfriis.rasmussen@gmail.com
   * Oktober, 2007
-->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" colspan="3" align="center" width="100%">
      
         <table id="Table_01" height="99" align="center" border="0" width="780" cellpadding="0" cellspacing="0">
            <tr>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" width="*" valign="top">&nbsp;</td>
               <td background="http://dslj.frac.dk/logo.gif" style="background-repeat: no-repeat" width="155" valign="top">&nbsp;</td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/hje_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/hje_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/hje_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/inf_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/inf_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/inf_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/gal_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/gal_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/gal_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/cur_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/cur_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/cur_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/kom_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/kom_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/kom_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/kon_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/kon_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/kon_01.gif';" alt=""></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt=""></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" width="*" valign="top">&nbsp;</td><!---->
            </tr>
         </table>
      </td>
   </tr>
      
   <tr>
      <td>
         <table width="460" align="center">
            <tr>
               <td>
                  <br>
                  <p>Denne side er et online cv og portfolio, for Dennis S. L. Jørgensen</p>
                  <p><b>Sidste nyt:</b><br>Indholdet er på plads og galleriet er påbegyndt.<br>Der vil selvfølgelig komme flere billeder og nyheder efterhånden.</p>
                  <p>Feedback på mailen på kontaktsiden er mere end velkommen :).</p>
                  <p>Sidst opdateret: 27. oktober 2007 - 21:05.</p>
                  <p><b>Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.</b></p>
                  <br>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td align="center">
         <hr color="#94A7B6" width="100%" size="1">
         <!-- chart.dk unified trackercode - v1 -->
         <script src='http://www.chart.dk/js/unified.asp'></script>
         <script language='javascript'>
          track_visitor(137667, '');
         </script>
         <noscript>
          <a href="http://www.chart.dk/ref.asp?id=137667" target="_blank">
          <img src="http://cluster.chart.dk/chart.asp?id=137667" border="0" alt="Chart.dk">
          </a>
         </noscript>
         <!-- chart.dk unified trackercode - v1 -->
      </td>
   </tr>
</table>
</body>
</html>


Kommentar
Fra : molokyle

Dato : 30-10-07 05:23
Man kan vel centrere tabeller nøjagtigt som alle andre (X-)HTML elementer med CSS med egenskaberne:

text-align:center;

..og:

margin:auto;

1.) http://www.communityhigh.org/web/center.html
2.) http://theodorakis.net/blockcenter.html

</MOLOKYLE>

Kommentar
Fra : Dennis85

Dato : 30-10-07 22:17
Jeg kan ikke rigtigt få noget af det til at virke,
Er der nogle alternative løsninger? (Har forhøjet points'ne).

Kommentar
Fra : smorch

Dato : 30-10-07 23:20
Kan du ikke få den jeg har lagt på http://trojel-overnatning.dk/kandutest2.html til at virke?

Mvh

sMorch

Kommentar
Fra : Dennis85

Dato : 31-10-07 07:59
smorch > Jo delvist. Jeg ville lige se om der var en bedre løsning, ellers bliver det din senere i dag .

Kommentar
Fra : Dennis85

Dato : 02-11-07 08:26
Undskyld det trak ud, men har ikke haft tid til at arbejde med det før nu.

Men nu har jeg fundet problemet.
Det er fordi cellen udvider sig i takt med teksten.
Er der nogen der kender en kode til at stoppe den "funktion"? Altså tvinge linjeskift når teksten når til tabellens kant.

Kommentar
Fra : smorch

Dato : 02-11-07 10:21
Du kunne jo sætte en tabel i den celle og give tabellen en fast bredde.

sMorch

Kommentar
Fra : Dennis85

Dato : 02-11-07 11:11
smorch => Ja det vil jeg da prøve, men der må da være en bedre mulighed end tabel i tabel i tabel som er inde i en tabel .

Kommentar
Fra : smorch

Dato : 02-11-07 11:41
Sikkert i CSS afdelingen, men så skal du i http://www.kandu.dk/groupview.aspx?grpid=30826
og finde en ekspert dér.

Med tabellerne er du som regel sikker på at det holder i samtlige browsere.

Mvh
sMorch

Kommentar
Fra : smorch

Dato : 02-11-07 13:04
Her er et forsøg uden tabelitabel

sMorch


Kode
<html>
<head>
<title>DENNIS STEINER LIND JØRGENSEN: ONLINE CV</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<style>
p,ul{font-family:Arial;font-size:10pt;color:#ABABAB;}
a:link,a:visited,a:active{font-family:Arial;font-size:10pt;color:#ABABAB;text-decoration:underline;color:#ABABAB;}
a:hover{font-family:Arial;font-size:10pt;color:#ABABAB;text-decoration:underline;color:#D0448B;}
.gal{border: 2px #94A7B6 solid;}
.center2
{
margin-left: auto;
margin-right: auto;
width: 460;text-align:left;
}
</style>
</head>
<body bgcolor="#EBEBEB" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--
   * Online CV og portfolio for Dennis Steiner Lind Jørgensen
   * Udviklet og kodet af: Dennis Steiner Lind Jørgensen, maniactor@gmail.com
   * Grafik af: Dennis Friis Rasmussen, dennisfriis.rasmussen@gmail.com
   * Oktober, 2007
-->
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" colspan="3" align="center" width="100%">
      
         <table id="Table_01" height="99" align="center" border="0" width="780" cellpadding="0" cellspacing="0">
            <tr>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" width="*" valign="top">&nbsp;</td>
               <td background="http://dslj.frac.dk/logo.gif" style="background-repeat: no-repeat" width="155" valign="top">&nbsp;</td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/hje_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/hje_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/hje_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/inf_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/inf_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/inf_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/gal_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/gal_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/gal_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/cur_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/cur_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/cur_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/kom_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/kom_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/kom_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td valign="top" width="99"><a href="" target="_parent"><img src="http://dslj.frac.dk/kon_01.gif" border="0" onMouseOver="this.src='http://dslj.frac.dk/kon_02.gif';" onMouseOut="this.src='http://dslj.frac.dk/kon_01.gif';" alt="" /></a></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" valign="middle" width="1"><img src="http://dslj.frac.dk/break.gif" border="0" alt="" /></td>
               <td background="http://dslj.frac.dk/fill.gif" style="background-repeat: repeat-x" width="*" valign="top">&nbsp;</td><!---->
            </tr>
         </table>
      </td>
   </tr>
      
   <tr>
      <td>
<!--         <table width="460" align="center">
            <tr>
               <td>
               
-->               
               <div align="center">
               <div class="center2">
                  <br />
                  <p>Denne side er et online cv og portfolio, for Dennis S. L. Jørgensen</p>
                  <p><b>Sidste nyt:</b><br />Indholdet er på plads og galleriet er påbegyndt.<br />Der vil selvfølgelig komme flere billeder og nyheder efterhånden.</p>
                  <p>Feedback på mailen på kontaktsiden er mere end velkommen :).</p>
                  <p>Sidst opdateret: 27. oktober 2007 - 21:05.</p>
                  <p><b>Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.</b></p>
                  <br />
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
                  Bemærk: Siden er optimeret til Mozilla FireFox, bruger du en anden browser kan der forekomme fejl på siden.
               </div>
               </div>
<!--               </td>
            </tr>
         </table>
-->      </td>
   </tr>
   <tr>
      <td align="center">
         <hr color="#94A7B6" width="100%" size="1" />
         <!-- chart.dk unified trackercode - v1 -->
         <script src='http://www.chart.dk/js/unified.asp'></script>
         <script language='javascript'>
          track_visitor(137667, '');
         </script>
         <noscript>
          <a href="http://www.chart.dk/ref.asp?id=137667" target="_blank">
          <img src="http://cluster.chart.dk/chart.asp?id=137667" border="0" alt="Chart.dk" />
          </a>
         </noscript>
         <!-- chart.dk unified trackercode - v1 -->
      </td>
   </tr>
</table>
</body>
</html>


Kommentar
Fra : smorch

Dato : 02-11-07 14:02
ELLER : http://trojel-overnatning.dk/kandutest2.html nu med div'er istedet for table (pånær menuen)

Accepteret svar
Fra : molokyle
Modtaget 500 point
Dato : 02-11-07 17:48
..mere om centrering af elementer:

1.) http://www.digital-transition.com/archives/2003/centering-content-without-tables/
2.) http://www.communitymx.com/content/article.cfm?page=3&cid=A8BBA

..og på 'dansk' : http://webdesign101.dk/csslayout/autocentrering.php

..og lidt om 'tabel' layout med CSS:

1.) http://webmaster.hephey.dk/guide/45/
2.) http://www.sitepoint.com/article/tables-vs-css
3.) http://www.webdesign101.dk/artikler/lesstables.php

Hér som webside layouts (..prøv de forskellige eksempler):

http://www.webdesign101.dk/csslayout/eksempler/layout1.html

..men der er betemt intet i vejen for, at benytte CSS boxmodellen til 'egentlige' tabeller også

</MOLOKYLE>

Godkendelse af svar
Fra : Dennis85

Dato : 10-11-07 16:55
Jeg har endnu ikke fået det til at spille 100, men molokyle er kommet med en masse gode links.

Jeg overvejer dog stadig at prøve med divs, hvis jeg gør det, så er der points til dig også smorch (skal nok sende en besked hvis det er).

Tak for hjælpen alle, og undskyld min langsomme besvarelse.

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408914
Brugere : 218888
Månedens bedste
Årets bedste
Sidste års bedste
Copyright © 2000-2024 kandu.dk. Alle rettigheder forbeholdes.