getting better and my code has been working up to this point. was wondering if anyone can advise why.
The #mainFeature tag is not working. no background image appears. did check the links. Can anyone please advise?
thanks
In the css:
#pageContent{
margin: 0 240px 0 0;
border: 2px solid #b9d2e3;
background-color: #008080;
color: #000000;
}
#mainFeature{
background-image: url (footbagFreaks/Footbag Freaks_files/mainImg.jpg);
background-color: #112236;
color: #000000;
padding: 2em 2em 1 em 200px;
}
In the relative html:
<div id="pageContent"> <!--------content--------------->
<div id="mainFeature"> <!--------mainFeature--------------->
<h2> Simon Says </h2>
<p> New shoes, new moves and new outlook for the new season </p>
<p><a href=""> Read More </a></p>
</div> <!------- mainFeature end --------------->
hi good day,
please change your code:
background-image: url (footbagFreaks/Footbag Freaks_files/mainImg.jpg);
into
background-image: url(“footbagFreaks/Footbag Freaks_files/mainImg.jpg”);
Hi! thanks but it did not work. Also I am reading from a book and the code sample doesn’t have the quotation marks either. Double check to see if I left an open tag or a typo but could not find one.
what gets me is that it is just the #mainFeature that is not working.
thanks though.
to test just that bit I created two new notepad docs. one html & one css.
the css works the color & background color come in.
But the image is still not coming through. will double check for typos. but I tested it w/another img that already works in the document that that one doesn’t work either.
Make sure the image file path is correct for one thing :).
Try linking to the image using an absolute path instead of that relative one. You are probably calling the image from a wrong location
Another thing I tried:
I was able to place an image that was from a different directory. Just one folder removed.
I double checked my directory names for spelling.
this directory “footbagFreaksFiles” works in the html img src=“footbagFreaks/footbagFreaksFiles/logo.gif”
but not for the CSS background-image: url(footbagFreaksFiles/mainImg.jpg);
Can’t figure out why.
Will try again. do you mean wrong directory. I just tried & tried renaming the directory as well. like I mentioned the directory works fine for an html tag, but not of a css background-image tag
must be directory related. will keep messing w/it.
When you call images from a CSS file it’s relative to THAT file. Not the HTML file. So you’d need to update the CSS image path accordingly :).
THat’s your problem…probably
oh i got that, this is in the css file.
#mainFeature{
background-image: url(footbagFreaks/footbagFreaksFiles/mainImg.jpg);
background-repeat: no-repeat;
background-color: #ffffff;
color: #000000;
padding: 2em 2em 1 em 200px;
}
this in the calling html
<div id=“mainFeature”> <!--------mainFeature------->
<h2> Simon Says </h2>
<p> New shoes, new moves and new outlook for the new season </p>
<p class=“more”><a href=“”> Read More </a> </p>
</div> <!------- mainFeature end --------------->
Ok go to your CSS folder. Where you have the CSS file.
According to your CSS I can tell you wehre to go to find the image
There should be a folder in there that is “footbagFreaks”
GO in that folder. In THAT folder there should be a folder called “fotbagFreaksFiles”
Then the image should be there. If it’s not then readjust your file path.
Still try an absolute path to the image
http://www.sitehere.com/image.jpg
Reese! You Da Cheese! & I mean it in a good way like a lover of extra sharp chedddar & brie would (hmmmm goat cheese. ). But the directory is correct. Triple checked it. Will keep working it & if it is not fixed by tonight i will upload the html/css & post url too.
thank you though
We can have it fixed within the hour if you upload it now :).
But I will wait for it to be uploaded if you want to try and fix it yourself
let’s wait! It might be something really evident & if I catch it, it will really sink in & be a better learning moment for me. I love the help but hope I can figure it out. Crossing fingers.
but before I do it…Can anyone take a peek at this please? in the html doc
div id="sidebar"> <!------sidebar-------------->
<h3> Site Search </h3>
<form method="post" action="" id="searchform"> <!------form-------->
<div>
<label for="keywords"> Keywords </label>
<input type="text" name="keywords" id="keyworkds" />
</div>
<div>
<input type="submit" name="btnSearch" id="butSearch" />
</div>
</form> <!---------- form--------------->
<h3> Coming Events </h3>
<ul>
<li>10 apr 06-<a href=""> Seattle</a></l1>
<li>13 apr 06-<a href=""> world cup-Round 8 </a></l1>
<li>21 apr 06-<a href=""> FootbagOOM</a></l1>
<li>28 apr 06-<a href=""> WFPA AGM</a></l1>
<li>03 may 06-<a href=""> world cup-Round 9</a></l1>
</ul>
<h3> Move of the month </h3>
<h4> Outer Stall </h4>
<p> adslfkjdsa;lkfja;sdlkfj;sadlkfj;ldksafj;lsakdfj;laksdjf;lskadjf;</p>
<p><a href="">More </a></p>
</div> <!---sidebar End-------------->
If i take out the form part
<form method="post" action="" id="searchform"> <!------form-------->
<div>
<label for="keywords"> Keywords </label>
<input type="text" name="keywords" id="keyworkds" />
</div>
<div>
<input type="submit" name="btnSearch" id="butSearch" />
</div>
</form> <!---------- form--------------->
the list info displays if I put the form part back in it is cut off at “site search”
I do not see any open tags & don’t see how the form div is affecting the entire sidebar div
Ok if anyone would like to take a look.
here is the URL
http://www.danielamorescalchi.com/dlmWeb/footbagFreaks/footbagFreaks.htm
main probs
- background image not showing up
background-image: url(footbagFreaksFiles/blueMarble.jpg);
the form method makes a chunk of the text dissaper on the sidebar at the right.
thank you!
I have checked your site and i can see that the background image that you want to load doesn’t exist. It gives a 404 error. Please upload the image to the root directory of your site.
Hope it helps.
There are a couple of little things wrong with the code you’ve posted. eg </l1> instead of </li>, typo in ‘id=“keywords”’.
I think what’s going to be causing the problem, though, is the incorrect way you’ve written comments.
The right form is <!-- comment here –> with just two dashes before and after. Having multiple dashes is likely to confuse browsers as to exactly where the comment starts and ends.
Stevie thank you for taking the time to look, preciate it & corrected the <l1>, thanks also for mentioning the <!-- comment –> tag info. I addeded the extra dashes to make it more obvious & visible to me as I am learning, did not know it might cause probs.
However i did fix the <li></li> but the side bar part is still not showing up. will work more throught out the day & upload a new url this afternoon.
cheers
Daniela
Will do, thanks for checking. Still being bedeviled by form part making the sidebar disappears.