Solved

Need help with centering and DIVs

Posted on 2013-05-18
5
216 Views
Last Modified: 2013-05-30
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
0
Comment
Question by:pbissegger
  • 2
  • 2
5 Comments
 
LVL 9

Accepted Solution

by:
Ishaan Rawat earned 400 total points
ID: 39178204
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
ID: 39180633
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
 

Author Comment

by:pbissegger
ID: 39187772
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
 
LVL 9

Expert Comment

by:Ishaan Rawat
ID: 39188090
Its time to assign the points then.... ;)
0
 

Author Closing Comment

by:pbissegger
ID: 39207182
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now