Wrox Programmer Forums
Go Back   Wrox Programmer Forums > ASP.NET and ASP > ASP.NET 4.5 > ASP.NET 4.5 General Discussion
|
ASP.NET 4.5 General Discussion For ASP.NET 4.5 discussions not relating to a specific Wrox book
Welcome to the p2p.wrox.com Forums.

You are currently viewing the ASP.NET 4.5 General Discussion 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 November 11th, 2014, 10:36 PM
Authorized User
 
Join Date: May 2013
Posts: 59
Thanks: 10
Thanked 0 Times in 0 Posts
Default minimizing the window drops one menu item below the main menu

Hi,
when i minimize my window (any browser) it drops one of my menu items (which are all in the same line when the window is maximized)
Is there any way to avoid this?
My css.file is almost identical (a few deletions and additions) to that of the aspnet 4.5 beginning book


* {
/*
Defines the main font used throughout the entire site.
*/
font-family: Arial, Sans-Serif;

}

body {
/*
Clears white space around the body and gives it a grey background color.
*/
margin: 0;
background-color: #000000;
color: grey;

}

a {
/*
Clears the underline on normal links, and gives them a different text color.
*/
text-decoration: none;
color: grey;
}

a:hover {
/*
Underlines links when the user hovers the mouse over them.
*/
text-decoration: underline;
color:purple;
}

h1 {
/*
Makes h1 elements smaller than their browser default.
*/
font-size: 20px;
text-align:center;
}

h2 {
/*
Gives h2 elements a different background color and size,
and adds a bit of margin at the top to create room between the heading and the preceding element.
*/
font-size: 14px;
color: #7773A1;
margin-top: 10px;
}


#PageWrapper {
/*
Sets the total width for the entire page. Also sets the background color
which is used to fill the background of the Sidebar in case the MainContent section is taller than the Sidebar.
Uses margin: auto to center the entire page in the middle of the browser's window.
*/
width: 100%;
background-color: #000000;
margin: auto;

}

header {
/*
Gives the header the same width as the PageWrapper. The height creates some room for the logo
that is set with the background-image.
*/


background-color:white;
width: 100%;
height: 140px;
background-image: url(Images/Logo.png);
background-repeat: no-repeat;
background-position:center;


}

header a {
/*
The header a is a link nested in header. It provides a link back to the homepage.
The size of the link is the same as the header, so the entire header is clickable.
*/
width: 100%;
height: 86px;
display: block;

}

nav {

height: 0px;
padding-top: 0px;




}
nav a {
/*
Links in the Menu are white. This gets overriden by styles in chapter 7.
*/
color: #fff;

}

.MainMenu {

border: 0px;

width: 75%;
height: 12px;
background-color:black;
padding-top: 3px;
padding-left:25%;


}

.MainMenu ul li {
/*
Gives the menu items in the main menu a width of 180px each.
*/
width: 200px;


}

.MainMenu ul li a:hover{
/*
Gives the menu items in the main menu a width of 180px each.
*/
background-color: white;
color: black;

}

section#MainContent {
/*
Defines the main content area. The #MainContent element has a minimum height of 500 pixels, but can grow if necessary.
The font-size is 80% of its parent element, which in this case comes down to 80% of the font
the user has specified as the default font in the browser.
*/
font-size: 1em;
width: 100%;
/*border-left: 1px solid white;
border-right: 2px solid white;*/
float: left;
background-color: #000000;
color: grey;
min-height: 500px;

}


footer {
/*
The footer is positioned below all other content (yet still within PageWrapper).
clear: both is used to clear the impact of the float properties used for #MainContent and #Sidebar.
*/
width: 100%;
clear: both;
position:absolute;
bottom: 0px;
/*height: 0px;*/
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 25px;
color: grey;

}

.Introduction {
font-style: italic;
color: #3e3e3e;
}

.MyButton {
color: White;
}

ul.level1 {
/* Defines the appearance of main menu items. */
font-size: 14px;
font-weight: bold;
height: 19px;
line-height: 19px;
}

ul.level1 .selected {
/* Defines the appearance of active menu items. */
background-color: #000000;
}

a.level1 {
/* Adds some white space to the left of the main menu item text.
!important is used to overrule the in-line CSS that the menu generates */
padding-left: 25px !important;
}

a.level2 {
/* Defines the appearance of the sub menu items. */
background-color: white;
padding-left: 8px;
}

a.level1:hover, a.level2:hover {
/* Defines the hover style for the main and sub items. */
background-color: #999999;
}

img {
border: 0;
}

.ErrorMessage {
color: red;
}

.PleaseWait {
height: 32px;
width: 500px;
background-image: url(Images/PleaseWait.gif);
background-repeat: no-repeat;
padding-left: 40px;
line-height: 32px;
}

.Attention {
border: 4px solid red;
padding: 10px 0;
width: 100px;
margin: auto;
display: block;
text-align: center;
}

.ItemContainer {
width: 600px;
list-style-type: none;
clear: both;
}

.ItemContainer li {
height: 300px;
width: 200px;
float: left;
}

.ItemContainer li img {
width: 180px;
margin: 10px 20px 10px 0;
}

.Summary {
font-style: italic;
display: block;
}

.startLogin a
{

font-size: x-large;
color:purple;
}


.startPhoto {

float: left;
width: 300px;
height: 300px;


}

.logIn {
float:right;
font-weight: bold;
padding-right:50px;
}


.beforeHead {
background-color: #B92F8F;
height: 30px;
}


.hr {
color:grey;
}

.contactUs {
padding-left:46%;
font-size:x-large;
}

.textbox {

float: right;

}
 
Old November 13th, 2014, 04:29 PM
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,

Instead of setting the width of the menu explicitly, like 200px, try setting a width (for example, 25% when you have four menu items).

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 November 13th, 2014, 05:16 PM
Authorized User
 
Join Date: May 2013
Posts: 59
Thanks: 10
Thanked 0 Times in 0 Posts
Default

i changed the .MainMenu ul li to 25%
and though it fixed the problem when minimizing , now the fourth item is very close to the third item (almost on top of the third item)...
:)
 
Old November 13th, 2014, 05:31 PM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

You may need to experiment a bit with all the different settings like float, margin and padding.

BTW: from a responsive perspective, putting it on the next line may not be such a bad idea. Alternatively you could look into framewoks like Bootstrap that make building responsive menus a lot easier (although unfortunately, that doesn't work very well with the Menu control).

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!
 
Old November 13th, 2014, 10:41 PM
Authorized User
 
Join Date: May 2013
Posts: 59
Thanks: 10
Thanked 0 Times in 0 Posts
Default

hi Imar,
do you mean experimenting in the .mainMenu or the
.MainMenu ul li

thanks
 
Old November 14th, 2014, 04:04 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Both. One controls the overall menu, the other the individual menu items. '

BTW: you may want to look at the original Planet Wrox menu, as it doesn't have this behavior. When you decrease the width of the menu, the items all stay on a single line.

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
Anable/Disable main menu item problem Dmitriy Oracle 1 January 23rd, 2007 03:41 PM
Anable/Disable main menu item problem Dmitriy Oracle ASP 0 January 23rd, 2007 03:36 PM
Anable/Disable main menu item problem Dmitriy Ajax 0 January 23rd, 2007 03:29 PM
Anable/Disable main menu item problem Dmitriy Assembly Language 0 January 23rd, 2007 03:27 PM
how create menubar, menu, menu item in xsl vijayanmsc XSLT 1 June 5th, 2006 06:43 AM





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