Page 1 of 1
Individual li class in top menu?
Posted: Wed Aug 15, 2012 5:17 am
by johan019
Hi,
Been scratching my head for hours now and cant figure it out.
In my top menu i have categories but i have also added an "home button" in header.tpl.
Problem is, "home button" looks like all the other headers in the menu and when i try to move the "home button" to the left all the categories follows, because the "home button" doesn't have an own class. Or i think it has but cant figure it out how to modify it in my css.
Here is the part in my header.tpl:
Code: Select all
<div id="menu">
<ul>
<li><a class="hem"><a href="index.php?route=common/home">HEM</a></li>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
And here is the CSS part (feels like i have tried everything)
Code: Select all
#menu {
background: #FFFFFF;
border: 1px dashed #000000;
height: 35px;
margin-bottom: 15px;
padding: 0px 2px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
margin-left: 240px;
}
#menu > ul > li .hem {
margin-left: 100px;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 13px;
color: #000000;
line-height: 14px;
text-decoration: none;
display: table;
padding: 9px 10px 10px 15px;
margin-top: 2px;
z-index: 6;
position: relative;
Soo, can some kind (not necessary) person push me in the right direction here?
Thanks in advance guys and girls!
Johan
Re: Individual li class in top menu?
Posted: Wed Aug 15, 2012 6:04 am
by upl8t
In order to do this you need to wrap each "group" of links into their own divs. One for links you want to go on the left side and one for the links you want on the right side.
eg.
.left {
float: left;
}
.right {
float: right;
}
Then in your code....
<div class="left">All the left side links go here</div><div class="right">All the right side links go here</div>
The other possibility if you don't want the second group to be flush right is to set two divs per above, both float: left. Then set a margin-right: value for the left one which will push the second group to the right.
Either of these should work.
Re: Individual li class in top menu?
Posted: Wed Aug 15, 2012 6:00 pm
by johan019
Oh, thank you so much!
Still one problem though, I dont really know where to put the ".left" in my css-file. Is it right under #menu?
Tried but nothing happens
Again, thanks in advance!
Re: Individual li class in top menu?
Posted: Wed Aug 15, 2012 6:30 pm
by upl8t
Just add them to the bottom of your css file. It will work fine.
Re: Individual li class in top menu?
Posted: Wed Aug 15, 2012 6:45 pm
by johan019
upl8t wrote:Just add them to the bottom of your css file. It will work fine.
Thanks mate.
Sorry for being so "slow" but everything just looks crazy now. The left class pushes the other links down a row to content etc.
So, i am aware that i have messed up the positioning of the div, ul and li in my header.tpl.
Can't figure out where though.. not even with firebug lol.
Here is what I have done. The only thing I want on the left is the <a href>HEM</a>, the rest should go to right but on the same row.
Code: Select all
<div id="menu">
<ul>
<div class="left><li><a href="index.php?route=common/home">HEM</a></div></li>
<div class="right">
<ul>
<?php foreach ($categories as $category) { ?>
<li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>
<div id="notification"></div>
Picture of me messing up
mess.jpg (27.49 KiB) Viewed 1337 times
Thanks once again!
Re: Individual li class in top menu?
Posted: Wed Aug 15, 2012 8:40 pm
by upl8t
Try this for the left part. You are missing a closing </ul> and have the div first on one and after the ul on the other.
When these kinds of problems start happening you need to get back to basics. Make sure all tags that require them are closed and make sure they're in the correct order. If necessary strip things out and add back one code block at a time.
<div class="left>
<ul>
<li>
<a href="index.php?route=common/home">HEM</a>
</li>
</ul>
</div>
Re: Individual li class in top menu?
Posted: Thu Aug 16, 2012 5:08 am
by johan019
Damn.. I can clearly see what you are saying but I keep messing it up anyways.
It is like the left class (HEM) make itself an own WHOLE line in the menu.. like an extra menu on top of the other.
When I firebug it the div class is as wide as the whole menu and therefore push the other <ul> down.
My tags arent in the right places.
Gotta. Keep. On. Struggeling.
Thank you so much for your help!
Re: Individual li class in top menu?
Posted: Thu Aug 16, 2012 5:23 am
by upl8t
The div shouldn't break to the next line unless... you run out of room or you set the div to clear. PM me the code including a good chunk before and after the menu along with the css and i'll take a look.