Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times

    Question Looking for a little help.

    Hello all,

    First let me say I'm new here, and I would appreciate your help. I am currently taking Web Development courses as part of AAS in Computer Sciences and have gotten to a point where I don't know where I went wrong.

    The assignment I am doing involved making a separate css file for desktop and mobile views of the site.
    I believe that my error resides in one (or all) of these lines of code.

    Code:
    From the desktop css:
    h1 { text-indent:-99999px; }
    #header { background-color:#ccaa66; color:#000000; text-align:left; margin:0; background-image:url( ../../javajam/images/javalogo.gif ); background-position:center; background-repeat:no-repeat; height:100px; }
    
    From the mobile css:
    h1 { margin:0; text-indent:-99999px; }
    #header { background-image:url(../../javajam/images/javalogomobile.gif); background-repeat:no-repeat; background-position:center; height:80px; }
    
    and the html from the index.html:
    <div><h1 id="header">JavaJam Coffe House</h1></div>
    Any insight into what may be wrong would be greatly appreciated.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    So, what's it doing that it isn't supposed to?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times
    Sorry about that, it's not displaying the background image. The way the project directs me to do this is to remove the previous image I'd had (I did this), replace it with text in the <h1> tag (also did this), then use text-indent to hide the text but still make it available to screen readers (done), and code the image for both css versions into the #header id's (and done).

    As far as I can tell, I've done this correctly, yet the image doesn't display. My first thought was directory issue, but all of my other images display correctly.

    I have attached the entire folder here as well, hopefully this will help.
    Attached Files Attached Files

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You're running into a specificity issue. Put the text-indent in the #header declaration and take out the style block for h1
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times
    Ok doing that now displays my image, but it is set so far to the left of the page that it cuts some of it off.

  7. #6
    Member Stryke_the_Orc's Avatar
    Join Date
    Mar 2014
    Posts
    62
    Member #
    38674
    Liked
    4 times
    Solved my problem. I had orphaned code in my css that was causing my page to render incorrectly.

    Slithering from the nether regions of a twisted mind and tarnished soul


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com