11. september 2004 - 15:01
Der er
13 kommentarer og 1 løsning
Tabeller med CSS
Hej Eksperter Det lige gået op for mig efter at have lavet et hjemmeside layout. at jeg gerne vil styrer alle mine tabeller i css. Er helt Newbe, hvordan gør jeg ? Her et eksempel der skal laves om til CSS !! <table width="948" border="0" cellspacing="0" cellpadding="0" align="center" class="tabletop"> <tr> <td width="927" height="84px" align="center" background="images/top.gif"><div align="left"> <div align="left"><img src="images/blank.gif" width="325" height="53" border="0" usemap="#Home"></div> </table>
Annonceindlæg tema
Cloud & AI
I dette særtema ser vi på, hvordan cloud og AI bliver fundamentet for virksomhedernes digitale forretning, og hvordan de nye muligheder for automatisering og forretningsværdi kan udnyttes uden at miste overblik, sikkerhed og menneskelig kontrol.
11. september 2004 - 15:14
#1
.tabletop{ width:948px; border:0; border-collapse:collapse; text-align:center; } .tabletop td{ border:0; height:84px; background:url(images/top.gif); } .tabletop td div{ text-align:left; } img{ border:0; } #home{ width;325px; height:53px; } <table class="tabletop"> <tr> <td> <div><img id="home" src="images/blank.gif" usemap="#Home"></div></td> </tr> </table>
11. september 2004 - 15:21
#2
Ok viker næsten. men hvordan kan aligne tabellen til "center" ?
11. september 2004 - 15:21
#3
i CSS koden ?
11. september 2004 - 15:22
#4
.tabletop{ width:948px; margin:0 auto; border:0; border-collapse:collapse; text-align:center; }
11. september 2004 - 15:47
#5
Afhængig af din browser kan det være nødvendig at: <style type="text/css"> html,body{height:100%;margin:0px;border:0px;padding:0px;text-align:center;} .tabletop{ width:448px; margin:0 auto; border:1px dotted red; border-collapse:collapse; text-align:center; }
11. september 2004 - 16:12
#6
align virker nu, men det ligesom der komme en extra border uden om! og der kommer luft under tabellen. Hva ka det være? koden ser sådan ud nu! tabletop{ width:948px; margin:0 auto; border-collapse:collapse; text-align:center; } .tabletop td{ border-right: 2px solid #3F4B56; border-left: 1px solid #3F4B56; border-top: 0px solid #B61943; border-bottom: 2px solid #3F4B56; width:948px; height:84px; background:url(../images/top.gif); text-align:center; } .tabletop td div{ text-align:left; } img{ border:0; } #home{ width;320px; height:74px; }
11. september 2004 - 16:21
#7
Det er vel en tavetosse, at der ikke er . foran tabletop ?-) -- og jeg kan ikke genskabe problemet ... -- og jeg fandt en tavetosse i #home: #home{ width:320px; height:74px; }
11. september 2004 - 17:10
#8
Hvordan dælen vil du gribe det an når man har javascript i tabel. Når den skal over i et css script ? Koden her: <table width="948" height="20" border="0" align="center" cellpadding="0" cellspacing="0" class="menuborder"> <tr> <td width="174" height="20" background="images/menuborder.gif" bgcolor="#000000"> </td> <td width="772" background=""><table width="774" height="20" border="0" align="left" class=""> <tr> <td width="154" height="16"> <p align="center"><span class="style3" align="center"><A onmouseover="MM_showHideLayers('privat','','show')" onmouseout="MM_showHideLayers('privat','','hide')" href="profil.htm" target=_top><img src="images/pil_fikant.gif" width="9" height="9"> Profil </A></span></p></td> <td width="154"> <p align="center" class="style16"><A onmouseover="MM_showHideLayers('a','','show')" onmouseout="MM_showHideLayers('a','','hide')" href="a.htm" target=_top><img src="images/pil_fikant.gif" width="9" height="9"> Produkt A </A></p></td> <td width="154"> <p align="center"><span class="style3" align="center"><A onmouseover="MM_showHideLayers('b','','show')" onmouseout="MM_showHideLayers('b','','hide')" href="b.htm" target=_top><img src="images/pil_fikant.gif" width="9" height="9"> Produkt B</A> </span></p></td> <td width="154"> <p align="center"><span class="style3" align="center"><A onmouseover="MM_showHideLayers('farver','','show')" onmouseout="MM_showHideLayers('farver','','hide')" href="farver.htm" target=_top> <img src="images/pil_fikant.gif" width="9" height="9"> Farver</A> </span></p></td> <td width="134"> <p align="center"><span class="style3" align="center"><A onmouseover="MM_showHideLayers('teknisk','','show')" onmouseout="MM_showHideLayers('teknisk','','hide')" href="teknik.htm" target=_top><img src="images/pil_fikant.gif" width="9" height="9"> Teknisk </A></span></p></td> </tr> </table></td> </tr> </table>
11. september 2004 - 17:13
#9
Javascript kan som hovedregel ikke flyttes over i et style-sheet !-) Undtagelsen er, at visse hover-effekter på links kan laves, mens f.eks. Gecko'erne og Opera understøtter hover på alle elementer ...
11. september 2004 - 17:32
#10
Ok men kan jeg flytte <table og <td uden problemer ?
11. september 2004 - 17:37
#11
Stødder lige på problemer når der kommer flere <td - hvordan definere jeg hvordan hver skal være ?
11. september 2004 - 22:14
#13
Oki '-)
18. september 2004 - 16:52
#14
-- og tak for point ;~}
Vi tilbyder markedets bedste kurser inden for webudvikling