SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question advice on a bit of code

    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:

    Code 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:

    HTML Code:
    <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 --------------->
    Last edited by SpacePhoenix; Oct 27, 2010 at 11:51.

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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");
    Knowledge is for the World. Get it. Love it. Share it.
    www.whatsthelatest.net

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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
    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

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    must be directory related. will keep messing w/it.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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 --------------->

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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 :-)

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,594
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  14. #14
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    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.
    :-)

  15. #15
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    but before I do it...Can anyone take a peek at this please? in the html doc
    Code:
    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
    Code:
     <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
    Last edited by spikeZ; Oct 28, 2010 at 06:00.

  16. #16
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ok if anyone would like to take a look.
    here is the URL

    http://www.danielamorescalchi.com/dl...tbagFreaks.htm

    main probs
    1. 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!

  17. #17
    SitePoint Enthusiast
    Join Date
    Mar 2009
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Knowledge is for the World. Get it. Love it. Share it.
    www.whatsthelatest.net

  18. #18
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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.

  19. #19
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

    Quote Originally Posted by Stevie D View Post
    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.

  20. #20
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Will do, thanks for checking. Still being bedeviled by form part making the sidebar disappears.

    Quote Originally Posted by zplitstonez View Post
    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.

  21. #21
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Stevie you da bomb! just fixed all of the <!-- comment --> tags & my side bar shows up. Sweet!
    Now off to fix everything else.
    Thanks!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •