The_HulkMedlem sedan juni 20031 837 inlägg Får inte ihop CSS-biten för några tabeller.
Bifogar ett test-exempel.
Som ni ser på den högre rutan så fylls den inte ut i höjdled.
Den vänstra ha en div-tagg som trycker ut tabellen på höjden, jag vill att den högra ska följa med.
Någon som vet?
<html>
<body>
<table style="border: 1px solid black; width: 300px">
<tr>
<td style="border: 1px solid green;"><table style="border: 1px solid red; width: 100%"><tr><td><div style="height: 100px;">test</div></td></tr></table></td>
<td style="border: 1px solid green;"><table style="border: 1px solid red; height: 100%; width: 100%"><tr><td>test</td></tr></table></td>
</tr>
</table>
</body>
</html>
bifogar även koden som en txt-fil, går inte att bifoga html-filer.
trendolMedlem sedan okt. 2002170 inlägg du har skapat två tabeller med helt olika attributer, så det är inte konstigt att de inte "följer" varandra. se över din tabell. det är en väldig röra. tre tabeller för två celler är inte särskilt trevlig kod. dessutom missade du några semikolon. jag bifogar en kod som jag snabbt knåpade ihop. en tabell räcker.
<html><body>
<table style="border:1px solid black; width:300px;"><tr>
<td style="border:1px solid green;">
<div style="border:1px solid red; height:200px;">test</div>
</td>
<td style="border:1px solid green;">
<div style="border:1px solid red; height:200px;">test</div>
</td>
</tr></table>
</body></html>
The_HulkMedlem sedan juni 20031 837 inlägg saken är att det är inte jag som bestämmer innehållet i tabellen, det är automatgenererat och höjden är inte alltid samma i den olika cellerna. detta var bara ett litet exempel för att visa hur jag menade. Jag kan alltså INTE förutse att höjden är lika i båda celler, men jag vill ändå att tabellerna ska fylla ut cellerna.
måste man avsluta all CSS med semikolon även om du bara har ett attribut eller om det är det sista i style?
Om div-taggarna INTE är samma höjd får man problem
<html>
<body>
<table style="border: 1px solid black; width: 300px">
<tr>
<td style="border: 1px solid green;"><table style="border: 1px solid red; width: 100%"><tr><td><div style="height: 200px;">test</div></td></tr></table></td>
<td style="border: 1px solid green;"><table style="border: 1px solid red; width: 100%"><tr><td><div style="height: 100px;">test</div></td></tr></table></td>
</tr>
</table>
</body>
</html>
den riktiga tabellen är alltså inte enbart två celler men istället för att skriva ut onödigt mycket kod kortade jag ner den till detta. Att skriva om den som du gjorde är totalt omöjligt. i den riktiga koden är det inte enbart en cell i tabellen men resultatet blir det samma. dessutom är det inte div-taggar som bestämmer höjden utan bilder som inte ligger under min kontroll. jag gjorde detta exemplet för att det skulle vara lättare att överskåda.
trendolMedlem sedan okt. 2002170 inlägg jag förstår, men det du måste inse är att det varken är bra för klient eller server att lasta på med onödig kod i den bemärkelsen att slänga in onödigt många tabellstrukturer. jag tror varken du eller jag förstår varandra; i vänstra cell-diven har du bestämt höjden 100px och denna påverkar INTE den andra diven. som du märker är båda cellerna i samma höjd med din kod, men inte den röda ytterkanten eftersom den är angiven i diven. beroende på innehållet bestäms höjden; den cell som har mest innehåll bestämmer den andra cellens höjd.
antingen så får du bestämma höjden på cellerna och divarna och sen kontrollera innehållet genom nån serverbaserad kod (php, asp) och på så sätt sätta någon begränsning. eller så skiter du fullständigt i tabellen överhuvudtaget och går över till divar helt och hållet. jag knåpade ihop ett snabbt exempel nedan.
<div style="width:300px; border:1px solid black; padding:3px;">
<div style="float:left; width:50%; border:1px solid green; padding:3px;">
<div style="width:100%; border:1px solid red; padding:3px;">
asdf
</div>
</div>
<div style="float:right; margin:0; width:50%; border:1px solid green; padding:3px;">
<div style="width:100%; border:1px solid red; padding:3px;">
sdf
</div>
</div>
</div>
det är inte fullt ut testat, så du får testa dig fram lite för att få fram önskat resultat.
ja, du måste avsluta varje prefix med ett semikolon. även det sista.
om du skriver
<div style="padding:0; margin:1.5em; background:#ccc;">test</div>
så står det egentligen
padding:0;
margin:1.5em;
background:#ccc;
semikolonet visar på att "här är det slut". det blir ofta felmeddelanden och stora delar av koden visas inte hos klienten om du inte är petnoga med detta. i vissa fall fungerar det, men det korrekta är att avsluta med ett semi efter varje attribut.
som avslut så kan jag rekommendera följande läsning för det här ändamålet: http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
