Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 44
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Menu Indenting CSS

    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? :-)

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    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:

    Code:
    #menu_menu {
    text-align : left;
    }

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.

    Code:
    <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:
    Code:
    <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?
    Last edited by Chris Hick; 11-08-2010 at 09:31 PM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    30
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I am working in Joomla so surely this would not work? as the menus are supposed to be dynamic and not hard coded.

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    I'm not really skilled with Joomla, but I have seen hard coded content in joomla before. Correct me if I am wrong, anyone.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by cookpau01 View Post
    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.

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    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.
    Last edited by Chris Hick; 11-08-2010 at 11:00 PM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Chris Hick View Post
    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.

  • #11
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.

  • #12
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    DrDOS is that not what I said earlier? lolXD as far as the markup
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 11-08-2010 at 11:22 PM.

  • #14
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    484
    Thanks
    10
    Thanked 33 Times in 32 Posts
    Tee, I thought it would take you sooner to realize that ;] Lol I'm just picking
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #15
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    about joomla? lol never used it..never even seen it.,..lol


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •