Parent Link hover option

Hi all,

Beginner here… I am putting together a sub menu (ref: http://bigdogcattle.com/test/). I want the parent links (i.e. Cattle Sales, Genetics, Services) to stay highlighted with the down arrow image when the mouse has moved to the sub menu. Does anyone have any ideas on how to accomplish that?

Thanks
Jamie
<snip>fake signature deleted</snip>

I was just able to test this page in IE6 and the fly outs are not working. Can someone take a look at my sfHover script?

Thanks
Jamie

All,

I just wanted to thank everyone that helped me put this together. I have a better understanding of the code that I am working with. Your support is greatly appreciated.

Thanks
Jamie
http://bigdogcattle.com

Hm, I would totally be ok using a p there, since lack of decent HTML options for sentence fragments means <p>'s meanings get stretched to include those by default. I’d use the B as the image holder, since being empty, nobody has to worry about any semantics at all there.

Hi Poes,
Thanks for the conformation, I knew that was the position you took in that H1 Thread also. I have used a p tag like that before as well and I didn’t see anything wrong with it.

I was just experimenting with a “b” tag I guess. After I had to add display:block to it I was really just back to what a “p” would have been doing.

As for the #header div I had on that page it can be done away with and just give the p an ID of #logo.

<p id="logo">
    Big Dog Cattle<br>
    <em>Putting the right cattle in the right hands</em>
    <span></span>
    <b></b>
    <a href="#home"></a>
</p>
#logo {/*these styles are for image replacement text and logo anchor*/
    position:relative;
    width:712px;
    height:180px;/*230px with top padding (224px actual image height)*/
    margin:0 auto;
    padding:50px 0 0;
    font:italic bold 50px/30px sans-serif;
    color:#444;
    text-align:center;
    }
    #logo em {
    font-size:18px;
    padding-left:180px;
    color:#884214;
    }
    #logo span, #logo b, #logo a {
    position:absolute;
    left:0; top:0;
    width:712px;
    height:224px;
    background: url(images/cattle-712.png) no-repeat 0 0;/*for the "b" element*/
    }
    #logo span {/*repeat body BG image here to hide replacement text*/
    background: url(images/body-bg.png) repeat-x 0 0;
    }
    #logo a {background:none}/*remove the BG image from the anchor*/

Jamie, I have moved the css to it’s own file and linked to the sfhover script for IE6 with a Conditional Comment. You don’t need to feed it to all browsers as you have it now and you can just link to it so the browser can cache it. If you view the page source of the link below you will see how that works.

http://www.css-lab.com/test/bigdog/layout-2.html
Here is the CSS , and you can access [URL=“http://www.css-lab.com/test/bigdog/”]All Files Here.

That should get you wrapped up for the scope of this thread. If you have any new issues you need help with it would probably be best to start a new thread pertaining to that subject. The header image subject I just got through with was not really related to this thread so it started dragging the thread off topic. We will be glad to help with any new problems you may encounter.

Hope that helps! :slight_smile:

Off Topic:

I have enjoyed working on your page. It brought back some good memories of when I was raising show cattle. :wink:

Hi, that validatino error means you are missing an action attribute on the form. Otherwise upon submit, where will the form go? :slight_smile:

<form id="form" name="form" [b]action="formSubmittalPage.php"[/b]>

Thanks a ton for helping me with this. Here is what I have so far: http://bigdogcattle.com/test1/

I overlaid the header image so that I could use it for some SEO and an anchor. I am not sure if that is the best way to do it or not.

The only other thing I can’t figure out is this last error that I am receiving from the markup validator. See here!!

Does anyone have any ideas?

Thanks again,

Jamie

Hi Jamie,
I got the main template set up with the div structure needed for all the round corner images. It is a work in progress so there will be more changes to come and the css will get moved to it’s own file so the browsers can cache it.

Here is what I have so far
http://www.css-lab.com/test/bigdog/layout.html

I set the header image as a BG image but it will need some more work to get it turned into an anchor. It will turn it into an H1 with image replacement text so the page makes sense with images disabled.

I noticed you were using what looked like meta tag keywords for that header image and the page title in your test pages. Don’t confuse the two, each page will need it’s <title> tag to represent that page.

Like I said it needs more work but the basic structure is in place now. :wink:

I was just experimenting with a “b” tag I guess. After I had to add display:block to it I was really just back to what a “p” would have been doing.

Yeah. Since it’s a <b> inside a <h#> tag, semantic issues can be a bit looser as well, since <h#>'s are already bold and so I’d say at worst it would be redundant.

The site looks so cool. Just so not what I would expect if someone said it was a cattle-trading-info site. Great graphic design and also very readable.

Hi,
I had mentioned in my last post that I had some more work to do on the header. I have got the anchor and image replacement text in place now, the purpose of this is to have alternate text that is styled similar to your logo image for viewers browsing with images off.

I have updated the page and I have also moved the content div before the menu column in the source order. Your menu has a lot of links in it and it was really pushing the main content to far down in the source. If you will view that page with images disabled in your browser you will see what it is all about, then compare it to your page with the logo image in the html. You are unable to style the alternate text. This also falls under separation from content and presentation. The only images that should really go in the html are those that are actually related to the content. All images that pertain to decoration/presentation should be BG images via CSS.

I had to go back and read through all the pros and cons of using an h1 as the container for that replacement text. I tend to agree with others that the logo does not always define the contents of the page. Go ahead and read through this thread below, it will help you understand how to structure your h tags and <title> tag.

When to Use h1 in Well Structured HTML

I still see you using what looks like keywords for your h1 and alternate text in that header image. I think that thread above will help you understand the importance of structuring your page correctly and choosing headings that tie together with one another.

PS: I am glad to see that you removed the <select> box from the footer. It was really out of place there and it was just repeating links that were found in the main menu.

Back to the header image: I wound up using a <b> element to style the replacement text with. I think it would be more semantic than using a “p” tag since it is not a paragraph. We don’t want to use your h1 there either.

Here is the html:

<div id="header">
    <b class="logo">Big Dog Cattle<br>
        <em>Putting the right cattle in the right hands</em>
        <span id="shim"></span>
        <span></span>
    </b>
    <a href="#"></a>
</div>

Since your logo image is a transparent png I had to use a shim with the same BG image that the body is using. That shim keeps the replacement text from being seen. It is not a problem with normal solid color images but it was needed in this case.

Here is the css that went with it


#header {
    height:230px;/*224px actual image height*/
    position:relative;
}
    #header .logo { /*these styles are for image replacement text and logo anchor*/
    display:block;
    padding-top:50px;
    font:italic bold 50px/30px sans-serif;
    color:#555;
    text-align:center;
    }
    #header .logo em {
    font-size:18px;
    padding-left:150px;
    color:#884214;
    }
    #header .logo span,
    #header .logo #shim, 
    #header a {
    position:absolute;
    left:144px; top:0;
    width:712px;
    height:224px;
    background: url(images/cattle-712.png) no-repeat 50% 0;
    }
    #header .logo #shim {/*repeat body BG image here to hide replacement text*/
    background: url(images/body-bg.png) repeat-x 0 0;
    }
    #header a {background:none}/*remove the BG image from the anchor*/

Hi,
As I mentioned in my last post your content and footer images were slightly misaligned. I rebuilt them since that is the first thing we need to do get things working right.

Here are those images -

Here is the image folder I am working with

I will work on getting the the content and footer divs straightened out next. I had said there would be a lot of work to get the page set up correctly so just hang in there and it will all come together. :slight_smile:

I am not sure what the .sfhover script is.

The menus rely on li:hover to make the children of those li’s (the sub ul’s) appear onscreen. However, IE6 only recognises :hover on anchors. So, most people use Javascript just for IE6. A popular one is .sfhover (suckerfish hover). It’s on the Sons of Suckerfish page I linked to earlier. You can actually just copy it and stuff it in your <head>. The only other thing you need to do then is, whenever you have menus, every place that has li:hover, mention li.hover (li with the class of “hover”). You don’t need to add that to the HTML, because that’s what the Javascript does. That’s why you see .sfhover in the CSS of the Suckerfish code.

I personally like Peterned’s CSShover script, because I can just throw it on my server and I don’t have to add anything to my CSS. But either way they work.

I am still having issues with setting padding on the text on the content area. Any ideas?

Looking at the page, you want side padding, right?

But you have p {margin: 6px 0 10px;}

That’s 6px of margin on top, none on the sides, and 10px on the bottom. No margin on the sides, and I don’t see padding mentioned at all (because side margins would likely also be able to do the same thing here, visually).

But to tell the truth, instead of padding every p and every other element who might show up there, I’d instead give some side padding to the content-sides box.
.content-side {
padding: 0 10px;
}
a guess, but that’s 0 padding top and bottom, and 10px on each side.

There’s a dot I see, because everything’s wrapped in a li. But, there’s no ul. Just some J Random Li. What’s it trying to do??

I am now attempting to do the same for my content area. It doesn’t seem to line up right. Is that because of my images? Also, the text goes too far the to right and to the left.
No, the text not lining up has nothing to do with the images. You will need to set side paddings on those parent divs to push the text out. You could set margins on all your text elements too, but it is easier to take care of it once and for all with side padding on the parent.

It looks like the new cap images you made are misaligned. The maroon borders are not lining up. The [URL=“http://bigdogcattle.com/images/content-bg.png”]repeat-y BG image looks like it is the one that is correct since it has the same spacing as the menu div BG image.

Just play around with the padding on the #contens div but remember to adjust the width according to your side paddings since they add to the total width.

I gotta log out now but I will check back later to see how you came along with it. :wink:

EDIT:
I see what the problem is now, your cap images need an extra pixel added to each side. You can tell that the radius on the side is not equal to the radius on the top. After that gets corrected then the repeat-y image will need to be adjusted.

That worked… Thanks for the help

No problem. You’re welcome :).

That worked perfectly. Thanks…

I am now attempting to do the same for my content area. It doesn’t seem to line up right. Is that because of my images? Also, the text goes too far the to right and to the left.

Thanks
jamie

Hi, your sfHover script (by default) will select an element that has the ID of “nav” and then the <li>'s will get the sfHover

But your parent (I’m just going to say <ul>) has an ID of “nav-main”

Update the script to match your HTML :slight_smile:

<script type="text/javascript">
//<![CDATA[
sfHover = function() {
        var sfEls = document.getElementById([B]"nav-main"[/B]).getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        

this.className=this.className.replace(new RegExp(" 

sfhover\\\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", 

sfHover);
//]]>
</script>

I am making progress. I cleaned up most of the html: validator

The thinks I am still working on and having some issues:

  1. I am still having issues with setting padding on the text on the content area. Any ideas?
  2. I am having issues lining up the sandbag on the bottom section. I am not sure if I need to redo the image or not.
  3. I am not sure what the .sfhover script is.

Thanks
Jamie

Like this?

Do I need to make a cap and sand bag like the main menu?

Do away that single image idea I mentioned above.

Let’s do a cap and repeat-y image like the UL , it will allow it to expand if needed. We can still nest it in an LI though.

See if you can make the images and I will check back. Just upload them to your online image folder and give a direct link to them when you get done. Don’t post them as an attachment, it takes to long.