SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How od I may my DIV tag stick to the bottom of the other

    Im having a problem, I have a main div tag that contains my content. Iniside that I have a div tag for my content. Outside of all of this I have a div tag for my footer. My issue is that they all are behaving erratically. The div tag with content keeps covering the footer tag, i thought it was supposed to auto stretch. Im going to post my code if anyone wants to help


    #ilovesatellitetv2 {
    position:absolute;
    left:0px;
    top:0px;
    width:284px;
    height:104px;
    }

    #ilovesatellitetv {
    position:absolute;
    left:284px;
    top:0px;
    width:494px;
    height:104px;
    }

    #programming {
    position:absolute;
    left:38px;
    top:104px;
    width:162px;
    height:58px;
    }

    #products {
    position:absolute;
    left:200px;
    top:104px;
    width:115px;
    height:58px;
    }

    #news {
    position:absolute;
    left:315px;
    top:104px;
    width:80px;
    height:58px;
    }

    #purchase {
    position:absolute;
    left:395px;
    top:104px;
    width:122px;
    height:58px;
    }

    #faq {
    position:absolute;
    left:517px;
    top:104px;
    width:67px;
    height:58px;
    }

    #forum {
    position:absolute;
    left:584px;
    top:104px;
    width:90px;
    height:58px;
    }

    #blog {
    position:absolute;
    left:674px;
    top:104px;
    width:67px;
    height:58px;
    }

    #banner1 {
    position:absolute;
    left:0px;
    top:185px;
    width:195px;
    height:145px;
    background-image: url(images/banner1.gif);
    padding-top: 5px;
    padding-left: 25px;
    background-repeat: no-repeat;
    }

    #index-15 {
    position:relative;
    left:243px;
    top:185px;
    width:535px;
    bottom: 0px;
    }

    #banner2 {
    position:absolute;
    left:0px;
    top:330px;
    width:195px;
    height:157px;
    background-image: url(images/banner2.gif);
    background-repeat: no-repeat;
    padding-top: 5px;
    padding-left: 20px;
    }

    #banner3 {
    position:absolute;
    left:0px;
    top:487px;
    width:195px;
    height:168px;
    }

    #copyright {
    position:absolute;
    left:0px;
    top:0;
    width:531px;
    height:14px;
    }

    #about-us {
    position:absolute;
    left:531px;
    top:0;
    width:57px;
    height:14px;
    }

    #contact-us {
    position:absolute;
    left:588px;
    top:0;
    width:69px;
    height:14px;
    }

    #sitemap {
    position:absolute;
    left:657px;
    top:0;
    width:53px;
    height:14px;
    }

    #resources {
    position:absolute;
    left:710px;
    top:0;
    width:68px;
    height:14px;
    }
    body {
    background-image: url(images/background.gif);
    margin-left: 100px;
    margin-right: 1px;
    }
    .style2 { color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    }
    #footer {
    position:relative;
    width:778;
    height:0;
    z-index:1;
    left: 100;
    bottom: 0px;
    top: 200;
    }
    #Layer1 {
    position:absolute;
    width:778px;
    z-index:2;
    left: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #FFFFFF;
    height: 100%;
    }
    #Layer2 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:3;
    float: left;
    }
    #Layer3 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:1;
    }
    #Layer4 {
    position:fixed;
    width:200px;
    height:200px;
    z-index:3;
    text-align: left;
    padding: 5;
    }
    #Layer5 {
    position:relative;
    width:200px;
    height:115px;
    z-index:1;
    float: left;
    padding: 5;
    }
    #Layer6 {
    position:relative;
    width:200px;
    height:115px;
    z-index:2;
    float: left;
    top: 120;
    left: -200;
    }
    #Layer7 {
    position:absolute;
    width:335;
    height:115px;
    z-index:2;
    }
    #Layer8 {
    position:relative;
    width:335px;
    height:115px;
    z-index:2;
    float: right;
    }
    .style3 {
    font-size: 18px;
    font-weight: bold;
    }
    .style4 {font-size: 14px}

    -->
    </style>
    <!-- End ImageReady Styles -->
    </head>
    <body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
    <div id="Layer1">
    <div id="ilovesatellitetv2"> </div>
    <div id="ilovesatellitetv">
    <a href="index.html">
    <img src="images/ilovesatellitetv.gif" width="494" height="104" border="0" alt="I Love Satellite TV. Informational Resource For Everything Satellite TV"></a> </div>
    <div id="programming">
    <a href="programming.html">
    <img src="images/programming.gif" width="162" height="58" border="0" alt=""></a> </div>
    <div id="products">
    <a href="products.html">
    <img src="images/products.gif" width="115" height="58" border="0" alt=""></a> </div>
    <div id="news">
    <a href="news.php">
    <img src="images/news.gif" width="80" height="58" border="0" alt=""></a> </div>
    <div id="purchase">
    <a href="purchase.html">
    <img src="images/purchase.gif" width="122" height="58" border="0" alt=""></a> </div>
    <div id="faq">
    <a href="faq.html">
    <img src="images/faq.gif" width="67" height="58" border="0" alt=""></a> </div>
    <div id="forum">
    <img src="images/forum.gif" width="90" height="58" alt=""> </div>
    <div id="blog">
    <a href="ilovesatellitetv.com/blog">
    <img src="images/blog.gif" width="67" height="58" border="0" alt=""></a> </div>
    <div id="banner1"></div>
    <div id="index-15">
    <div id="Layer5">ddddkf kf k well finally i did what need</div>
    <div id="Layer8">
    <p class="style3"><u>Directv Digital Video Recorder (DVR) -</u></p>
    <span class="style4">learn vffffff about</span>the digital video recor </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><br>
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </p>
    </div>
    <div id="banner2"><span class="style2">DVR<br>
    HD-TV
    <br>
    Internet<br>
    <a href="file:///C:/work/I%20Love%20Satellite%20Tv%202/free_satellite_tv_pc.html">Satellite TV on Your PC</a><br>
    </span></div>
    </div>
    <div id="footer">
    <div id="copyright">
    <img src="images/copyright.gif" width="531" height="14" alt=""> </div>
    <div id="about-us">
    <a href="about_us.html">
    <img src="images/about_us.gif" width="57" height="14" border="0" alt=""></a> </div>
    <div id="contact-us">
    <a href="contact_us.html">
    <img src="images/contact_us.gif" width="69" height="14" border="0" alt=""></a> </div>
    <div id="sitemap">
    <a href="sitemap.html">
    <img src="images/sitemap.gif" width="53" height="14" border="0" alt=""></a> </div>
    <div id="resources">
    <a href="resources.html">
    <img src="images/resources.gif" width="68" height="14" border="0" alt=""></a> </div>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes it is dreamweaver. However I created it in adobe imageready 1st. So what should not be absolute?

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok when I change position to relative, the tags start flying all over the place. They still have the same position properties

  4. #4
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds View Post
    Hello

    Crash repair of main header nav content footer box, Sorry i can't follow how you want all these banners etc

    PS Please use lists for your navigation buttons and place the images of them on the A tags in the list

    your basic 100% high model
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- saved from url=(0022)http://www.domain.com/ -->
    <style type="text/css">
    <!--  -->
    html,body{height:100%;}
    
    *{padding:0;margin:0;}
    	
    body {
    font-family: Arial, Helvetica, sans-serif;
    background:#99ccff url(images/background.gif);
    font-size: 14px;
    }
    
    img{border:none;}
    
    #Layer1{
    width:778px;
    margin:-14px auto 0 auto;
    background:#ccffff;
    color:#FFFFFF;
    overflow:hidden;
    }
    * html #Layer1{height:100%;}
    head+body #Layer1{min-height:100%;}
    
    #ilovesatellitetv2{
    float:left;
    width:284px;
    height:104px;
    background:#0099ff;
    border-top:14px solid #000000;
    }
    
    #ilovesatellitetv{
    float:left;
    width:494px;
    height:104px;
    background:#0099cc;
    border-top:14px solid #000000;
    }
    
    
    #programming {
    float:left;
    width:162px;
    height:58px;
    background:#ffcc66;
    }
    
    #products {
    float:left;
    width:115px;
    height:58px;
    background:#ffcc99;
    }
    
    #news {
    float:left;
    width:80px;
    height:58px;
    background:#ffcccc;
    }
    
    #purchase {
    float:left;
    width:122px;
    height:58px;
    background:#ffcc99;
    }
    
    #faq{
    float:left;
    top:104px;
    width:67px;
    height:58px;
    background:#ffcc99;
    }
    
    #forum {
    float:left;
    width:90px;
    height:58px;
    background:#66cc66;
    }
    
    #blog {
    float:left;
    width:67px;
    height:58px;
    background:#66ff00;
    }
    
    #banner1 {
    float:left;
    width:195px;
    height:145px;
    background:#ccccff url(images/banner1.gif) no-repeat;
    padding-top: 5px;
    padding-left:25px;
    }
    
    #index-15{
    float:left;
    width:535px;
    }
    
    #banner2 {
    width:195px;
    height:157px;
    background:#ccffff url(images/banner2.gif) no-repeat;
    padding-top:5px;
    padding-left:20px;
    }
    
    #banner3 {
    width:195px;
    height:168px;
    background:#ccffff;
    }
    
    #copyright {
    float:left;
    width:531px;
    height:14px;
    background:#cccccc;
    }
    
    #about-us {
    float:left;
    width:57px;
    height:14px;
    background:#ffcc33;
    }
    
    #contact-us {
    float:left;
    width:69px;
    height:14px;
    background:#99cc99;
    }
    
    #sitemap {
    float:left;
    width:53px;
    height:14px;
    background:#66cccc;
    }
    
    #resources {
    float:left;
    width:68px;
    height:14px;
    background:#66ccff;
    }
    
    
    .style2 { color: #FF0000;
    font-size: 14px;
    font-weight: bold;
    }
    #footer {
    width:778px;
    margin:0 auto;
    height:14px;
    overflow:hidden;
    }
    
    
    
    #Layer2 {
    background:#ccffcc;
    width:200px;
    height:115px;
    float: left;
    }
    #Layer3 {
    background:#ffffcc;
    width:200px;
    height:115px;
    }
    #Layer4 {
    background:#cc66cc;
    width:200px;
    height:200px;
    text-align: left;
    padding: 5px;
    }
    #Layer5 {
    background:#ff66cc;
    width:200px;
    height:115px;
    float: left;
    padding: 5px;
    }
    #Layer6 {
    background:#ccff99;
    width:200px;
    height:115px;
    float:left;
    }
    #Layer7 {
    background:#ccff66;
    width:335px;
    height:115px;
    }
    #Layer8 {
    background:#ffff66;
    width:335px;
    height:115px;
    float:right;
    }
    .style3 {
    font-size: 18px;
    font-weight: bold;
    }
    .style4 {font-size: 14px}
    
    -->
    </style>
    <!-- End ImageReady Styles -->
    </head>
    <body>
    
    <div id="Layer1">
    
    <div id="ilovesatellitetv2">12345</div>
    
    
    <div id="ilovesatellitetv">
    
    <a href="index.html">
    <img src="images/ilovesatellitetv.gif" width="494" height="104" alt="I Love Satellite TV. Informational Resource For Everything Satellite TV" /></a> </div>
    
    <div id="programming">
    <a href="programming.html">
    <img src="images/programming.gif" width="162" height="58" alt=""></a> 
    </div>
    
    <div id="products">
    <a href="products.html">
    <img src="images/products.gif" width="115" height="58" alt=""></a>
    </div>
    
    <div id="news">
    <a href="news.php">
    <img src="images/news.gif" width="80" height="58" alt=""></a> </div>
    
    <div id="purchase">
    <a href="purchase.html">
    <img src="images/purchase.gif" width="122" height="58" alt=""></a> </div>
    
    <div id="faq">
    <a href="faq.html">
    <img src="images/faq.gif" width="67" height="58" alt=""></a> </div>
    
    <div id="forum">
    <img src="images/forum.gif" width="90" height="58" alt=""></div>
    
    <div id="blog">
    <a href="blog.html">
    <img src="images/blog.gif" width="67" height="58"  alt=""></a> </div>
    </div>
    
    
    
    <div id="footer">
    
    <div id="copyright">
    <a href="about_us.html">
    <img src="images/copyright.gif" width="531" height="14" alt="">
    </a>
     </div>
     
    <div id="about-us">
    <a href="about_us.html">
    <img src="images/about_us.gif" width="57" height="14" alt=""></a> </div>
    
    <div id="contact-us">
    <a href="contact_us.html">
    <img src="images/contact_us.gif" width="69" height="14" alt=""></a> </div>
    
    <div id="sitemap">
    <a href="sitemap.html">
    <img src="images/sitemap.gif" width="53" height="14" alt=""></a> </div>
    
    <div id="resources">
    <a href="resources.html">
    <img src="images/resources.gif" width="68" height="14" alt=""></a> </div>
    </div>
    
    </body>
    </html>
    I have no idea what your asking

  5. #5
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    post files

    from just the code, it's hard to see what's going on. but you should definitely start playing around with floats. here's something i started for you. It probably isn't exactly what you need but you can see some of the technique involved in getting floats to work for you.

    I would start from scratch (or my this code) and work from there.

    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" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    text-align: center;
    }
    #container {
    	width: 778px;
    	background-color: #CCCCCC;
    	margin-right: auto;
    	margin-left: auto;
    	text-align: left;
    }
    
    #nav {
    	background-color: #009900;
    }
    #content {
    	background-color: #66CCCC;
    }
    #leftBar {
    	width: 195px;
    	background-color: #339966;
    	float: left;
    	margin-right: 20px;
    }
    #mainArea {
    	float: left;
    	background-color: #333366;
    	width: 563px;
    }
    #footer a {
    	text-decoration: none;
    }
    #footer img {
    	border-style: none;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
      <div id="banner"><a href="index.html"><img src="images/ilovesatellitetv.gif" width="494" height="104" border="0" alt="I Love Satellite TV. Informational Resource For Everything Satellite TV" /></a></div>
      <div id="nav"><a href="programming.html"><img src="images/programming.gif" width="162" height="58" border="0" alt="" /></a><a href="products.html"><img src="images/products.gif" width="115" height="58" border="0" alt="" /></a><a href="news.php"><img src="images/news.gif" width="80" height="58" border="0" alt="" /></a><a href="purchase.html"><img src="images/purchase.gif" width="122" height="58" border="0" alt="" /></a><a href="faq.html"><img src="images/faq.gif" width="67" height="58" border="0" alt="" /></a><img src="images/forum.gif" width="90" height="58" alt="" /><a href="ilovesatellitetv.com/blog"><img src="images/blog.gif" width="67" height="58" border="0" alt="" /></a></div>
      <div id="content">
        <div id="leftBar">drgrdgsd</div>
        <div id="mainArea">dsfsdf</div>
        <div id="footer"> <img src="images/copyright.gif" width="531" height="14" alt=""><a href="about_us.html"><img src="images/about_us.gif" width="57" height="14" border="0" alt=""></a><a href="contact_us.html"><img src="images/contact_us.gif" width="69" height="14" border="0" alt=""></a><a href="sitemap.html"><img src="images/sitemap.gif" width="53" height="14" border="0" alt=""></a><a href="resources.html"><img src="images/resources.gif" width="68" height="14" border="0" alt=""></a></div>
        <br style="clear:both"/>
      </div>
      <!--end container-->
    </div>
    </body>
    </html>
    hope this can start you off on a good path. CSS-P can be tricky when you first start out.
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  6. #6
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nerd, you beat me, and with better advice!
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  7. #7
    RTFM ashleyk's Avatar
    Join Date
    Dec 2005
    Location
    Rochester, New York
    Posts
    435
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    he just means instead of having each navigation button in a div, use the list tags instead example:
    <ul><li> put image here</li></ul> (ul=unorder list, li=list item) then using css, you can style both the ul (the containing box) and each li (individual items).
    ---------------------------------------
    Ashley Kennedy
    ---------------------------------------
    how does a designer get roped into writing code?

  8. #8
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ashleyk View Post
    from just the code, it's hard to see what's going on. but you should definitely start playing around with floats. here's something i started for you. It probably isn't exactly what you need but you can see some of the technique involved in getting floats to work for you.

    I would start from scratch (or my this code) and work from there.

    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" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    body {
    text-align: center;
    }
    #container {
    	width: 778px;
    	background-color: #CCCCCC;
    	margin-right: auto;
    	margin-left: auto;
    	text-align: left;
    }
    
    #nav {
    	background-color: #009900;
    }
    #content {
    	background-color: #66CCCC;
    }
    #leftBar {
    	width: 195px;
    	background-color: #339966;
    	float: left;
    	margin-right: 20px;
    }
    #mainArea {
    	float: left;
    	background-color: #333366;
    	width: 563px;
    }
    #footer a {
    	text-decoration: none;
    }
    #footer img {
    	border-style: none;
    }
    -->
    </style>
    </head>
    <body>
    <div id="container">
      <div id="banner"><a href="index.html"><img src="images/ilovesatellitetv.gif" width="494" height="104" border="0" alt="I Love Satellite TV. Informational Resource For Everything Satellite TV" /></a></div>
      <div id="nav"><a href="programming.html"><img src="images/programming.gif" width="162" height="58" border="0" alt="" /></a><a href="products.html"><img src="images/products.gif" width="115" height="58" border="0" alt="" /></a><a href="news.php"><img src="images/news.gif" width="80" height="58" border="0" alt="" /></a><a href="purchase.html"><img src="images/purchase.gif" width="122" height="58" border="0" alt="" /></a><a href="faq.html"><img src="images/faq.gif" width="67" height="58" border="0" alt="" /></a><img src="images/forum.gif" width="90" height="58" alt="" /><a href="ilovesatellitetv.com/blog"><img src="images/blog.gif" width="67" height="58" border="0" alt="" /></a></div>
      <div id="content">
        <div id="leftBar">drgrdgsd</div>
        <div id="mainArea">dsfsdf</div>
        <div id="footer"> <img src="images/copyright.gif" width="531" height="14" alt=""><a href="about_us.html"><img src="images/about_us.gif" width="57" height="14" border="0" alt=""></a><a href="contact_us.html"><img src="images/contact_us.gif" width="69" height="14" border="0" alt=""></a><a href="sitemap.html"><img src="images/sitemap.gif" width="53" height="14" border="0" alt=""></a><a href="resources.html"><img src="images/resources.gif" width="68" height="14" border="0" alt=""></a></div>
        <br style="clear:both"/>
      </div>
      <!--end container-->
    </div>
    </body>
    </html>
    hope this can start you off on a good path. CSS-P can be tricky when you first start out.
    it works, but css looks so daunting


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
  •