Menu not displaying correctly

Discussion in 'CSS' started by mmabardy, Jul 9, 2007.

0
  1. #1
    Here is my code from the CSS document


    /* Pages */

    #pages {
    float: right;
    width: 568px;
    height: 150px;
    background: url(images/headers/img2.jpg);
    }

    #pagefour {
    float: right;
    width: 568px;
    height: 150px;
    background: url(images/headers/4.jpg);
    }

    #pagethree{
    float: right;
    width: 568px;
    height: 150px;
    background: url(images/headers/3.jpg);
    }

    #pages h2 {
    display: none;
    }

    #pages ul {
    float: right;
    margin: 0;
    padding: 125px 15px 0 0;
    list-style: none;
    line-height: normal;
    }

    #pages li {
    display: inline;

    HERE IS THE CODE FROM THE PAGE THAT WORKS CORRECTLY
    <div id="pages">

    <ul><div id="pages li">
    <li class="active"><a id="page1" href="index.html">Home</a></li>
    <li class="active"><a id="page1" href="featuredlistings.htm">Featured Properties</a></li>
    <li><a id="page2" href="#">Sold Properties </a></li>
    <li><a id="page3" href="#">Buyers</a></li>
    <li><a id="page4" href="#">Sellers</a><a id="page5" href="agents.htm">Agents</a></li>
    <li class="active"></li>
    </ul>
    </div>

    HERE IS THE CODE FROM THE PAGE THAT DOES NOT WORK CORRECTLY.

    <div id="pagefour">
    <ul><div id="pages li">
    <li class="active"><a id="page1" href="index.html">Home</a></li>
    <li class="active"><a id="page1" href="featuredlistings.htm">Featured Properties</a></li>
    <li><a id="page2" href="#">Sold Properties </a></li>
    <li><a id="page3" href="#">Buyers</a></li>
    <li><a id="page4" href="#">Sellers</a><a id="page5" href="agents.htm">Agents</a></li>
    <li class="active"></li>
    </ul>
    </div>

    ALL I WANT TO DO IS CHANGE THE IMAGE IN THE pages or pagefour section. BUT WHEN I SIMPLY CHANGE JUST THAT, THE LITTLE MENU IN THAT SECTION TURNS INTO A VERTICAL LIST RATHER THAN INLINE LIKE IT IS SUPPOSED TO BE.
    IF YOU GO TO members.cox.net(slash)mmabardy(slash)Bishop(slash) AND TOGGLE BETWEEN THE INDEX AND THE "AGENTS" PAGES YOU WILL SEE WHAT I MEAN. THE INDEX PAGE DISPLAYS CORRECTLY, THE AGENTS AND FEATURED LISTINGS PAGES DO NOT.

    Maybe there is a better way for me to changes images from page to page or maybe even do a random display of images. while keeping the menu the same
    Any help is much appreciated. Thanks
     
    mmabardy, Jul 9, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, you've got a LOT of problems there... Most of it being invalid HTML.

    First off, the only tags that can go inside a UL, until you open a LI is... opening a LI. Putting a DIV after the UL like that is invalid HTML... that you do not even seem to be CLOSING that div just makes it worse.... I'm surprised it doesn't break your whole layout...

    Then there's the empy LI - I'm not even certain what that's supposed to accomplish...

    and... frankly you are wasting DIV's and ID's on redundant classes, ID's and styling... and I'm not certain you can even assign multiple ID's to the same tag since not only are ID's supposed to be unique, they are supposed to be unique TO the tag... I THINK what you want there is a class.

    Oh, I see what you did - that is NOT how that works. #pages LI means all li's UNDER #pages. It is NOT a single ID.

    I'm also wondering what's with all the class="active" since usually on a menu like that the only one that would be 'active' is the current page.

    AND you are trying to use an ID more than once "page1" - that's invalid too.

    and... I'm not even certain what all those page# id's are supposed to do - they don't even look necessary.

    What I THINK you are trying to do should be coded:

    CSS:
    
#pagemenu {
	list-style: none;
	float:right;
	width:568px;
	height:25px;
	margin:0;
	padding:125px 0 0 0;
	font:normal 16px/25px tahoma,arial,helvetica,sans-serif;
	text-align:center;
	background:url(images/headers/img2.jpg);
}

#pagemenu .pagethree {
	background:url(images/headers/3.jpg);
}

#pagemenu .pagefour {
	background:url(images/headers/4.jpg);
}

#pagemenu li {
	display:inline;
	padding:0px 8px;
}
    Code (markup):
    and the HTML:

    
<ul id="pagemenu" class="pageone">
	<li class="active"><a href="index.html">Home</a></li>
	<li><a href="featuredlistings.htm">Featured Properties</a></li>
	<li><a href="#">Sold Properties </a></li>
	<li><a href="#">Buyers</a></li>
	<li><a href="#">Sellers</a></li>
	<li><a href="agents.htm">Agents</a></li>
</ul>
    Code (markup):
    At least I think that's what you are trying to do. On each subpage I'd set the class to the current page, and change which one is active of course.

    That should be all you need - no extra DIV's, no extra classes, that should be it.

    Oh, and I put the font in px for a reason, you're menu was too wide on 'large font' machines, by choosing a 'large enough' fixed size font instead of a %/EM font, we avoid a broken layout... As I've said several places before %/EM is as big a /FAIL/ on a menu in a fixed width container as PT, since it will break on large font machines at default zoom.

    ... and validate, if this is any indication you've probably got some unclosed tags further down the page.

    -- edit -- wait, is that 'active' class supposed to indicate which links are live and which are not?
     
    deathshadow, Jul 9, 2007 IP