Need help with centering and DIVs

I have always used a lot of HTML tables for formatting my web pages. Although it takes a whole lot more code, it just seems that the alternative (divs and CSS) never ever gave me the result I wanted.

Well, I have decided to give it another try ... but I need some help.

Attached is part of a web page that I am trying to format, and I have 4 problems I want to address:

1. I want to get rid of the white space between the black background and the white background

2. I want to center the top menu, and add some padding above and below it.

3. I want to center the bottom menu, and add some padding above and below it.

4. I want the red background to have a specified height

Although this sounds really easy, especially since I understand CSS such as "text=align:center" or "margin-left: auto" or "padding-top: 10px" - I cannot get it to work.

Help !

Please find attached my HTML code:
        <div class="mainwrapper">
            <div class="mainheader">
                <div class="mainlogo">
                    <asp:Image ID="Sponsor1" runat="server" />
                </div>
                <div class="mainbanner">
                    <cc1:NMGAdRotator ID="NMGAdRotator1" runat="server" Height="60px" Width="468px"  />
                    <script type="text/javascript" src="~/flashfix.js"></script>
                </div>
            </div>
            <div class="mainmenuarea" >  
                <ul id="navlist">
                    <li id="home"><a href="default5.aspx"></a></li>
                    <li id="login"><a href="default5.aspx"></a></li>
                    <li id="logoff"><a href="default5.aspx"></a></li>
                    <li id="prefs"><a href="default5.aspx"></a></li>
                    <li id="help"><a href="default5.aspx"></a></li>
                    <li id="lang"><a href="default5.aspx"></a></li>
                </ul>  
                <br />
                <br />            
                <div class="mainbottommenu">
                    <asp:Label id="showmenu" runat="server" />
                </div>
            </div>

Open in new window


and my CSS stylesheet:
#navlist{position:relative;    margin-top: 20px;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:25px;display:block;}

#home{left:0px;width:101px;}
#home{background:url('../images/smallmenuicons.png') -4px -32px;}
#home a:hover{background: url('../images/smallmenuicons.png') -4px -5px;}

#login{left:114px;width:179px;}
#login{background:url('../images/smallmenuicons.png') -110px -32px;}
#login a:hover{background: url('../images/smallmenuicons.png') -110px -5px;}

#logoff{left:298px;width:175px;}
#logoff{background:url('../images/smallmenuicons.png') -294px -32px;}
#logoff a:hover{background: url('../images/smallmenuicons.png') -294px -5px;}

#prefs{left:479px;width:76px;}
#prefs{background:url('../images/smallmenuicons.png') -475px -32px;}
#prefs a:hover{background: url('../images/smallmenuicons.png') -475px -5px;}

#help{left:561px;width:87px;}
#help{background:url('../images/smallmenuicons.png') -557px -32px;}
#help a:hover{background: url('../images/smallmenuicons.png') -557px -5px;}

#lang{left:654px;width:102px;}
#lang{background:url('../images/smallmenuicons.png') -650px -32px;}
#lang a:hover{background: url('../images/smallmenuicons.png') -650px -5px;}

.mainwrapper {
    width: 960px; 
    margin-left: auto; 
    margin-right: auto

}

.mainheader {
    background-color: #000000;
    height: 90px;

}

.mainlogo {
    float: left;
    padding-left: 60px;
    width: 300px;
    margin-top: 10px

}

.mainbanner {
    padding-left: 420px;
    padding-top: 15px

}

.mainmenuarea {
    background-color: #990000;
    clear: both;
    display:block;
    margin-left:auto;
    margin-right:auto;
    height: 240px;
    width: 100%;

}

.maintopmenu {
    height: 45px;

}

.mainbottommenu {
    height: 45px; 

}

Open in new window


What am I doing wrong ?

Thanks, Peter
web-page.jpg
pbisseggerAsked:
Who is Participating?
 
Ishaan RawatConnect With a Mentor Designer | Developer | ProgrammerCommented:
Check the following CSS...

*{margin:0px; padding:0px;}
            #navlist{position:relative; width:800px; margin: 0 auto;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:25px;display:block; padding: 10px 0;}

#home{left:0px;width:101px;}
#home{background:url('../images/smallmenuicons.png') -4px -32px;}
#home a:hover{background: url('../images/smallmenuicons.png') -4px -5px;}

#login{left:114px;width:179px;}
#login{background:url('../images/smallmenuicons.png') -110px -32px;}
#login a:hover{background: url('../images/smallmenuicons.png') -110px -5px;}

#logoff{left:298px;width:175px;}
#logoff{background:url('../images/smallmenuicons.png') -294px -32px;}
#logoff a:hover{background: url('../images/smallmenuicons.png') -294px -5px;}

#prefs{left:479px;width:76px;}
#prefs{background:url('../images/smallmenuicons.png') -475px -32px;}
#prefs a:hover{background: url('../images/smallmenuicons.png') -475px -5px;}

#help{left:561px;width:87px;}
#help{background:url('../images/smallmenuicons.png') -557px -32px;}
#help a:hover{background: url('../images/smallmenuicons.png') -557px -5px;}

#lang{left:654px;width:102px;}
#lang{background:url('../images/smallmenuicons.png') -650px -32px;}
#lang a:hover{background: url('../images/smallmenuicons.png') -650px -5px;}

.mainwrapper {
    width: 960px; 
    margin-left: auto; 
    margin-right: auto

}

.mainheader {
    background-color: #000000;
    height: 90px;

}

.mainlogo {
    float: left;
    padding-left: 60px;
    width: 300px;
    margin-top: 10px

}

.mainbanner {
    padding-left: 420px;
    padding-top: 15px

}

.mainmenuarea {
    background-color: #990000;
    clear: both;
    display:block;
    margin-left:auto;
    margin-right:auto;
    height: auto;
    width: 100%;

}

.maintopmenu {
    height: 45px;

}

.mainbottommenu {
    height: 45px; 
    padding: 20px 0;
    margin: 0 auto;
    width: 450px;
    text-align:center;

}

Open in new window


There might be some errors ... but I you can provide the Live URL of the page I can surely fix your problem...

First try the above code and then tell me if an issue persist...
0
 
Chris StanyonConnect With a Mentor Commented:
Couple of things here. Firstly, it's always a good idea to start off with a css reset or normalizer. This will remove or reset the different brower's default styling so that they start to behave in the same way. It may be that some of the gaps are down to default margins and paddings.

Your CSS has a lot of extra code. Set the background image once and then move it according. You seem to set the background image to LI but then also apply it to A within the LI on hover.

Rather than absolutely positioning the menu elements, set them to display as inline blocks  this will allow them to move more naturally (if a visitor increases their font-size for example.) and help you centre the menu.

#navlist { text-align:center; }
#navlist li { display:inline-block; background-image: url('../images/smallmenuicons.png'); } 

#home { background-position: -4px -32px; }
#home:hover { background-position -4px -5px; }

#login{ background-position: -110px -32px; }
#login:hover { background-position: -110px -5px; }

Open in new window

0
 
pbisseggerAuthor Commented:
Thank you Ishaan and Chris.

The live page can be accessed at http://www.soccer-management.ca/default5.aspx.

(its better if you actually enter into the site at http://www.soccer-management.ca, and once you select a team, to retype the URL http://www.soccer-management.ca/default5.aspx).

I have incorporated Ishaan's changes which addressed the padding and centering issues perfectly - and then I made some minor adjustments.

I made some of Chris' changes but not all because of the following issues:
  - When I changed display:block to display:inline-block, none of the hover effects would work
  - Using a common background image for navlist li works, but attempting to reuse this image with either a home:hover or home a:hover does not seem to work.

In the live URL above, I have made the home link using #home:hover and the login link as login a:hover to demonstrate the problem. The other images display the hover correctly.

Please find attached my updated code:
*{margin:0px; padding:0px;}
#navlist{position:relative; width:800px; margin: 0 auto;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:12px; background-image: url('../images/smallmenuicons.png');}
#navlist li, #navlist a{height:25px;display:block;}

#home{left:0px; width:101px; background-position: -4px -32px; }
#home:hover{ background-position -4px -5px; }

#login{left:114px;width:179px; background-position: -110px -32px;}
#login a:hover{background-position -110px -5px; }

#logoff{left:298px;width:175px; background-position: -294px -32px;}
#logoff a:hover{background: url('../images/smallmenuicons.png') -294px -5px;}

#prefs{left:479px;width:76px; background-position: -475px -32px;}
#prefs a:hover{background: url('../images/smallmenuicons.png') -475px -5px;}

#help{left:561px;width:87px; background-position: -557px -32px;}
#help a:hover{background: url('../images/smallmenuicons.png') -557px -5px;}

#lang{left:654px;width:102px; background-position: -650px -32px;}
#lang a:hover{background: url('../images/smallmenuicons.png') -650px -5px;}

.mainwrapper {
    width: 960px; 
    margin-left: auto; 
    margin-right: auto

}

.mainheader {
    background-color: #000000;
    height: 90px;

}

.mainlogo {
    float: left;
    padding-left: 60px;
    width: 300px;
    margin-top: 10px

}

.mainbanner {
    padding-left: 420px;
    padding-top: 15px

}

.mainmenuarea {
    background-color: #990000;
    clear: both;
    display:block;
    margin-left:auto;
    margin-right:auto;
    height: auto;
    width: 100%;

}

.maintopmenu {
    height: 45px;

}

.mainbottommenu {
    height: 45px; 
    padding: 20px 0;
    margin: 0 auto;
    width: 450px;
    text-align:center;

}

Open in new window


To finish this up, I have 2 things I would like to finalize:

1. I would like to see if I can get Chris' common background image idea working for the hover, so my page does not have to load the same image multiple times.

2. My bottom menu is automatically generated on the fly, and varies in width depending on the language selected and the privileges of the user. We have currently set the bottom menu width in  .mainbottommenu {width: 450px;} - but my menu can be more or less wide than this. I would like to have a solution where the page automatically just pops in the menu (no matter how wide and centers it). Is there any way to do this ?

Thanks guys. We are 90% complete and it is starting to look very good. I appreciate the expert advice.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Its time to assign the points then.... ;)
0
 
pbisseggerAuthor Commented:
Guys,

Well I did not hear back about any of my questions to complete the solution, so I ended up doing a bit of redesign and have the menu items as individual buttons and not as part of an unordered list.

This has allowed me to make incorporate some of the recommendations from Chris, (because they were not working at all on the bullet list), and keep all the good code from Ishaan which had solved my problems for centering. Also using buttons has allowed me to incorporate .NET instead of HTML, so its easier for me to change or hide buttons at runtime.

Here is the final solution:

HTML
            <div class="mainmenuarea" >  
                <div id="navlist">
                    <asp:Button id="homeButton" class="homeButton" OnCommand="Topmenuhandler" CommandName="home" runat="server"  />
                    <asp:Button id="loginButton" class="loginButton" OnCommand="Topmenuhandler" CommandName="login" runat="server"  />
                    <asp:Button id="logoffButton" class="logoffButton" OnCommand="Topmenuhandler" CommandName="logoff" runat="server"  />
                    <asp:Button id="prefsButton" class="prefsButton" OnCommand="Topmenuhandler" CommandName="prefs" runat="server"  />
                    <asp:Button id="helpButton" class="helpButton" OnCommand="Topmenuhandler" CommandName="help" runat="server"  />
                    <asp:Button id="langButton" class="langButton" OnCommand="Topmenuhandler" CommandName="lang" runat="server"  />
                </div>            
                <div class="mainbottommenu">
                    <asp:Label id="showmenu" runat="server" />
                </div>
            </div>

Open in new window


CSS
*{margin:0px; padding:0px;}

#navlist {
    position:relative; 
    width: 800px; 
    text-align:center; 
    padding-top: 10px; 
    margin-left: auto; 
    margin-right: auto;

}

.mainwrapper {
    width: 960px; 
    margin-left: auto; 
    margin-right: auto

}

.homeButton, .homeButton:hover, .loginButton, .loginButton:hover, .logoffButton, .logoffButton:hover, .prefsButton, .prefsButton:hover, .helpButton, .helpButton:hover, .langButton, .langButton:hover, .homeButtonfr, .homeButtonfr:hover, .loginButtonfr, .loginButtonfr:hover, .logoffButtonfr, .logoffButtonfr:hover, .prefsButtonfr, .prefsButtonfr:hover, .helpButtonfr, .helpButtonfr:hover, .langButtonfr, .langButtonfr:hover {
    background-image: url('../images/smallmenuicons.png');
    height: 25px;
    border-style: none;
    margin-left: 2px;
    margin-right: 2px;
}

.homeButton
{
  width: 90px;   
  background-position: -4px -87px;
}
.homeButton:hover
{
  background-position: -4px -60px;
}

.loginButton
{
  width: 89px; 
  background-position: -100px -87px;
}
.loginButton:hover
{
  background-position: -100px -60px;
}

.logoffButton
{
  width: 100px; 
  background-position: -195px -87px;
}
.logoffButton:hover
{
  background-position: -195px -60px;
}

.prefsButton
{
  width: 85px; 
  background-position: -301px -87px;
}
.prefsButton:hover
{
  background-position: -301px -60px;
}

.helpButton
{
  width: 91px; 
  background-position: -392px -87px;
}
.helpButton:hover
{
  background-position: -392px -60px;
}

.langButton
{
  width: 112px; 
  background-position: -489px -87px;
}
.langButton:hover
{
  background-position: -489px -60px;
}

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.