Forums / Setup & design / menu organization does'nt work properly

menu organization does'nt work properly

Author Message

Guilherme Longo

Tuesday 11 September 2007 2:02:42 am

My friends, by 2 days i'm trying do somenting relatively simple but without succefull.

I have one menu bar like below:

Members Log-in - Join - Site Map - About Icos

this is the code:

<div id="links">
<ul>
<b><li><a href={"/eng/about_icos"} title="about_icos">About ICOS</a></li></b>
{if $pagedesign.data_map.tag_cloud_url.data_text|ne('')}
{if $pagedesign.data_map.tag_cloud_url.content|eq('')}
<li><a href={concat("/content/view/tagcloud/", $indexpage)|ezurl} title="{$pagedesign.data_map.tag_cloud_url.data_text|wash}">{$pagedesign.data_map.tag_cloud_url.data_text|wash}</a></li>
{else}
<li><a href={$pagedesign.data_map.tag_cloud_url.content|ezurl} title="{$pagedesign.data_map.tag_cloud_url.data_text|wash}">{$pagedesign.data_map.tag_cloud_url.data_text|wash}</a></li>
{/if}
{/if}
{if $pagedesign.data_map.site_map_url.data_text|ne('')}
{if $pagedesign.data_map.site_map_url.content|eq('')}
<b><li><a href={concat("/content/view/sitemap/", $indexpage)|ezurl}</b> title="{$pagedesign.data_map.site_map_url.data_text|wash}">{$pagedesign.data_map.site_map_url.data_text|wash}</a></li>
{else}
<li><a href={$pagedesign.data_map.site_map_url.content|ezurl} title="{$pagedesign.data_map.site_map_url.data_text|wash}">{$pagedesign.data_map.site_map_url.data_text|wash}</a></li>
{/if}
{/if}
{if $basket_is_empty|not()}
<li><a href={"/shop/basket/"|ezurl} title="{$pagedesign.data_map.shopping_basket_label.data_text|wash}">{$pagedesign.data_map.shopping_basket_label.data_text|wash}</a></li>
{/if}
{if $current_user.is_logged_in}
{if $pagedesign.data_map.my_profile_label.has_content}
<li><a href={concat( "/user/edit/", $current_user.contentobject_id )|ezurl} title="{$pagedesign.data_map.my_profile_label.data_text|wash}">{$pagedesign.data_map.my_profile_label.data_text|wash}</a></li>
{/if}
{if $pagedesign.data_map.logout_label.has_content}
<li><a href={"/user/logout"|ezurl} title="{$pagedesign.data_map.logout_label.data_text|wash}">{$pagedesign.data_map.logout_label.data_text|wash} ( {$current_user.contentobject.name|wash} )</a></li>
{/if}
{else}
{if $pagedesign.data_map.register_user_label.has_content}
<b><li><a href={"/user/register"|ezurl}</b> title="{$pagedesign.data_map.register_user_label.data_text|wash}">{$pagedesign.data_map.register_user_label.data_text|wash}</a></li>
{/if}
{if $pagedesign.data_map.login_label.has_content}
<b><li><a href={"/user/login"|ezurl}</b> title="{$pagedesign.data_map.login_label.data_text|wash}">{$pagedesign.data_map.login_label.data_text|wash}</a></li>
{/if}
{/if}
{if $pagedesign.can_edit}
<li><a href={concat( "/content/edit/", $pagedesign.id, "/f/", ezini( 'RegionalSettings', 'Locale' , 'site.ini'), "/", $pagedesign.initial_language_code )|ezurl} title="{$pagedesign.data_map.site_settings_label.data_text|wash}">{$pagedesign.data_map.site_settings_label.data_text|wash}</a></li>
{/if}
</ul>
</div>

*Look the first link that a put in the Div "About Icos". I put it first but it still appears in the end of the another 3 links.

I checked my css file and it is like below:

div#links
{
float: right;
clear: right;
text-align: right;
padding-right: 30px;
font-size: 0.9em;
font-weight: bold;
height: 25px;
width: 75%;
margin: 0px;
}

div#links a
{
color: #000033;
border-left: 2px solid #999900;
display: block;
float: right;
padding-left: 0.75em;
padding-right: 0.75em;
text-decoration: underline;
height: 16px;
}

div#links a:hover {
color: #990000;

I checked every thning but i still did'nt understanding what happen.
Why ABOUT ICOS dont come to the first position im my menubar.

* Now i will try create 1 main DIV and pu another 2 divs inside and try align the links, but i thing thats is not a "best" way to do it.

Pascal Specht

Tuesday 11 September 2007 2:14:32 am

Hi Guilherme,

When it comes to such situations, I always use the Firebug extension of Firefox. Once installed, you can click on the little green icon at the bttom right, and then "Inspect" the part of the HTML you want to understand. The very nice thing is that you'll see all CSS rules that have been applied to your elements, and you can even edit them, or disable them to see the effect. I would believe that your float:right or clear:right is at the origin of your problem, but as I said, see how your menubar behaves when you disable parts of your CSS live with Firebug.

Cheers,
Pascal

Guilherme Longo

Tuesday 11 September 2007 3:09:04 am

Ok Pascal, i already instaled firebug.

I found one way but anorther problems happen
When I change my css for:

div#links
{
float: right;
clear: right;
text-align: right;
<b>padding-left: 890px;<b> (old: padding-right: 30px)
font-size: 0.9em;
font-weight: bold;
height: 25px;
width: 75%;
margin: 0px;
}

div#links a
{
color: #000033;
border-left: 2px solid #999900;
display: block;
<b>float: left;</b> (old: float: right)
padding-left: 0.75em;
padding-right: 0.75em;
text-decoration: underline;
height: 16px;
}

My menu change from:
Members Log-in - Join - Site Map - About Icos

For:
About Icos - Site Map - Join - Members Login.

Ok for while, but when the browser is minimized the page has the feature to re-align in the browser and doing thats changes, it lost this feature, the menu gone to very end left and when is browser minimized, it desapears for view screen. ;O(

But, thank for the plug-in, will be very util for me!

André R.

Tuesday 11 September 2007 3:47:56 am

Float is the reson for this, so change it or just change your template to be mirrorred of what you want.

div#links a
{
color: #000033;
border-left: 2px solid #999900;
display: block;
<b>float: right;</b>
padding-left: 0.75em;
padding-right: 0.75em;
text-decoration: underline;
height: 16px;
}

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Guilherme Longo

Tuesday 11 September 2007 5:03:04 am

sorry by my inexperience, but i thing more complicated change the css structure.

I did'nt understood exactly what you mean when you say:

or just change your template to
be mirrorred of what you want.

which kind of change are you talking about?

Sorry again by my fault;

Guilherme Longo

Tuesday 11 September 2007 5:44:56 am

All right again friends. 2 hours of brainstorm was good for solve this problem ;o)

I removed the float propriety and changed the display for inline. Works perfect

div#links a
{
color: #000033;
border-left: 2px solid #999900;
<b>display: inline;</b>
padding-left: 0.75em;
padding-right: 0.20em;
text-decoration: underline;
height: 16px;
}

thanks