MyBB Community Forums

I am trying to make a button type menu. However the buttons are going up and down when I went them side by side.

The html -

<div class="menu2">
                        <ul>
                        <li><a href="{$mybb->settings['bburl']}/index.php"><img src="/images/CrazyPurple/homebutton.png"</a></li> <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="/images/CrazyPurple/members.png"</a></li>
                        </ul>
                        </div>

the css -

.menu2 {
	list-style: none;
	margin: 0;
	width: 100%;
}

.menu2 li {
	list-style: none;
        padding-left: 5px;
}

.menu2 ul {
	list-style: none;
        margin: 0;
        width: 940px;
}

All you need to do is add "display: inline;" to your .menu2 li class.

(2010-01-14, 01:25 AM)computergeek67 Wrote: [ -> ]All you need to do is add "display: inline;" to your .menu2 li class.

Oh okay thanks .

Mind telling me why that fixes it.

I am trying to relearn css .

Edit: Oh and it seems the buttons aren't all the way to the left(well aligned with the welcome block) How would I fix this?

(2010-01-14, 02:03 AM)NBKTwitch Wrote: [ -> ]Oh okay thanks .

Mind telling me why that fixes it.

I am trying to relearn css .

Edit: Oh and it seems the buttons are all the way to the left(well aligned with the welcome block) How would I fix this?

Sure, I can tell you. Setting "display: inline" allows for the list to have all bullets on one line as opposed to being "block" which means the list displays one bullet per line.

Assuming you want it to be right aligned, you can set "float: right" to the .menu2 class.

(2010-01-14, 03:06 AM)computergeek67 Wrote: [ -> ]

(2010-01-14, 02:03 AM)NBKTwitch Wrote: [ -> ]Oh okay thanks .

Mind telling me why that fixes it.

I am trying to relearn css .

Edit: Oh and it seems the buttons are all the way to the left(well aligned with the welcome block) How would I fix this?

Sure, I can tell you. Setting "display: inline" allows for the list to have all bullets on one line as opposed to being "block" which means the list displays one bullet per line.

Assuming you want it to be right aligned, you can set "float: right" to the .menu2 class.

Thanks for telling me that and the float: left; still leaves a small gap.

Reduce the padding?

(2010-01-14, 03:51 AM)Mark.M Wrote: [ -> ]Reduce the padding?

There is none .

OH I seemed to confuse geek. What I meant was they are not all the way to the left. I am using float:left aswell.

That's probably due the ul start default padding

(2010-01-14, 05:38 PM)combus Wrote: [ -> ]That's probably due the ul start default padding

I have no padding though.

Here is my current css list for menu2

.menu2 {
        background-image: url(/images/CrazyPurple/menu.png);
        background-repeat: repeat;
	list-style: none;
	margin: 0;
}

.menu2 li {
	list-style: none;
        margin: 0;
        display: inline;
}

.menu2 ul {
	list-style: none;
        margin: 0;
}

OH and here is a quick question.

The trow1 and 2. What is the default height for them? I ask because it seems I can't change there height,so I am gonna make a custom gradient for the size needed.

umm ul have a padding start by default (in webkit is 40px on the left for example), so you have to overwrite it.