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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Adding a logo at the top of the site

    Hi,

    I'm currently putting a website together using weebly and have been editing one of their basic templates to suit my requirements better. I've been doing ok so far (changing widths, background etc) but now I need to add my company logo and I am STUCK!!!

    I have been following a tutorial which says to do the following:-

    In the HTML tab, replace <div class="title">%%TITLE%%</div> with <div id="logo"></div>

    Click into the CSS Tab, insert the following CSS code for the new logo

    #logo{
    float: left;
    background: transparent url(samplelogo.png)no-repeat;
    width: 225px;
    height: 90px;
    }


    But all that happens is the title space at the top of the page shrinks. I've made sure I am adding the right .png file for my logo and it is a simple short one word document so definately no typos.

    There must be a simpler way of doing this, any suggestions please?

    Thanks in advance!

    Liz

  2. #2
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    can you post a link please?

  3. #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    My site hasn't been published yet so I can't I'm afraid, would it help if I gave the current html and css code?

  4. #4
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    yes please!

  5. #5
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry I'm very new to this!!

    Ok, here is the current html code:

    Code:
    <!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">%%TITLE%%</div>
                
                <div id="navigation">
                    %%MENU%%
                </div>
        
            <div id="banner"><div id="header" class="weebly_header"></div></div>
                
    <div id="content">
                    %%CONTENT%%
                </div>
                    <div id="footer">
                        %%WEEBLYFOOTER%%
                    </div>
        </div> 
    </body>
    </html>

    and this is the current CSS code:

    Code:
    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 url(blackgold.jpg);
        font-family: Georgia, arial, sans-serif;
        font-size:12px;
        color:#555555;
        height: 100%;
        margin:0;
        padding:0;
    }
    
    a{
        color: #F52887;
        text-decoration: none;
    }
    p {
        line-height: 170%;
        color: #0000FF;
        font-size: 14px;
        padding: 5px 0px 5px 0px;
    }
    h1 {
        font-size:24px;
        font-weight:bold;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    h2 {
        font-family: Arial;
        font-size:18px;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    
    #wrapper {
        width:1146px;
        margin: 0px auto;
    }
    
    .title{
        width: 1140px;
        font-family: Arial;
        padding: 30px 0px 30px 0px;
      margin: 0px 0px 0px 3px;
        font-size: 42px;
        color: #F52887;
        border-bottom: 5px solid #C9C299;
        font-weight: bold;
    }
    
    #navigation{
        position: relative;
        width: 1140px;
        margin: 0px 0px 0px 3px;
        height: 25px;
        z-index: 2;
        border-bottom: 2px solid #C9C299;
    }
    
    #navigation li{
        float: left;
        z-index: 2;
        text-transform: uppercase;
        margin: 0px 18px 0px 0px;
    }
    
    #navigation li a{
        display: inline-block;
        position: relative;
        color: #C9C299;
        z-index: 2;
        height: 19px;
        padding: 6px 12px 0px 12px;
        font-size: 16px;
        text-decoration: none;
    }
    
    #navigation li a:hover{
        background: #F52887;
        text-decoration: none;
    }
    
    #navigation li#active a{
        background: #000000;
    }
    
    #banner{
        position: central;
        width: 1180px;
        height: 271px;
        padding: 13px 0px 0px 2px;
        background: url() no-repeat;
        margin: 0px 0px 0px 0px;
    }
    
    #header{
        width: 1860px;
        height: 451px;
    }
    
    .weebly_header{
        z-index: 2;
        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: centre; clear: centre; width: 348px; text-align: centre; }
     #weebly-menus .weebly-menu li a { position: centre; display: block; width: 330px; background: #C9C299; border-top:  1px solid #fff; border-bottom: none; border-right: auto; border-left: auto; text-decoration: none; font-size: 14px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #000000; }
     #weebly-menus .weebly-menu li a:hover { background: #F52887; color: #C9C299; }
    
    #content{
        width: 1140px;
        height:auto !important;
        min-height:400px;
        background: #fff;
        border-top: 1px solid #F52887;
        border-bottom: 1px solid #F52887;
        padding: 12px 10px 40px 10px;
    }
    
    #footer{
        width: 1138px;
        color: #000000;
        font-size: 12px;
        text-align: left;
        background: #C9C299;
        padding: 12px 11px 20px 11px;
        margin: 2px 0px 20px 0px;
    }
    Any advice you can give would be gratefully received!
    Last edited by learnerzeph; 02-15-2011 at 10:16 AM.

  6. #6
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    You haven't added the <div id="logo"></div> and the css #logo {... } to your code yet!

  7. #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That is the original code before I edited it for the logo, this is the code after I have inserted the changes:-

    HTML:-

    Code:
    <!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 id="logo"></div>
                
                <div id="navigation">
                    %%MENU%%
                </div>
        
            <div id="banner"><div id="header" class="weebly_header"></div></div>
                
    <div id="content">
                    %%CONTENT%%
                </div>
                    <div id="footer">
                        %%WEEBLYFOOTER%%
                    </div>
        </div> 
    </body>
    </html>
    And the CSS:-


    Code:
    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 url(blackgold.jpg);
        font-family: Georgia, arial, sans-serif;
        font-size:12px;
        color:#555555;
        height: 100%;
        margin:0;
        padding:0;
    }
    
    a{
        color: #F52887;
        text-decoration: none;
    }
    p {
        line-height: 170%;
        color: #0000FF;
        font-size: 14px;
        padding: 5px 0px 5px 0px;
    }
    h1 {
        font-size:24px;
        font-weight:bold;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    h2 {
        font-family: Arial;
        font-size:18px;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    
    #wrapper {
        width:1146px;
        margin: 0px auto;
    }
    
    #logo{
      float: left;
      background: transparent url(fairy.png)no-repeat;
      width: 200px;
      height: 138px;
    }
    
    .title{
        width: 1140px;
        font-family: Arial;
        padding: 30px 0px 30px 0px;
      margin: 0px 0px 0px 3px;
        font-size: 42px;
        color: #F52887;
        border-bottom: 5px solid #C9C299;
        font-weight: bold;
    }
    
    #navigation{
        position: relative;
        width: 1140px;
        margin: 0px 0px 0px 3px;
        height: 25px;
        z-index: 2;
        border-bottom: 2px solid #C9C299;
    }
    
    #navigation li{
        float: left;
        z-index: 2;
        text-transform: uppercase;
        margin: 0px 18px 0px 0px;
    }
    
    #navigation li a{
        display: inline-block;
        position: relative;
        color: #C9C299;
        z-index: 2;
        height: 19px;
        padding: 6px 12px 0px 12px;
        font-size: 16px;
        text-decoration: none;
    }
    
    #navigation li a:hover{
        background: #F52887;
        text-decoration: none;
    }
    
    #navigation li#active a{
        background: #000000;
    }
    
    #banner{
        position: central;
        width: 1180px;
        height: 271px;
        padding: 13px 0px 0px 2px;
        background: url() no-repeat;
        margin: 0px 0px 0px 0px;
    }
    
    #header{
        width: 1860px;
        height: 451px;
    }
    
    .weebly_header{
        z-index: 2;
        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: centre; clear: centre; width: 348px; text-align: centre; }
     #weebly-menus .weebly-menu li a { position: centre; display: block; width: 330px; background: #C9C299; border-top:  1px solid #fff; border-bottom: none; border-right: auto; border-left: auto; text-decoration: none; font-size: 14px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #000000; }
     #weebly-menus .weebly-menu li a:hover { background: #F52887; color: #C9C299; }
    
    #content{
        width: 1140px;
        height:auto !important;
        min-height:400px;
        background: #fff;
        border-top: 1px solid #F52887;
        border-bottom: 1px solid #F52887;
        padding: 12px 10px 40px 10px;
    }
    
    #footer{
        width: 1138px;
        color: #000000;
        font-size: 12px;
        text-align: left;
        background: #C9C299;
        padding: 12px 11px 20px 11px;
        margin: 2px 0px 20px 0px;
    }
    Last edited by learnerzeph; 02-15-2011 at 10:17 AM.

  8. #8
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    does your background blackgold.jpg show up??

  9. #9
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yep, I got that working fine. I thought maybe the logo was being hidden by that so I removed it but the logo still doesn't show

  10. #10
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    try changing

    Code:
    background: transparent url(fairy.png)no-repeat;
    to

    Code:
    background: url(fairy.png) no-repeat;
    Oh and please post your code in between tags, this can be done by clicking on the number sign in the message toolbar or by typing it manually

  11. Users who have thanked eberdome for this post:

    learnerzeph (02-14-2011)

  12. #11
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bingo!!!!!!!!!

    You're a star, thank you so much! I've been trying to solve this all day, so relieved it is sorted!

    Thanks again!

  13. #12
    Regular Coder
    Join Date
    Dec 2010
    Location
    California
    Posts
    201
    Thanks
    30
    Thanked 8 Times in 8 Posts
    no worries. glad you got it working

  14. #13
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    New Problem!

    Ok, so the logo has been added now which is great, and in the preview pane it all looks fine. However when I save it and go out of the preview pane the navigation bar then appears above my logo, rather than sitting below it.

    Any ideas why or what I could try to correct it?

    The css coding is:

    Code:
    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 url(blackgold.jpg);
        font-family: Georgia, arial, sans-serif;
        font-size:12px;
        color:#555555;
        height: 100%;
        margin:0;
        padding:0;
    }
    
    a{
        color: #F52887;
        text-decoration: none;
    }
    p {
        line-height: 170%;
        color: #0000FF;
        font-size: 14px;
        padding: 5px 0px 5px 0px;
    }
    h1 {
        font-size:24px;
        font-weight:bold;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    h2 {
        font-family: Arial;
        font-size:18px;
        color:#0000FF;
        line-height:1.5;
        padding: 5px 0px 5px 0px;
    }
    
    #wrapper {
        width:1146px;
        margin: 0px auto;
    }
    
    #logo{
      float: left;
      background: url(fairy4.png) no-repeat;  
      width: 400px;
      height: 277px;
    }
    
    .title{
        width: 1140px;
        font-family: Arial;
        padding: 30px 0px 30px 0px;
      margin: 0px 0px 0px 3px;
        font-size: 42px;
        color: #F52887;
        border-bottom: 5px solid #C9C299;
        font-weight: bold;
    }
    
    #navigation{
        position: relative;
        width: 1140px;
        margin: 0px 0px 0px 3px;
        height: 25px;
        z-index: 2;
        border-bottom: 2px solid #C9C299;
    }
    
    #navigation li{
        float: left;
        z-index: 2;
        text-transform: uppercase;
        margin: 0px 18px 0px 0px;
    }
    
    #navigation li a{
        display: inline-block;
        position: relative;
        color: #C9C299;
        z-index: 2;
        height: 19px;
        padding: 6px 12px 0px 12px;
        font-size: 16px;
        text-decoration: none;
    }
    
    #navigation li a:hover{
        background: #F52887;
        text-decoration: none;
    }
    
    #navigation li#active a{
        background: #000000;
    }
    
    #banner{
        position: central;
        width: 1180px;
        height: 271px;
        padding: 13px 0px 0px 2px;
        background: url() no-repeat;
        margin: 0px 0px 0px 0px;
    }
    
    #header{
        width: 1860px;
        height: 451px;
    }
    
    .weebly_header{
        z-index: 2;
        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: centre; clear: centre; width: 348px; text-align: centre; }
     #weebly-menus .weebly-menu li a { position: centre; display: block; width: 330px; background: #C9C299; border-top:  1px solid #fff; border-bottom: none; border-right: auto; border-left: auto; text-decoration: none; font-size: 14px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #000000; }
     #weebly-menus .weebly-menu li a:hover { background: #F52887; color: #C9C299; }
    
    #content{
        width: 1140px;
        height:auto !important;
        min-height:400px;
        background: #fff;
        border-top: 1px solid #F52887;
        border-bottom: 1px solid #F52887;
        padding: 12px 10px 40px 10px;
    }
    
    #footer{
        width: 1138px;
        color: #000000;
        font-size: 12px;
        text-align: left;
        background: #C9C299;
        padding: 12px 11px 20px 11px;
        margin: 2px 0px 20px 0px;
    }

  15. #14
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,998
    Thanks
    164
    Thanked 2,242 Times in 2,229 Posts
    Add clear:left; to #navigation

    PS:
    position: central;
    The valid values of position property are static,fixed,relative and absolute.
    Last edited by abduraooft; 02-15-2011 at 10:51 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  16. Users who have thanked abduraooft for this post:

    learnerzeph (02-15-2011)

  17. #15
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Fab, that has worked thank you!!!

    So glad I found this forum!


 
Page 1 of 2 12 LastLast

Posting Permissions

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