Block level inside an inline madness!

SirFrigglesworth · May 23, 2010, 4:25am

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!

RyanReese · May 24, 2010, 10:35pm

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

SirFrigglesworth · May 24, 2010, 6:07pm

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.

SirFrigglesworth · May 24, 2010, 6:26pm

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

Rayzur · May 24, 2010, 10:29pm

Just blend it in with the BG color.

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

RyanReese · May 24, 2010, 1:44pm

Hi, this works for me?


#nav a:active{outline:0;}

I had a red border on :active (not a navy)

But your code (and mine) fixed it

Rayzur · May 24, 2010, 3:35pm

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.

#header {
  margin-top: 25px;
  margin-left: 3px;
  width: 379px;
  height: 41px;
  float: left;
  [B]margin-right: 266px;[/B]
  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 {
    [B]float:left;[/B]
/*    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.

#header {
  [COLOR=Blue]margin: 25px 0 0 3px;[/COLOR]
  width: 379px;
  height: 41px;
  [COLOR=Blue]float: left;[/COLOR]
  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 {
    [COLOR=Blue]float:right;
    width:312px;[/COLOR]
    list-style:none;
    margin-top:39px;
    position: relative;
    left: 6px;
}

RyanReese · May 24, 2010, 9:32pm

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?

Rayzur · May 24, 2010, 11:06pm

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://host.sonspring.com/active-focus/

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

<!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>

RyanReese · May 24, 2010, 3:42am

DId you fix this? The navigation is horizontal

Rayzur · May 24, 2010, 4:05am

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:

<!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&#37;;}
#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>

#home a {background: url(img/home_sprite.jpg) no-repeat 0 0;}
[COLOR=Blue]#home[/COLOR] [COLOR=Blue]a.on[/COLOR] [COLOR=Blue]{background-position:0 100%;}[/COLOR]
#home a:hover {background-position:0 50%;}

#service a {background: url(img/services_sprite.jpg) no-repeat 0 0;}
[COLOR=Blue]#service a.on {background-position:0 100%;}[/COLOR]
#service a:hover {background-position:0 50%;}

#contact a{background: url(img/contact_sprite.jpg) no-repeat 0 0;}
[COLOR=Blue]#contact a.on {background-position:0 100%;}[/COLOR]
#contact a:hover {background-position:0 50%;}

#live a {background: url(img/live_sprite.jpg) no-repeat 0 0;}
[COLOR=Blue]#live a.on {background-position:0 100%;}[/COLOR]
#live a:hover {background-position:0 50%;}

<ul id="nav">
    <li id=[B]"home"[/B]>[COLOR=Blue]<[B]a class="on"[/B][/COLOR] href="index.html"></a></li>
    <li id=[B]"service"[/B]><a href="services.html"></a></li>
    <li id=[B]"contact"[/B]><a href="contact.html"></a></li>
    <li id=[B]"live"[/B]><a href="live.html"></a></li>
</ul>

SirFrigglesworth · May 24, 2010, 8:55am

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”.

Rayzur · May 23, 2010, 6:46pm

I went ahead and updated the image and code with three states. It looks better now with the #current LI item.

SirFrigglesworth · May 23, 2010, 9:32pm

freaking awesome!!!

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

thanks again.

Rayzur · May 24, 2010, 4:55am

Here is a better version using the Gilder/Levin image replacement method. Your nav will still make sense for users with images disabled.


<!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>

Rayzur · May 24, 2010, 2:05am

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/three-state/home.html

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

Hope that helps for now

Rayzur · May 23, 2010, 4:20pm

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.

SirFrigglesworth · May 23, 2010, 2:42pm

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)

SirFrigglesworth · May 24, 2010, 1:03am

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.

Rayzur · May 23, 2010, 7:06am

-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.