Jump to content

XpLiCiT1414

Members
  • Posts

    2
  • Joined

  • Last visited

XpLiCiT1414's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. 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.
  2. 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;}
×
×
  • Create New...