SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    mumbai
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help me in adding adding foorter to my page

    Hi all,
    I have made on page using css the all has done now the problem is i want to add footer to my page but i think there is a problem i wont be able to add it.

    I m also adding the code of my css for ur refrences.

    Can any one help

    Thanx

    Vikas

    <style>
    #shdi-top {
    position: absolute;
    width: 600px;
    margin: 0 0 0 0px;
    background-color: #ffffff;
    border : 1px solid #ff9900;
    }
    #shdi-top1 {
    position: absolute;
    width: 600px;
    height: 2px;
    margin: 67 0 0 0px;
    background-color: #ffffff;
    border-left : 1px solid #ff9900;
    border-right : 1px solid #ff9900;
    }
    #shdi-top2 {
    position: absolute;
    width: 600px;
    height: 16px;
    margin: 69 0 0 0px;
    background-color: #ff9900;
    border : 1px solid #ff9900;
    font: bold 12px Arial;
    color: #ffffff;
    text-align: right;
    }
    #background {
    position: absolute;
    width: 600px;
    height:10px;
    margin: 85 0 0 0px;
    background: url(images/bg.gif);
    border-left : 1px solid #ff9900;
    border-right : 1px solid #ff9900;
    font: bold 8px Arial;
    }
    div.shdi-main {
    position: absolute;
    width: 600px;
    margin: 95 0 0 0px;
    border-left : 1px solid #ff9900;
    border-right : 1px solid #ff9900;
    border-bottom : 1px solid #ff9900;
    }

    #shdi-firstnav {
    width: 15px;
    margin: 20px 0 0 0px;
    /* Top Right Bottom Left */
    float: right;
    background-color: #ffffff;
    /*border : 1px solid #ff9900;*/
    }
    #shdi-banner {
    width: 134px;
    margin: 20px 0 0 0px;
    float: right;
    background-color: #F3F3F3;
    border : 1px solid #D3D3D3;
    font: bold 6px Arial;
    }

    p{
    margin: 8px;
    font: normal 20px Verdana;
    color: #666666;
    }

    #shdi-block {
    width: 35px;
    margin: 20px 0 0 0px;
    background-color: #ffffff;
    float: right;
    /*border : 1px solid #ff9900;*/
    }
    #shdi-content {
    width: 401px;
    margin: 20px 0 0 0px;
    float: right;
    background-color: #ffffff;
    }

    .welcome {
    margin-top:0px;
    margin-left: 30px;
    font: bold 14px Arial;
    }
    .p1{
    font: normal 11px/14px Tahoma;
    color: #000000;
    margin-left: 30px;
    }
    .heads {
    font: normal 22px Arial;
    color: #FF840C;
    background: url(images/arrow.gif) no-repeat 0 5px;
    padding-left: 16px;
    margin-left: 10px;
    }
    #p2 {
    width: 365px;
    background-color: #E8F2F7;
    border-top: 1px solid #9FB9C6;
    border-bottom: 1px solid #9FB9C6;
    padding: 8px;
    margin-left: 30px;
    font: normal 11px/14px Tahoma;
    color: #000000;
    }
    #p3 {
    width: 365px;
    background-color: #E8F2F7;
    border-bottom: 1px solid #9FB9C6;
    padding: 8px;
    margin-left: 30px;
    margin-top:0px;
    font: normal 11px/14px Tahoma;
    color: #000000;
    }
    #p4 {
    width: 365px;
    background-color: #FAEEBF;
    border: 1px solid #F0D181;
    padding: 8px;
    font: normal 11px/14px Tahoma;
    color: #000000;
    margin-left: 30px;
    }

    </style>
    <body topmargin="0">
    <div id="shdi-top"><img src="images/logo.gif" width="220" height="65" border="0"><img src="images/contact-lens.gif" width="378" height="65" border="0"></div>
    <div id="shdi-top1"></div>
    <div id="shdi-top2">19 May 2004&nbsp;</div>
    <div id="background"></div>
    <div class="shdi-main">
    <div id="shdi-firstnav"></div>
    <div id="shdi-banner"><p><img src="images/l-oral.gif" width="120" height="400" border="0"><br><br><img src="images/baazee.gif" width="120" height="80" border="0"><br><br><br></p></div>
    <div id="shdi-block"></div>

    <div id="shdi-content">
    <p class="welcome">Hello rahul4u</p>
    <p class="p1"><b><br>Following are the responses to your Shaadi.com profile.<br><br></b></p>
    <span class="heads">Contacts</span>
    <p class="p1">Congratulations! The following members are interested in you. Click on the Profile IDs to view full profiles and respond to the members.</p>
    <div id="p2">
    <b>Profile Id/b> usukbizconstopmbanri<br>
    <b>Message/b> If you ALSO sense a connection, please let me know...<br>
    usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA with photo profile</span>
    </div>
    <div id="p3">
    <b>Profile Id/b> usukbizconstopmbanri<br>
    <b>Message/b> If you ALSO sense a connection, please let me know...<br>
    usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA with photo profile</span>
    </div><br>
    <span class="heads">Accepts</span>
    <p class="p1">Congratulations! The following members have accepted your contact. Click on the Profile IDs to view full profiles and respond to the members.</p>
    <div id="p2">
    <b>Profile Id/b> usukbizconstopmbanri<br>
    <b>Message/b> If you ALSO sense a connection, please let me know...<br>
    usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA with photo profile</span>
    </div>

    <p class="p1"><br>
    Good luck with your Partner Search!<br>
    <b>Shaadi.com Team<br><br></b>
    </p>
    <div id="p4">
    <b>Special Offer/b> Submit Success Story and Win a <b>FREE Holiday</b> for 2!<br>
    Click here for fabulous offers<br>
    </div>
    </div>
    </div>
    </body>

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why not?

    Could you tell me why you think you can't add a footer? I can come up with no reason at all, but without actually viewing the page it's difficult to spot any problems anyway.

    Do you have the page online somewhere, and if do, could you provide a link? That'll help a lot!
    Regards,
    Ronald.

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    mumbai
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ROland,

    First of all i m new to css based web design & i have given a try with this page by using the book HTML Utophia from the aurthor of this site only & i have done all thish by using this book only But now i need some help may be u can help me out.

    At present i dont have this online coz i dont have my private serevr.

    If u wish i can mail u the zip of this page

    Can u send me ue email Address or u can send me the mail to vikas@shaadi.com

    So that i can send u the email with the zip file & u can look into it

    Ur help will be appriciated

    Vikas

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Free web service

    Vikas,

    You could try one of those free web host services; they usually bug you with advertisements, but at least it's free and you can place your files online so the rest of the members can take a shot at them, too, not just me.
    There are lots of Sitepoint regulars far more knowledgable then I am, so broadening the scope will give you a much better shot at solving the problems.

    UPDATE:

    I toyed with the code you posted a bit, and apart from the missing images I got a pretty good idea of the thing.
    Your problem mainly lies in the heavy reliance on absolute positioning. I strongly recommend reworking the page structure so that inside the body, you have three main divs:

    header
    content, or main
    footer

    I tried to tack on a footer beneath the shdi-main div, but since this is positioned as well, the footer flowed to the top.
    If you envelop everthing that is up to the shdi-main div in one single div (say, shdi-head) and position it relative, you can position its content in relation to this div instead of to the main window.

    The shdi-main div then can reside in the normal flow (no position: absolute!) and the footer can then simply flow beneath it. I tried it, and it seems to work without a hitch.
    Regards,
    Ronald.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Vikas,

    Roald's solution is similar to the one that I emailed you I didn't realised you'd posted here as well (i've been busy today).

    Paul

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    mumbai
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ronald,

    I have change it as suggested ny you to relative but now the problem is it works fine in IE 6 but in mozzila the content page dosent show, how can i overcome this problem

    Vikas

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    add a clear:both before the closing div of the parent.

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    </head>
    <style>
    body{
    margin: 0;
    padding: 0;
    }
    #shdi-top {
     position: relative;
     width: 600px;
     margin: 0 0 0 0px; 
     background-color: #ffffff;
     border : 1px solid #ff9900;
     }
    #shdi-top1 {
     position: relative;
     width: 600px;
     height: 2px;
     margin: 0 0 0 0px; 
     background-color: #ffffff;
     font: normal 2px Arial;
     border-left : 1px solid #ff9900;
     border-right : 1px solid #ff9900;
     }
    #shdi-top2 {
     position: relative;
     width: 600px;
     height: 16px;
     margin: 0 0 0 0px; 
     background-color: #ff9900;
     border : 1px solid #ff9900;
     font: bold 12px Arial;
     color: #ffffff;
     text-align: right; 
     }
    #background {
     position: relative;
     width: 600px;
     height:10px;
     margin: 0 0 0 0px; 
     background: url(images/bg.gif);
     border-left : 1px solid #ff9900;
     border-right : 1px solid #ff9900;
     font: bold 8px Arial;
     }
    div.shdi-main {
     position:relative;
     width: 600px;
     margin: 0 0 0 0px; 
     border-left : 1px solid #ff9900;
     border-right : 1px solid #ff9900;
     border-bottom : 1px solid #ff9900; 
     }
    #shdi-firstnav { 
     width: 15px;
     margin: 20px 0 0 0px;
     /* Top | Right | Bottom | Left */ 
     float: right;
     background-color: #ffffff;
    /* border : 1px solid #ff9900;*/
     }
    #shdi-banner { 
     width: 134px;
     margin: 20px 0 0 0px;
     float: right;
     background-color: #F3F3F3;
     border : 1px solid #D3D3D3;
     font: bold 6px Arial;
     }
    p{
    margin: 8px;
    font: normal 20px Verdana;
    color: #666666;
    }
    #shdi-block { 
     width: 35px;height:10px;position:relative;
     margin: 20px 0 0 0px;
     background-color: #fff;
     float: right;
    /* border : 1px solid #ff9900;*/
     }
    #shdi-content {  
     width: 401px;
     margin: 20px 0 0 0px;
     float: right;
     background-color: #ffffff; 
     }
    .welcome {
     margin-top:0px;
     margin-left: 30px;
     font: bold 14px Arial; 
     }
    .p1 {
     font: normal 11px/14px Tahoma;
     color: #000000;
     margin-left: 30px; 
     }
    .heads {
     font: normal 22px Arial;
     color: #FF840C;
     background: url(images/arrow.gif) no-repeat 0 5px; 
     padding-left: 16px;
     margin-left: 10px;
     }
    #p2 {
     width: 365px;
     background-color: #E8F2F7;
     border-top: 1px solid #9FB9C6; 
     border-bottom: 1px solid #9FB9C6;
     padding: 8px;
     margin-left: 30px;
     font: normal 11px/14px Tahoma;
     color: #000000;
     }
    #p3 {
     width: 365px;
     background-color: #E8F2F7; 
     border-bottom: 1px solid #9FB9C6;
     padding: 8px;
     margin-left: 30px;
     margin-top:0px;
     font: normal 11px/14px Tahoma;
     color: #000000;
     }
    #p4 {
     width: 365px;
     background-color: #FAEEBF;
     border: 1px solid #F0D181;
     padding: 8px; 
     font: normal 11px/14px Tahoma;
     color: #000000;
     margin-left: 30px;
     } 
    #bottom {
     position: relative;
     width: 600px;
     margin: 0 0 0 0px; 
     background-color: #ffffff;
     border : 1px solid #ff9900;
     text-align: center;
     }
    </style>
    <body>
    <div id="shdi-top"><img src="images/logo.gif" width="220" height="65" border="0"><img src="images/contact-lens.gif" width="378" height="65" border="0"></div>
    <div id="shdi-top1"></div>
    <div id="shdi-top2">19 May 2004&nbsp;</div>
    <div id="background"></div>
    <div class="shdi-main"> 
      <div id="shdi-firstnav"></div>
      <div id="shdi-banner">
    	<p><img src="images/l-oral.gif" width="120" height="400" border="0"><br>
    	  <br>
    	  <img src="images/baazee.gif" width="120" height="80" border="0"><br>
    	  <br>
    	  <br>
    	</p>
      </div>
      <div id="shdi-block"></div>
      <div id="shdi-content"> 
    	<p class="welcome">Hello rahul4u</p>
    	<p class="p1"><b><br>
    	  Following are the responses to your Shaadi.com profile.<br>
    	  <br>
    	  </b></p>
    	<span class="heads">Contacts</span> 
    	<p class="p1">Congratulations! The following members are interested in you. 
    	  Click on the Profile IDs to view full profiles and respond to the members.</p>
    	<div id="p2"> <b>Profile Id:</b> usukbizconstopmbanri<br>
    	  <b>Message:</b> If you ALSO sense a connection, please let me know...<br>
    	  usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA 
    	  with photo profile </div>
    	<div id="p3"> <b>Profile Id:</b> usukbizconstopmbanri<br>
    	  <b>Message:</b> If you ALSO sense a connection, please let me know...<br>
    	  usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA 
    	  with photo profile </div>
    	<br>
    	<span class="heads">Accepts</span> 
    	<p class="p1">Congratulations! The following members have accepted your contact. 
    	  Click on the Profile IDs to view full profiles and respond to the members.</p>
    	<div id="p2"> <b>Profile Id:</b> usukbizconstopmbanri<br>
    	  <b>Message:</b> If you ALSO sense a connection, please let me know...<br>
    	  usukbizconstopmbanri is Hindu, 28 years, 5' 7" tall, Consultant from USA 
    	  with photo profile </div>
    	<p class="p1"><br>
    	  Good luck with your Partner Search !<br>
    	  <b>Shaadi.com Team<br>
    	  <br>
    	  </b> </p>
    	<div id="p4"> <b>Special Offer:</b> Submit Success Story and Win a <b>FREE 
    	  Holiday</b> for 2 !<br>
    	  Click here for fabulous offers<br>
    	</div>
      </div>
      <br style="clear:both" />
     </div>
    <div id="bottom">bottom banner</div>
    </body>
    </html>
    Paul

  8. #8
    SitePoint Member
    Join Date
    Jun 2004
    Location
    mumbai
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works

    Thanx Paul

    U r a genius


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •