Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Adding a logo at the top of the site

Before you post, read our: Rules & Posting Guidelines

Reply
Page 1 of 2 1 2
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-14-2011, 08:56 PM   PM User | #1
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 08:59 PM   PM User | #2
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
can you post a link please?
eberdome is offline   Reply With Quote
Old 02-14-2011, 09:19 PM   PM User | #3
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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?
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 09:20 PM   PM User | #4
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
yes please!
eberdome is offline   Reply With Quote
Old 02-14-2011, 09:25 PM   PM User | #5
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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..
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 09:29 PM   PM User | #6
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
You haven't added the <div id="logo"></div> and the css #logo {... } to your code yet!
eberdome is offline   Reply With Quote
Old 02-14-2011, 09:35 PM   PM User | #7
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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..
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 09:40 PM   PM User | #8
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
does your background blackgold.jpg show up??
eberdome is offline   Reply With Quote
Old 02-14-2011, 09:48 PM   PM User | #9
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 09:52 PM   PM User | #10
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
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
eberdome is offline   Reply With Quote
Users who have thanked eberdome for this post:
learnerzeph (02-14-2011)
Old 02-14-2011, 09:56 PM   PM User | #11
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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!
learnerzeph is offline   Reply With Quote
Old 02-14-2011, 10:03 PM   PM User | #12
eberdome
Regular Coder

 
Join Date: Dec 2010
Location: California
Posts: 193
Thanks: 28
Thanked 8 Times in 8 Posts
eberdome is an unknown quantity at this point
no worries. glad you got it working
eberdome is offline   Reply With Quote
Old 02-15-2011, 10:00 AM   PM User | #13
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
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;
}
learnerzeph is offline   Reply With Quote
Old 02-15-2011, 10:49 AM   PM User | #14
abduraooft
Supreme Master coder!

 
abduraooft's Avatar
 
Join Date: Mar 2007
Location: N/A
Posts: 14,678
Thanks: 158
Thanked 2,182 Times in 2,169 Posts
abduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really niceabduraooft is just really nice
Add clear:left; to #navigation

PS:
Quote:
position: central;
The valid values of position property are static,fixed,relative and absolute.
__________________
Quote:
The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)
Last edited by abduraooft; 02-15-2011 at 10:51 AM..
abduraooft is offline   Reply With Quote
Users who have thanked abduraooft for this post:
learnerzeph (02-15-2011)
Old 02-15-2011, 11:01 AM   PM User | #15
learnerzeph
New to the CF scene

 
Join Date: Feb 2011
Posts: 9
Thanks: 2
Thanked 0 Times in 0 Posts
learnerzeph is an unknown quantity at this point
Fab, that has worked thank you!!!

So glad I found this forum!
learnerzeph is offline   Reply With Quote
Reply
Page 1 of 2 1 2

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 08:14 PM.
Advertisement
Log in to turn off these ads.