SitePoint Sponsor

User Tag List

Results 1 to 25 of 25
  1. #1
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    block level inside an inline madness!

    take a look at:
    http://www.luxtechn.com/test/index.html

    you see the "home" hyperlink? yeah, that is completely messed up:
    <div id="navi">
    <a href="index.html" title="our homepage"><div id="home_on"></div></a>
    </div> <!-- end of navi -->

    i know i have a block level inside an inline right now, but it achieves what i need.

    i tried to have the <a> within the <div id="home_on">, but then the link is NOT clickable.

    then i tried changing the div to a span, but then it just disappears.

    i tried to put the id attribute on the <a>, but then the link isn't the EXACT size of the image.

    this is what i need:
    -i need the link area to be the exact same size as the image (img/home_on.jpg).
    -i CANT use an <img> within the <a> because i need to have the image as a background image in .css for :hover effect reasons. that drop shadow will represent which page is on or when user hovers over other areas in the navigation

    i can't figure out how to get this done WITHOUT doing what i am doing right now which is have a block level element (div) within an inline (a). i want my markup to be validated so i can't just leave it like this. someone please help!
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i tried to put the id attribute on the <a>, but then the link isn't the EXACT size of the image.
    Hi, All you need to do is set the #home_on ID on the anchor, then set that anchor as display:block in the CSS so it can take dimensions. As you know anchors are inline elements by default, but inline elements (except inline-block) can't take dimensions.

    Code:
    a#home_on {
        display:block;
        width: 66px;
        height: 28px;
        background: url(img/home_on.jpg) top left no-repeat;
    }
    Code:
    <div id="navi">
        <a id="home_on" href="index.html" title="our homepage"></a>
    </div> <!-- end of navi -->
    If that is the only link then it is ok to nest one anchor in a div like that because IE can have trouble with inline elements sitting on their own.

    From the looks of that div #navi I am guessing there will be more links. If so you should be using a UL with your anchors nested in LI items.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    -i CANT use an <img> within the <a> because i need to have the image as a background image in .css for :hover effect reasons. that drop shadow will represent which page is on or when user hovers over other areas in the navigation
    So you are going to have more links, then you need to use a UL like I mentioned above.

    You should also be using a sprite image on the anchor and just change the BG position on hover. That way the hover state is preloaded and it just changes position on hover.

  4. #4
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    So you are going to have more links, then you need to use a UL like I mentioned above.

    You should also be using a sprite image on the anchor and just change the BG position on hover. That way the hover state is preloaded and it just changes position on hover.
    thanks for all the help .

    but if i make the anchor a block won't that mess up the code i would need to lay it out horizontally?

    #navi ul li {
    display: inline;
    }

    i need that code so that "home" "about" "services" "contact" are laid out horizontally next to each other. is it ok to have the anchor "block" when the anchor that is going to be block will be inside a <li> that is "inline"? would this work and be valid xhtml 1.0? will the visual result be a navi that is laid out horizontally?

    also, concerning sprites: you just meant making two images stacked vertically (like two for "home" where one is drop shadow and one normal) into 1 image and then just switching from top-left to bottom-left on hover right?

    thanks again .

    (i have two questions here)
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i need that code so that "home" "about" "services" "contact" are laid out horizontally next to each other. is it ok to have the anchor "block" when the anchor that is going to be block will be inside a <li> that is "inline"?
    You would need to float the anchor left or right.
    Even though you set the LI to display:inline and it rendered as such, technically the LI would still be seen as display:list-item according to doctype rendering.

    Since you are dealing with images that have defined widths (and most likely different widths) I think you would be just as well to float both the LI and anchor. Then you can set widths on them to avoid the IE7 staircase bug.

    also, concerning sprites: you just meant making two images stacked vertically (like two for "home" where one is drop shadow and one normal) into 1 image and then just switching from top-left to bottom-left on hover right?
    Yes, a sprite image is a single image that has all states of the image. Depending on what your sprite image looks like, they are usually one single image that include all states of all the anchors in the nav menu.

    You will need to use background positions set as px values in that case.

    Let me see if I can find an example for you.

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Let me see if I can find an example for you.
    Here is a fairly simple horizontal sprite nav that works with images disabled. It is just using a very basic image with two states, it would look better if it had three states and then the #current LI item could get a different shade so it did not blend together with the other links on hover.

    Sprite Nav with Replacement Text

    Sprite navs can be hard to understand at first but once you understand how the BG positions change on hover then it all becomes clearer. You have to set up classes on your LI so you can target the BG positions.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I went ahead and updated the image and code with three states. It looks better now with the #current LI item.

  8. #8
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    I went ahead and updated the image and code with three states. It looks better now with the #current LI item.
    updated it? where?
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Probably on the link he posted (the c ode remains the same, he just reuploaded hte image)

    http://www.css-lab.com/demos/sprites/images/sprite.png

    The page is at post 6
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    freaking awesome!!!!

    cool let me play around with this and ftp the results when ready so people can take a look.

    thanks again.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  11. #11
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Here is a fairly simple horizontal sprite nav that works with images disabled. It is just using a very basic image with two states, it would look better if it had three states and then the #current LI item could get a different shade so it did not blend together with the other links on hover.

    Sprite Nav with Replacement Text

    Sprite navs can be hard to understand at first but once you understand how the BG positions change on hover then it all becomes clearer. You have to set up classes on your LI so you can target the BG positions.
    i can't get the navi to layout horizontally even after having the <li>, <a> on float: left...

    http://www.luxtechn.com/test/index.html

    please help, and any other issues regarding IE6 and 7 that you can add would be greatly appreciated. thank you.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I'll have to take a look at your page in a little while, I am busy at the moment.

    There is a little bit more to than what the first example showed. It only showed how to get the current page highlighted on the first list item. I took it a little further and set up the current page class for all the links.

    http://www.css-lab.com/demos/sprites...tate/home.html

    Have a look through that example and I will look at your page in a little while.

    Hope that helps for now

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SirFrigglesworth View Post
    i can't get the navi to layout horizontally

    http://www.luxtechn.com/test/index.html
    DId you fix this? The navigation is horizontal
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    There was no need for all those "off" classes in the nav. All you need to do is set up an "on" class for the current page and then set it on the anchor accordingly to each respective page.

    Also no need to wrap a div around the UL, just set an ID on the UL and float it left.

    Your nav should be as simple as this:

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>nav demo</title>
     
    <style type="text/css">
    #nav {
        float:left;
        width:276px;
        margin:0;
        padding:0;
        list-style:none;
        border:1px solid red;/*testing ul position*/
    }
    #nav li,
    #nav a {
        float:left;
        height:28px;
    }
    #home,
    #home a {width:66px;}
     
    #service,
    #service a,
    #contact,
    #contact a {width:80px;}
     
    #live,
    #live a {width:50px;}
     
    #home a {background: url(img/home_sprite.jpg) no-repeat 0 0;}
    #home a.on {background-position:0 100%;}
    #home a:hover {background-position:0 50%;}
     
    #service a {background: url(img/services_sprite.jpg) no-repeat 0 0;}
    #service a.on {background-position:0 100%;}
    #service a:hover {background-position:0 50%;}
     
    #contact a{background: url(img/contact_sprite.jpg) no-repeat 0 0;}
    #contact a.on {background-position:0 100%;}
    #contact a:hover {background-position:0 50%;}
     
    #live a {background: url(img/live_sprite.jpg) no-repeat 0 0;}
    #live a.on {background-position:0 100%;}
    #live a:hover {background-position:0 50%;}
    </style>
     
    </head>
    <body>
     
    <ul id="nav">
        <li id="home"><a class="on" href="index.html"></a></li>
        <li id="service"><a href="services.html"></a></li>
        <li id="contact"><a href="contact.html"></a></li>
        <li id="live"><a href="live.html"></a></li>
    </ul>
     
    </body>
    </html>

    Code:
    #home a {background: url(img/home_sprite.jpg) no-repeat 0 0;}
    #home a.on {background-position:0 100%;}
    #home a:hover {background-position:0 50%;}
    
    #service a {background: url(img/services_sprite.jpg) no-repeat 0 0;}
    #service a.on {background-position:0 100%;}
    #service a:hover {background-position:0 50%;}
    
    #contact a{background: url(img/contact_sprite.jpg) no-repeat 0 0;}
    #contact a.on {background-position:0 100%;}
    #contact a:hover {background-position:0 50%;}
    
    #live a {background: url(img/live_sprite.jpg) no-repeat 0 0;}
    #live a.on {background-position:0 100%;}
    #live a:hover {background-position:0 50%;}
    Code:
    <ul id="nav">
        <li id="home"><a class="on" href="index.html"></a></li>
        <li id="service"><a href="services.html"></a></li>
        <li id="contact"><a href="contact.html"></a></li>
        <li id="live"><a href="live.html"></a></li>
    </ul>

  15. #15
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here is a better version using the Gilder/Levin image replacement method. Your nav will still make sense for users with images disabled.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Friggle Nav with Replacement Text</title>
     
    <style type="text/css">
    #nav {
        float:left;
        width:276px;
        margin:0;
        padding:0;
        list-style:none;
        border:1px solid red;
    }
    #nav li {
        float:left;
        height:28px;/*widths are grouped on the IDs'*/
        position:relative;
    }
    #nav a {
        float:left;
        height:28px;/*widths are grouped on the IDs'*/
        text-decoration:none;/*style for disabled images*/
        text-align:center;/*style for disabled images*/
        font:bold 14px/28px arial,helvetica,sana-serif;/*style for disabled images*/
        color:#999;/*style for disabled images*/
    }
    #nav a:active,
    #nav a:focus,
    #nav a:hover {/*style for disabled images*/
        color:#555;
        background:#EEE;
    }
     
    /*=== Group all ID widths together ===*/
    #home,#home a,#home a span {width:66px;}
     
    #service,#service a,#service a span,
    #contact,#contact a,#contact a span {width:80px;}
     
    #live,#live a,#live a span {width:50px;}
     
    /*=== All span styles below (dimensions set above)===*/
    #nav a span {
        position:absolute;
        top:0;
        left:0;
        height:28px;
    }
    /*=== Set BG images on the spans (image replacement) ===*/
    #home a span {background: url(img/home_sprite.jpg) no-repeat 0 0;}
    #home a.on span {background-position:0 100%;}
    #home a:hover span {background-position:0 50%;}
     
    #service a span {background: url(img/services_sprite.jpg) no-repeat 0 0;}
    #service a.on span {background-position:0 100%;}
    #service a:hover span {background-position:0 50%;}
     
    #contact a span {background: url(img/contact_sprite.jpg) no-repeat 0 0;}
    #contact a.on span {background-position:0 100%;}
    #contact a:hover span {background-position:0 50%;}
     
    #live a span {background: url(img/live_sprite.jpg) no-repeat 0 0;}
    #live a.on span {background-position:0 100%;}
    #live a:hover span {background-position:0 50%;}
    </style>
     
    </head>
    <body>
     
    <p>Friggle Nav with Replacement Text</p>
     
    <ul id="nav">
        <li id="home"><a class="on" href="index.html">Home<span></span></a></li>
        <li id="service"><a href="services.html">Services<span></span></a></li>
        <li id="contact"><a href="contact.html">Contact<span></span></a></li>
        <li id="live"><a href="live.html">Live<span></span></a></li>
    </ul>
     
    </body>
    </html>

  16. #16
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    You sir are a styling beast machine! SitePoint strikes again-hahahahaha .

    http://www.luxtechn.com/test/index.html

    anyway, one last real quick question about the nav: you know how when the links are :active it has that red border around it? well, im trying to get rid of that so i tried:

    #nav a:active {
    outline: none;
    }

    that got rid of the red border when active, but instead had a navy color dotted border in its place. i don't want anything as a border when active. trying to go ultra minimalist in the design. thanks again man .

    googled and forumed around for a while, but couldn't find much other than "outline: none".
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Hi, this works for me?
    Code:
    #nav a:active{outline:0;}
    I had a red border on :active (not a navy)

    But your code (and mine) fixed it
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    There is one other thing you might consider doing differently.
    You have a large right margin on your #header and you are floating your ul#nav left.

    You could also just nest the UL inside the header and remove the float and width form the header.

    Code:
    #header {
      margin-top: 25px;
      margin-left: 3px;
      width: 379px;
      height: 41px;
      float: left;
      margin-right: 266px;
      background: url(img/header.jpg) top left no-repeat;
      display: inline; /* Doubled Float-Margin Bug Fix */
    }
    
    #header h1 {
      display: none;
    }
    
    /* navigation styling starts here */
    #nav {
        float:left;
    /*    width:276px;*/
        width:312px;
        list-style:none;
        margin-top:39px;
        position: relative;
        left: 6px;
    }
    It would be much simpler to remove the header right margin and just float the ul right. I see you are using RP on the ul to line up the text in the last list item. That's fine in this case since there are no other elements between the header and ul.

    Code:
    #header {
      margin: 25px 0 0 3px;
      width: 379px;
      height: 41px;
      float: left;
      background: url(img/header.jpg) top left no-repeat;
      display: inline; /* Doubled Float-Margin Bug Fix */
    }
    
    #header h1 {
      display: none;
    }
    
    /* navigation styling starts here */
    #nav {
        float:right;
        width:312px;
        list-style:none;
        margin-top:39px;
        position: relative;
        left: 6px;
    }

  19. #19
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, this works for me?
    Code:
    #nav a:active{outline:0;}
    I had a red border on :active (not a navy)

    But your code (and mine) fixed it
    yeah, it still gives the black dotted border in firefox when you release the left mouse button or right click on the link. not a big deal, but this is really bothering me.

    also, it appears briefly in IE when right clicked and after left clicking.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  20. #20
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    It would be much simpler to remove the header right margin and just float the ul right. I see you are using RP on the ul to line up the text in the last list item. That's fine in this case since there are no other elements between the header and ul.
    yeah, i floated it right now since the element (JS image) under it i clear: both.

    i caught that yesterday - it's just sometimes i get so lazy that i want to finish it as fast as possible and if it is already floated left i get so insanely lazy i don't even bother switching it. lol
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    I know how to activate the :active psuedo class, I'm just saying that nothing is appearing for me once I add that outline:0 code.

    I tested in Opera/FF. Are you sure cache isn't coming into play on your machine?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Just blend it in with the BG color.

    #nav a:active {outline:1px solid #FFF;}

  23. #23
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,752
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    ALso I feel you should know that by removing the outline (or rather, if doing Rays suggestion, hiding it) then you are removing an important accessibility feature for keyboard users because they will not be able to see what link they are on (unless they are clever and look at the status bar and put 2+2 together, assuming your links can do that) and they will be completely lost
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  24. #24
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I agree Ryan, I do not advocate removing outline either.
    yeah, it still gives the black dotted border in firefox when you release the left mouse button or right click on the link. not a big deal, but this is really bothering me.
    What you are seeing in FF is a:focus

    http://sonspring.com/journal/active-vs-focus-links
    http://host.sonspring.com/active-focus/

    If you really think you want to remove it then you can add a:focus in there for FF.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>test</title>
     
    <style type="text/css">
    #nav a:active,
    #nav a:focus {outline:0;}
    </style>
     
    </head>
    <body>
     
          <ul id="nav">
            <li id="home"><a href="#1" title="Lux homepage">home</a></li>
            <li id="service"><a href="#2" title="our services explained">service</a></li>
            <li id="contact"><a href="#3" title="our contact information">contact</a></li>
            <li id="live"><a href="#4" title="live and archived videos">live</a></li>
          </ul>
     
    </body>
    </html>

  25. #25
    SitePoint Zealot SirFrigglesworth's Avatar
    Join Date
    Aug 2009
    Location
    Chicago, IL
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, thanks all.
    "Death smiles at us all. All a man can do is smile
    back."

    -Gladiator


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
  •