minimizing the window drops one menu item below the main menu

dksellou · November 11th, 2014, 10:36 PM

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;

}

Imar · November 13th, 2014, 04:29 PM

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

dksellou · November 13th, 2014, 05:16 PM

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)...
:)

Imar · November 13th, 2014, 05:31 PM

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

dksellou · November 13th, 2014, 10:41 PM

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

thanks

Imar · November 14th, 2014, 04:04 AM

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