[SOLVED] using background images in a list

marisa · #1 (**permalink**) Nov 28th, 2007, 12:26

Hi,
I have a problem with a list I have created! Basically I have a form and in the header there are images which are used to indicate the users progress through the form. The are not links. However, there seems to be some padding or margin to the left which I can't get rid of and it makes the last image fall below the rest! Any help would be much apreciated as I am close to tears here!!

Code: Select all

#wrapper-main {padding:0; margin:0 auto; width:645px;}
#headermain {width:100%; background-image:url(images/isa-header.jpg); background-repeat: no-repeat; height:109px; padding:0; margin:0;}

#maincontent{padding:20px 30px 0px 30px; background-image:url(images/isa-body.gif); background-repeat: repeat-y; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; }
#footer {padding:0; margin:0; background-image:url(images/isa-footer.gif); background-repeat: no-repeat; height:31px; clear:both;}
#footer p{font-size:11px; margin:3px;}
span { display:none; }

.navcontainer
{
    width:645px;
    list-style-type: none;
}

.navcontainer ul
{

list-style-type: none;
padding-top:0px;
}





li.about-you-selected{
    float: left;
    display: inline;
    padding-left:10px; /* the width reserved for the background image */
    background: url(images/about-you-over.jpg) no-repeat 0px 10px;
    width:117px;
    height:50px;
}

li.about-you{
float: left;
display: inline;
width:117px;
height:40px;
padding-left:10px; /* the width reserved for the background image */
background: url(images/about-you-over.jpg) no-repeat 0px 10px; 
}

li.your-isa-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/your-isa-over.jpg) no-repeat 0px 10px;
    width:108px;
    height:50px;
}

li.your-isa{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/your-isa.jpg) no-repeat 0px 10px; 
width:108px;
height:40px;
}

li.payment-details-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/pay-details-over.jpg) no-repeat 0px 10px;
    width:147px;
    height:50px;
}

li.payment-details{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/pay-details.jpg) no-repeat 0px 10px; 
width:147px;
height:40px;
}
li.legals-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/legal-over.jpg) no-repeat 0px 10px;
    width:98px;
    height:50px;
}

li.legals{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/legal.jpg) no-repeat 0px 10px; 
width:98px;
height:40px;
}

li.summary-selected{
    float: left;
    display: inline;
    padding-left: 10px; /* the width reserved for the background image */
    background: url(images/summary-over.jpg) no-repeat 0px 10px;
    width:116px;
    height:50px;
}

li.summary{
float: left;
display: inline;
padding-left: 10px; /* the width reserved for the background image */
background: url(images/summary.jpg) no-repeat 0px 10px; 
width:116px;
height:40px;
}

HTML: Select all

<div id="wrapper-main">
<div id="headermain">
<div class="navcontainer">
    <ul class="navlist">
        <li class="about-you-selected"><span>You are on Step 1 - About you</span></li>
        <li class="your-isa-selected"><span>Your isa</span></li>
        <li class="payment-details-selected"><span>Payment details</span></li>
        <li class="legals-selected"><span>legals</span></li>
        <li class="summary-selected"><span>summary</span></li>
    </ul>
</div>

</div>

<div id="maincontent">

 <form>
    
 </form>

</div>

<!--end of maincontent-->

<div id="footer"></div>
</div><!--end of wrappermain-->
</body>
</html>

Aso · #2 (**permalink**) Nov 28th, 2007, 12:33

Hi marisa

Could you edit your post and wrap the code in [html] tags.

Better still, have you got this uploaded somewhere so we can see the problem?

marisa · #3 (**permalink**) Nov 28th, 2007, 12:36

hi,

here is the full code:

HTML: Select all

<!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" xml:lang="en" lang="en">
<head>
<title>isa form layout</title>
<style>
#wrapper-main {padding:0; margin:0 auto; width:645px;}
#headermain {width:100%; background-image:url(images/isa-header.jpg); background-repeat: no-repeat; height:109px; padding:0; margin:0;}

#maincontent{padding:20px 30px 0px 30px; background-image:url(images/isa-body.gif); background-repeat: repeat-y; font-family: Verdana, Helvetica, sans-serif; font-size: 11px; }
#footer {padding:0; margin:0; background-image:url(images/isa-footer.gif); background-repeat: no-repeat; height:31px; clear:both;}
#footer p{font-size:11px; margin:3px;}
span { display:none; }

#buttonContainer {background-color:#fff;}

ul.buttons {list-style-type:none; margin:0; padding:.5em 0 0 0;}
ul.buttons li a {display:block; width:121px; padding:30px 0;}
ul.buttons li a:hover {background-repeat: no-repeat;}
ul.buttons .back {background-image:url(images/btn-back.png); background-repeat: no-repeat; float: left; }
ul.buttons .next {background-image:url(images/btn-next-up.png); background-repeat: no-repeat; float: right; }
.text-bold {font-weight: bold;}
div.form-container {margin: 10px; padding: 5px; background-color: #FFF; border: #EEE 1px solid; }


/************
 * html tags 
 ************/ 
 
fieldset {border: 0; margin: 0; padding: 0;}
fieldset legend {display: none;}

/*input:focus, select:focus, textarea:focus {
  background-color: #FFFF99;
  font-weight: bold;
}*/

input,select,textarea {
  padding: 2px 2px 2px 2px;
  margin: 1px 1px 1px 1px;
  border: 1px solid #7f9db9;
}

.absent {float: left; width: 350px;}

.offers {float: left; width: 350px; padding: 10px 0px 0px 190px;}

.Qmark {
  float: left;
  width: 20px;
  padding-left: 10px;
}



.form-content {
  width: 540px;
}



.main-panel-padding {
  width: 540px;
  clear: both;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
 
}

.form-title-small {
    clear: left;
    width: 180px;
    float: left;
}

.form-title-small label {
  float: left;


}



label {
    text-align: right;
    width: 180px;
}

 

.form-fields-large {
    padding-left: 10px;
    width: 350px;
    float: left;
}

.form-title-large {
  width: 320px;
  float: left;
}

.main-panel-nopadding, .main-panel-nopadding-error {
  padding-top: 3px;
  padding-bottom: 3px;
}

.progressbar {
  float: left;
  background-color: #999999;
}

.inline-field {
  float: left;
  padding-right: 15px;
}

.border {border-bottom: solid 3px #FFFFFF;}
.present {float: left;}
.small-margin-left {margin-left: 10px;}


.formName {
  float: left;
  /*border: 1px solid #f00;*/
  padding: 2px 2px 2px 2px;
}

.formField {
  float: left;
  /*border: 1px solid #0f0;*/
  padding: 2px 2px 2px 2px;
}

.clearAll {clear: both;}

.formText {
  font-weight: bold;
}



/***************
 * text styles
 ***************/
 
.big-text {
  font-size: 12pt;
  font-weight: bold;
}



.form-field-required {
  width: 386px;
  float: right;
  font-weight: bold;
  font-size: 11px;
  line-height: 12px;
  color: #cc0000;
}


.inline-error-text {
  font-weight: bold;
  color: #CC0000;
  display: block;
  margin: 0;
  padding: 0;
}


div a.blue-link {
  font-weight: bold;
  color: #2B455C;
}

div a.blue-link:link {
  color: #2B455C;
  text-decoration: underline;
}

div a.blue-link:hover {
  color: #000000;
}

.form-group-error {
  display: inline;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: bold;
  font-size: 12pt;
  color: #CC0000;
}

.error input {
    background-color: #f5CCCC;
}
.error select {
    background-color: #f5CCCC;
}


.navcontainer
{

    width:645px;

}

.navcontainer ul
{
padding-top:0px;
}





li.about-you-selected{
    float: left;
    display: inline;
    padding-left:10px;
    background: url(images/about-you-over.jpg) no-repeat;
    width:117px;
    height:40px;
}

li.about-you{
float: left;
display: inline;
width:117px;
height:40px;
padding-left:10px; 
background: url(images/about-you-over.jpg) no-repeat; 
}

li.your-isa-selected{
    float: left;
    display: inline;
    padding-left: 10px;
    background: url(images/your-isa-over.jpg) no-repeat;
    width:108px;
    height:40px;
}

li.your-isa{
float: left;
display: inline;
padding-left: 10px;
background: url(images/your-isa.jpg) no-repeat; 
width:108px;
height:40px;
}

li.payment-details-selected{
    float: left;
    display: inline;
    padding-left: 10px;
    background: url(images/pay-details-over.jpg) no-repeat;
    width:147px;
    height:40px;
}

li.payment-details{
float: left;
display: inline;
padding-left: 10px;
background: url(images/pay-details.jpg) no-repeat; 
width:147px;
height:40px;
}
li.legals-selected{
    float: left;
    display: inline;
    padding-left: 10px;
    background: url(images/legal-over.jpg) no-repeat;
    width:98px;
    height:40px;
}

li.legals{
float: left;
display: inline;
padding-left: 10px; 
background: url(images/legal.jpg) no-repeat; 
width:98px;
height:40px;
}

li.summary-selected{
    float: left;
    display: inline;
    padding-left: 10px;
    background: url(images/summary-over.jpg) no-repeat;
    width:116px;
    height:40px;
}

li.summary{
float: left;
display: inline;
padding-left: 10px; 
background: url(images/summary.jpg) no-repeat; 
width:116px;
height:40px;
}
</style>



<div id="wrapper-main">
<div id="headermain">
<div class="navcontainer">
    <ul>
        <li class="about-you-selected"><span>You are on Step 1 - About you</span></li>
        <li class="your-isa-selected"><span>Your isa</span></li>
        <li class="payment-details-selected"><span>Payment details</span></li>
        <li class="legals-selected"><span>legals</span></li>
        <li class="summary-selected"><span>summary</span></li>
    </ul>
</div>

</div>

<div id="maincontent">

 <div class="inline-error-text">
       <img src="http://www.webforumz.com/images/error.gif" alt="Error" /> There is an error or missed section on this page
    </div>

<p><strong>* indicates a required field</strong></p><br />

<div class="main-panel-padding">
       

    </div>
    <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="title" class="text-bold">* Title</label>
        
        </div>
      <div class="form-fields-large">  
          <select name="title" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/title.htm', 'WT.ti', 'ISA App - Title Field', 'WT.si_n', 'ISA App - About You', 'WT.si_x', '1');"><option value="" selected="selected"></option>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Ms">Ms</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option></select>
      </div>
    </div> 
     
      
       <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="title" class="text-bold">* Forename</label>
        </div>
        <div class="form-fields-large"><div class="error">
          <input type="text" name="forename" size="20" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/firstname.htm', 'WT.ti', 'ISA App - First Name Field', 'WT.si_n', 'ISA App - About You', 'WT.si_x', '2');"> <img src="http://www.webforumz.com/images/error.gif" alt="Error" />
         </div>
        </div>
    </div> 
    <div class="form-field-required">You will need to enter your forename to continue</div>
    
       <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="title" class="text-bold">* Surname</label>
        </div>
        <div class="form-fields-large">  
          <input type="text" name="surname" size="20" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/surname.htm', 'WT.ti', 'ISA App - Surname Field', 'WT.si_n', 'ISA App - About You', 'WT.si_x', '3');">
          
        </div>
      </div>
      <div class="main-panel-padding">

        <div class="form-title-small">
          <label for="gender" class="text-bold">* Sex</label>
        </div>
        <div class="form-fields-large" id="gender">
          <select name="gender" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/sex.htm', 'WT.ti', 'ISA App - Sex Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '4');"><option value="" selected="selected"></option>
<option value="Male">Male</option>
<option value="Female">Female</option></select> 
        </div>
      </div>

      <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="dobDay" class="text-bold">* Date of birth</label>
        </div>
        <div class="form-fields-large" id="dobDay">
          <input type="text" name="dobDay" maxlength="2" size="2" value="" onkeyup="return autoTab(this, 2, event);" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/dobday.htm', 'WT.ti', 'ISA App - DOB Day Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '5');">
           &nbsp;/&nbsp;
          <input type="text" name="dobMonth" maxlength="2" size="2" value="" onkeyup="return autoTab(this, 2, event);" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/dobmonth.htm', 'WT.ti', 'ISA App - DOB Month Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '6');">

           &nbsp;/&nbsp;
           <input type="text" name="dobYear" maxlength="4" size="4" value="" onkeyup="return autoTab(this, 4, event);" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/dobyear.htm', 'WT.ti', 'ISA App - DOB Yaar Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '7');">
           <span class="text-bold">dd/mm/yyyy</span>&nbsp;
        </div>
      </div>
      <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="nin">National Insurance number</label>

        </div>
        <div class="form-fields-large">
      
            <div class="present"><input type="text" name="nin" maxlength="9" size="15" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/ninumber.htm', 'WT.ti', 'ISA App - NI Number Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '8');">
            </div>
             <div class="Qmark"><a href="javascript:ShowHelpPage('ni_number.jsp','400','250')"><img src="http://www.webforumz.com/images/help-button.png" border="0" width="25" height="23" alt="Question mark" /></a></div>
            <div class="absent">If you don't have a National Insurance number, please tick this box&nbsp;&nbsp;
                <input type="checkbox" name="noNin" value="on" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/noninumber.htm', 'WT.ti', 'ISA App - No NI Number Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '9');" class="no-border"></div>
           
        </div>
      </div>
      <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="houseNumberName" class="text-bold">* House name or number</label>
        </div>
        <div class="form-fields-large">
          <input type="text" name="houseNumberName" maxlength="20" size="15" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/housenameornumber.htm', 'WT.ti', 'ISA App - House Name or Number Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '10');" />
        &nbsp;       
        </div>
      </div>
      <div class="main-panel-padding">
        <div class="form-title-small">
          <label for="postcode" class="text-bold">* Postcode</label>
        </div>

        <div class="form-fields-large"><div class="error">
          <input type="text" name="postcode" maxlength="10" size="15" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/postcode.htm', 'WT.ti', 'ISA App - Postcode Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '11');">&nbsp;<img src="http://www.webforumz.com/images/error.gif" alt="Error" />
            &nbsp; <a href="javascript:qaopen('houseNumberName', 'postcode')" title="Find address" class="blue-link">Find Address</a>
            </div>
        </div>
      </div>
       <div class="form-field-required">It looks like you've typed your postcode incorrectly</div>
      <div class="main-panel-padding">
        <div class="form-title-small">
          &nbsp;

        </div>
        <div class="form-fields-large">
          <p>Please type in your house number or name together with your postcode, click on the <strong>'Find address'</strong> and we'll look up your address.</p>
        </div>
      </div>
      <div class="main-panel-padding">
        <div class="form-title-small">
           <label class="text-bold">Full address</label>

         </div>
         <div class="form-fields-large">
           <input type="text" name="street1" maxlength="40" size="34" value="" onfocus="no_edit();">&nbsp;
         </div>
       </div>
       <div class="main-panel-padding">
         <div class="form-title-small">
           &nbsp;
         </div>

         <div class="form-fields-large">
           <input type="text" name="street2" maxlength="40" size="25" value="" onfocus="no_edit();">&nbsp;
         </div>
       </div>
       <div class="main-panel-padding">
         <div class="form-title-small">
           &nbsp;
         </div>
         <div class="form-fields-large">

           <input type="text" name="town" maxlength="40" size="25" value="" onfocus="no_edit();">
         </div>
       </div>
       <div class="main-panel-padding">
         <div class="form-title-small">
           &nbsp;
         </div>
         <div class="form-fields-large">
           <input type="text" name="county" maxlength="40" size="25" value="" onfocus="no_edit();">

         </div>
       </div>
       <div class="main-panel-padding">
         <div class="form-title-small">
           <label for="telephoneNumber1">Preferred phone number</label>
         </div>
         <div class="form-fields-large">
           <input type="text" name="telephoneNumber1" maxlength="25" size="20" value=""> <select name="contactType1"><option value="home" selected="selected">Home</option>

<option value="biz">Business</option>
<option value="mobile">Mobile</option></select>&nbsp;
         </div>
       </div>
       <div class="main-panel-padding">
         <div class="form-title-small">
           <label for="telephoneNumber2">Alternative phone number</label>
         </div>

         <div class="form-fields-large">
           <input type="text" name="telephoneNumber2" maxlength="25" size="20" value=""> <select name="contactType2"><option value="mobile" selected="selected">Mobile</option>
<option value="biz">Business</option>
<option value="home">Home</option></select>&nbsp;
         </div>
       </div>
      <div class="main-panel-padding">
        <div class="form-title-small">

           <label for="emailAddress" class="text-bold">* e-mail address</label>
         </div>
         <div class="form-fields-large">
           <input type="text" name="emailAddress" maxlength="50" size="40" value="" onchange="dcsMultiTrack('DCS.dcsuri', '/FORM/ISAAppAboutYou/emailaddress.htm', 'WT.ti', 'ISA App - Email Address Field','WT.si_n', 'ISA App - About You', 'WT.si_x', '12');">
             &nbsp;
         </div>
       </div>
       <div class="main-panel-padding">
          <div class="offers">Are you happy to get the odd e-mail from us about products, services or offers we think you'll be especially interested in?<br />
           <input type="radio" name="emailOptIn" value="true" title="I want to receive email from Virgin Money">&nbsp;<strong>* Yes</strong>&nbsp;&nbsp;<input type="radio" name="emailOptIn" value="false" title="I do not want to receive email from Virgin Money">&nbsp;<strong>No</strong>&nbsp;
      
           <p>Occasionally, we'd like to let you know about products, services or offers we think you'll be especially interested in.</p>

           <p>Please tick here if you'd rather we <em>didn't</em> do this by:<br />Mail&nbsp;<input type="checkbox" name="mailOptOut" value="on" class="no-border">&nbsp;Phone&nbsp;<input type="checkbox" name="phoneOptOut" value="on" class="no-border"></p>
        </div>
       </div>


      <div class="main-panel-padding">
          <div class="offers">Where did you hear about our ISAs?
    
             <select name="marketingSource" onchange="showMarketingCodes(this);"><option value="none" selected="selected">Select a value</option>
                <option value="INVH">Already hold another  product</option>
                <option value="INIO">Incentive Offers</option>
                
                
        </div>
    </div>


      <div class="main-panel-padding">
          <div class="offers">And to help us narrow it down, where specifically?
            <select name="marketingCode"><option value="" selected="selected">Select a value</option></select>
          </div>
      </div>
    
 </form>
<br />
  <div id="buttonContainer">
    <ul class="buttons">
        <li class="back"><a href="#"><span>back</span></a></li>
        <li class="next"><a href="#"><span>next</span></a></li>
    </ul>
  </div>
<div style="clear:both";>&nbsp;</div>
</div>

<!--end of maincontent-->

<div id="footer"></div>
</div><!--end of wrappermain-->
</body>
</html>

marisa · #4 (**permalink**) Nov 28th, 2007, 12:55

Solved it! Played about with the position and it worked! phew!

.navcontainer ul
{
padding-top:0px;
position:relative; top: 60px; left: -32px;
width:100%;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Background Images	admiral1977	Starting Out	6	Oct 29th, 2007 15:31
[SOLVED] using background images to fill div's	R8515198	Web Page Design	9	Sep 29th, 2007 21:05
Putting navigation list on top of background image	Kurt	Web Page Design	5	Sep 16th, 2007 07:19
Unordered list under background image	AdRock	Web Page Design	4	Aug 7th, 2006 12:43
A way to change background color of a menu list	gohankid77	Web Page Design	1	Oct 12th, 2004 10:14

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] using background images in a list