Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    What am I doing wrong? Banner only on homepage

    Hello, I am trying to customise a website using a free website builder site (for simplicity and I am not that good at programming anyway).
    No matter what I do I cannot get the banner on the homepage only.

    Can you please help.

    I want the banner only on the homepage. Here is the CSS:

    -----------
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
    margin:0;
    padding:0;
    }
    ul{
    list-style:none;
    }
    fieldset{
    border:0;
    }
    a img{
    border:0;
    }
    .clear{
    clear:both;
    }


    body {
    background: #fff;
    font-family: Georgia, arial, sans-serif;
    font-size:12px;
    color:#555555;
    height: 100%;
    margin:0;
    padding:0;
    }

    a{
    color: #63bdfb;
    text-decoration: none;
    }
    p {
    line-height: 170%;
    color: #555555;
    font-size: 14px;
    padding: 5px 0px 5px 0px;
    }
    h1 {
    font-size:24px;
    font-weight:bold;
    color:#555555;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
    }
    h2 {
    font-family: Georgia;
    font-size:18px;
    color:#555555;
    line-height:1.5;
    padding: 5px 0px 5px 0px;
    }

    #wrapper {
    width:966px;
    margin: 0px auto;
    }

    .title{
    width: 960px;
    font-family: Georgia;
    padding: 15px 0;
    margin: 0px 0px 0px 3px;
    font-size: 24px;
    border-bottom: 5px solid #dddddd;
    font-weight: bold;
    }

    .title, .title a {
    color: #555555;
    }

    #navigation{
    position: relative;
    width: 960px;
    margin: 0px 0px 0px 3px;
    height: 25px;
    z-index: 2;
    border-bottom: 1px solid #dddddd;
    }

    #navigation li{
    float: left;
    z-index: 2;
    text-transform: uppercase;
    margin: 0px 18px 0px 0px;
    }

    #navigation li a{
    display: inline-block;
    position: relative;
    color: #555555;
    z-index: 2;
    height: 19px;
    padding: 6px 12px 0px 12px;
    font-size: 12px;
    text-decoration: none;
    }

    #navigation li a:hover{
    background: #f2f2f2;
    text-decoration: none;
    }

    #navigation li#active a{
    background: #f2f2f2;
    }


    #banner {
    display: none;
    position: relative;
    width: 953px;
    height: 271px;
    padding: 0px 0px 0px 0px;
    background: no-repeat;
    margin: 0px 0px 0px 0px;
    }

    .homepage #banner {
    display:block;
    }

    #header{
    width: 941px;
    height: 257px;
    }

    .weebly_header{
    z-index: 1;
    background: url(%%HEADERIMG%%) no-repeat;
    }

    #weebly-menus .weebly-menu-wrap { z-index: 5000; }
    #weebly-menus .weebly-menu { padding: 0; margin: -1px 0px 0px 0px; list-style: none; }
    #weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
    #weebly-menus .weebly-menu li a { position: relative; display: block; width: 150px; background: #c5c5c5; border-top: 1px solid #fff; border-bottom: none; border-right: none; border-left: none; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #333333; }
    #weebly-menus .weebly-menu li a:hover { background: #999999; color: #333333; }

    #content{
    width: 940px;
    height:auto !important;
    min-height:400px;
    background: #fff;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 12px 10px 40px 10px;
    }

    #footer{
    width: 938px;
    color: #555555;
    font-size: 14px;
    text-align: left;
    background: #dddddd;
    padding: 12px 11px 63px 11px;
    margin: 2px 0px 20px 0px;
    }


    ---------

    And here is the HTML index:

    ----------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>{title}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if lt IE 7]>
    <style>
    #content
    {
    height:400px !important;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="wrapper">
    <div class="title">{logo max-height="60"}</div>

    <div id="navigation">
    {menu}
    </div>

    <div id="banner" class="homepage"> </div></div>
    <div id="header" class="wsite-header"></div></div>

    <div id="content">
    {content}
    </div>
    <div id="footer">
    {footer}
    </div>
    </div>
    </body>
    </html>



    -------

    Can anyone help?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello tom.senex,
    Assuming there are no other conflicts, I didn't spend a lot of time looking at it...

    This should work with your existing CSS -
    Code:
    </style>
    <![endif]-->
    </head>
    <body class="homepage">
    <div id="wrapper">
    <div class="title">{logo max-height="60"}</div>
    
    <div id="navigation">
    {menu}
    </div>
    When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
    This will wrap your code in a scroll box which greatly helps the readability of your post.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, still no luck! This is really driving me insane!

    Also, thanks for telling me about the code wrapping button.

    Tom

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    25
    Thanks
    5
    Thanked 1 Time in 1 Post
    Have a div element for the header, so in html you'd put:

    Code:
    <html>
    <head>
    <title></title>
    <body>
    <div id="header">
    <h5> Logo <h5> <!-- This wont be displayed -->
    </div>
    </body>
    </html>
    Then for the style.css or stylesheet put something like:
    Code:
    #header {
     width: 100%;
     background: url(logo.png);
     height: 000px;
    }
    #header h5 {
     display: none;
    }
    In the future, try wrapping CODE tags around your block of code.


  •  

    Posting Permissions

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