1
Xman04
How to stop menu items from overlapping graphic?
  • 2007/6/21 21:23

  • Xman04

  • Not too shy to talk

  • Posts: 180

  • Since: 2004/7/12


I'm using the bluehue theme, and I've moved the menu arrow graphic from the right to the left side of the menu. I was able to do that successfully.

However, the problem is that the menu items are overlapping the arrow graphic on the left. I've experimented with margins, padding, and other things. However, I can't figure out how to get the menu items to display to the right of the arrow (when the arrow is on the left), instead of on top of the arrow.

Here is the CSS code for the main menu.

td#mainmenu a {
display: block;
margin: 3px;
padding: 3px;
border-left: 4px solid #999;
border-bottom: 1px solid #999;
background: url(images/go.gif) no-repeat left;}

2
Anonymous
Re: How to stop menu items from overlapping graphic?
  • 2007/6/21 21:32

  • Anonymous

  • Posts: 0

  • Since:


Bluehue's creator, jmorris, is very active on this site

I'm sure he'll be a long in a minute or two.

Possibly related to my issue here:
https://xoops.org/modules/newbb/viewtopic.php?topic_id=59545&forum=28

3
Will_H
Re: How to stop menu items from overlapping graphic?
  • 2007/6/22 0:38

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


uhm...

align: right;?

4
Xman04
Re: How to stop menu items from overlapping graphic?
  • 2007/6/22 3:26

  • Xman04

  • Not too shy to talk

  • Posts: 180

  • Since: 2004/7/12


Quote:
align: right;?


Text-align: right; and text-align: center; will move the menu items to the right of the arrow graphic. However, I want the menu items to be left aligned. The problem is that when I keep it left aligned, there is no space between the arrow graphics and the beginning text of each menu item. The beginning text of each menu item is overlapping the arrow graphic.

If you go to the 7dana-xred theme at http://theme.xoofoo.org/index.php, the menu at the top is what I'm striving for. There is a red arrow to the left of each menu item. I've done that with the bluehue theme (moved the arrow the left), but I can't make a space between the arrow and the beginning of the menu item text.

This is driving me crazy, because I've done it before with another theme that I modified. I know it must be something very simple that I'm missing.

5
Xman04
Re: How to stop menu items from overlapping graphic?
  • 2007/6/22 3:36

  • Xman04

  • Not too shy to talk

  • Posts: 180

  • Since: 2004/7/12


Quote:
Bluehue's creator, jmorris, is very active on this site


jmorris has great themes! Jim, I wish that you would give an online course on beginning, intermediate, and advanced theme design! However, I know that you are very busy helping to get XOOPS back on track!

6
Will_H
Re: How to stop menu items from overlapping graphic?
  • 2007/6/22 23:38

  • Will_H

  • Friend of XOOPS

  • Posts: 1786

  • Since: 2004/10/10


 

?

7
Anonymous
Re: How to stop menu items from overlapping graphic?
  • 2007/6/23 7:43

  • Anonymous

  • Posts: 0

  • Since:


Quote:
Xman04 wrote:

If you go to the 7dana-xred theme at http://theme.xoofoo.org/index.php, the menu at the top is what I'm striving for.


Just a thought, but have you downloaded that theme and taken a peep at the .css file?

Might give you a clue.....

8
web-M
Re: How to stop menu items from overlapping graphic?
  • 2007/6/23 11:59

  • web-M

  • Just popping in

  • Posts: 100

  • Since: 2006/1/2 2


I think that you have to play with the stylesheet.
Try to play with margins or padding-left, maybe taht will do the trick

9
Xman04
Re: How to stop menu items from overlapping graphic?
  • 2007/6/23 12:47

  • Xman04

  • Not too shy to talk

  • Posts: 180

  • Since: 2004/7/12


Quote:
 

?


My hope was to set this easily in the CSS code. I don't think that I can use   in the relevant CSS stylesheet settings (although, I could be wrong about that).

Quote:
Just a thought, but have you downloaded that theme and taken a peep at the .css file?


Yes, I have. I've actually achieved the desired affect in other themes too (just using the CSS), but I can't with this theme for some reason. I'm not sure what I'm missing. Every piece of relevant CSS code looks the same between the relevant themes. I could probably set the graphic in the left column css code, and then move the menu relative to that, but then the graphic would be showing up in non menu areas too, which I don't want.

Quote:
I think that you have to play with the stylesheet.
Try to play with margins or padding-left, maybe taht will do the trick


I've played with the stylesheet quite a bit, especially the margins and padding. The problem is that any margin or padding changes I make are moving the graphic and menu items text together, which keeps them overlapping. Text-align does the trick if I use the right and center settings, but I want it left aligned.

The funny thing is that if I set the graphic in a multimenu menu block for each menu item, instead of the theme style.css, it works fine. However, it is a pain setting the graphic for each menu item, and it won't apply to menu blocks that are not part of multimenu.

Anyway, I'm quite puzzled about this. It is probably something very simple that I'm missing, because my knowledge of CSS is still limited. However, it seems that I've tried all the obvious things so far, but without success.

10
vaughan
Re: How to stop menu items from overlapping graphic?
  • 2007/6/23 12:59

  • vaughan

  • Friend of XOOPS

  • Posts: 680

  • Since: 2005/11/26


dunno why, but maybe u could try utilising the position: static; etc and then left: 3px;

Login

Who's Online

246 user(s) are online (156 user(s) are browsing Support Forums)


Members: 0


Guests: 246


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits