Menu text alignment...

[sturmkatze]

Link to my site: http://www.romantimes.org
SMF version: SMF 2.0.11
TP version: 1.107
Default Forum Language: Engrish
Theme name and version: Modified "Bean" theme, I think.
Browser Name and Version: Firefox, latest.
Mods installed:

• SMF 2.0.7 Update 1.0
• SMF 1.1.20 / 2.0.9 Update 1.0
• Ultimate Profile 0.9.1
• SMF 1.1.21 / 2.0.10 Update
• SMF 2.0.8 Update
• SMF 2.0.11 Update
• SMF Staff Page 1.7
• SMF Gallery Lite 3.6a

Related Error messages: Error message here

The problem is, I used the menu feature, instead of making it w/ CSS and graphics. I am trying to make this so that if I'm not doing this in the future, someone else could easily take it over.

I have a programmer friend who I asked. He put it in language that you guys can understand w/ some sample code. WHAT I AM ASKING, is WHERE is the menu code located? This kind of thing is beyond me. My solution is to drop back and punt and do it w/ CSS, etc. but not the way I WANT to do it.

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.block_leftcontainer {
width:192px;
}
.tp_catmenu{
list-style:outside none none;
}
.fl1{
float:left;
width:16px;
margin-top:5px;
}
.fl2{
margin-left:18px;
overflow:hidden;
}
</style>
</head>

<body>
<div class="block_leftcontainer">
<div class="tborder tp_leftblock_frame"><div class="tp_half"><h3 class="catbg"><span class="l"></span><span class="r"></span><span class="header">Main Menu</span></h3></div>
<div class="tp_leftblock_body" id="block9"><div class="windowbg2"><div style="padding: 8px 8px 0 8px;"><div class="blockbody" style="overflow: auto;">
<ul class="tp_catmenu">
<li>
<div class="fl1"><img src="http://www.romantimes.org/tp-images/icons/bullet3.gif" alt=""></div>
<div class="fl2"><a href="http://www.romantimes.org/index.php?page=4">Info for New Attendees</a></div>
</li>
<li>
<img src="http://www.romantimes.org/tp-images/icons/bullet3.gif" alt="">
<a href="http://www.romantimes.org/index.php?page=11">Roman Times Can come to You!</a></li>
</ul></div></div><span class="botslice"><span></span></span></div>
</div>
</div>
</div>

</body>
</html>

[illori]

which menu?

if this is for a block or an article, you dont needd the header and opening html tags as those are already present on the page.

[sturmkatze]

which menu?

if this is for a block or an article, you dont needd the header and opening html tags as those are already present on the page.

It's for a block, using the menu feature in TP. IF you look at the site, the menu text is not aligned correctly. I want it like a hanging indent or with bullets. I don't want the second line to go to the left of the bullet/arrow. NO, I do not want to make the menu titles shorter, before that is asked. That is just some sample code. WHERE is the menu code, is what I am asking...

[WillyP]

If you don't want to do it with CSS, how do you want to do it? 

What code do you want us to tell you where is? The menu code is in the block, but that's just a simple list and the styling is done with CSS, which, if you look at it with Firebug, will tell you what file and what line to look for.

[sturmkatze]

If you don't want to do it with CSS, how do you want to do it? 

What code do you want us to tell you where is? The menu code is in the block, but that's just a simple list and the styling is done with CSS, which, if you look at it with Firebug, will tell you what file and what line to look for.

When I normally use css, I do it w/ bg images and rollover css Like : here). I used this built in menu thing on this other site, in case someone else has to work on it. I would like to change how the <li> is applied.

[WillyP]

Web pages are styled with CSS. You have a choice to edit the CSS, or accept the default browser styling.

All the HTML on your site is styled with CSS, or is left to the browser's default CSS styling.

So, you really have two choices, either style the list using CSS... or don't.

Even if you took out the lists*, you'd still have to do some styling. Can you guess what you'd use to style your non-list list of links? That's right, CSS! 

*note: I'm not suggesting removing the lists... using a list is the correct way to create a list. Removing the lists would be a really bad idea.

[IchBin]

Your problem would not be resolved by removing those 10 pixels on the left of the menu. You have menu items that are too long.

To get what you want is probably easier to make your own menu. All of the teaks you would have to make would involve you having to alter TP code where the menu editor puts the menu's together as well as the styles.

It's really easy to do lists with images now days.

First 2 google results just for you.
http://www.w3schools.com/css/css_list.asp
http://css.maxdesign.com.au/listamatic/vertical05.htm

[sturmkatze]

Your problem would not be resolved by removing those 10 pixels on the left of the menu. You have menu items that are too long.

To get what you want is probably easier to make your own menu. All of the teaks you would have to make would involve you having to alter TP code where the menu editor puts the menu's together as well as the styles.

It's really easy to do lists with images now days.

First 2 google results just for you.
http://www.w3schools.com/css/css_list.asp
http://css.maxdesign.com.au/listamatic/vertical05.htm

Sure, but it's not how I want to do it. I want a list using like a hanging indent. This one let's the second line slide back. I don't want that. I just want to encase the menu part in a special css style and use that. I prefer to use text. It looks and works fine except for the menu defaulting to this style.

[sturmkatze]

IchBin, I ask you: how can I edit just the css on the menus? That's all I need. I have someone who helps me a lot w/ this. I just need to know where it is so I may monkey w/ it. If we mess it up, you can say "I told you so."

I was having problems w/ the damned css one I made. When I use it, for some reason, the "home" button then put a blank area in the front panel, yet, my menu has the home page and it works. Since I couldn't figure that out, I just went back to this menu--I'd be happy if I could just tweak the css for the menu's list. Hanging indent, like list where the next line does NOT extend back before the bullet.

[sturmkatze]

See attached graphic... I want the text to align w/ the red line here. No, making the text shorter is NOT an option.