Jump to content

Why isn't this working?

Kelsie

By Kelsie
in CSS

Recommended Posts

Kelsie Newbie

Kelsie

Posted
Posted

I am using this as my HTML:<div id="sliverbg"><img src="SSC BACKGROUND SLIVER W SIDE NAV copy.jpg" alt="sidenavsliver" longdesc="SSC BACKGROUND SLIVER W SIDE NAV copy.jpg"></div>and this CSS:#sliverbg{background-repeat:repeat-x;}The #sliverbg is having no affect on the image. I'm sure it's something obvious, but I am new so thanks so much for any help!!

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

Thanks for the reply!Why isn't it working now? The image shows up in DW but not in the web preview. It isn't repeating either :) Thank you!!CSS:#sliverbg{ background-image: url (SSC%20BACKGROUND%20SLIVER%20W%20SIDE%20NAV%20copy.jpg); background-repeat: repeat-x; }HTML:<div id="sliverbg"></div>

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

I appreciate your help! But now I don't see anything :)CSS:#sliverbg{ background-image: url(SSC%20BACKGROUND%20SLIVER%20W%20SIDE%20NAV%20copy.jpg); height:41px; width:985px; background-repeat: repeat-x;}HTML:<body><div id="sliverbg"></div></body>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

i suggest you remove the spacing in the image file or replace with hyphens, make sure the name of the file matches exactly(uppercase and lowercase characters) what is entered for the background image, and make sure html page and image are in the same location.Edit: Another thought I suppose you are putting css styling between tags<html><head><title>My Page</title><style type="text/css">#sliverbg{background-image: url(SSC-BACKGROUND-SLIVER-W-SIDE-NAV-20copy.jpg);height:41px;width:985px;background-repeat: repeat-x;}</style></head><body><div id="sliverbg"></div></body></html>

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Well, I've learned something. I really hated seeing all those encoded space characters in kelsie's URL, so I experimented (just with Firefox). Turns out a filename with a space cannot be read correctly using this format:url(file name.ext)But these two work:url(file%20name.ext)url("file name.ext")I mention this academically, not because I think it will solve anything. AFAIK, it remains best practice not to use spaces in file names. Use a hyphen or underscore, as dsonesuk suggests.(But do explore the filepath question.)

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

i know dreamweaver usually inserts images into a images folder, so it would be background-image: url(images/SSC-BACKGROUND-SLIVER-W-SIDE-NAV-20copy.jpg); If it is using external stylesheet and the css stylesheet is in the same location as the html page, the reference would be exactly the same, if it was in a folder called 'css' which is also in same location as html file then it would be background-image: url(../images/SSC-BACKGROUND-SLIVER-W-SIDE-NAV-20copy.jpg);it would help to see the whole html code.

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted
i know dreamweaver usually inserts images into a images folder, so it would be background-image: url(images/SSC-BACKGROUND-SLIVER-W-SIDE-NAV-20copy.jpg); If it is using external stylesheet and the css stylesheet is in the same location as the html page, the reference would be exactly the same, if it was in a folder called 'css' which is also in same location as html file then it would be background-image: url(../images/SSC-BACKGROUND-SLIVER-W-SIDE-NAV-20copy.jpg);it would help to see the whole html code.
I really appreciate everyone's help! Thanks!I renamed the file with no spaces and it didn't have an effect (as far as making it work).Maybe someone can explain this to me: in DW in the css, it doesn't seem to pick up on ID's styles that I write, they don't show in the styles panel when I select the ID. However, if I use the 'add a property' link and do it that way, the images show up. Even though the code DW just put in there was identical to mine...?BUT, even when I do it via 'add a property' I cannot get the image to repeat vertically (you'll see in the code that I just used the div for it multiple times. Not ideal though, right? 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="sliverbg"></div><div id="sliverbg"></div><div id="sliverbg"></div><div id="sliverbg"></div><div id="sliverbg"></div><div id="sliverbg"></div><div id="sliverbg"></div><div id="bottomnavsliverbg"></div><div id="footer"></div></center></body></html>

CSS:

/***********************************************//* 2col_leftNav.css                            *//* Use with template 2col_leftNav.html          *//***********************************************//* 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(../../swirl_bg.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;}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/SSC TOP BANNER copy.jpg)	height: 470px;	width: 985px;	background-image: url(../Images/SSC%20TOP%20BANNER%20copy.jpg);	background-repeat: no-repeat;	height: 470px;}	#topnavsliverbg{	background-image: url(../Images/SSC%20SIDE%20NAV%20TOP.jpg);	background-repeat: no-repeat;	width: 985px;	height: 41px;}#sliverbg{	background-image: url(../Images/SSCBACKGROUNDSLIVERWSIDE%20NAVcopy.jpg);        background-repeat: repeat-x;	width: 985px;	height: 41px;	bottom: 20px;}#bottomnavsliverbg{	background-repeat: no-repeat;	background-image: url(../Images/sidenavbottom.jpg);	height: 44px;	width: 985px;}#footer{	background-image: url(../Images/SSC%20FOOTER%20copy.jpg);	background-repeat: no-repeat;	height: 98px;	width: 985px;	margin-bottom: 20px;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Right! first off, id reference can only be used once within a page, you would use classes to use multiple times within a page.according to your html and css you have a folder to hold your html page, a CSS folder, and finally a Image folder, stacking below each other. yes!when you enter id=" you are given the option to select id references already created, if your new css id is not shown, you would select 'refresh style list' then by selecting an id it would insert the id ref with a closing quote.the %20 is a code for space so you still have a space within the file namebackground-image: url(../Images/SSCBACKGROUNDSLIVERWSIDE%20NAVcopy.jpg);

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted
Right! first off, id reference can only be used once within a page, you would use classes to use multiple times within a page.according to your html and css you have a folder to hold your html page, a CSS folder, and finally a Image folder, stacking below each other. yes!when you enter id=" you are given the option to select id references already created, if your new css id is not shown, you would select 'refresh style list' then by selecting an id it would insert the id ref with a closing quote.the %20 is a code for space so you still have a space within the file namebackground-image: url(../Images/SSCBACKGROUNDSLIVERWSIDE%20NAVcopy.jpg);
I'm not sure I understand what you mean about id reference. I thought the '#' denoted a unique element that is used once, like with my layout images here.Got rid of spaces! Thanks.Ok...now here's what I have: However, the 'sliverbg' still won't repeat :)
/***********************************************//* 2col_leftNav.css                            *//* Use with template 2col_leftNav.html          *//***********************************************//* 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)}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%20copy.jpg);	width: 985px;	height: 470px;	background-repeat: no-repeat;}	#topnavsliverbg{	background-image:url(../Images/SSCSIDENAVTOP.jpg);	width:985px;	height:41px;	background-repeat: repeat-x;}#navbgsliver{	background-image: url(../Images/SSCBACKGROUNDSLIVERWSIDE%20NAVcopy.jpg);	height: 41px;	width: 985px;}#bottomnavsliverbg{	background-image:url(../Images/sidenavbottom.jpg);	height:44px;	width:985px;}#sliverbg{	height: 41px;	width: 985px;	background-image: url(../Images/SSCBACKGROUNDSLIVER%20copy.jpg);	}#footer{	background-image:url(../Images/SSCFOOTERcopy.jpg);	background-repeat:no-repeat;	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><div id="footer"></div></center></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

you say you have removed the space from image file, but the background-image: url still references an image with a space in it?

Ok...now here's what I have: However, the 'sliverbg' still won't repeat
So the images are showing now, but not repeating? yes!lets start from scratch.1) remove all spacing from image files used, OR replace with hyphen OR underscore.2) when you have finished renaming the files make sure the background-image url image reference reflect the changes you have made, you should not have ANY %20 within the file name, as these have now been removed or replaced.
Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted
you say you have removed the space from image file, but the background-image: url still references an image with a space in it?So the images are showing now, but not repeating? yes!lets start from scratch.1) remove all spacing from image files used, OR replace with hyphen OR underscore.2) when you have finished renaming the files make sure the background-image url image reference reflect the changes you have made, you should not have ANY %20 within the file name, as these have now been removed or replaced.
Wow I don't know how I missed my other images last time haha. But now that's done and updated-no more spaces! Thanks! Still no repeating background image though. :)
/* 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: 41px;	width: 985px;	background-repeat: repeat-x;}#bottomnavsliverbg{	background-image:url(../Images/SSCSIDENAVBOTTOM.jpg);	height:44px;	width:985px;}#sliverbg{	height: 41px;	width: 985px;	background-image: url(../Images/SSCBACKGROUNDSLIVER.jpg);	}#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><div id="footer"></div></center></body></html>

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

It's not online...not entirely sure how to do that just yet. Here is a screen shot of the DW preview in FFs6kw3n.jpg

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

This is the one I need to repeat:2gtt6r8.jpg

Link to comment
Share on other sites
Fmdpa Dedicated Member

Fmdpa

Posted
Posted

Just as I tip, you can write your background out in shorthand. The syntax is...

elem {	background:color image repeat attachment position; /*...sample:...*/	background: url(....) repeat-y center top; /*color property omitted*/ }

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

usually you would let content determine the height of container with repeated image as belowcss

#sliverbg { background: transparent url(../Images/2gtt6r8.jpg) repeat-y center top;width: 985px;overflow:hidden; /*this is important this container won't encompass the floated elements without it */}#sliverbg #col1{width:185px; float:left; margin-left:83px;}#sliverbg #col2{width:625px; float:right; margin-right:65px;}

html

<div id="sliverbg">	<div id="col1">	  <p>Lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Eu fugiat nulla pariatur. Velit esse cillum dolore quis nostrud exercitation qui officia deserunt. Duis aute irure dolor ut labore et dolore magna aliqua.</p>	 </div>	<div id="col2">	  <p>Sed do eiusmod tempor incididunt ut enim ad minim veniam, duis aute irure dolor. Lorem ipsum dolor sit amet, cupidatat non proident, sunt in culpa. Consectetur adipisicing elit, sed do eiusmod tempor incididunt mollit anim id est laborum.</p>	  <p>Quis nostrud exercitation ut labore et dolore magna aliqua. Ullamco laboris nisi lorem ipsum dolor sit amet, in reprehenderit in voluptate. Qui officia deserunt eu fugiat nulla pariatur.</p>	  <p>Ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, sed do eiusmod tempor incididunt consectetur adipisicing elit. Sunt in culpa qui officia deserunt ullamco laboris nisi. Duis aute irure dolor lorem ipsum dolor sit amet, velit esse cillum dolore.</p>	  <p>Sed do eiusmod tempor incididunt quis nostrud exercitation cupidatat non proident. Duis aute irure dolor ullamco laboris nisi sunt in culpa. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>	</div></div>

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

Ah! That makes sense! Thank you both so much!!!!dsonesuk, I don't think I understand the css example. What are the #col1 and #col2 for?

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

Here's what I got:

/* 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 bottom;	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>

FF Preview:2sbq4j7.jpgMaybe this is why? I still don't get why it doesn't pick up on all properties if it's pasted or typed...?i2r6l3.jpgThanks again for all your help!!

Link to comment
Share on other sites
Kelsie Newbie

Kelsie

Posted
  • Author
Posted

How would I preview it without using DW?

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...