Problems with Menu and item spacing

SamuelMSr · October 9th, 2011, 05:26 PM

I am done with the book and started on a new project, to use the information I got out of the book and to basically "get my feet wet".

I am refering to the book and using the information within in order to move along and not get completely lost.

I have been doing great so far, but I have gotten to where I am building the Menu for the site and no matter what I do I can not get the menu items spaced properly. I used the:

.MainMenu ul li
{
width: 110px;
}

from the book and changed that width property up and down like crazy trying to get something to work, the problem is that some items have huge spaces between them and others have none.

You can see what I mean by going here: http://chris.samuelmsr.com I uploaded what I have done so far with the site here.

Here is my code from the web.sitemap:

Code:

<?xmlversion="1.0"encoding="utf-8" ?>
<siteMapxmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNodeurl="~/"title="Home"description="Home">
<siteMapNodeurl="~/Default.aspx"title="Home"description="Return Home" />
<siteMapNodeurl="~/Collection/Default.aspx"title="Collection"description="Chris's Collection"/>
<siteMapNodeurl="~/Available/Default.aspx"title="Available"description="Available Animals" />
<siteMapNodeurl="~/Care/Default.aspx"title="Care"description="Care and Feeding" />
<siteMapNodeurl="~/AboutUs/AboutUs.aspx"title="About"description="About House of Geckos" />
<siteMapNodeurl="~/AboutUs/ContactUs.aspx"title="Contact"description="Contact House of Geckos" />
<siteMapNodeurl="~/AboutUs/Links.aspx"title="Links"description="Links" />
</siteMapNode>
</siteMap>

Here is the code from my menu:

Code:

<divid="MenuWrapper">
<asp:MenuID="Menu1"runat="server"CssClass="MainMenu"DataSourceID="SiteMapDataSource1"Orientation="Horizontal"StaticEnableDefaultPopOutImage="False">
</asp:Menu>
<asp:SiteMapDataSourceID="SiteMapDataSource1"runat="server"ShowStartingNode="False"/>
</div>

Any help would be greatly appreciated.

I am also wondering, is it possible for me to use my own images that I created for the actual menu items in the menu bar or am I stuck with the plain text?

Thank you very much!!

Imar · October 10th, 2011, 02:28 AM

Quote:

the problem is that some items have huge spaces between them and others have none.

That makes sense, as some words are shorter than others. The menu items all have an exact width, but there's more or less room between an item and the next depending on the length of the text.

Try dropping the explicit width and use a margin-right to create room between the elements. Something like this:

Code:

.MainMenu ul li
{
  margin-right: 20px;
}

Hope this helps,

Imar

P.S.: When pasting code here, please paste it in Notepad first and then copy and paste the plain text version here. This forum has some issues displaying formatted code.

SamuelMSr · October 10th, 2011, 09:56 AM

Thanks Imar, that worked great.

One more question please. Is it possible to use images as the links for the menu items or can I only use the plain text?

Thanks!!

Imar · October 10th, 2011, 10:01 AM

You can assign images to the various HTML elements through CSS. Something like:

Code:

 
.MainMenu ul li a
{
  background-image: url(Some/Path/To/YourImage.jpg);
}

Ideally, for SEO purposes, the text on the menu is true text and the image serves just as a background image.

For future questions like these: please create a new topic for a new question. Somebody else searching for images on menu items won't be likely to click a thread titled "Problems with Menu and item spacing". Also, for questions not directly related to my book, please pick an appropriate generic category here at p2p.wrox.com. In this thread the question was related quite a bit to the book, but this may not always be the case.

Hope this helps.

Cheers,

Imar