Vaste hoogte geven aan cellen in tabel

annuh · 26 aug 2007

Hallo,
Ik ben bezig met een clansite.
Nu heb ik de hele lay-out (zo goed als af) gemaakt in photoshop.
Links een menu
In het midden de content en rechts nog een menu.
De menu's bestaan uit meerdere links / submenu's.
Nu komt mijn probleem.
Als ik bijvoorbeeld een cel aan de rechterkant van de site iets uitrek (= meer tekst in plaatsen dan ruimte voor is) rekt deze gewoon uit. Maar bijna alle cellen aan de linkerkant OOK!
Ik zou het graag willen hebben dat alleen de onderste cel 'meebeweegt'. Dus dat deze height="100%" is en de andere cellen een vaste hoogte.
Ik dacht dat dit makkelijk op te lossen was door de andere cellen een vaste height mee te geven. Maar dat werkte niet, (tenminste niet in IE7).
Zouden jullie mij kunnen helpen?
Dit is de (voorlopige) code van de lay-out:

HTML:

<html>
<head>
<meta http-equiv="Content-Language" content="nl">
<title>dms</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<LINK HREF="dms.css" REL="stylesheet" TYPE="text/css">
<script language="JavaScript" type="text/javascript" src="prototype.js"></script> 
<script> 
        
var url = 'berichtenbalk/berichten.php'; 

        
new Ajax.PeriodicalUpdater("berichtenbalk", url, { method: 'get', onFailure: reportError, frequency: 1, decay: 1 }); 

    function reportError(request) 
    { 
        alert('Excuses, er zijn fouten opgetreden..'); 
    } 
    
</script> 
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<!-- ImageReady Slices (dms.psd) -->
<table id="Table_01" width="873" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="31" class="border_left">
			&nbsp;</td>
		<td colspan="9">
			<img src="images/dms_02.jpg" width="838" height="137" alt=""></td>
		<td rowspan="31" class="border_right"></td>
		<td>
			<img src="images/spacer.gif" width="1" height="137" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="images/dms_04.jpg" width="191" height="61" alt=""></td>
		<td background="dms_05.jpg" width="498" height="28">
			<marquee onmouseover = 'this.stop()' onmouseout = 'this.start()' width = '100%' height="19">
			<div id="berichtenbalk"></div></marquee></td>
		<td>
			<img src="images/dms_06.jpg" width="17" height="28" alt=""></td>
		<td colspan="2">
			<a href="javascript:void(0)" 
onclick="open('voegtoe.php','miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,width=500,height=150')">
<img src="images/dms_07.jpg" width="95" height="28" alt="Voeg een bericht toe!" border="0"></a></td>
		<td colspan="2">
			<img src="images/dms_08.jpg" width="37" height="28" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="28" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="3">
			<img src="images/dms_09.jpg" width="526" height="36" alt=""></td>
		<td colspan="3">
			<img src="images/dms_10.jpg" width="121" height="30" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="6" class="menu_r_bg">
			<form method="POST" action="--WEBBOT-SELF--">
				<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
				<p align="center"><input type="text" name="T1" size="16"></p>
			</form>
&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" background="dms_12.gif" valign="top">
			<p align="center"><font class="font_menu_head">Het is nu: 5:46:23</font></td>
		<td>
			<img src="images/dms_13.jpg" width="72" height="3" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td colspan="4" rowspan="26">
			<iframe width="100%" height="100%" frameborder="0" src="home.html"></iframe></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">Algemeen</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="25" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_16.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_17.gif" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_19.jpg" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="16" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="5" class="menu_r_bg">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="8" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">De Clan</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_22.gif" width="119" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_23.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_24.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_26.gif" width="119" height="22" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="9" class="menu_r_bg">&nbsp;<p>&nbsp;</p>
		<p>&nbsp;</p>
		<p>dss</p>
		<p>&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_28.gif" width="119" height="24" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="24" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_29.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_30.jpg" width="119" height="26" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_head">
			<font class="font_menu_head">Community</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="22" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_32.gif" width="119" height="26" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_33.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/dms_34.gif" width="119" height="23" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="23" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/dms_35.gif" width="119" height="25" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_head">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2" class="menu_l_head">
			<font class="font_menu_head">Stats</font></td>
		<td>
			<img src="images/spacer.gif" width="1" height="4" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="2" class="menu_r_bg">
			&nbsp;<p>&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="menu_l_stats">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="99" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" class="border_bottom_l">
			</td>
		<td colspan="7" class="border_bottom">
			</td>
		<td colspan="2" class="border_bottom_r">
			&nbsp;</td>
		<td>
			<img src="images/spacer.gif" width="1" height="17" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="98" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="498" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="84" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="33" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="4" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="17" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</center>
</body>
</html>

Alvast bedankt!

Ps. Als de vraagstelling nog een beetje onduidelijk is, kan ik dat begrijpen, want het is een heel verhaal geworden

EDIT: Hier is de link, hopelijk is het zo duidelijker! (de layout is zoals te zien nog NIET AF!)

http://annuh13.an.funpic.org/Clansite

Dus het menu onder 'Stats' moet groter worden als de rechterkant uitrekt, is dit mogelijk?

peter vazed · 26 aug 2007

Zal niet lukken met deze code.
Dit komt omdat je colspan en rowspan hebt gebruikt.

Oplossing:
opnieuw slicen.
Eerst grote stukken,
dan deze stukken slicen.
op die manier krijg je tabellen in cellen,
en dan zou het beter moeten zijn.
Dus eerst kijken wat je wenst ivm de indeling,
dan pas je layout slicen en verder slicen.

Makkelijk is evenwel anders.

annuh · 28 aug 2007

Ik heb geen colspan en rowspan gebruikt

Dat deed Photoshop

Maar zou je dat iets willen uitleggen?

Eerst slice ik de dingen die 'bij elkaar horen'? Zoals linkerkant en de rechterkant?
Moet ik dit dan alvast 'Saven for web'?
En de stukjes die dan gemaakt worden stuk voor stuk in kleinere stukjes slicen?
Of kan dit ook makkelijker..?

Alvast bedankt!

mrniceguy2002 · 28 aug 2007

Gewoon typen in Notepad zou ik zeggen...

maakt het een stuk duidelijker (zie je vooral wat je doet) =)

annuh · 28 aug 2007

Bedankt voor je reactie!
Maar LOL waarop geef je nou antwoord dan?
Ik vroeg hoe ik het nou moest slicen in Photoshop

Dat kun je niet gewoon uittypen in Kladblok

peter vazed · 28 aug 2007

Eerst slice ik de dingen die 'bij elkaar horen'? Zoals linkerkant en de rechterkant?
Moet ik dit dan alvast 'Saven for web'?
En de stukjes die dan gemaakt worden stuk voor stuk in kleinere stukjes slicen?

Inderdaad.

Maar eerst moet je dus op een stukje papier tekenen wat je wenst.
Dan kun je gaan slicen.
De grote plaatjes kun je wederom slicen.
Is een pokkewerk om het goed te krijgen.

Shoestring is oa een slicer, er zijn er nog meer.
Hierin kun je je totaalplaatje invoeren, en dan de grote plaatjes maken,
dan de delen inladen om wederom te verdelen.

Sommige stukken van je ontwerp hoef je niet als vol plaatje te gebruiken, doch
je kunt een stukje gebruiken, en dit als achtergrond in een cel of tabel gebruiken.
zie:
http://www.helpmij.nl/forum/showthread.php?t=278644

Vaste hoogte geven aan cellen in tabel

annuh

Gebruiker

peter vazed

Meubilair

annuh

Gebruiker

mrniceguy2002

Gebruiker

annuh

Gebruiker

peter vazed

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy