Hur gör jag för att justera tabellhöjden. Ner kan jag ju bara dra ner eller skriva in den nya höjden. När man skapar en tabell blir ju höjden alltid samma. Men om jag vill göra höjden mindre i en cell än default efter man skapat tabellen. Hur gör jag då? > <b>En till sak, jag kan göra mina tabellceller streckade genom border-style: solid, men hur får jag dem så här .............. som finns på denna sida.</b> Jag slängde ihop ett litet exempel med hjälp av css och klasser. Funkar inte, tabelljävekn rör sig inte i höjdled i cellerna, arrgg. Jag har provat alla möjliga nummer. Saken är den att jag inte hur man ska tänka när man använder procent. Kan någon förklara. Ojjojoj, vilken jobbig kod. Börja med att använda fasta pixlar tills du kommer på principenCell höjd
En till sak, jag kan göra mina tabellceller streckade genom border-style: solid, men hur får jag dem så här .............. som finns på denna sida.Sv: Cell höjd
border-style: dotted;
<URL:http://www.w3.org/TR/CSS2/box.html#border-style-properties>Sv: Cell höjd
<html>
<head>
<style "text/css">
<!--
body
{background-color:lightgreen;}
table
{position:absolute;left:20%;top:15%;width:80%;height:75%;
border-collapse:collapse;border:2px solid black;}
.tr1
{height:15%;}
.tr2
{height:50%;}
.tr3
{height:35%;}
.td1
{background-color:green; border:2px dotted white;}
.td2
{background-color:red; border:2px dotted white;}
.td3
{background-color:blue; border:2px dotted white;}
-->
</style>
</head>
<body>
<table>
<tr class=tr1>
<td class=td1></td>
<td class=td1></td>
</tr>
<tr class=tr2>
<td class=td2></td>
<td class=td2></td>
</tr>
<tr class=tr3>
<td class=td3></td>
<td class=td3></td>
</tr>
</table>
</body>
</html>Sv: Cell höjd
Så här ser min kod ut. Vad gör jag för fel och hur funkar procent. Förstår inte om jag skriver height 2%. Vad räknar man 2% ifrån: Hjälp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Piteå DiscGolf</title>
<style media="screen" type="text/css">
<!--
.tr1
{height:2%;}
.tr2
{height:2%;}
.tr3
{height:4%;}
.tr4
{height:1%;}
.tr5
{height:1%;}
.tr6
{height:1%;}
.tabellkantlinje_default { border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 3px; border-bottom-width: 3px; border-left-width: 1px}
.tabellkantlinje { border: #B5C6D6; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px}
.skicka_knapp { background-color:#F5F5F5;
border: #000000;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
color: #800000}
.kantlinje { border: 1px solid #000000; }
BODY { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif; background-repeat: no-repeat }
P { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
TD { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
UL { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
SELECT { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
INPUT { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
.size1 { font-size: 10px; font-family: verdana, arial, helvetica, sans-serif }
A
{
color: #800000;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
text-decoration: none
}
A.lank
{
color: #000000;
font-weight: normal;
}
A:hover { color: #5F9EA0; font-weight: text-decoration }
--></style>
</head>
<body bgcolor="#ffffff" background="bilder/bakgrund.jpg" topmargin="25">
<table width="301" height="10%" border="0" align="center" class="tabellkantlinje_default" cellspacing="0">
<tr class="tr1">
<td valign="top" bgcolor="#FFFFFF"></td>
<td colspan="7" valign="top" bgcolor="#FFFFFF"></td>
<td valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr class="tr2">
<td height="80" valign="top" bgcolor="#FFFFFF"></td>
<td colspan="7" valign="top" bgcolor="#FFFFFF"><div align="center"><img src="bilder/logo.jpg" width="817" height="78"></div></td>
<td valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr class="tr3">
<td valign="top" bgcolor="#FFFFFF"></td>
<td colspan="7" valign="top" bgcolor="#FFFFFF"></td>
<td valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr class="tr4">
<td width="1" valign="top" bgcolor="#FFFFFF"></td>
<td width="115" valign="top" bgcolor="#FFFFFF">
<%Server.Execute(url2)%>
</td>
<td width="115" valign="top" bgcolor="#FFFFFF"></td>
<td width="115" valign="top" bgcolor="#FFFFFF" style="border-left: 1px solid #000000"></td>
<td width="115" valign="top" bgcolor="#FFFFFF">
<%Server.Execute(url & ".asp")%>
</td>
<td width="115" valign="top" bgcolor="#FFFFFF"></td>
<td width="115" valign="top" bgcolor="#FFFFFF" style="border-left: 1px solid #000000"></td>
<td width="115" valign="top" bgcolor="#FFFFFF">
<%Server.Execute("right.asp")%>
</td>
<td width="1" valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr class="tr5">
<td valign="top" bgcolor="#FFFFFF"></td>
<td colspan="7" valign="top" bgcolor="#FFFFFF" style="border-top: 1px solid #000000"></td>
<td valign="top" bgcolor="#FFFFFF"></td>
</tr>
<tr valign="top" bgcolor="#FFFFFF">
<td colspan="9">
<%Server.Execute("bottom.asp")%>
</td>
</tr>
</table>
</body>
</html>Sv: Cell höjd
Sv: Cell höjd
.tr1
{height:2%;} 18%
.tr2
{height:2%;} 18%
.tr3
{height:4%;} 36%
.tr4
{height:1%;} 9%
.tr5
{height:1%;} 9%
.tr6
{height:1%;} 9%
----------------------
Alla tr (dvs, rader ska tillsammans bli 100% av tabellhöjden
Dina tr blir bara 11% och knappt synliga i detta fall,
då din tabell bara är 10% hög.
Om du kollar mitt förra exempel så ser du att de tre tr tillsammans blir
100% av tabellhöjden.
Tabellens höjd blir i ditt fall bara 10% av fönstret,
Ändra till 100% och ändra även dina tr till procenttalen ovan.
Ta också tillfälligt bort följande i tr2
<div align="center"><img src="bilder/logo.jpg" width="817" height="78"></div>
då ju denna bild skymmer f.n.
Lägg också avvikande färger på dina td så ser du lättare var felen ligger.
Du kan ta bort dessa senare.
Gör alltså först en helt REN tabell och lägg sist in dina bilder och knappar där du vill ha dem.
Men usch, vilken svåröverskådlig kod.
Om du inte lyckas ändå, så försök gör en skiss eller ritning hur du vill ha tabellen med rader o kolumner och lägg ut bilden här.Sv: Cell höjd
Likväl så rekomenderar jag starkt att undvika CSS (classer) tills du kommer på vad som händer med table och celler.
Alla %-mått i celler beräknas från din tables ytterkant. Detta betyder att har du en %-sats på höjd eller bredd i table så blir den dynamisk beroende på hur stor skärm din besökare har.
Ett ex på fasta pixlar blandat med % i celler
<code>
<html>
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="800" height="100" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#FFFF00" class="tr1">
<td width="25%" height="10%">cell1</td>
<td width="25%" height="10%">cell2</td>
<td width="25%" height="10%">cell3</td>
<td width="25%" height="10%">cell4</td>
</tr>
<tr bgcolor="#0000FF" class="tr2">
<td width="25%" height="90%">cell5</td>
<td width="25%" height="90%">cell6</td>
<td width="25%" height="90%">cell7</td>
<td width="25%" height="90%">cell8</td>
</tr>
</table>
</body>
</html>
</code>
Här har du 2 rader med celler.
Hur höga?
Övre raden med celler har höjd 10% av totala table (på 100px) så dett blir då 10% av 100px = 10px
Nedre raden med celler har en höjd på 90% av totalt 100px höjd= 90px
Vänder vi på det och säger att du sätter en % på bredden så får du räkna om (beräknat på table med 100% bredd OBS EJ CELLEN)
Din besökare har en skärm på 800 px bred vad är då cellbredden?
jo 25% av 800px = 200px per cell
Din besökare har en skärm på 1280 px bred vad är då cellbredden?
25% av 1280px = 320px per cell
Hoppas du förstår principen
När detta är klart kan du börja styra med css-formatering osv..
Lycka till //tyrone