Jump to content

Why isn't this working?

Kelsie

By Kelsie
in CSS

Recommended Posts

thescientist w3schools Guru

thescientist

Posted
Posted
How would I preview it without using DW?
open the file in web browser. similar to how everyone else is going to look at it. Double clicking on it should work too. If not, File -> open File in any browser should let you browser your local file system and open it up that way. For real development, you should always be previewing through a (few) web browser(s).
Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted
open the file in web browser. similar to how everyone else is going to look at it. Double clicking on it should work too. If not, File -> open File in any browser should let you browser your local file system and open it up that way. For real development, you should always be previewing through a (few) web browser(s).
Looks the same when I do it that way as well. :/ Hmm
Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

Ok!Banner: http://i53.tinypic.com/1y6ag4.jpgBackground sliver (top of nav bar): http://i52.tinypic.com/6steol.jpgBackground sliver (with nav bar): http://i53.tinypic.com/15xd1u.jpgBackground sliver (bottom of nav bar): http://i56.tinypic.com/2yv6ng4.jpgBackground sliver (no nav bar): http://i54.tinypic.com/2j1saxu.jpgFooter: http://i51.tinypic.com/2gtvtkm.jpg

/* RESET */html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0px; padding: 0px; }h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { font-weight: normal; font-style: normal; }ul,ol,li { list-style: none; }fieldset,img { border: none; }caption,th { text-align: left; }table { border-collapse: collapse; border-spacing: 0; }/***********************************************//* HTML tag styles                             *//***********************************************/ body{   	font-family: Arial, Helvetica, sans-serif;	line-height: normal;		margin: 0px;	padding: 0px;	background-image:url(../Images/SWIRL_BG.jpg?q=tbn:ANd9GcTp-bZgjcL-KVsK-Gdeub2c59PniTkfVsb1ZdizjbwzF606dlPrtQ);}a:link, a:visited, a:hover {	color: #FFFFFF;	text-decoration: none;}a:hover {	text-decoration: underline;}/* overrides decoration from previous rule for hovered links */h1, h2, h3, h4, h5, h6 {  }h1{  font-family:"Courier New", Courier, monospace; font-size: 100%; color:black; align:right;}h2{ font-size: 114%; color: #000000;}h3{font-family:Arial, Helvetica, sans-serif;color:black;}ul{ list-style-type: square;}ul ul{ list-style-type: disc;}ul ul ul{ list-style-type: none;}			/***********************************************//* Layout Divs                                 *//***********************************************/#topbanner{	background-image: url(../Images/SSCTOPBANNER.jpg);	width: 985px;	height: 470px;	background-repeat: no-repeat;}	#topnavsliverbg{	background-image:url(../Images/SSCSIDENAVTOP.jpg);	width:985px;	height:41px;}#navbgsliver{	background-image: url(../Images/SSCBACKGROUNDSLIVERWSIDENAV.jpg);	height: 400px;	width: 985px;	background-repeat: repeat-y;}#bottomnavsliverbg{	background-image:url(../Images/SSCSIDENAVBOTTOM.jpg);	height:44px;	width:985px;}#sliverbg {	background: transparent url(../Images/2gtt6r8.jpg) repeat-y center top;	width: 985px;	overflow:hidden;}#sliverbg #NavCol{width:185px; float:left; margin-left:83px;}#sliverbg #ContentCol{width:625px; float:right; margin-right:65px;}#footer{	background-image:url(../Images/SSCFOOTER.jpg);	height:98px;	width:985px;	margin-bottom:20px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Sativa Skin Care Home Page</title><link href="../CSS/HomePage_StyleSheet.css" rel="stylesheet" type="text/css" /></head><body><center><div id="topbanner"></div><div id="topnavsliverbg"></div><div id="navbgsliver"></div><div id="bottomnavsliverbg"></div><div id="sliverbg">    <div id="NavCol">      <p>This text will take up space and make this expand accordingly. This text will take up space and make this expand accordingly.</p>     </div>    <div id="ContentCol">      <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p>      <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p>      <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p>    </div></div><div id="footer"></div></center></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Well i don't know whats causing your problem, as it work perfectly well in all browsers. I suppose you have cleared browser cache and then reloaded page.here what i ended up with, i commented out sliverbg, it still worked, but it seemed more appropriate to have text in the navbgsliver, i changed ContentCol and NavCol to classes so i could use them in both.html 

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sativa Skin Care Home Page</title> <link href="../CSS/HomePage_StyleSheet.css" rel="stylesheet" type="text/css" /> </head>  <body> <center> <div id="topbanner"></div>  <div id="topnavsliverbg"></div>  <div id="navbgsliver"> <div class="NavCol"> <p>This text will take up space and make this expand accordingly. This text will take up space and make this expand accordingly.</p> </div> <div class="ContentCol"> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> </div></div>  <div id="bottomnavsliverbg"></div>  <!--<div id="sliverbg"> <div class="NavCol"> <p>This text will take up space and make this expand accordingly. This text will take up space and make this expand accordingly.</p> </div> <div class="ContentCol"> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> <p>This text will take up space and make this expand accordingly.This text will take up space and make this expand accordingly.</p> </div>  </div>-->  <div id="footer"></div>  </center> </body> </html>

css

    /* CSS Document  /* RESET */ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset ,input { margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { font-weight: normal; font-style: normal; } ul,ol,li { list-style: none; } fieldset,img { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; }  /***********************************************/ /* HTML tag styles */ /***********************************************/  body{  font-family: Arial, Helvetica, sans-serif; line-height: normal; margin: 0px; padding: 0px; background-image:url(../Images/bgimage.jpg); }  a:link, a:visited, a:hover { color: #FFFFFF; text-decoration: none; }  a:hover { text-decoration: underline; } /* overrides decoration from previous rule for hovered links */  h1, h2, h3, h4, h5, h6 { }  h1{  font-family:"Courier New", Courier, monospace; font-size: 100%; color:black; /*align:right; invalid */ text-align: right; }  h2{ font-size: 114%; color: #000000; }  h3{ font-family:Arial, Helvetica, sans-serif; color:black;  }  ul{ list-style-type: square; }  ul ul{ list-style-type: disc; }  ul ul ul{ list-style-type: none; }   /***********************************************/ /* Layout Divs */ /***********************************************/  #topbanner { background-image: url(../Images/1y6ag4.jpg); width: 985px; height: 470px; background-repeat: no-repeat; }  #topnavsliverbg { background-image:url(../Images/6steol.jpg); width:985px; height:41px; }  #navbgsliver{ background-image: url(../Images/15xd1u.jpg); /*height: 400px;*/ min-height:400px; width: 985px; background-repeat: repeat-y; overflow:hidden; }  #bottomnavsliverbg { background-image:url(../Images/2yv6ng4.jpg); height:44px; width:985px; }  #sliverbg { background: transparent url(../Images/2gtt6r8.jpg) repeat-y center top; width: 985px; overflow:hidden; }  .NavCol{width:185px; float:left; margin-left:83px;} .ContentCol{width:625px; float:right; margin-right:65px;}  #footer { background-image:url(../Images/2gtvtkm.jpg); height:98px; width:985px; margin-bottom:20px; }

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...