Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

UL LI alignment problem

Posted on 2008-11-05
5
Medium Priority
?
1,104 Views
Last Modified: 2013-11-19
Hi there,
I'm trying to use CSS for the first time to make a rollover menu system.
I am nearly there apart from an alignment issue I have with the UL LI tags.
Basically I have an image that when your roll over and element in the LI tag is should reposition the background image.

The main problem is the List does not start from the far left of the area that I want the menu system to occupy, it is as if it is starting in the center of that area. Hard to explain so have a look at the following URL to see what I mean http://www.completeitsolution.net/cits.htm

I'm sure I am doing something stupid, which I will be grateful if someone could assist me.

Thanks
Paul
************* CSS CODE *********************
 
/* Generic Tags */ 
body{
 padding:0px;
 margin:0px;
 background-color: #f2f2f2;
}
 
/* Page Layout */ 
#page_container{
position: relative;
width:770px;
top: 5px;
left: 50%;
margin-left:-385px;
background-color: #ffffff;
border: 1px solid #acacac;
}
 
/* Make sure there is always a scroll bar for firfox */ 
html {
     overflow: -moz-scrollbars-vertical;  
}
 
/* Sub Menu Header - Start */
#sub_menu_header{ 
 height:130px;
}
 
#sub_menu_logo{
float:left;
width:175px;
height:86px;
background-image: url('../images/banner/sub menu logo.png');
}
 
#sub_menu_advert {
width:595px;
height:86px;
background-image: url('../images/banner/sub menu advert.png');
}
 
#sub_menu_container{
position: relative;
width:770px;
margin:0, auto;
}
 
#sub_menu li {
display: inline;
}
 
#sub_menu li a {
float:left;
width:107px;
height:0px;
padding-top:40px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}
 
#sub_menu li#option1 a {width:110px; background-position:0px 0px;}
#sub_menu li#option2 a { width:107px; background-position:-107px 0px; }
#sub_menu li#option3 a { width:107px; background-position:-214px 0px; }
#sub_menu li#option4 a { width:107px; background-position:-321px 0px; }
#sub_menu li#option5 a { width:107px; background-position:-428px 0px; }
#sub_menu li#option6 a { width:107px; background-position:-535px 0px; }
#sub_menu li#option7 a { width:110px; background-position:-642px 0px; }
 
#sub_menu li#option1 a:active , #sub_menu li#option1 a.current-link {width:110px; background-position:0px -82px;}
#sub_menu li#option2 a:active , #sub_menu li#option2 a.current-link { width:107px; background-position:-107px -82px; }
#sub_menu li#option3 a:active , #sub_menu li#option3 a.current-link { width:107px; background-position:-214px -82px; }
#sub_menu li#option4 a:active , #sub_menu li#option4 a.current-link { width:107px; background-position:-321px -82px; }
#sub_menu li#option5 a:active , #sub_menu li#option5 a.current-link { width:107px; background-position:-428px -82px; }
#sub_menu li#option6 a:active , #sub_menu li#option6 a.current-link { width:107px; background-position:-535px -82px; }
#sub_menu li#option7 a:active , #sub_menu li#option7 a.current-link { width:110px; background-position:-642px -82px; }
 
#sub_menu li#option1 a:hover {width:110px; background-position:0px -41px;}
#sub_menu li#option2 a:hover { width:107px; background-position:-107px -41px; }
#sub_menu li#option3 a:hover { width:107px; background-position:-214px -41px; }
#sub_menu li#option4 a:hover { width:107px; background-position:-321px -41px; }
#sub_menu li#option5 a:hover { width:107px; background-position:-428px -41px; }
#sub_menu li#option6 a:hover { width:107px; background-position:-535px -41px; }
#sub_menu li#option7 a:hover { width:110px; background-position:-642px -41px; }
/* Sub Menu Header - End */
 
/* content container - start */
#content_container{
position: relative;
width:770px;
overflow: visible;
top: 3px;
left: 50%;
margin-left:-385px;
background-color: #fff;
margin-bottom: 5px
}
/* content container - end */
 
**************** HTML CODE *****************************
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="cits.css" rel="stylesheet" type="text/css" />
 
</head>
<body>
<!-- page container - start -->
<div id="page_container"> 
  <!-- sub menu header- start -->
  <div id="sub_menu_header"> 
    <div id="sub_menu_logo"></div>
    <div id="sub_menu_advert"></div>
    <div id="sub_menu_container"> 
      <ul id="sub_menu">
        <li id="option1"><a class="current-link" href="#">Home</a></li>
        <li id="option2"><a href="#">Backup</a></li>
        <li id="option3"><a href="#">Support</a></li>
        <li id="option4"><a href="#">Bespoke</a></li>
        <li id="option5"><a href="#">Shop</a></li>
        <li id="option6"><a href="#">Login</a></li>
        <li id="option7"><a href="#">Home</a></li>
      </ul>
    </div>
  </div>
  <!-- sub menu header - end -->
</div>
<!-- page container - end -->
</body>
</html>

Open in new window

0
Comment
Question by:PaulEll
  • 2
  • 2
5 Comments
 
LVL 43

Accepted Solution

by:
David S. earned 1000 total points
ID: 22893087
Give the <ul> margin:0 and padding: 0

Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read these:
http://www.search-this.com/2007/03/12/no-margin-for-error/ 
http://snook.ca/archives/html_and_css/no_css_reset/
0
 
LVL 1

Author Comment

by:PaulEll
ID: 22893145
Hi there,

Thanks for your help.
I've added a margin and padding attributes to the UL as instructed, but with no joy.

I've uploaded the changes to http://www.completeitsolution.net/cits.htm

Thanks for your help.

Regards
Paul
#sub_menu_container{
position: relative;
width:770px;
margin:0, auto;
}
 
#sub_menu ul {
margin: 0px; 
padding: 0px;
}
 
#sub_menu li {
display: inline;
}
 
#sub_menu li a {
float:left;
width:107px;
height:0px;
padding-top:40px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}
 
#sub_menu li#option1 a {width:110px; background-position:0px 0px;}
#sub_menu li#option2 a { width:107px; background-position:-107px 0px; }
#sub_menu li#option3 a { width:107px; background-position:-214px 0px; }
#sub_menu li#option4 a { width:107px; background-position:-321px 0px; }
#sub_menu li#option5 a { width:107px; background-position:-428px 0px; }
#sub_menu li#option6 a { width:107px; background-position:-535px 0px; }
#sub_menu li#option7 a { width:110px; background-position:-642px 0px; }
 
#sub_menu li#option1 a:active , #sub_menu li#option1 a.current-link {width:110px; background-position:0px -82px;}
#sub_menu li#option2 a:active , #sub_menu li#option2 a.current-link { width:107px; background-position:-107px -82px; }
#sub_menu li#option3 a:active , #sub_menu li#option3 a.current-link { width:107px; background-position:-214px -82px; }
#sub_menu li#option4 a:active , #sub_menu li#option4 a.current-link { width:107px; background-position:-321px -82px; }
#sub_menu li#option5 a:active , #sub_menu li#option5 a.current-link { width:107px; background-position:-428px -82px; }
#sub_menu li#option6 a:active , #sub_menu li#option6 a.current-link { width:107px; background-position:-535px -82px; }
#sub_menu li#option7 a:active , #sub_menu li#option7 a.current-link { width:110px; background-position:-642px -82px; }
 
#sub_menu li#option1 a:hover {width:110px; background-position:0px -41px;}
#sub_menu li#option2 a:hover { width:107px; background-position:-107px -41px; }
#sub_menu li#option3 a:hover { width:107px; background-position:-214px -41px; }
#sub_menu li#option4 a:hover { width:107px; background-position:-321px -41px; }
#sub_menu li#option5 a:hover { width:107px; background-position:-428px -41px; }
#sub_menu li#option6 a:hover { width:107px; background-position:-535px -41px; }
#sub_menu li#option7 a:hover { width:110px; background-position:-642px -41px; }
/* Sub Menu Header - End */

Open in new window

0
 
LVL 43

Expert Comment

by:David S.
ID: 22893157
But there isn't a <ul> that's a descendant of #sub_menu.  You mean "ul#sub_menu" or just "#sub_menu".
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 1000 total points
ID: 22900976
You page is totally blank except for a lighter gray box.  You need to put CONTENT in these UL- LI tags before you can see what is happening. Assuming the offset is from the containing DIV, do this in CSS when you add some content --

DIV {   align:left;  margin:0px; padding:0px;  }
UL  {  margin:0px; padding:0px; }
LI  {  margin:0px; padding:0px; }

You can increase from there but you won't see anything until content is in the page, and FF shows ZERO !!
0
 
LVL 1

Author Closing Comment

by:PaulEll
ID: 31513807
Hi there,
Thanks for your help.

The problem was a padding issue.

By Adding a padding-left:0; solved the problem.

#sub_menu li a {
float:left;
height:0px;
padding-top:40px;
padding-left:0px;
overflow:hidden;
background-image:url('../images/banner/sub_menu.png');
background-repeat:no-repeat;
display:block;
}

Thanks a lot
Paul
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

578 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