Grow your CSS skills. Land your dream job.

How to make background image extend down page??

  • # September 6, 2009 at 11:05 pm

    Hello All,

    Here is the site: http://www.tolonopresbyterian.org. How do I make the background image extend or change the css (add image) to make the sidebars meet up with the footer (essentially making a rectangle with content in the middle).

    Any help would be appreciated.

    Thank you so much!

    Kendra

    The css:

    CSS – http://www.tolonopresbyterian.org

    * Collapse All
    * Expand All

    Code:
    @charset “UTF-8″;
    body {
    margin: 0; /* it’s good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #676356;
    font: 100% “Lucida Grande”, Lucida, Verdana, sans-serif;
    background: url(../img/shared_assets/mainbak_vine-1px.jpg) 50% 0;
    }

    #fauxBody {
    background: url(../img/shared_assets/mainbak_vine-small.jpg) no-repeat 50% 0;
    }

    .twoColFixLtHdr #container {
    width: 860px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    margin: 0 auto;
    text-align: left;
    }
    .twoColFixLtHdr #header {
    padding: 0 10px 0 20px;
    height: 153px;
    margin: 0 0 0 -69px;
    background: url(../img/shared_assets/logotype-top_new.png) no-repeat 25px 23px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
    }

    .twoColFixLtHdr #header #serviceTimes {
    /* The total height for this element is 34 px. 24 in height and 10 in padding*/
    width: 182px;
    height: 24px;
    background: url(../img/shared_assets/buttons/servicetimes_button-on.png) no-repeat;
    font-size: 9px;
    color: white;
    padding-top: 10px;
    padding-left: 14px;
    margin-left: 63px;
    }

    .twoColFixLtHdr #header #serviceTimes a:link {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:visited {
    text-decoration: none;
    color: white;
    }

    .twoColFixLtHdr #header #serviceTimes a:hover {
    text-decoration: none;
    color: #fef600;
    }

    .twoColFixLtHdr #header h1 {
    margin: 0;
    padding: 0;
    }
    .twoColFixLtHdr #header #welcome #top {
    color: #800000;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    margin-bottom: 9px;
    }

    #welcome {
    padding-top: 12px;
    padding-left: 275px;
    text-decoration: none;
    color: #800000;
    font: normal normal 14px/15px Georgia, “Times New Roman”, Times, serif;
    margin-right: 103px;
    }

    #welcome a:link {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:visited {
    color: #3d0800;
    text-decoration: none;
    background-color: #a54514;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    display: inline;
    border-style: none;
    background-image: none;
    }

    #welcome a:hover {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    #welcome a:active {
    color: #680c04;
    text-decoration: none;
    background-color: #d84100;
    font-size: 12px;
    margin-left: 3px;
    padding: 1px 5px 1px 4px;
    background-image: none;
    }

    .twoColFixLtHdr #mainContent {
    margin: 0 0 0 250px; /* the left margin on this div element creates the column down the left side of the page – no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div’s text to fill the #sidebar1 space when the content in #sidebar1 ends. */
    padding: 0 20px;
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    background-color: transparent;
    }

    .twoColFixLtHdr #mainContent #image {
    border: 1px solid #c8c6ba;
    width: 565px;
    margin-top: 64px;
    }

    .twoColFixLtHdr #mainContent .intStory {
    margin-left: 24px;
    margin-right: 10px;
    line-height: 16px;
    color: #676356;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory #class101schedule .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons {
    font-size: 9px;
    margin-top: 26px;
    margin-bottom: 36px;
    padding: 0;
    border-bottom: 1px dotted #bababa;
    width: 534px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons td {
    padding: 6px 10px;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdLite {
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .tdDark {
    background-color: #f0ecda;
    color: #343434;
    }

    .twoColFixLtHdr #mainContent .intStory .streamingSermons .hedr {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
    border-bottom: 1px dotted #bababa;

    }

    .twoColFixLtHdr #mainContent .intStory a:link {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:visited {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #d30000;
    }

    .twoColFixLtHdr #mainContent .intStory a:hover {
    color: #4e4e4e;
    text-decoration: underline;
    }
    .
    twoColFixLtHdr #mainContent .intStory a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasic {
    float: left;
    margin-right: 14px;
    margin-bottom: 12px;
    }

    .twoColFixLtHdr #mainContent .intStory .imageBasicRight {
    float: right;
    margin-bottom: 12px;
    margin-left: 14px;
    }

    .twoColFixLtHdr #mainContent .intStory li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/bullet-orange.png) no-repeat 0 4px;
    padding: 0 0 2px 16px;
    }

    .twoColFixLtHdr #mainContent .intStory li a:link {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:visited {
    color: #2e2e2e;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .intStory li a:hover {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory li a:active {
    color: #b90000;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .intStory h4 {
    text-decoration: none;
    font: normal normal 18px Georgia, “Times New Roman”, Times, serif;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    }

    .twoColFixLtHdr #mainContent .intStory h5 {
    text-decoration: none;
    margin: 0;
    padding-top: 22px;
    color: #404040;
    font-variant: normal;
    font-style: normal;
    font-size: 12px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 {
    color: #ee850d;
    text-transform: lowercase;
    font: normal 26px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 1px;
    margin-left: 24px;
    }

    .twoColFixLtHdr #mainContent .hedrInterior1 .tier2 {
    color: #c2ad98;
    display: inline;
    }

    #subhedrItalics {
    margin-bottom: 28px;
    margin-top: 4px;
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    margin-left: 24px;
    }

    #subhedrItalics .regularLink {
    display: inline;
    }

    #subhedrItalics a:link {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:visited {
    font: italic 14px Georgia, “Times New Roman”, Times, serif;
    color: #cb4600;
    text-transform: lowercase;
    border-style: none;
    border-width: 0;
    background-color: transparent;
    margin: 0 0 28px;
    padding: 0;
    display: inline;
    text-decoration: none;
    background-image: none;
    }

    #subhedrItalics a:hover {
    color: #ff6c00;
    text-decoration: underline;
    }

    #subhedrItalics a:active {
    color: #ff6c00;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .hedrBody1 {
    background: url(../img/shared_assets/body_topHeaderBak-gradient.png) repeat-x;
    height: 45px;
    color: #9a3b0f;
    font: 20px Georgia, “Times New Roman”, Times, serif;
    padding-top: 10px;
    padding-left: 28px;
    margin-top: 18px;
    }

    .twoColFixLtHdr #mainContent .announcement {
    margin-left: 28px;
    margin-right: 14px;
    color: #1a1a19;
    }

    .twoColFixLtHdr #mainContent .announcement a:link, a:visited {
    color: #d30000;
    text-decoration: none;
    }

    .twoColFixLtHdr #mainContent .announcement a:hover, a:active {
    color: #4e4e4e;
    text-decoration: underline;
    }

    .twoColFixLtHdr #mainContent .announcement .annoucePic{
    float: right;
    margin-left: 12px;
    }

    .twoColFixLtHdr #mainContent .announcement .buttonClick{
    margin-bottom: 30px;
    margin-top: 9px;
    display: block;
    border-style: none;
    }

    .twoColFixLtHdr #mainContent .announcement .eventDate {
    color: #c96a3e;
    font: 16px Georgia, “Times New Roman”, Times, serif;
    margin-top: 10px;
    margin-bottom: 8px;
    }

    .twoColFixLtHdr #mainContent .announcement .sig {
    font-style: italic;
    margin-top: 3px;
    }

    .horzBeveledLine {
    background: url(../img/shared_assets/beveled-line.gif) repeat-x;
    width: 100%;
    height: 2px;
    }

    /*
    .twoColFixLtHdr #mainContentBottom {
    color: #1a1a19;
    font: 11px/14px “Lucida Grande”, Lucida, Verdana, sans-serif;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 0;
    width: 860px;
    background: url(../img/shared_assets/mainContentBak.jpg) 50%;
    padding-top: 0;
    padding-bottom: 0;
    }

    */

    /* @group 3TAB BOX */

    /* Ths is commented out because 3tab.css has this code

    .twoColFixLtHdr #mainContent #threetabBox {
    height: 270px;
    margin-top: 42px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody {
    background-color: white;
    width: 569px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {

    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow #tabTable {
    height: 25px;
    }

    .twoColFixLtHdr #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    .twoColFixLtHdr #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-image: url(../img/shared_assets/tabbak_idle.gif);
    color: #817c7b;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle li {
    list-style-image: none;
    list-style-type: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    margin-left: 0;
    padding-left: 14px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:link, a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 0 2px;
    padding-left: 16px;
    }

    .twoColFixLtHdr #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    .twoColFixLtHdr #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;

    padding-right: 9px;
    color: #726155;
    font-size: 12px;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 4px;
    padding-left: 19px;
    margin: 0;
    }

    */
    /* @end */

    /* @group SIDEBARS */

    .twoColFixLtHdr #sidebar1 {
    float: left; /* since this element is floated, a width must be given */
    width: 212px;
    margin-left: 20px;
    padding: 6px;
    margin-top: 0;
    }

    /* @group GLOBALNAV */

    #globalNav {
    color: #5c5e52;
    font: normal 16px Georgia, “Times New Roman”, Times, serif;
    text-align: right;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    #globalNav #topButton {
    border-top: 1px solid #d5d0ba;
    font-size: 16px;
    }

    #globalNav a:link {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:visited {
    background-color: #eae8db;
    display: block;
    border-top: 1px solid white;
    border-left: 1px solid #d5d0ba;
    border-bottom: 1px solid #d5d0ba;
    height: 26px;
    margin: 0;
    padding-top: 9px;
    padding-right: 14px;
    text-decoration: none;
    font-weight: normal;
    font-style: normal;
    color: #5e5e52;
    border-right: 1px solid #d5d0ba;
    font-size: 16px;
    background-image: none;
    }

    #globalNav a:hover {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    #globalNav a:active {
    background: url(../img/shared_assets/globalNav_hoverbak.gif) repeat-x 0 0;
    color: #c75a23;
    }

    /* @end */

    .twoColFixLtHdr #sidebar1 #sidebarMiddle {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 18px;
    }

    .currentEvents
    {
    text-align: left;
    padding: 0;
    margin: 5px 5px 8px 14px;
    }

    .currentEvents .currentEventDate
    {
    color: #c85a23;
    text-transform: uppercase;
    font-size: 11px;
    }

    .currentEvents .currentClassDetail {
    color: #727267;
    font-size: 11px;
    }

    .currentClassDetail a:link {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:visited {
    color: #727267;
    background-image: none;
    background-color: transparent;
    text-decoration: none;
    margin: 0;
    padding: 0;
    }

    .currentClassDetail a:hover {
    color: #383838;
    }

    .currentClassDetail a:active {
    color: #383838;
    }

    .dottedline {
    background: url(../img/shared_assets/dottedline.gif) repeat-x 0 0;
    height: 3px;
    margin-right: 10px;
    margin-left: 10px;
    }

    .twoColFixLtHdr #sidebar1 .hedrCalendar {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-calendarimage.png) no-repeat 8px 6px;
    height: 36px;
    padding-top: 14px;
    padding-bottom: 9px;
    padding-left: 61px;
    }

    .twoColFixLtHdr #sidebar1 .hedrPaper {
    color: #9a3b0f;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    background: url(../img/shared_assets/sidebars/hedr-paperimage.png) no-repeat 20px 10px;
    height: 36px;
    padding: 14px 12px 8px 64px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort {
    color: #5c5e52;
    background: url(../img/shared_assets/sidebars/sidebarbak.gif) repeat-x 0 0;
    margin-top: 24px;
    padding-bottom: 50px;
    }

    /* @group Join and Webmaster box */

    .twoColFixLtHdr #sidebar1 #boxWebmaster {
    border: 1px solid #d5d0ba;
    background-color: #eae8db;
    color: #727267;
    font-size: 10px;
    font-weight: bold;
    margin-top: 22px;
    margin-bottom: 12px;
    padding: 12px 12px 12px 16px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin {
    background: url(../img/shared_assets/icon-join.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonJoin a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster {
    background: url(../img/shared_assets/icon-newsletter.gif) no-repeat 0 0;
    padding-left: 28px;
    height: 20px;
    padding-top: 3px;
    }

    .twoColFixLtHdr #sidebar1 #boxWebmaster #buttonMaster a:link, a:visited {
    text-decoration: none;
    color: #727267;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress {
    font-size: 10px;
    text-align: center;
    padding-top: 26px;
    padding-bottom: 10px;
    line-height: 14px;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:link, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: black;
    text-decoration: none;
    }

    .twoColFixLtHdr #sidebar1 .announcementAddress a:hover, .twoColFixLtHdr #sidebar1 .announcementAddress a:active {
    color: #727267;
    text-decoration: underline;
    }

    /* @end */

    /* all the styles for the SURMON sidebar – BEGIN*/

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonTitle {
    color: #2c2824;
    font-size: 11px;
    margin-left: 18px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonPastor {
    font-size: 11px;
    margin-left: 18px;
    color: #7f746c;
    margin-top: 4px;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort #surmonDate {
    font-size: 11px;
    display: inline-block;
    color: #c85a23;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonTable {
    margin-left: 16px;
    margin-top: 8px;
    padding: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell {
    padding-right: 4px;
    margin: 0;
    }

    .twoColFixLtHdr #sidebar1 .sidebarShort .buttonCell .buttonImg{
    border-width: 0;
    border-style: none;
    }

    /* all the styles for the SURMON sidebar – END*/

    /* @end */

    .twoColFixLtHdr #footer {
    padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background: url(../img/shared_assets/footer-baktile.jpg) 0 0;
    }

    .twoColFixLtHdr #lowerNavi {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0;
    font-size: 9px;
    background: url(../img/shared_assets/logo-small_new.gif) no-repeat 655px 4px;
    height: 37px;
    color: #a8a899;
    float: none;
    display: block;
    }

    .twoColFixLtHdr #footer #copyright {
    color: #9b9c8e;
    font-size: 9px;
    padding-bottom: 20px;
    }

    .twoColFixLtHdr #footer #copyright a:link, .twoColFixLtHdr #footer #copyright a:visited {
    color: #9b9c8e;
    font-size: 9px;
    text-decoration: none;
    }

    .twoColFixLtHdr #footer #copyright a:hover, .twoColFixLtHdr #footer #copyright a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:link {
    color: #727267;
    text-decoration: none;
    }

    .twoColFixLtHdr #lowerNavi a:visited {
    color: #727267;
    text-decoration: none;
    }
    .twoColFixLtHdr #lowerNavi a:hover {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #lowerNavi a:active {
    color: black;
    text-decoration: underline;
    }

    .twoColFixLtHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse – a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }

    .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 8px;
    }
    .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }

    iframe {
    width: 100%;
    height: 320px;
    }.address {
    font-size: 10px;
    color: #c96a3e;
    }

    http://www.npctucson.org/tab1.html

    http://www.npctucson.org/css/3tab.css

    /* this page formats the three tabs on the home page*/

    body {
    margin: 0;
    padding: 0;
    }

    /* @group 3TAB BOX */

    #threetabBox {
    margin-top: 42px;
    }

    #threetabBox #tabBoxbody {
    background-color: white;
    width: 568px;
    height: 244px;
    border-left: 1px solid #c8c6ba;
    border-bottom: 1px solid #c8c6ba;
    border-right: 1px solid #c8c6ba;
    padding-top: 2px;
    }

    #threetabBox #tabBoxbody #tab1Table {
    padding-top: 4px;
    padding-left: 4px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell1{
    height: 231px;
    width: 367px;
    margin: 0;
    padding: 0 5px 0 0;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2{
    background: url(../img/main/tabPix/tab1TextBak.jpg) no-repeat 0 0;
    width: 181px;
    vertical-align: top;
    color: #e4d0ad;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 p {
    padding-left: 12px;
    padding-right: 8px;
    font-size: 13px;
    }

    #threetabBox #tabBoxbody #tab1Table #cell2 .hedr3 {
    color: #efd29c;
    font: 18px Georgia, “Times New Roman”, Times, serif;
    padding-left: 12px;
    padding-top: 12px;
    }

    .twoColFixLtHdr #mainContent #threetabBox #tabRow {
    }

    #threetabBox #tabRow #tabTable {
    height: 25px;

    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    #tabRow #tabRightside {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside.png) no-repeat 0 0;
    }

    #tabRow #tabRightside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-rightside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabLeftside-idle {
    width: 9px;
    background: url(../img/shared_assets/tab-leftside_idle.png) no-repeat 0 0;
    }

    #tabRow #tabTable .active {
    vertical-align: top;
    padding-top: 5px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    background-color: white;
    border-top: 1px solid #c8c6ba;
    }

    #tabRow #tabTable .idle {
    vertical-align: top;
    padding-top: 6px;
    padding-right: 6px;
    padding-left: 6px;
    margin: 0;
    color: #817c7b;
    background-image: url(../img/shared_assets/tabbak_idle.png);
    }

    #tabRow #tabTable .idle a:link {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:visited {
    color: #817c7b;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    background: url(../img/shared_assets/tab-arrow_side.png) no-repeat 2px 2px;
    padding-left: 19px;
    }

    #tabRow #tabTable .idle a:hover {
    color: #c75a23;
    }

    #tabRow #home{
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
    color: #726155;
    background: white url(../img/shared_assets/tab-arrow_down.png) no-repeat 0 3px;
    padding-left: 19px;
    margin: 0;
    font: 12px “Lucida Grande”, Lucida, Verdana, sans-serif;
    }

    /* @end */

    The html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">





    Upcoming events
    WYN Starts up Again!
    Sign-up September 18 at 5:30 p.m.

    First Presbyterian Church of Tolono
    104 E. Vine St.
    Tolono, IL 61880
    (217) 485-3725
    tolonopres@yahoo.com


    Recent sermon
    “. . .!”
    by Kerry Bean|

    09.05.09

    listen listen

    Highlights
    Welcome
    Rev. Kerry Bean"If you are new to our First Presbyterian Church of Tolono Web site I welcome you! Please browse around and . . .”
    - Rev. Kerry Bean, Designated Pastor


    # September 6, 2009 at 11:31 pm

    well it looks as if the background image is one whole image. To extend the sidebars, you would need to change that image.

    # September 6, 2009 at 11:53 pm

    So I just need to make the sidebars longer? How do I know how long to make the sidebars because I don’t know how much info. will be there – seems like there has to be a better way.

    Thanks for the info. though.

    Kendra

    # September 7, 2009 at 12:17 am

    Take a 1px slice of the sidebars on each side. Set divs for the size of the sidebar currently, make that 1px img the background img for those divs and place them where the sidebars would be. set the repeat to repeat y.

    What this does is repeats the image for the size of the content no matter how big it is.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".