XpLiCiT1414 Posted December 2, 2005 Share Posted December 2, 2005 (edited) 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 December 2, 2005 by Skemcin Link to comment Share on other sites More sharing options...
aspnetguy Posted December 2, 2005 Share Posted December 2, 2005 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 More sharing options...
XpLiCiT1414 Posted December 2, 2005 Author Share Posted December 2, 2005 That gave me a scroll bar on the bottom of the div to scroll left and right, But not one on the side when it overflowed. I entered style="overflow:auto" in the middle div. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now