Thread: Some questions

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2

    Some questions


    I am making a website for a homework assignment and have some "is it possible" questions.

    First, each section has a link back to top. I was thinking of using CSS to replace the words "return to top" with an image of an up arrow, that way if for whatever reason a browser can't display the image, the text is still there. However I noticed that when I indent the text outside of the box so it can't be seen anymore, the link of course goes too. Is there a way to use CSS to make an image a link? Here is the code I'm using for the text replacement image:
    .linktop {
    width: 50px;
    height: 50px;
    background-image: url('images/top.png');
    text-indent: 100%;
    white-space: nowrap;
    overflow:hidden;
    }

    Next question, we have to include a resume on the page. I would like it setup so the title and company are left aligned, the years are right aligned on the same line, and the job description takes up 100% of the width underneath of the title/year. Is there a way to float classes, so all of the name info always goes to the left and the year always goes to the right, or do I have to do a separate id for each job?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    I figured out the first question, had to apply the class to the link itself, not the paragraph containing the link.

    Still wondering about the floating classes though.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    Welcome to DevShed Forums, me10lee83, and congratulations on figuring out the first one for yourself.

    Still wondering about the floating classes though.
    What have you tried? There's more than one way to do that.

    When posting code, please place it between [code][/code] tags.
    If you want to use the button to add the tags, paste the code in the textarea and then select it before clicking the button (so you don't get the problematic JavaScript prompt dialog).

    do I have to do a separate id for each job?
    That's unlikely to be needed for styling purposes unless you wanted to do something like set a different fixed width for each.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    I went the separate id for each job title/year/description for now, but I'll go back and try one class for all of them and see how it works out when I get a chance and post here about any problems I have. I didn't try it before because I was concerned that it might end up overlapping or the order get mixed up, just wanted to get it working first can make the code cleaner/easier after that.

    Another problem I'm having is turning off bullets for one specific unordered list. I have "list-style-type: none;" for the div id, but it's still there. Below is the CSS and html codes. I tried doing it for both the id and class, also tried giving the ul itself an id and applying the list-style: none" to that, but it still has the bullet I defined for all unordered lists earlier. If you need to see the full files let me know and I can PM them.

    Code:
    #navigation {
       font-size: 12pt;
       color: #2F8154;
       float:left;
       width: 10%;
       list-style-type: none;
      }
    Code:
    <div id="navigation" class="nav">
    	<h2>Table of contents</h2>
    		<ul>
    			<li><a href="#bio">Biography</a></li>
    			<li><a href="#resume">Resume</a></li>
    			<li><a href="#personal">Personal Info</a></li>
    			<li><a href="#five">5 more things</a></li>
    			<li><a href="#links">Links</a></li>
    		</ul>
       </div>
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    I'm glad to see you're using a list to mark up your navigation.

    Some CSS properties are inherited. Others aren't. (A great place to check is the CSS2.1 property table) You need to set "list-style-type" directly on the list (or the list-items). If that doesn't work, then you probably have a selector specificity issue, so it's being overridden by another rule.
    You can use Firebug for Firefox or the DOM inspector tool built-into your browser to see which rules are being applied to the list. If you would like help diagnosing that, we will need to see more of your code. New members have an initial probation period where they aren't allowed to send PMs (until they have made 10 posts).
    Code:
    #navigation {
       font-size: 12pt;
       color: #2F8154;
       float:left;
       width: 10%;
      }
    #navigation ul {
       list-style-type: none;
      }
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Thanks for the fast reply. I tried:

    Code:
    #navigation ul {
       list-style-type: none;
      }
    but same thing, so added an id of nav_list directly to the list and then changed the rule to

    Code:
    #nav_list ul {
      list-style-type: none;
     }
    but same thing. I tried Firebug (screenshot url below) and am not sure why it's not working still. My only guess is it's inherting the custom bullet image, but turning bullets off all together I'd think would over-ride that...

    https://picasaweb.google.com/lh/photo/oCisOe-OcsTSyKd7k4VpfnuxufN1Ljd0goENk9xZTl8?feat=directlink
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    873
    Rep Power
    275
    From your image, look at that UL property with the "list-style-image" rule.....that is probably what you are seeing.
    so, try setting "list-style-image" to none on your #nav_list ul{} and see if that works.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,126
    Rep Power
    4304
    "#nav_list ul" means a list that's a descendant of an element with the ID "nav_list", so that won't match the list that has that ID. The "#navigation ul" rule should work.

    I recommend you use the CSS validator to make sure that an error isn't causing it to not work. (Under "more options", make sure the "Profile" is set to "CSS level 3" and set "Vendor Extensions" to "Warnings".)

    Comments on this post

    • DonR agrees : wow, thats right :oops thats what Iget for trying to help when my mind was on something else
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Got it thanks. I had to set list-style-image to none AND list-style-type to none
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    31
    Rep Power
    2
    Thanks for all the help so far. I tried using classes instead of ids for my resume as I asked in the first post and it worked great.

    Only issue is I have line breaks in the html so if CSS doesn't render, the job title/company is on a different line than the years. The two columns are lining up properly on the left and right sides of the screen now, but the year is one line lower because of that line break.

    I found the following:

    Code:
    br {
    display: none;
    }
    which works for the entire document but it doesn't seem to work if I try for a class/id only. I've managed to work around disabling line breaks in the entire page, didn't have that many outside of the resume anyway, but I'm curious if that should be able to be applied to a particular section only. (Or applied to the whole document then "undone" for other sections)

IMN logo majestic logo threadwatch logo seochat tools logo