Hoe plaats ik een scrollbalk in een cel van een tabel?

Status
Niet open voor verdere reacties.
R

RichardArthur

Gebruiker
Lid geworden
20 mrt 2009
Berichten
10
Beste medeforummers,

Ik zit met een probleem. Met behulp van Photoshop en Dreamweaver (CS4) ben ik een website aan het maken. In Photoshop heb ik de site gesneden en vervolgens heb ik deze in een tabel in Dreamweaver geplaatst.



Snapt u het nog allemaal? Vervolgens heb ik een id aangemaakt voor de content, maar zodra ik teveel tekst in de content plaats herhaalt het menu zich.



Nu zou ik graag willen weten hoe ik een scrollbalk in de content plaats, zonder dat de overige cellen zich gaan herhalen. Ik zat al te denken aan het opnieuw snijden van de content. Heeft iemand een goed idee? Alvast bedankt. Mocht je trouwens meer afbeeldingen of het html-bestand willen, dan hoor ik het graag.

Groet,
Rick
 
Hoi Rick,
Als ik de plaatjes zie: is het zo, dat niet het menu zich herhaalt, maar alleen de achtergrond-figuur van het menu?
Als dat zo is, kan je dit verhinderen door in de css te zetten:
Code: 
[font=courier]#menucel { 
   background: url(images/menu-bg.png) no-repeat;
}[/font]
En dan hoeft er geen extra verticale scrollbar voor de content aangelegd te worden. Is dat niet het mooiste: het onkruid er bij de wortel uit trekken i.p.v. het aan te oog te onttrekken door er een kunstzinnig struikje boven te zetten? :)

Met vriendelijke groet,
CSShunter
 
csshunter zei:
Hoi Rick,
Als ik de plaatjes zie: is het zo, dat niet het menu zich herhaalt, maar alleen de achtergrond-figuur van het menu?
Als dat zo is, kan je dit verhinderen door in de css te zetten:
Code: 
[font=courier]#menucel { 
   background: url(images/menu-bg.png) no-repeat;
}[/font]
En dan hoeft er geen extra verticale scrollbar voor de content aangelegd te worden. Is dat niet het mooiste: het onkruid er bij de wortel uit trekken i.p.v. het aan te oog te onttrekken door er een kunstzinnig struikje boven te zetten? :)

Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Het werkt nog niet helemaal. Kan ik je anders mijn index en style.css sturen? Ik had al een id voor mijn menu en als ik background: url(images/menu-bg.png) no-repeat; er tussen plak verdwijnt mijn menubalk. De buttons blijven wel staan. Alvast bedankt.
 
Een overflow voor je contentdeel zou ook kunnen.
Voorbeeld:

Code: 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	<title>(Type a title for your page here)</title>
<!--Pagina gemaakt op Wednesday, February 06, 2008 13:02:07 -->
<meta name="GENERATOR" content="Arachnophilia 4.0">
<meta name="FORMATTER" content="Arachnophilia 4.0">
<meta name="description"  CONTENT="korte beschrijving van de pagina">
<meta name="keywords"  CONTENT="trefwoorden, die, slaan, op, de, pagina">
<meta name="publisher" CONTENT="Jan Jansen">
<meta name="Author" content="Peter Vazed">
<meta name="robots" content="index, follow">
<meta name="revisit" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css" media="all">
 @import url("zp.css"); 
</style>
		 
<LINK rel="stylesheet" type="text/css" href="zp.css">

 <style type="text/css" media="screen">
 body
{
background-image: url(start-strps.jpg);
margin: 0;
padding: 0;
font-family:  verdana, "comic sans ms", arial, hevetica, sans-serif;
text-align: left;
color: #d5d7b5;
background: #ffffcc;
}
</style>
</head>

<body >

<table  width="100%" border="1" cellspacing="0" cellpadding="4" bgcolor="#ffffd2">
	<tr>
		<!-- Row 1 Column 1 -->
		<td width="420">
			1 links
		</td>
		<!-- Row 1 Column 2 -->
	<td background="http://www.arjatex.nl/images/1-silk-blue-background.jpg" style="width:359px; height:305px">
<div style="width:359px; height:305px; overflow:auto;">
Midden<br>

hier je tekst<br>
Nog meer tekst<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Etiam ultricies nibh. <br>Pellentesque varius nibh vel neque. Sed non arcu. Nullam id pede. Aliquam sed velit. Nulla non ante at est aliquet auctor. <br>Phasellus vitae dolor id augue vestibulum venenatis. Cras rutrum dictum nibh. Sed placerat. Nullam metus. Curabitur nec sem tincidunt diam posuere hendrerit. <br>Nullam velit enim, cursus ut, tincidunt quis, rutrum sit amet, risus.<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Etiam ultricies nibh. <br>Pellentesque varius nibh vel neque. Sed non arcu. Nullam id pede. Aliquam sed velit. Nulla non ante at est aliquet auctor. <br>Phasellus vitae dolor id augue vestibulum venenatis. Cras rutrum dictum nibh. Sed placerat. Nullam metus. Curabitur nec sem tincidunt diam posuere hendrerit. <br>Nullam velit enim, cursus ut, tincidunt quis, rutrum sit amet, risus.<br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Etiam ultricies nibh. <br>Pellentesque varius nibh vel neque. Sed non arcu. Nullam id pede. Aliquam sed velit. Nulla non ante at est aliquet auctor. <br>Phasellus vitae dolor id augue vestibulum venenatis. Cras rutrum dictum nibh. Sed placerat. Nullam metus. Curabitur nec sem tincidunt diam posuere hendrerit. <br>Nullam velit enim, cursus ut, tincidunt quis, rutrum sit amet, risus.<br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Etiam ultricies nibh. <br>Pellentesque varius nibh vel neque. Sed non arcu. Nullam id pede. Aliquam sed velit. Nulla non ante at est aliquet auctor. <br>Phasellus vitae dolor id augue vestibulum venenatis. Cras rutrum dictum nibh. Sed placerat. Nullam metus. Curabitur nec sem tincidunt diam posuere hendrerit. <br>Nullam velit enim, cursus ut, tincidunt quis, rutrum sit amet, risus.<br>
</div>
</td>
		<!-- Row 1 Column 3 -->
		<td>
			3 rechts		</td>
	</tr>
</table>


</body>

</html>

:cool:
 
Ik heb het al opgelost met de volgende code in de body:

#textblock {
position:absolute;
width:490px;
height:557px;
z-index:1;
top: 355px;
overflow: auto;
}

en in de tabel:

<tr>
<td height="565" align="left" background="afbeeldingen/content.png" id="content" style="width:492px;"><div id="textblock">
<p>&nbsp;</p>
</div>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan