Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: Beginning ASP.NET 4 : in C# and VB
This is the forum to discuss the Wrox book Beginning ASP.NET 4: in C# and VB by Imar Spaanjaars; ISBN: 9780470502211
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET 4 : in C# and VB section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old October 9th, 2011, 05:26 PM
Authorized User
Points: 144, Level: 2
Points: 144, Level: 2 Points: 144, Level: 2 Points: 144, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2011
Location: Meridian, Idaho
Posts: 37
Thanks: 13
Thanked 0 Times in 0 Posts
Send a message via MSN to SamuelMSr
Question Problems with Menu and item spacing

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!!
__________________
Noob, whole noob, nothing but a noob, so help me God. I will learn if it kills me.....
  #2 (permalink)  
Old October 10th, 2011, 02:28 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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.
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
The Following User Says Thank You to Imar For This Useful Post:
SamuelMSr (October 10th, 2011)
  #3 (permalink)  
Old October 10th, 2011, 09:56 AM
Authorized User
Points: 144, Level: 2
Points: 144, Level: 2 Points: 144, Level: 2 Points: 144, Level: 2
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2011
Location: Meridian, Idaho
Posts: 37
Thanks: 13
Thanked 0 Times in 0 Posts
Send a message via MSN to SamuelMSr
Default

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!!
__________________
Noob, whole noob, nothing but a noob, so help me God. I will learn if it kills me.....
  #4 (permalink)  
Old October 10th, 2011, 10:01 AM
Imar's Avatar
Wrox Author
Points: 70,322, Level: 100
Points: 70,322, Level: 100 Points: 70,322, Level: 100 Points: 70,322, Level: 100
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Utrecht, Netherlands.
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

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
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!


Similar Threads
Thread Thread Starter Forum Replies Last Post
Spacing menu options across menu bar runnerpaul BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 4 April 27th, 2011 10:59 AM
right click on a menu item chuckcottle C++ Programming 3 May 14th, 2007 10:34 AM
cannot add a new item to this menu ... paulmarshall General .NET 0 April 18th, 2007 03:03 PM
how create menubar, menu, menu item in xsl vijayanmsc XSLT 1 June 5th, 2006 06:43 AM
Menu Help in statusbar at mousemove over Menu item Kaustav VB Components 1 September 14th, 2005 09:28 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.