#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0

    Footer at bottom help!


    Hello,

    my footer isnt at the bottom but at the middle of my page how can i fix that?

    template:

    <!--Footer Html-->

    <div class="footer_main">

    <div id="footer"><center> 2013 <span>Football</span></center></div>

    </div>

    <!--Footer Html-->

    css:

    /*Footer Css*/
    .footer_main {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #2a2b2c;
    }
    #footer {
    font-size: 12px;
    color: #939393;
    width: 960px;
    margin: 0px auto;
    }
    #footer span {
    color: #ffffff;
    }
    /*Footer Css*/


    pls help thanks!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening,

    Can you post all of the HTML and CSS please?

    I'll have a guess for now and say add clear:both; to .footer_main.

    And if by footer you mean the div with an id of 'footer', then put it outside the closing div tag for .footer_main.

    Regards,

    NM.
    Last edited by Nanomech; July 30th, 2013 at 03:35 PM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    PHP Code:
    <body> <!--Header Html--> <div class="header_main"> <div id="header"> <div class="top_bar"> <jdoc:include type="modules" name="languages" /> <div class="right header_right"> <jdoc:include type="modules" name="login" /> </div> <div class="clear"></div> </div> <!--Logo Area--> <a href="index.php"><img src="images/logo_img.png" alt="" class="left marg-bottom"/></a> <!--Logo Area--> <!--Header Right Area--> <div class="header_right right"> <jdoc:include type="modules" name="top-links" /> </div> <!--Header Right Area--> <div class="clear"></div> </div> <!--Navigation Html--> <div class="navi_bg"> <div id="nav"> <jdoc:include type="modules" name="main_menu" /> <div> <jdoc:include type="modules" name="search" /> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!--Navigation Html--> </div> <!--Header Html--> <!--Wrapper Html--> <div id="wrapper"> <!--Content Html--> <div id="content"> <!--Left Content Html--> <div class="left_content left"> <!--Banner Html--> <?php if ($this->countModules('slider')){ ?> <div id="banner"> <jdoc:include type="modules" name="slider" /> </div> <? }else{?> <script language="javascript" src="jquery.js"></script> <? }?> <script> jQuery.noConflict(); jQuery('#nav a').each(function() { jQuery(this).wrapInner("<span></span>"); }); </script> <!--Banner Html--> <?php if ($this->countModules('position-1')){ ?> <div class="postarea_bg"> <jdoc:include type="modules" name="position-1" /> <div class="clear"></div> </div> <br /> <? }?> <?php if ($this->countModules('home_page')){ ?> <div class="marg-bottom3"> <div class="latest_post_top">Vandaag</div> <div class="latest_post_rpt"> <jdoc:include type="modules" name="today-updates" /> </div> <img src="images/latest_post_bottom.jpg" alt="" class="marg-bottom3 marg-left4"/> </div> <div class="marg-bottom3"> <div class="latest_post_top">Gisteren</div> <div class="latest_post_rpt"> <jdoc:include type="modules" name="old-updates" /> </div> <img src="images/latest_post_bottom.jpg" alt="" class="marg-bottom3 marg-left4"/> </div> <? }else{?> <jdoc:include type="message" /> <jdoc:include type="component" /> <? }?> </div> <!--Left Content Html--> <!--right Content Html--> <div class="right_content right"> <jdoc:include type="modules" name="top-banner" /> <div class="latest_videos_top">Laatste Videos</div> <jdoc:include type="modules" name="videos" /> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <jdoc:include type="modules" name="bottom-banner" /> <?php if ($this->countModules('most-viewed')){ ?> <div class="latest_videos_top">Meest bekeken<a href="most-viewed" class="right">Meer</a> <div class="clear"></div> </div> <div class="latest_videos_rpt"> <jdoc:include type="modules" name="most-viewed" /> </div> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <? }?> <?php if ($this->countModules('latest_comments')){ ?> <div class="latest_videos_top">Latest Comments <div class="clear"></div> </div> <div class="latest_videos_rpt"> <jdoc:include type="modules" name="latest_comments" /> </div> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <? }?> </div> <!--right Content Html--> <div class="clear"></div> </div> <!--Content Html--> </div> <!--Wrapper Html--> <!--Footer Html--> <div class="footer_main"> <div id="footer"><center> 2013 <span>lll.nl</span></center></div> </div> <!--Footer Html--> </body> </html>

    Code:
    * { margin: 0px; padding: 0px; } body { font-size: 12px; line-height: 18px; color: #555555; font-family: Verdana, Arial, Helvetica, sans-serif; background: url(../images/body_img.jpg) center top no-repeat; } /*Default Css*/ img { border: 0 } h1 { font-size: 30px; color: #d00100; font-weight: normal; margin-bottom: 20px; } h2 { font-family: "Eras Bold ITC"; font-size: 20px; color: #979797; font-weight: normal; margin-bottom: 10px; } h3, .item-page h2 { font-size: 16px; color: #d00100; font-weight: normal; margin-bottom: 10px; } .item-page h2 { font-size: 26px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #060629; line-height: 26px; } a { text-decoration: underline; color: #d00100; font-size: 12px; } a:hover { text-decoration: none; } .post_text_div.right h3 a { font-size: 20px; line-height: 20px; } /*Default Css*/ /*Header Css*/ .header_main { height: 187px; width: 100%; background: url(../images/top_bar_bg.png) top repeat-x; } #header { width: 965px; margin: 0px auto; } .top_bar { height: 38px; line-height: 38px; margin-bottom: 4px; } .top_bar ul { list-style: none; float: left; } .top_bar ul li { float: left; background: url(../images/top_bar_list_img.png) right no-repeat; } .top_bar ul li a { text-decoration: none; font-size: 14px; color: #3f3f3f; padding: 0px 11px; } .top_bar ul li a:hover { color: #d00100; } .header_right { width: 500px; } .top_bar_input { background: url(../images/top_bar_input.png) repeat-x; width: 144px; height: 21px; padding: 0px 5px; border: none; color: #5e5e5e; font-size: 12px; } .login_btn, .submit, .button, button { background: url(../images/login_btn_img.png) repeat-x; height: 21px; padding-bottom: 2px; width: 74px; border: none; font-size: 12px; color: #ffffff; } /*Navigation Css*/ .navi_bg { background: url(../images/navi_bg_img.png) repeat-x; width: 100% !important; height: 38px; line-height: 38px; padding-bottom: 4px; padding-top: 7px; margin-bottom: 12px; } #nav { width: 960px; margin: 0px auto; } #nav ul { list-style: none; float: left; } #nav ul li { float: left; margin-right: 5px; } #nav ul li a { text-decoration: none; font-size: 14px; color: #ffffff; display: block; padding: 0px 11px; background: url(../images/navi_bg_img.jpg) repeat-x; border-radius: 5px 5px 0px 0px; text-transform: capitalize; } #nav ul li a:hover, #nav ul li.active a { background: url(../images/navi_hover_img.jpg) repeat-x; color: #ce0100; } #nav ul li:last-child { background: none; } /*Navigation Css*/ .header_input { border: none; width: 150px; height: 30px; line-height: 30px; background: url(../images/header_input.jpg) no-repeat; padding: 3px 10px 2px 10px; } .registration input[type=text], .registration input[type=password], input[type=email], .login input[type=text], .login input[type=password], .reset input[type=text] { border: none; width: 227px; height: 32px; background: url(../images/header_input.png) no-repeat; padding: 0px 10px; } /*Header Css*/ /*Wrapper Css*/ #wrapper { width: 960px; margin: 0px auto; position: relative; padding-top: 10px; } .facebook_add_img { position: absolute; left: -175px; top: 40px; } /*Wrapper Css*/ /*Content Css*/ #content { width: 960px; } /*Banner Css*/ #banner { width: 612px; height: 327px; margin-bottom: 19px; position: relative; margin-left: -6px; margin-right: -6px; } /*Banner Css*/ /*Content left Css*/ .left_content { width: 600px; } .postarea_bg { background: url(../images/bg_post_area_left.png) no-repeat; width: 575px; height: 189px; margin-right: -1px; padding: 16px 10px 10px 16px; } .img_bg { background: url(../images/img_bg.png) no-repeat; max-width: 267px; max-height: 180px; padding: 0px 3px 4px 2px; } .post_text_div { width: 290px; } .post_text_div h3 { margin-bottom: 5px !important; } .post_text_div p, .latest_rated_tr p, .latest_rated_tr2 p { margin-bottom: 0px !important; } .date { font-size: 12px; color: #000000; } .latest_post_top { background: url(../images/latest_post_top.jpg) no-repeat; width: 584px; height: 35px; line-height: 35px; padding-left: 17px; margin-left: 1px; font-size: 18px; color: #ffffff; font-family: "Eras Bold ITC"; } .latest_post_rpt { background: url(../images/latest_post_rpt_img.png) repeat-y; width: 597px; padding: 0px 2px; margin-left: 1px; font-size: 12px; color: #545454; } .latest_post_tr { height: 34px; line-height: 34px; background: #e6e6e6; padding: 0px 20px 0px 14px; } .latest_post_tr_blog { background: #e6e6e6; padding: 0px 20px 0px 14px; } .latest_post_tr_blog2 { background: #f2f5f7; padding: 0px 20px 0px 14px; } .latest_post_tr img { width: 16px; } .latest_post_tr_blog img, .latest_post_tr_blog2 img { width: 86px; margin: 11px 0; } .latest_post_tr2 { height: 34px; line-height: 34px; background: #f2f5f7; padding: 0px 20px 0px 14px; } .latest_post_tr a, .latest_post_tr2 a, .btm_cr_area a, .latest_post_tr_blog a, .latest_post_tr_blog2 a, .post_text_div a { color: #060629; text-decoration: none; } .latest_post_tr a:hover, .latest_post_tr2 a:hover, .btm_cr_area a:hover, .latest_post_tr_blog a:hover, .latest_post_tr_blog2 a:hover { text-decoration: underline; } .latest_post_tr img, .latest_post_tr2 img { margin-top: 11px; } .latest_post_tr input, .latest_post_tr2 input, .latest_post_tr_blog input, .latest_post_tr_blog2 input { background: url(../images/search_icon_bar.png) no-repeat; width: 28px; height: 16px; padding-bottom: 7px; text-align: center; border: none; font-size: 10px; color: #ffffff; margin-top: 7px; } .latest_post_tr span, .latest_post_tr2 span, .latest_post_tr_blog span, .latest_post_tr_blog2 span { margin-right: 20px; margin-left: 10px; } /*Content left Css*/ /*Content right Css*/ .right_content { width: 342px; } .olx_bg { background: url(../images/olx_add_img_bg.png) no-repeat; width: 336px; height: 269px; padding: 1px 3px 5px 3px; } .latest_videos_top { background: url(../images/rated_top_area.jpg) no-repeat; width: 325px; height: 35px; line-height: 35px; padding-left: 17px; font-size: 18px; color: #ffffff; font-family: "Eras Bold ITC"; position: relative; } .latest_videos_top a { background: url(../images/view_all_img.jpg) no-repeat; border: none; width: 101px; height: 25px; text-align: center; line-height: 25px; color: #000000; text-decoration: none; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; margin-right: 13px; margin-top: 5px; } .latest_videos_top a:hover { text-decoration: underline; } .latest_videos_rpt { background: url(../images/videos_rpt_area.jpg) repeat-y; width: 336px; padding: 0px 3px; font-size: 12px; color: #545454; } .btm_cr_area { background: url(../images/bg_btm_area.jpg) no-repeat; width: 324px; height: 103px; padding: 11px 6px; color: #d00100; } .btm_cr_area a { color: #d00100; text-decoration: none; } .btm_cr_area a:hover { text-decoration: underline; } .box_1 { width: 94px; height: 89px; position: relative; } .box_1_caption { background: url(../images/transparant_img.png) repeat; width: 76px; min-height: 18px; position: absolute; bottom: 6px; left: 3px; padding: 5px; font-size: 10px; color: #ffffff; line-height: 10px; } .arrow_marg { margin-top: 30px; } .latest_rated_tr { background: #e6e6e6; padding: 10px 16px 15px 16px; color: #616161; } .latest_rated_tr2 { background: #f2f5f7; padding: 10px 16px 15px 16px; color: #616161; } .latest_rated_tr a, .latest_rated_tr2 a { color: #d00100; text-decoration: none; } .latest_rated_tr a:hover, .latest_rated_tr2 a:hover { text-decoration: underline; } .latest_rated_tr span, .latest_rated_tr2 span { color: #000000; } .latest_rated_tr img, .latest_rated_tr2 img { text-decoration: underline; background: url(../images/thumbnails_bg.png) no-repeat; width: 86px; height: 81px; padding: 2px 5px 6px 3px; } .border_rpt { background: url(../images/border_rpt.jpg) repeat-x; height: 2px; } /*Content right Css*/ /*Content Css*/ /*Css*/ .left { float: left; } .right { float: right; } .clear { clear: both; } .marg-left { margin-left: 10px; } .marg-right { margin-right: 10px !important; } .marg-bottom { margin-bottom: 10px; } .marg-top { margin-top: 10px; } .marg-left2 { margin-left: 5px; } .marg-right2 { margin-right: 5px; } .marg-bottom2 { margin-bottom: 5px; } .marg-top2 { margin-top: 5px; } .marg-left3 { margin-left: 15px; } .marg-right3 { margin-right: 15px; } .marg-bottom3 { margin-bottom: 15px; } .marg-top3 { margin-top: 15px; } .marg-left4 { margin-left: 1px; } /*Css*/ /*Footer Css*/ .footer_main { width: 100%; height: 40px; line-height: 40px; background: #2a2b2c; } #footer { font-size: 12px; color: #939393; width: 960px; margin: 0px auto; } #footer span { color: #ffffff; } /*Footer Css*/ #system-message { border: 1px dotted red; color: red; margin-bottom: 10px; padding: 20px; } #system-message ul { list-style: none } #jc { margin-top: 75px; } #comments .comment-body { margin-top: 15px !important; } fieldset { border: none; margin: 25px 0; } .login-fields { padding: 10px; } .login-fields label { padding: 5px; } .bullets ul { list-style: none } .bullets ul li { padding: 5px; margin-left: 15px; } bullets ul li a { } .login-greeting { float: left; } .logout-button { float: left; margin-left: 15px; } .word, .phrases, .only, .search-results { border: 1px dotted; padding: 10px; } .result-title { border-top: 1px dotted; margin-bottom: 5px; margin-top: 15px; } .result-title, .result-category { margin-bottom: 5px; } .input_label { width: 60px; padding-right: 5px; text-align: right; margin-top: 5px; } .input_field { background: url(../images/input_bg.png) no-repeat; padding: 0px 10px; margin-bottom: 10px; width: 273px; height: 31px; border: none; } .input_textarea { background: url(../images/input_bg_textarea.png) no-repeat; margin-bottom: 10px; width: 288px; height: 81px; border: none; padding-right: 5px; padding-bottom: 5px; } .input_field_2 { background: url(../images/short_input_bg.png) no-repeat; padding: 0px 10px; margin-bottom: 10px; width: 143px; height: 31px; border: none; } .submit, .button, button { /*background: url(../images/btn_submit_img.png) no-repeat; width: 101px; height: 40px; font-size: 18px; color: #FFFFFF; text-transform: uppercase; border: none; padding: 2px 0px 8px 0px;*/ } .chronoform { display: none } .line_video { height: 1px; border: 0; border-bottom: 1px dotted #000000; } .pagination { border-top: 1px solid #EEEEEE; padding-top: 8px; display: inline-block; width: 100%; margin-bottom: 10px; } .pagination ul { float: left; list-style: none; } .pagination ul li { float: left; padding: 10px; } .pagination .links a { display: inline-block; border: 1px solid #EEEEEE; padding: 4px 10px; text-decoration: none; color: #A3A3A3; } .pagination .links b { display: inline-block; border: 1px solid #269BC6; padding: 4px 10px; font-weight: normal; text-decoration: none; color: #269BC6; background: #FFFFFF; } .pagination .results { float: right; padding-top: 3px; } .all_videos { margin-top: 15px; } .table_videos img { height: 100px !important; width: 145px !important; } .banneritem { margin-bottom: 10px } .img-fulltext-left { float: right; padding: 10px; } .img-fulltext-left img { max-width:212px;} .bt-twitter-button { width:90px !important} .bt-social-share-above { margin-bottom: 20px; } #comments-list-footer .rss, .article-info-term { display: none } .create { color: #060629; font-style: italic; margin: 10px 0; } ul.jcomments-latestmod_comments { list-style: none; } .jcomments-latestmod_comments h6 { display: inline; float: left; } .jcomments-latestmod_comments > li { margin-bottom: -10px; } .author { display: block; font-weight: bold; margin: 3px 0; } .jcomments-latestmod_comments .date { font-style: italic; color: #D00100; float: right; } .jcomments-latestmod_comments .comment.rounded > div { border: 1px dotted; margin-left: -10px; padding: 10px; } .kmt-head { background: url(../images/navi_bg_img.png) repeat-x; } .mod-comment-time { font-style: italic; float: right } .empty { padding: 10px; text-align: center; color: #060629 } .logout-button .login_btn { margin-top: 8px; } #login-form { } .reg { margin-top: 10px; } @-moz-document url-prefix() { .reg { margin-top:8px; } }
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Have you got a live example at all?

    I don't mind helping you but I can't be fussed to format that code!

    Kind regards,

    NM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    edited link
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    18
    Rep Power
    0
    Originally Posted by text0r
    Hello,

    my footer isnt at the bottom but at the middle of my page how can i fix that?

    template:

    <!--Footer Html-->

    <div class="footer_main">

    <div id="footer"><center> 2013 <span>Football</span></center></div>

    </div>

    <!--Footer Html-->

    css:

    /*Footer Css*/
    .footer_main {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #2a2b2c;
    }
    #footer {
    font-size: 12px;
    color: #939393;
    width: 960px;
    margin: 0px auto;
    }
    #footer span {
    color: #ffffff;
    }
    /*Footer Css*/


    pls help thanks!
    Simply adding the following css rules to your .footer_main div should fix it:

    position: fixed;
    bottom: 0px;
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by rbqdesign
    Simply adding the following css rules to your .footer_main div should fix it:

    position: fixed;
    bottom: 0px;
    thank you worked but now on a page like this: voetbaltr.nl/clubs clubs its weird if u scroll down is there afix for that?
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    18
    Rep Power
    0
    Originally Posted by text0r
    thank you worked but now on a page like this: voetbaltr.nl/clubs clubs its weird if u scroll down is there afix for that?
    Not seeing anything weird other than the footer stays at the bottom when re-sized... if you want it to stay below your content you'll have to change your overall div structure and put your header, content, and footer in one div together so that they can properly align.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by rbqdesign
    Not seeing anything weird other than the footer stays at the bottom when re-sized... if you want it to stay below your content you'll have to change your overall div structure and put your header, content, and footer in one div together so that they can properly align.
    okay thanks i leave that then since i dont know how to do that all thanks tho!
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by rbqdesign
    Not seeing anything weird other than the footer stays at the bottom when re-sized... if you want it to stay below your content you'll have to change your overall div structure and put your header, content, and footer in one div together so that they can properly align.
    uhmm it doesnt look very great now since the footer is at the bottom is there any turtorial to do what u just said because now if u go to that link u cant see the last word
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    18
    Rep Power
    0
    Originally Posted by text0r
    uhmm it doesnt look very great now since the footer is at the bottom is there any turtorial to do what u just said because now if u go to that link u cant see the last word
    I think this is probably what you're looking for text0r:

    matthewjamestaylor dot com blog/keeping-footers-at-the-bottom-of-the-page

    (new user - cant post url)
  22. #12
  23. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Good evening,

    Post all of the updated code and I'll stick it in my template and see if I can muster something up for you.

    Kind regards,

    NM.
  24. #13
  25. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by Nanomech
    Good evening,

    Post all of the updated code and I'll stick it in my template and see if I can muster something up for you.

    Kind regards,

    NM.
    Code:
    * { margin: 0px; padding: 0px; } body { font-size: 12px; line-height: 18px; color: #555555; font-family: Verdana, Arial, Helvetica, sans-serif; background: url(../images/body_img.jpg) center top no-repeat; } /*Default Css*/ img { border: 0 } h1 { font-size: 30px; color: #d00100; font-weight: normal; margin-bottom: 20px; } h2 { font-family: "Eras Bold ITC"; font-size: 20px; color: #979797; font-weight: normal; margin-bottom: 10px; } h3, .item-page h2 { font-size: 16px; color: #d00100; font-weight: normal; margin-bottom: 10px; } .item-page h2 { font-size: 26px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #060629; line-height: 26px; } a { text-decoration: underline; color: #d00100; font-size: 12px; } a:hover { text-decoration: none; } .post_text_div.right h3 a { font-size: 20px; line-height: 20px; } /*Default Css*/ /*Header Css*/ .header_main { height: 187px; width: 100%; background: url(../images/top_bar_bg.png) top repeat-x; } #header { width: 965px; margin: 0px auto; } .top_bar { height: 38px; line-height: 38px; margin-bottom: 4px; } .top_bar ul { list-style: none; float: left; } .top_bar ul li { float: left; background: url(../images/top_bar_list_img.png) right no-repeat; } .top_bar ul li a { text-decoration: none; font-size: 14px; color: #3f3f3f; padding: 0px 11px; } .top_bar ul li a:hover { color: #d00100; } .header_right { width: 500px; } .top_bar_input { background: url(../images/top_bar_input.png) repeat-x; width: 144px; height: 21px; padding: 0px 5px; border: none; color: #5e5e5e; font-size: 12px; } .login_btn, .submit, .button, button { background: url(../images/login_btn_img.png) repeat-x; height: 21px; padding-bottom: 2px; width: 74px; border: none; font-size: 12px; color: #ffffff; } /*Navigation Css*/ .navi_bg { background: url(../images/navi_bg_img.png) repeat-x; width: 100% !important; height: 38px; line-height: 38px; padding-bottom: 4px; padding-top: 7px; margin-bottom: 12px; } #nav { width: 960px; margin: 0px auto; } #nav ul { list-style: none; float: left; } #nav ul li { float: left; margin-right: 5px; } #nav ul li a { text-decoration: none; font-size: 14px; color: #ffffff; display: block; padding: 0px 11px; background: url(../images/navi_bg_img.jpg) repeat-x; border-radius: 5px 5px 0px 0px; text-transform: capitalize; } #nav ul li a:hover, #nav ul li.active a { background: url(../images/navi_hover_img.jpg) repeat-x; color: #ce0100; } #nav ul li:last-child { background: none; } /*Navigation Css*/ .header_input { border: none; width: 150px; height: 30px; line-height: 30px; background: url(../images/header_input.jpg) no-repeat; padding: 3px 10px 2px 10px; } .registration input[type=text], .registration input[type=password], input[type=email], .login input[type=text], .login input[type=password], .reset input[type=text] { border: none; width: 227px; height: 32px; background: url(../images/header_input.png) no-repeat; padding: 0px 10px; } /*Header Css*/ /*Wrapper Css*/ #wrapper { width: 960px; margin: 0px auto; min-height:450px; position: relative; padding-top: 10px; } .facebook_add_img { position: absolute; left: -175px; top: 40px; } /*Wrapper Css*/ /*Content Css*/ #content { width: 960px; } /*Banner Css*/ #banner { width: 612px; height: 327px; margin-bottom: 19px; position: relative; margin-left: -6px; margin-right: -6px; } /*Banner Css*/ /*Content left Css*/ .left_content { width: 600px; } .postarea_bg { background: url(../images/bg_post_area_left.png) no-repeat; width: 575px; height: 189px; margin-right: -1px; padding: 16px 10px 10px 16px; } .img_bg { background: url(../images/img_bg.png) no-repeat; max-width: 267px; max-height: 180px; padding: 0px 3px 4px 2px; } .post_text_div { width: 290px; } .post_text_div h3 { margin-bottom: 5px !important; } .post_text_div p, .latest_rated_tr p, .latest_rated_tr2 p { margin-bottom: 0px !important; } .date { font-size: 12px; color: #000000; } .latest_post_top { background: url(../images/latest_post_top.jpg) no-repeat; width: 584px; height: 35px; line-height: 35px; padding-left: 17px; margin-left: 1px; font-size: 18px; color: #ffffff; font-family: chasm; } .latest_post_rpt { background: url(../images/latest_post_rpt_img.png) repeat-y; width: 597px; padding: 0px 2px; margin-left: 1px; font-size: 12px; color: #545454; } .latest_post_tr { height: 34px; line-height: 34px; background: #e6e6e6; padding: 0px 20px 0px 14px; } .latest_post_tr_blog { background: #e6e6e6; padding: 0px 20px 0px 14px; } .latest_post_tr_blog2 { background: #f2f5f7; padding: 0px 20px 0px 14px; } .latest_post_tr img { width: 16px; } .latest_post_tr_blog img, .latest_post_tr_blog2 img { width: 86px; margin: 11px 0; } .latest_post_tr2 { height: 34px; line-height: 34px; background: #f2f5f7; padding: 0px 20px 0px 14px; } .latest_post_tr a, .latest_post_tr2 a, .btm_cr_area a, .latest_post_tr_blog a, .latest_post_tr_blog2 a, .post_text_div a { color: #060629; text-decoration: none; } .latest_post_tr a:hover, .latest_post_tr2 a:hover, .btm_cr_area a:hover, .latest_post_tr_blog a:hover, .latest_post_tr_blog2 a:hover { text-decoration: underline; } .latest_post_tr img, .latest_post_tr2 img { margin-top: 11px; } .latest_post_tr input, .latest_post_tr2 input, .latest_post_tr_blog input, .latest_post_tr_blog2 input { background: url(../images/search_icon_bar.png) no-repeat; width: 28px; height: 16px; padding-bottom: 7px; text-align: center; border: none; font-size: 10px; color: #ffffff; margin-top: 7px; } .latest_post_tr span, .latest_post_tr2 span, .latest_post_tr_blog span, .latest_post_tr_blog2 span { margin-right: 20px; margin-left: 10px; } /*Content left Css*/ /*Content right Css*/ .right_content { width: 342px; } .olx_bg { background: url(../images/olx_add_img_bg.png) no-repeat; width: 336px; height: 269px; padding: 1px 3px 5px 3px; } .latest_videos_top { background: url(../images/rated_top_area.jpg) no-repeat; width: 325px; height: 35px; line-height: 35px; padding-left: 17px; font-size: 18px; color: #ffffff; font-family: "Eras Bold ITC"; position: relative; } .latest_videos_top a { background: url(../images/view_all_img.jpg) no-repeat; border: none; width: 101px; height: 25px; text-align: center; line-height: 25px; color: #000000; text-decoration: none; display: block; font-family: Verdana, Arial, Helvetica, sans-serif; margin-right: 13px; margin-top: 5px; } .latest_videos_top a:hover { text-decoration: underline; } .latest_videos_rpt { background: url(../images/videos_rpt_area.jpg) repeat-y; width: 336px; padding: 0px 3px; font-size: 12px; color: #545454; } .btm_cr_area { background: url(../images/bg_btm_area.jpg) no-repeat; width: 324px; height: 103px; padding: 11px 6px; color: #d00100; } .btm_cr_area a { color: #d00100; text-decoration: none; } .btm_cr_area a:hover { text-decoration: underline; } .box_1 { width: 94px; height: 89px; position: relative; } .box_1_caption { background: url(../images/transparant_img.png) repeat; width: 76px; min-height: 18px; position: absolute; bottom: 6px; left: 3px; padding: 5px; font-size: 10px; color: #ffffff; line-height: 10px; } .arrow_marg { margin-top: 30px; } .latest_rated_tr { background: #e6e6e6; padding: 10px 16px 15px 16px; color: #616161; } .latest_rated_tr2 { background: #f2f5f7; padding: 10px 16px 15px 16px; color: #616161; } .latest_rated_tr a, .latest_rated_tr2 a { color: #d00100; text-decoration: none; } .latest_rated_tr a:hover, .latest_rated_tr2 a:hover { text-decoration: underline; } .latest_rated_tr span, .latest_rated_tr2 span { color: #000000; } .latest_rated_tr img, .latest_rated_tr2 img { text-decoration: underline; background: url(../images/thumbnails_bg.png) no-repeat; width: 86px; height: 81px; padding: 2px 5px 6px 3px; } .border_rpt { background: url(../images/border_rpt.jpg) repeat-x; height: 2px; } /*Content right Css*/ /*Content Css*/ /*Css*/ .left { float: left; } .right { float: right; } .clear { clear: both; } .marg-left { margin-left: 10px; } .marg-right { margin-right: 10px !important; } .marg-bottom { margin-bottom: 10px; } .marg-top { margin-top: 10px; } .marg-left2 { margin-left: 5px; } .marg-right2 { margin-right: 5px; } .marg-bottom2 { margin-bottom: 5px; } .marg-top2 { margin-top: 5px; } .marg-left3 { margin-left: 15px; } .marg-right3 { margin-right: 15px; } .marg-bottom3 { margin-bottom: 15px; } .marg-top3 { margin-top: 15px; } .marg-left4 { margin-left: 1px; } /*Css*/ /*Footer Css*/ .footer_main { width: 100%; height: 40px; line-height: 40px; background: #2a2b2c; bottom: 0px; } #footer { font-size: 12px; color: #939393; width: 960px; margin: 0px auto; } #footer span { color: #ffffff; } /*Footer Css*/ #system-message { border: 1px dotted red; color: red; margin-bottom: 10px; padding: 20px; } #system-message ul { list-style: none } #jc { margin-top: 75px; } #comments .comment-body { margin-top: 15px !important; } fieldset { border: none; margin: 25px 0; } .login-fields { padding: 10px; } .login-fields label { padding: 5px; } .bullets ul { list-style: none } .bullets ul li { padding: 5px; margin-left: 15px; } bullets ul li a { } .login-greeting { float: left; } .logout-button { float: left; margin-left: 15px; } .word, .phrases, .only, .search-results { border: 1px dotted; padding: 10px; } .result-title { border-top: 1px dotted; margin-bottom: 5px; margin-top: 15px; } .result-title, .result-category { margin-bottom: 5px; } .input_label { width: 60px; padding-right: 5px; text-align: right; margin-top: 5px; } .input_field { background: url(../images/input_bg.png) no-repeat; padding: 0px 10px; margin-bottom: 10px; width: 273px; height: 31px; border: none; } .input_textarea { background: url(../images/input_bg_textarea.png) no-repeat; margin-bottom: 10px; width: 288px; height: 81px; border: none; padding-right: 5px; padding-bottom: 5px; } .input_field_2 { background: url(../images/short_input_bg.png) no-repeat; padding: 0px 10px; margin-bottom: 10px; width: 143px; height: 31px; border: none; } .submit, .button, button { /*background: url(../images/btn_submit_img.png) no-repeat; width: 101px; height: 40px; font-size: 18px; color: #FFFFFF; text-transform: uppercase; border: none; padding: 2px 0px 8px 0px;*/ } .chronoform { display: none } .line_video { height: 1px; border: 0; border-bottom: 1px dotted #000000; } .pagination { border-top: 1px solid #EEEEEE; padding-top: 8px; display: inline-block; width: 100%; margin-bottom: 10px; } .pagination ul { float: left; list-style: none; } .pagination ul li { float: left; padding: 10px; } .pagination .links a { display: inline-block; border: 1px solid #EEEEEE; padding: 4px 10px; text-decoration: none; color: #A3A3A3; } .pagination .links b { display: inline-block; border: 1px solid #269BC6; padding: 4px 10px; font-weight: normal; text-decoration: none; color: #269BC6; background: #FFFFFF; } .pagination .results { float: right; padding-top: 3px; } .all_videos { margin-top: 15px; } .table_videos img { height: 100px !important; width: 145px !important; } .banneritem { margin-bottom: 10px } .img-fulltext-left { float: right; padding: 10px; } .img-fulltext-left img { max-width:212px;} .bt-twitter-button { width:90px !important} .bt-social-share-above { margin-bottom: 20px; } #comments-list-footer .rss, .article-info-term { display: none } .create { color: #060629; font-style: italic; margin: 10px 0; } ul.jcomments-latestmod_comments { list-style: none; } .jcomments-latestmod_comments h6 { display: inline; float: left; } .jcomments-latestmod_comments > li { margin-bottom: -10px; } .author { display: block; font-weight: bold; margin: 3px 0; } .jcomments-latestmod_comments .date { font-style: italic; color: #D00100; float: right; } .jcomments-latestmod_comments .comment.rounded > div { border: 1px dotted; margin-left: -10px; padding: 10px; } .kmt-head { background: url(../images/navi_bg_img.png) repeat-x; } .mod-comment-time { font-style: italic; float: right } .empty { padding: 10px; text-align: center; color: #060629 } .logout-button .login_btn { margin-top: 8px; } #login-form { } .reg { margin-top: 10px; } @-moz-document url-prefix() { .reg { margin-top:8px; } }
    Code:
    <?php /** * @package Joomla.Site * @subpackage Templates.beez_20 * @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ // No direct access. defined('_JEXEC') or die; //error_reporting(E_ALL); jimport('joomla.filesystem.file'); JFactory::getDocument()->setGenerator(''); ?> <!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" > <head> <jdoc:include type="head" /> <link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" rel="stylesheet" type="text/css" /> <? $user = JFactory::getUser(); if($user->id == 0) { ?> <style> #kmt-form { display:none !important;} </style> <? } ?> </head> <body> <!--Header Html--> <div class="header_main"> <div id="header"> <div class="top_bar"> <jdoc:include type="modules" name="languages" /> <div class="right header_right"> <jdoc:include type="modules" name="login" /> </div> <div class="clear"></div> </div> <!--Logo Area--> <a href="index.php"><img src="images/logo_img.png" alt="" class="left marg-bottom"/></a> <!--Logo Area--> <!--Header Right Area--> <div class="header_right right"> <jdoc:include type="modules" name="top-links" /> </div> <!--Header Right Area--> <div class="clear"></div> </div> <!--Navigation Html--> <div class="navi_bg"> <div id="nav"> <jdoc:include type="modules" name="main_menu" /> <div> <jdoc:include type="modules" name="search" /> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!--Navigation Html--> </div> <!--Header Html--> <!--Wrapper Html--> <div id="wrapper"> <!--Content Html--> <div id="content"> <!--Left Content Html--> <div class="left_content left"> <!--Banner Html--> <?php if ($this->countModules('slider')){ ?> <div id="banner"> <jdoc:include type="modules" name="slider" /> </div> <? }else{?> <script language="javascript" src="jquery.js"></script> <? }?> <script> jQuery.noConflict(); jQuery('#nav a').each(function() { jQuery(this).wrapInner("<span></span>"); }); </script> <!--Banner Html--> <?php if ($this->countModules('position-1')){ ?> <div class="postarea_bg"> <jdoc:include type="modules" name="position-1" /> <div class="clear"></div> </div> <br /> <? }?> <?php if ($this->countModules('home_page')){ ?> <div class="marg-bottom3"> <div class="latest_post_top">Vandaag</div> <div class="latest_post_rpt"> <jdoc:include type="modules" name="today-updates" /> </div> <img src="images/latest_post_bottom.jpg" alt="" class="marg-bottom3 marg-left4"/> </div> <div class="marg-bottom3"> <div class="latest_post_top">Gisteren</div> <div class="latest_post_rpt"> <jdoc:include type="modules" name="old-updates" /> </div> <img src="images/latest_post_bottom.jpg" alt="" class="marg-bottom3 marg-left4"/> </div> <? }else{?> <jdoc:include type="message" /> <jdoc:include type="component" /> <? }?> </div> <!--Left Content Html--> <!--right Content Html--> <div class="right_content right"> <jdoc:include type="modules" name="top-banner" /> <?php if ($this->countModules('videos')){ ?> <div class="latest_videos_top">Laatste Videos</div> <jdoc:include type="modules" name="videos" /> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <? }?> <jdoc:include type="modules" name="bottom-banner" /> <?php if ($this->countModules('most-viewed')){ ?> <div class="latest_videos_top">Meest bekeken<a href="most-viewed" class="right">Meer</a> <div class="clear"></div> </div> <div class="latest_videos_rpt"> <jdoc:include type="modules" name="most-viewed" /> </div> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <? }?> <?php if ($this->countModules('latest_comments')){ ?> <div class="latest_videos_top">Latest Comments <div class="clear"></div> </div> <div class="latest_videos_rpt"> <jdoc:include type="modules" name="latest_comments" /> </div> <img src="images/rated_bottom_bg.png" alt="" class="marg-bottom3"/> <? }?> </div> <!--right Content Html--> <div class="clear"></div> </div> <!--Content Html--> </div> <!--Wrapper Html--> <!--Footer Html--> <div class="footer_main"> <div id="footer"><center> 2013 <span>VoetbalTR.nl</span></center></div> </div> <!--Footer Html--> </body> </html>
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    8
    Rep Power
    0

    Unhappy


    Originally Posted by Nanomech
    Good evening,

    Post all of the updated code and I'll stick it in my template and see if I can muster something up for you.

    Kind regards,

    NM.
    any updates?

IMN logo majestic logo threadwatch logo seochat tools logo