Wrox Programmer Forums
|
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
 
Old October 8th, 2010, 12:56 PM
Authorized User
 
Join Date: Apr 2010
Posts: 15
Thanks: 8
Thanked 0 Times in 0 Posts
Default Main menu items width

Hey all!
I'm stuck with what seems to be not so difficult thing to do, but I'm keep on failing.
In the following code (I left the comment for a reason) from the book:
Code:
.MainMenu ul li
{
  /*
    Gives the four menu items in the main menu a width of 200px each
  */
  width: 200px;
}
Is there a way to give a different width value to each main menu item separately?
I've tried some CSS selectors, and msdn, but no luck.
Thank you
 
Old October 9th, 2010, 03:17 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

It depends on the logic you use to determine an item's width. If you want just enough room for the text on the menu (meaning Home will be smaller than Reviews for example), simply drop the width from the CSS rule. You can then use padding-left and padding-right or margin-left and margin-right to create some room between the two items.

E.g.:

.MainMenu ul li
{
padding-right: 40px;
}

Hope this helps,

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!
 
Old October 9th, 2010, 09:50 AM
Authorized User
 
Join Date: Apr 2010
Posts: 15
Thanks: 8
Thanked 0 Times in 0 Posts
Default

Hi Imar and all!
Well, it helped and thank u for that.
I raised this question, because i thought on a scenario where you could have 10 menu items, that you try to squeeze in 844px width area, and 2 of the items could have long names, which can lead to "collisions" between the items if each of them will have an equal width., in oppose to the case in the book, where only 4 items are described (at least @ chapter 7).
So, I began searching methods to set each item's width separately, and the only thing came to my mind is that some how I need to set the ul and li HTML elements that used to render the menu, but I'm not sure if it's possible.

Your reply helped Imar, but I still wonder, if it's possible, and if it is not too much digging, I'll be happy to hear your opinion about it, or someone else's opinion.
 
Old October 10th, 2010, 03:38 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

I don't think you can do it from server side code. The MenuItem class (http://msdn.microsoft.com/en-us/libr....menuitem.aspx) does not expose properties such as Width, CssClass or Attributes you typically use to change behavior at the client.

The only options I see is to use CSS 3 or JavaScript.

CSS3:
The following code changes the second menu to yellow:

Code:
 
#Menu1 ul.level1 li:nth-child(2)
{
  background-color: Yellow;
}
The downside is that CSS 3 is not very well supported yet.

JavaScript / jQuery:
You could use jQuery to cause a similar effect, like this code which changes the third menu to red:

Code:
<script type="text/javascript">
$(function ()
{
  $('#Menu1 ul.level1 li:nth-child(3)').addClass('Other');
});
</script>
combined with this CSS class:

Code:
 
.Other
{
  background-color: Red;
}
The jQuery solution works regardless of the browser and whether or not it supports CSS 3. The downside is that it requires JavaScript in order to function.

Hope this helps,

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!

Last edited by Imar; October 18th, 2010 at 05:44 AM..
The Following User Says Thank You to Imar For This Useful Post:
stormage (October 10th, 2010)





Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP 3.5-spaces between main menu items stormage BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 1 May 22nd, 2010 03:45 AM
CH 15 Context Menu - Element Menu Items Razzy The Pug BOOK: Ivor Horton's Beginning Visual C++ 2005 2 November 9th, 2008 03:53 PM
ie vs. firefox menu/hover/width problems mishagos BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 June 29th, 2006 08:02 AM
Help with Main Menu GAF General .NET 0 March 18th, 2005 08:10 PM
Main menu function andy_study VB.NET 2002/2003 Basics 2 December 15th, 2004 06:48 PM





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