Solved

Need help with centering and DIVs

Posted on 2013-05-18
5
201 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
Comment Utility
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 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Its time to assign the points then.... ;)
0
 

Author Closing Comment

by:pbissegger
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

763 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

11 Experts available now in Live!

Get 1:1 Help Now