www.webdeveloper.com
+ Reply to Thread
Results 1 to 4 of 4

Hybrid View

  1. 02-28-2013 09:53 PM #1
    steve7100
    steve7100 is offline Registered User
    Join Date
    Feb 2013
    Posts
    2

    Help with either footer or sidebar

    Hi all,

    Very new to HTML and web development. Trying to make my first website. You will see in a sec, how new I am.

    I am having a problem getting the footer to remain on the bottom, after the main content and side bar. In the main content.

    I've attached the code for someone to help with what I am doing incorrectly. Thanks for the help!

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Philadelphia Adult League Softball </title>
    <style type="text/css">
    <!--
    html {
    height: 100%;
    width: 100%;
    }
    body {
    margin: 0px;
    }
    #container {
    margin: auto;
    padding: 0px;
    height: auto;
    width: 960px;
    background-color: #fffeef;
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 1.2em;
    color: #313030;
    }
    #header {
    padding: 0px;
    height: 430px;
    }
    #main {
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
    margin-bottom: auto;
    padding: 0px;
    min-height: 305px;
    height: auto;
    position: relative;
    }
    #footer {
    height: 100px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    position: relative;
    padding-top: 20px;
    background-color: #C9C;
    }
    a:link {
    color: #000000;
    font-weight: bold;
    }
    a:visited {
    color: #7ac1b7;
    font-weight: bold;
    }
    a:hover {
    color: #9e2520;
    font-weight: bold;
    }
    #container #header #logo {
    height: 107px;
    }
    #container #header #logo #PALS-logo {
    background-image: url(../../../../PALS%20website%20feb%2028/Images/images/pals-web-mock%20logo%20and%20text.png);
    display: block;
    height: 107px;
    width: 242px;
    text-indent:-9999px;
    background-color: #fffeef;
    background-repeat: no-repeat;
    position: relative;
    }
    #container #header #banner {
    text-align: center;
    height: 257px;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: outset;
    border-bottom-style: inset;
    border-top-color: #fffeef;
    border-right-color: #fffeef;
    border-bottom-color: #fffeef;
    border-left-color: #fffeef;
    }
    #container #header #navbar {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold;
    color: #000;
    height: 35px;
    font-size: 23px;
    text-align: center;
    text-decoration: none;
    background-color: #8cfad2;
    padding-bottom: 10px;
    }
    #container #header #navbar ul {
    list-style-type: none;
    padding-top: 12px;
    margin: 0px;
    background-color: #8cfad2;
    }
    #container #header #navbar ul li {
    display: inline;
    text-transform: uppercase;
    padding-right: 40px;
    padding-left: 0px;
    padding-top: 11px;
    padding-bottom: 0px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center 0px;
    height: 35px;
    margin: 0px;
    text-decoration: none;
    color: #000;
    }
    #container #header #navbar ul li a {
    text-decoration: none;
    }
    #container #header #navbar ul li a:link {
    text-decoration: none;
    color: #000;
    }
    #container #header #navbar ul li a:visited {
    text-decoration: none;
    color: #000;
    }
    #container #header #navbar ul li a:hover {
    text-decoration: none;
    color: #CCC;
    padding-top: 11px;
    padding-bottom: 0px;
    background-image: url(../../../../PALS%20website%20feb%2028/Images/softball.gif);
    background-repeat: no-repeat;
    background-position: center 0px;
    height: 35px;
    margin: 0px;
    }
    #container #main #sidebar {
    clear: right;
    float: right;
    width: 219px;
    background-image: url(../../../../PALS%20website%20feb%2028/Images/Greenbackingforcard.jpg);
    background-repeat: no-repeat;
    height: 282px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    color: #392d32;
    font-size: 21px;
    line-height: 20px;
    position: absolute;
    left: 736px;
    top: 5px;
    }
    #container #main #sidebar p #ccom {
    border: 10px solid #fffeef;
    padding: 0px;
    margin-top: 5px;
    margin-right: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    }
    .sbcc {
    font-size: 29px;
    color: #fffeef;
    }
    .sbom {
    font-size: 19px;
    color: #fffeef;
    }
    .sbft {
    font-size: 14px;
    colr: #fffeef;
    color: #fffeef;
    }
    #container #main #content {
    min-height: 282px;
    width: 680px;
    clear: center;
    font-size: 14px;
    margin-left: 10px;
    }
    #box {
    border:thin solid #fffeef;
    height:320px;
    width:185px;
    padding: 0px;
    float: left;
    font-size: 12px;
    text-align: left;
    background-color: transparent;
    margin-right: 10px;
    margin-left: 0px;
    }
    -->
    </style>
    </head>

    <body>
    <div id="container">
    <div id="header">
    <div id="logo"><a href="http://phillypals.com" title="Philadelphia Adult League Softball" id="PALS-logo">Philadelphia Adult League Softball</a>
    </div><!-- end logo -->
    <div id="navbar">
    <ul>
    <li><a href="home.html" title="Home" target="_self">Home</a></li>
    <li><a href="Play.html" title="Play" target="_self">Play</a></li>
    <li><a href="Community.html" title="Community" target="_self">Community</a></li>
    <li><a href="Sponsor.html" title="Sponsor" target="_self">Sponsor</a></li>
    <li><a href="Staff.html" title="Staff" target="_self">Staff</a></li>
    </ul>
    </div><!-- end navbar -->
    <div id="banner"><img src="../../../../PALS website feb 28/Images/Web_Cover_Page.jpg" width="940" height="257" alt="PALS Banner"></div><!-- end banner -->
    </div><!-- end header -->
    <div id="main">
    <div id="content">
    <div id="box"><h3 align="center">Competition</h3>
    <img src="../../../../PALS website feb 28/Images/Web content center main.jpg" width="175" height="110" alt="Competitive">
    <p>PALS offers a competitive and fun recreational softball experience. We offer umpires, equipment, and stats. The season's League Champions receive championship t-shirts and personalized trophy cards.</p></div>
    <div id="box"><h3 align="center">Community</h3>
    <img src="../../../../PALS website feb 28/Images/Web content left main.jpg" width="175" height="110" alt="Community">
    <p>PALS supports programs and organizations that are committed to serving the local community. A portion of league fees benefit the Philadelphia Ronald McDonald House and the Mill Creek Recreational Center. </p></div>
    <div id="box"><h3 align="center">Camaraderie</h3>
    <img src="../../../../PALS website feb 28/Images/Web content right main.jpg" width="175" height="110" alt="Camaraderie"><p>PALS softball is co-ed, requiring at least four women play the field. We offer sponsor bar specials, and encourage teams to meet up after the games, offering a great opportunity to spend time with friends and meet new people.</p></div>
    <!-- end content -->
    <div id="sidebar">
    <p> <span class="sbcc">Player </span><br>
    <span class="sbom">of the week</span><br>
    <img src="../../../../PALS website feb 28/Images/kellypow.jpg" name="ccom" width="119" height="119" id="ccom"><br>
    <span class="sbft">Kelly</span><br>
    O'Connor<br>
    PALS</p>
    <p>&nbsp;</p>
    </div><!-- end sidebar -->
    </div><!-- end main -->
    <div id="footer">
    <div id="footnav">add footer nav here
    </div><!-- end footnav -->
    <div id="contact">add footer contact info here
    </div><!-- end contact -->
    <div id="network">add footer social media icons here
    </div><!-- end network -->
    </div><!-- end footer -->
    </div><!-- end container -->
    </body>
    </html>
    Reply With Quote Reply With Quote
  2. 03-01-2013 12:55 AM #2
    LindaLawrence
    LindaLawrence is offline Registered User
    Join Date
    Mar 2013
    Posts
    1
    Code seems to be correct..Where you got hitch with the problem? Exactly doesn't understand with use of container here.

    website design long island
    Reply With Quote Reply With Quote
  3. 03-01-2013 05:04 AM #3
    Major Payne's Avatar
    Major Payne
    Major Payne is offline Alzheimer Patient
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,072
    Sticky Footer(s):

    http://www.zymic.com/tutorials/html/effective-footers/
    http://ryanfait.com/resources/footer...ottom-of-page/
    http://ryanfait.com/sticky-footer/
    Ron

    Reply With Quote Reply With Quote
  4. 03-01-2013 09:55 AM #4
    steve7100
    steve7100 is offline Registered User
    Join Date
    Feb 2013
    Posts
    2
    Thanks. I did figure it out. I was doing something incorrectly when adding content and style to the footer and for some reason, it was pushing the footer into the content area.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

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

Forum Rules

 HTML5 Development Center



Recent Articles