Individual li class in top menu?

Quote

Post by johan019 » Wed Aug 15, 2012 5:17 am

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
johan019
New member
Posts
66
Joined
Fri Mar 09, 2012 12:52 am
Top

Re: Individual li class in top menu?

Quote

Post by upl8t » Wed Aug 15, 2012 6:04 am

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.
upl8t
New member
Posts
33
Joined
Fri Aug 03, 2012 7:36 pm
Top

Re: Individual li class in top menu?

Quote

Post by johan019 » Wed Aug 15, 2012 6:00 pm

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!
johan019
New member
Posts
66
Joined
Fri Mar 09, 2012 12:52 am
Top

Re: Individual li class in top menu?

Quote

Post by upl8t » Wed Aug 15, 2012 6:30 pm

Just add them to the bottom of your css file. It will work fine.
upl8t
New member
Posts
33
Joined
Fri Aug 03, 2012 7:36 pm
Top

Re: Individual li class in top menu?

Quote

Post by johan019 » Wed Aug 15, 2012 6:45 pm

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

mess.jpg (27.49 KiB) Viewed 1331 times

Thanks once again!
johan019
New member
Posts
66
Joined
Fri Mar 09, 2012 12:52 am
Top

Re: Individual li class in top menu?

Quote

Post by upl8t » Wed Aug 15, 2012 8:40 pm

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>
upl8t
New member
Posts
33
Joined
Fri Aug 03, 2012 7:36 pm
Top

Re: Individual li class in top menu?

Quote

Post by johan019 » Thu Aug 16, 2012 5:08 am

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!
johan019
New member
Posts
66
Joined
Fri Mar 09, 2012 12:52 am
Top

Re: Individual li class in top menu?

Quote

Post by upl8t » Thu Aug 16, 2012 5:23 am

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.
upl8t
New member
Posts
33
Joined
Fri Aug 03, 2012 7:36 pm
Top
Post Reply
Return to “Template Support”
Who is online

Users browsing this forum: No registered users and 9 guests