Jump to content

Scrolling inside a div


XpLiCiT1414

Recommended Posts

OK I am pretty well off with html and so-so with styles....but I can't seem to get this right. I've read it in other topics already and have tried some stuff but I still need help. Here it goes:Ok i have my main page and it links back to my css page. I want the top and left div's to stay the same and the middle div to change when i click on a link....basically i want the page to load inside the middle div. I also want the middle div to be able to scroll up and down. Any info will help. thanx. Below are copies of my index page and the css it links tooIndex.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head><title>Urban Swagger</title><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><script language="JavaScript"><!--function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }}function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } }}function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if© for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null;}// --></script><embed src="http://users.electrocity.ca/dru/Music/Ludacris%20-%20Red%20Light%20District%20-%2013%20-%20Pimpin'%20All%20Over%20The%20World.mp3" autostart="true" loop="false" volume="100%" height="0" width="0"><link rel="stylesheet" type="text/css" href="style.css" /></head><body bgcolor="black" onload="FP_preloadImgs(/*url*/'button7.jpg', /*url*/'button8.jpg', /*url*/'button16.jpg', /*url*/'button17.jpg', /*url*/'button22.jpg', /*url*/'button23.jpg', /*url*/'button25.jpg', /*url*/'button26.jpg', /*url*/'button28.jpg', /*url*/'button29.jpg', /*url*/'button2B.jpg', /*url*/'button2C.jpg')"><div id="top"></div><div id="wrapper"><!--  	LEFT COLUMN      --><div id="left" style="width: 199px; height: 113px"><a href="http://www.urbanswagger.com/"><img border="0" id="img1" src="button6.jpg" height="20" width="100" alt="Home" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Home" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button7.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button6.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button8.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button7.jpg')"></a><br><br><a href="http://www.urbanswagger.com/articles.html"><img border="0" id="img2" src="button15.jpg" height="20" width="100" alt="Articles" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Articles" onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button16.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button15.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button17.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button16.jpg')"></a><br><br><a href="http://www.urbanswagger.com/artists.html"><img border="0" id="img4" src="button24.jpg" height="20" width="100" alt="Artists" onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button25.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button24.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button26.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button25.jpg')" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Artists"></a><br><br><a href="http://www.urbanswagger.com/clothing.html"><img border="0" id="img3" src="button21.jpg" height="20" width="100" alt="Clothing" onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'button22.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'button21.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'button23.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'button22.jpg')" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Clothing"></a><br><br><a href="http://www.urbanswagger.com/authors.html"><img border="0" id="img5" src="button27.jpg" height="20" width="100" alt="Authors" onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'button28.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'button27.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'button29.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'button28.jpg')" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Authors"></a><br><br><a href="http://www.urbanswagger.com/contact.html"><img border="0" id="img6" src="button2A.jpg" height="20" width="100" alt="Contact Us" fp-style="fp-btn: Embossed Capsule 4; fp-bgcolor: #000000" fp-title="Contact Us" onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button2B.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button2A.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button2C.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button2B.jpg')"></a></div><!--  	MIDDLE COLUMN  	--><div id="middle" style="width: 555px; height: 102px"><br><h1 style="color:red"><b>Urban Swagger</b></h1><p style="color:red">This is a website dedicated to bringing you the latest in music, artists, and clothing. </p></div><!--  RIGHT COLUMN    	--><div id="right"></div><!--DO NOT ERASE THE NEXT PART--><div class="clear"></div></div><!--                                 FOOTER                             --><div id="footer"><p class="footer"><a href="http://validator.w3.org/check?uri=referer">Xhtml Valid</a> | <a href="http://jigsaw.w3.org/css-validator/validator-uri.html">CSS Valid</a> | © 2005 Urban Swagger<br />Design by Sam Grooms</p></div></body></html>

CSS:

/****************************************************************************************************************************************Welcome to the CSS for Relic, coded by Kevin Cannon.The CSS is pretty straight forward. There are a fewsmall hacks however, with one line controlling firefoxand the other IE. These are clearly labled. If you needany help with the template, email me at kmcannon@telus.net**************************************************************************************************************************************/body  {	margin:0;	padding:0;	font-family:verdana, arial, times, georgia, sans-serif;}a {	color:#59BF3F;	text-decoration:none;}a:hover {	color:#40A7D6;	text-decoration:underline;}img.left {	float:left;	padding:3px;	margin-right:6px;	border:1px solid #c4c4c4;}img.right {	float:right;	padding:3px;	margin-right:6px;	border:1px solid #c4c4c4;}img:hover {	border:1px solid #4BA9E9;	background:#EbF1F5;}#wrapper {	height:100%;	margin:auto;	width:90%;}/********************* Search form  ******************/.text {	height:14px;	width:110px;}.go {	height:21px;	background:#65A8C9;	color:#fff;	font-family:helvetica;	font-weight:bold;}/***************** TEXT IN THE HEADER **************************/#top h1 {	font-family:Century Gothic, georgia, helvetica, times, sans-serif;	font-weight:normal;	font-size:35px;	text-transform:uppercase;	margin-top:20px;	margin-left:10px;	}/*************************** HEADER PROPERTIES ************************/#top {	margin:auto;	padding:10px;	height:70px;	background:url(http://www.urbanswagger.com/images/urbanswagger62.bmp) no-repeat top center; 	width:93%;	}	/************************ LEFT SIDE COLUMN *****************/#left {	float:left;	left:0px;	padding:10px;	width:22%;	}	#left h1, #right h1 {	font-size:15px;	padding-top:5px;	font-family:helvetica, arial, georgia, times, sans-serif;	border-bottom:1px dotted #c4c4c4;}#left p {	font-size:10px;	padding-bottom:10px;	margin-top:-3px !important; /*****  FIREFOX  *****/	margin-top:-14px;             /***** INTERNET EXLORER *****/	color:#404040;}	/************************** MAIN CONTENT IN MIDDLE ******************/#middle {	float:left;	width:46%;	line-height:1.01em;	padding-left:3.5%;	padding-right:3.5%;}	#middle p, p {	font-size:11px;	color:#404040;}#middle h1 {	font-family:"Century Gothic", verdana, arial, times, sans-serif;	font-size:21px;	font-weight:normal;	border-bottom:1px solid #c4c4c4;	padding-bottom:3px;}/***************************  RIGHT COLUMN  *********************/#right {	float:left;	padding-top:10px;	font-size:11px;	width:22%;	line-height:1.6em;}#right a {	line-height:1em;}#right br {	line-height:0.7em;}/********************* THIS IS IMPORTANT. DONT ERASE OR MESS WITH IT ***********************/.clear {	clear:both;	line-height:0;	margin:0;	padding:0;	}/*************************** OK *********//********************************************    FOOTER  *****************/#footer {	border-top:1px solid #c4c4c4;	padding-top:5px;	text-align:center;	width:90%;	margin:auto;}.footer {	margin-top:-2px;}	

Edited by Skemcin
Link to comment
Share on other sites

ok i looked at your middle div (id=middle)..You set the width for it in your CSS (#middle) to 46% (width:46%) but then insert inline CSS to set the width to 555px.Why????Anyways the scrolling part is easy, you have defined the dimensions of the div in your inline CSS (width and height).you can add to the inline or your css file, it doesn't matter, the followingoverflow:autoThat's it. It should scroll when the content is too big for your middle div.As far as loading a page in the middle div you will either have to make many pages the same but with having different middle divs or use an iframe in the middle div.cheers

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...