table-celler som bara vägrar göra som jag vill

6 svar · 275 visningar · startad av BeatL 28 feb. 2003

BeatLMedlem sedan nov. 200215 inlägg

Frågan28 feb. 2003 22:14#1

jag har en table, med en <td> för logon, en <td> för länkar och sen under denna ska jag ha 3 (eller fler) <td> för själva innehållet, men hur jag än gör så kan jag inte få så att den högersta cellen blir relativ bredd och justeras efter hur stort fönstret är. om jag låter bli att sätta width på denna så blir den vänstraste över hela skärmen, trots att den har bestämd bredd. Width="*" fungerar inte heller.

<table width=100%>
	<tr>
		<td background="bg_blue.gif" height=120 class="top" colspan=3><img src="logo.jpg"></td>
	</tr>

	<tr>
		<td background="bg_grey.gif" class="top" height=15 colspan=3>
		<b>&nbsp;Navigation &nbsp;»&nbsp; </b><a href="#">Home</a> | <a href="#">Projects</a> | <a href="#">Guides</a> | <a 

href="#">E-mail</a>

		</td>
	</tr>

	<tr>
		<td class="spacer" width=500>&nbsp;<p></td>

		<td class="spacer" width=100>&nbsp;<p></td>

		<td style="border: 0px"></td>
	</tr>

</table>

koden för CSS är följande (ifall det mot all förmodan kan spela nån roll)

.top {
	border: 0px;
	border-bottom: 1px solid #000000;
}

.spacer {
	border: 0px;
	border-right: 1px dotted #000000;
}

table {
	padding: 0px;
	spacing: 0px;
	border-collapse: collapse;
	font-family: verdana, arial, helvetiva;
	font-size: 10px;
} td {
	border: 1px solid #000000;
} body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0px;
}

Tillägg:

Ifall ni inte förstår mitt babblade ovan, så kommer den förenklade frågan: Finns det något attribut för att markera att cellen ska täcka resterande del av skärmen? typ som wildcard * eller liknande?

Peter SMedlem sedan dec. 20025 483 inlägg

28 feb. 2003 22:28#2

Jag ser inte vad som skulle kunna vara fel. Som det är nu så blir cellen till vänster 500 px, den i mitten 100 px och den till höger anpassas till själva tabellens bredd (100%).

Eller har jag förstått det hela fel?

BeatLMedlem sedan nov. 200215 inlägg

28 feb. 2003 22:29#3

det är exakt så som jag trodde, och som jag fortfarande tycker, att den ska bli. men det blir den inte. den högersta blir inget alls, den mittersta blir lite hipp som happ, den högersta täcker nästan hela skärmen (i 1152x864 upplösning btw)...

stör mig som fan att jag inte kan hitta felet

Peter SMedlem sedan dec. 20025 483 inlägg

28 feb. 2003 22:46#4

I den där upplösningen kommer den högra cellen att bli 552 pixlar bred, d.v.s. nästan hälften av skärmen.

Du kan ju ange cellernas bredd med procent istället.

mikkeXMedlem sedan aug. 2002477 inlägg

28 feb. 2003 22:49#5

Varför använder du tabeller? Och inte stilmallar för att placera innehållet?

BeatLMedlem sedan nov. 200215 inlägg

28 feb. 2003 22:52#6

Peter S skrev:

I den där upplösningen kommer den högra cellen att bli 552 pixlar bred, d.v.s. nästan hälften av skärmen.

Du kan ju ange cellernas bredd med procent istället.

Men det är ju just därför jag frågar här, den högra cellen blir inte 552 pixlar bred, vilket den borde bli

och jag vill ju att den vänstra och mittersta cellen ska ha fixerade mått, alltså inte procent.

mikkeX skrev:

Varför använder du tabeller? Och inte stilmallar för att placera innehållet?

för att jag vill ha att den vänstra cellen ska ha en "dotted" högerkant, likaså den mittersta, och sen ska jag ju ha innehållet i dessa celler. hur skulle jag göra detta i CSS?

Peter SMedlem sedan dec. 20025 483 inlägg

28 feb. 2003 23:19#7

Exempel på en ekvivalent CSS-layout:

<style type="text/css">
<!--

html, body {
	margin : 0;
	padding : 0;
	font-family : verdana, arial, helvetica, sans-serif;
	font-size : 10px;

}

#top {
	background : url(bg_blue.gif);
	height : 120px;
	border-bottom : 1px solid #000;
}

#left, #center {
	float : left;
	border-right : 1px dotted #000;
}

#left {
	width : 500px;
}

#center {
	width : 100px;
}

#nav {
	margin : 0;
	padding : 0;
	list-style : none;
}

#nav li {
	display : inline;
}

-->
</style>

...

<div id="top"><img src="logo.jpg"></div>

<div id="left">
	<ul id="nav">
		<li><strong>Navigation &raquo;</strong></li>
		<li><a href="">Home</a> | </li>
		<li><a href="">Projects</a> | </li>
		<li><a href="">Guides</a> | </li>
		<li><a href="">E-mail</a></li>
	</ul>
</div>

<div id="center">text</div>

<div id="right">text</div>