Menu Indenting CSS

[cookpau01]

I am trying to get my menu to look like this:

Home Page
Villa Details

Kitchen

Bedrooms

Location


Instead the menu seems to be indenting randomly and currently looks like this:



A direct link to my website is here:

http://s344499840.websitehome.co.uk/

Any ideas how to fix this issue? :-)

[DrDOS]

It's not random at all, it's being centered. I don't see any .css for the main menu, so I suspect it's being told to center by something else. I think you may be missing the .css for the menu.

[Chris Hick]

DrDOS is right.. btw, you may want to unclutter all that mess you have up in your html. May want to learn some ways to write list.

[cookpau01]

Originally Posted by DrDOS

It's not random at all, it's being centered. I don't see any .css for the main menu, so I suspect it's being told to center by something else. I think you may be missing the .css for the menu.

So am I correct in saying that I need to write a CSS element for menu_menu?

Something Like:

#menu_menu {
text-align : left;
}

[Chris Hick]

Cook, that wouldn't work either.. because you have several Unordered list in that one section. If you want all those in one unordered list you need to put then like this.

<ul id=" ">
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
   <li><a href="#"></a></li>
</ul>

You can even add a class to your li tags so that you can indent the ones that you want to move over.

Here I'll start you out:

<ul class="menu_menu">
    <li id="current" class="active item21">
        <a href="http://s344499840.websitehome.co.uk/">
            <span>Home Page</span>
        </a>
    </li>
    <li class="parent item8">
        <a href="/index.php?option=com_content&amp;view=article&amp;id=17&amp;Itemid=8">
            <span>Villa Details</span>

        </a>
        </li>
            <li class="item9">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=6&amp;Itemid=9">
                    <span>Kitchen</span>
                </a>
            </li>
            <li class="item10">

                <a href="/index.php?option=com_content&amp;view=article&amp;id=7&amp;Itemid=10">
                    <span>Bedrooms</span>
                </a>
            </li>
            <li class="item11">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=8&amp;Itemid=11">
                    <span>Swimming Pool</span>
                </a>

            </li>
            <li class="item12">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=9&amp;Itemid=12">
                    <span>Living Room</span>
                </a>
            </li>
            <li class="item13">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=10&amp;Itemid=13">

                    <span>Gardens</span>
                </a>
            </li>
            <li class="item14">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=11&amp;Itemid=14">
                    <span>Golf</span>
                </a>
            </li>

            <li class="item15">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=12&amp;Itemid=15">
                    <span>Onsite Hotel</span>
                </a>
            </li>
            <li class="item28">
                <a href="http://www.applegardensmarrakech.com/vv/v1/index.html" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,');return false;">
                    <span>Virtual Tour</span>

                </a>
            </li>
    <li class="item4">
        <a href="/index.php?option=com_content&amp;view=article&amp;id=3&amp;Itemid=4">
            <span>Location</span>
        </a>

    </li>
    <li class="item5">
        <a href="/index.php?option=com_content&amp;view=article&amp;id=4&amp;Itemid=5">
            <span>Photo Gallery</span>
        </a>
    </li>
    <li class="parent item16">
        <a href="/index.php?option=com_content&amp;view=article&amp;id=18&amp;Itemid=16">

            <span>Marrakech</span>
        </a>
        </li>
            <li class="item17">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=17">
                    <span>Things to do</span>
                </a>
            </li>

            <li class="item18">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=14&amp;Itemid=18">
                    <span>Weather and Climate</span>
                </a>
            </li>
            <li class="item19">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=19">
                    <span>Flights</span>

                </a>
            </li>
            <li class="item20">
                <a href="/index.php?option=com_content&amp;view=article&amp;id=16&amp;Itemid=20">
                    <span>Car Hire</span>
                </a>
            </li>

    <li class="item3">
        <a href="/index.php?option=com_content&amp;view=article&amp;id=2&amp;Itemid=3">
            <span>Reviews</span>
        </a>
    </li>
    <li class="item6">
        <a href="/index.php?option=com_contact&amp;view=contact&amp;id=1&amp;Itemid=6">

            <span>Contact Us</span>
        </a>
    </li>
</ul>

I cleaned this up a little bit. I'll let you clean up the rest. The first thing I advise you to do is get rid of all those span tags. Any particular reason you are using them?

[cookpau01]

I am working in Joomla so surely this would not work? as the menus are supposed to be dynamic and not hard coded.

[Chris Hick]

I'm not really skilled with Joomla, but I have seen hard coded content in joomla before. Correct me if I am wrong, anyone.

[teedoff]

Originally Posted by cookpau01

I am working in Joomla so surely this would not work? as the menus are supposed to be dynamic and not hard coded.

Not sure what you mean here. Dynamic means coded on the fly or coding thats created from calling other data or functions. Most navigations menus are hard coded. If you have a menu thats the same for mutliple pages, then it would be hard coded.

Now as someone earlier suggested, it looks like a multi level list, but the list items are being centered somewhere. Either by an external stylesheet, or by embedded or internal styles.

[Chris Hick]

Teedoff, they are being affected by one of his internal styles.

Btw, if you are wanting those indented for the purpose of having them under the villa details section, why not create a vertical menu that when you hoover over Villa details it shows what is under it? It would certainly be more pleasing to the eyes.

[teedoff]

Originally Posted by Chris Hick

Teedoff, they are being affected by one of his internal styles.

Btw, if you are wanting those indented for the purpose of having them under the villa details section, why not create a vertical menu that when you hoover over Villa details it shows what is under it? It would certainly be more pleasing to the eyes.

lol yes I know...but I'm not seeing anything that specifies centering his list items.

[DrDOS]

I looked at it again and think I may see the problem, right after the body tag is a div that has align="center". Take that out and see if it fixes that problem. It may cause problems elsewhere but that can be fixed by telling what ever content you want to be centered. That depreciated markup isn't valid for that doctype anyway.

[Chris Hick]

DrDOS is that not what I said earlier? lolXD as far as the markup

[teedoff]

lol Yep thats it...of course now everything is left aligned, but now we know!

I'm beginning to wonder what all the fuss is about Joomla, if this is the kind of mark up it creates.

[Chris Hick]

Tee, I thought it would take you sooner to realize that ;] Lol I'm just picking

[teedoff]

about joomla? lol never used it..never even seen it.,..lol