...

View Full Version : Menu Indenting CSS



cookpau01
11-08-2010, 09:22 PM
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:

http://i53.tinypic.com/14xijjb.png

A direct link to my website is here:

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

Any ideas how to fix this issue? :-)

DrDOS
11-08-2010, 09:57 PM
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
11-08-2010, 10:09 PM
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
11-08-2010, 10:13 PM
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
11-08-2010, 10:19 PM
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,res izable=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
11-08-2010, 11:18 PM
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
11-08-2010, 11:53 PM
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
11-08-2010, 11:54 PM
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
11-08-2010, 11:55 PM
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
11-09-2010, 12:03 AM
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
11-09-2010, 12:08 AM
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
11-09-2010, 12:15 AM
DrDOS is that not what I said earlier? lolXD as far as the markup

teedoff
11-09-2010, 12:17 AM
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
11-09-2010, 12:21 AM
Tee, I thought it would take you sooner to realize that ;] Lol I'm just picking

teedoff
11-09-2010, 12:27 AM
about joomla? lol never used it..never even seen it.,..lol

Chris Hick
11-09-2010, 12:39 AM
Tee, much of Joomla doesn't validate, but people like the way it designs their sites.

teedoff
11-09-2010, 12:47 AM
Tee, much of Joomla doesn't validate, but people like the way it designs their sites.

So templates are called designing sites? lol

Chris Hick
11-09-2010, 12:49 AM
Bahaha, to the unskilled aye. ;)

cookpau01
11-10-2010, 02:51 PM
I have spent a long time doing the things suggested and none of them seem to work

DrDOS
11-10-2010, 03:01 PM
I have spent a long time doing the things suggested and none of them seem to workThe div right after the body tag still has align="center" in the code. Did you try removing it? That's what is causing the problem.

teedoff
11-10-2010, 03:16 PM
As DrDos has said, twice already, you have a div right after the body tag thats telling EVERYTHING in your page to align center. You should remove this style and then use divs with margins and padding to center elements you want, rather than a catch all center alignment.

If you remove the center style, then your whole page is gonna align left. You can easily fix this by adding a margin:auto to the same div....you should also really look into giving your divs an id or class as needed and then using external stylesheets to add styles.

cookpau01
11-10-2010, 05:11 PM
The div right after the body tag still has align="center" in the code. Did you try removing it? That's what is causing the problem.

Removing that moves the whole page to the far left and does not change the menu.

teedoff
11-10-2010, 05:13 PM
Removing that moves the whole page to the far left and does not change the menu.

lol Did you not read my post just above yours? I explained thats what would happen. And yes it does left align your menu as well. It did for me.

cookpau01
11-10-2010, 05:30 PM
As DrDos has said, twice already, you have a div right after the body tag thats telling EVERYTHING in your page to align center. You should remove this style and then use divs with margins and padding to center elements you want, rather than a catch all center alignment.

If you remove the center style, then your whole page is gonna align left. You can easily fix this by adding a margin:auto to the same div....you should also really look into giving your divs an id or class as needed and then using external stylesheets to add styles.

Ok I removed the center align and yes the whole page went to the left, I then added the margin auto and it placed it back into the middle. But the menu did not change a single bit.

Is the problem nothing to do with this:


<div id="right_box">
<div id="right_modul"><jdoc:include type="modules" name="left" style="rounded"/>

As when I put a align left in here I get this:

http://i51.tinypic.com/5wf051.png

teedoff
11-10-2010, 05:44 PM
ok I still see the center align, so you havent uploaded your new files.
Anyway, when I removed the center style I got this in your page. Here is an image:

As you can see, your menu IS aligned left.

cookpau01
11-10-2010, 05:52 PM
I am wondering I am changing the wrong bit of code is it this that I am changing:



<link rel="stylesheet" href="<?php echo $path;?>css/template.css" type="text/css" />
<link rel="shortcut icon" href="<?php echo $path;?>images/favicon.ico"/>
</head>
<body>
<div align="center"><div style="width:945px;position:relative">
<div id="topmenu" style="z-index:1;"><jdoc:include type="modules" name="user3" />
</div>
<div id="header"><?php
$itemID= JSite::getMenu()->getActive()->id;
?>

Removing the align=center and replacing with margin:auto;

teedoff
11-10-2010, 05:53 PM
Yes thats the right code...did you put the new file back up to your remote server?

cookpau01
11-10-2010, 06:14 PM
Yes thats the right code...did you put the new file back up to your remote server?

I have not added it to the remote server yet, I think the issue is the code contains a posotion relative:


<body>
<div align="center"><div style="width:945px;position:relative">

That is the only difference between the code on the remote server and my local host

teedoff
11-10-2010, 06:31 PM
I have not added it to the remote server yet, I think the issue is the code contains a posotion relative:


<body>
<div align="center"><div style="width:945px;position:relative">

That is the only difference between the code on the remote server and my local host

This is all I see when I look at your code and have removed the center style.


<div><div style="width:945px;">

Remove the position style then and see what that does. What program did you use to create this page? SUre have been alot of empty divs after empty divs in my opinion.

cookpau01
11-10-2010, 06:40 PM
I have tried with and without the relative position and still no change, I also have a program that compares difference in code and that is the only difference.

This is a Joomla Template

SB65
11-10-2010, 07:22 PM
I realise I'm coming very late to this, but surely:


.menu_menu,.menu_menu ul{text-align:left;margin:0;padding:0;list-style-type:none}
.menu_menu ul{padding-left:20px}

will do the job. This seems to work when added to your current live code.

cookpau01
11-10-2010, 11:16 PM
I realise I'm coming very late to this, but surely:


.menu_menu,.menu_menu ul{text-align:left;margin:0;padding:0;list-style-type:none}
.menu_menu ul{padding-left:20px}

will do the job. This seems to work when added to your current live code.

Am i to place that just straight into the CSS

SB65
11-11-2010, 08:23 AM
Am i to place that just straight into the CSS

Yes, that's right.

cookpau01
11-18-2010, 11:07 AM
I realise I'm coming very late to this, but surely:


.menu_menu,.menu_menu ul{text-align:left;margin:0;padding:0;list-style-type:none}
.menu_menu ul{padding-left:20px}

will do the job. This seems to work when added to your current live code.

1and1 have finally sorted out my website hosting so my latest code is available. As mentioned this code does not seem to work with this new version.

SB65
11-18-2010, 11:25 AM
I can't see that entry anywhere in your css?

Just to avoid confusion waaaay back on post#4 you said that:


#menu_menu {
text-align : left;
}

had no effect - which is true because the element has class 'menu_menu' not id. Unless you html was different then.

cookpau01
11-18-2010, 05:10 PM
I can't see that entry anywhere in your css?

Just to avoid confusion waaaay back on post#4 you said that:


#menu_menu {
text-align : left;
}

had no effect - which is true because the element has class 'menu_menu' not id. Unless you html was different then.

The HTML has remained the same

SB65
11-18-2010, 05:12 PM
OK, but then I still don't see the entry in your css.

cookpau01
11-18-2010, 06:04 PM
OK, but then I still don't see the entry in your css.

Yes I removed it due to it not working.

SB65
11-18-2010, 06:05 PM
Can you try adding back the css I posted?

It works on a test page (http://simonbattersby.com/test/test_abspos.htm).

cookpau01
11-18-2010, 11:15 PM
Can you try adding back the css I posted?

It works on a test page (http://simonbattersby.com/test/test_abspos.htm).

To be honest I am completly confused. What code do I need to add and where do I need to add it. My live site now has the code added as requested

SB65
11-19-2010, 08:22 AM
Right, I see your problem now. You have an error in your css at line 236, which is causing all of the css after that statement to be lost. You have:


#right_modul {
width : 180px;
padding-left : 1px;
padding-right : 50px;
overflow : hidden;
#footer a {
color : #b9a58f;
}


which is missing a closing bracket. Change the css above to this:


#right_modul {
width : 180px;
padding-left : 1px;
padding-right : 50px;
overflow : hidden;
}

#footer a {
color : #b9a58f;
}


No other changes required. See what that does for you.

cookpau01
11-19-2010, 07:39 PM
Right, I see your problem now. You have an error in your css at line 236, which is causing all of the css after that statement to be lost. You have:


#right_modul {
width : 180px;
padding-left : 1px;
padding-right : 50px;
overflow : hidden;
#footer a {
color : #b9a58f;
}


which is missing a closing bracket. Change the css above to this:


#right_modul {
width : 180px;
padding-left : 1px;
padding-right : 50px;
overflow : hidden;
}

#footer a {
color : #b9a58f;
}


No other changes required. See what that does for you.


I have fixed that and there seems to be no change to the menu which is odd

SB65
11-20-2010, 08:42 AM
Just looked at your page and the menu is now left aligned and indented, so it looks like it's worked OK.

cookpau01
11-20-2010, 01:15 PM
Just looked at your page and the menu is now left aligned and indented, so it looks like it's worked OK.

Thank you so much for all your help :-) Much appreciated



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum