Søg
Avatar billede darthwaders Nybegynder
01. september 2005 - 23:27 Der er 11 kommentarer og
1 løsning

Tabel positionering med CSS

jeg rodede med tabelbaggrunde via CSS før og det fungerer fint, men nu vil jeg spørge hvordan placerer jeg en tabel lige præcis hvor jeg vil, med css?

feks. i midten, både lodret og vandret.

DW
Avatar billede roenving Novice
01. september 2005 - 23:54 #1
Vandret kan du positionere med css, men lodret positionering kan kun ske med en tabelcelle, hvis du ikke skal involvere javascript !o]

-- altså en ydre tabel, måske med en eneste tabelcelle, hvor indholdet (den indre tabel !-) har en defineret højde, som så pr. definition vil være lodret centreret, hvis man ikke ændrer det !o]
Avatar billede darthwaders Nybegynder
02. september 2005 - 00:00 #2
dvs: jeg definerer en tabel med én celle i HTML og placerer den med CSS?
hvordan vil csskoden se ud?
Avatar billede roenving Novice
02. september 2005 - 00:19 #3
F.eks. sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Centralt placeret tabel</title>
<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;}
#site{width:980px;margin:0 auto;height:100%;}
#content{width:100%;height:280px;background:#234;color:orange;text-align:center;font-size:x-large;}
</style>
</head>
<body>
<table id="site">
  <tr>
    <td>
      <table id="content">
        <tr>
          <td>
            Her er der et centreret indhold
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>

</html>
Avatar billede roenving Novice
02. september 2005 - 00:30 #4
PS. jeg har set en absolut centrering lavet uden tabelceller, men for at få det til at fungere i bare de tre mest almindelige browsere fyldte css-koden 3-5 gange så meget og html-koden blev bestemt ikke kortere !-)
Avatar billede darthwaders Nybegynder
02. september 2005 - 00:30 #5
fungerer fint med Mozilla, men ikke med IE :-( ????
med det er jo det sædvanlige problem...
Avatar billede roenving Novice
02. september 2005 - 00:35 #6
Jeg havde slet ikke testet i andre browsere end IE ?-)

-- for jeg ved, at det fungerer ens i alle browsere, hvilket jeg så lige har checket op !-)
Avatar billede darthwaders Nybegynder
02. september 2005 - 00:42 #7
hmm..er det noget  med koden?

ser sådan ud:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Chez-Gil</title>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
  <link href="style2.css" type="text/css"
rel="stylesheet">
</head>
<body>
<table id="site">
  <tbody>
    <tr>
      <td>
      <table id="content">
        <tbody>
          <tr>
            <td>
Her er der et centreret indhold<br>
lksjdlf ldkjf lsdkfjl lkdfjlk kflskf flksdfjl fldfksldnf<br>
fsfhkdjsfs ksjdfkj sdjfkjdf dkjfhkjdsf fdksjfkd fdkjfsdk
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
Avatar billede roenving Novice
02. september 2005 - 00:45 #8
Jepz, læg mærke til mit doctype-tag !-)
Avatar billede darthwaders Nybegynder
02. september 2005 - 00:52 #9
ahh..en lille detalje :-)
...som løste problemet! tak for hjælpen.

smid et svar.
DW
Avatar billede roenving Novice
02. september 2005 - 00:58 #10
Velbekomme '-)

-- det er en gammelkendt sag, at f.eks. i html4.01 transitional vælger IE at bruge enhver undskyldning for ikke at fortolke efter w3cs css-rekommendationer, så der skal du altid benytte dig af en fuldt kvalificeret doctype inklusive dtd-link !-)
Avatar billede darthwaders Nybegynder
02. september 2005 - 07:20 #11
Jeg er lidt hysterisk med hensyn til valideringen,-mine sider SKAL bare validere korrekt. også for at vise folk at man har gjort sig lidt umage med den..:=}

en lille ting mere:
hvis jeg vil flytte tabellen, kan jeg bruge px i stedet for % ?
Avatar billede roenving Novice
02. september 2005 - 21:56 #12
Øeh, jeg er ikke sikker på hvad du mener ?-)

-- du kan altid flytte tabellen ved at give den andre css-properties, men den eneste 100%-ting, der er i den indre tabel refererer til den ydre tabels bredde, som er nødvendig for at centrere den i browseren med margin auto !-)

-- 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
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 dag 12:15 morf bilede Af knuldefar1942 i Fri debat
I går 22:13 Gemme største værdi Af Lemming@privat.dk i Excel
I går 21:39 Kvindelig journalist ved DR - hvad er hendes navn. Af ErikHg i Fri debat
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
06/0817:10 Windows 10 Home 22H2 produktnøgle Af Uvanga i Windows
White papers
Flere white papers »