Adding a logo at the top of the site

learnerzeph

02-14-2011, 08:56 PM

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!!! :confused:

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

eberdome

02-14-2011, 08:59 PM

can you post a link please?

learnerzeph

02-14-2011, 09:19 PM

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?

eberdome

02-14-2011, 09:20 PM

yes please!

learnerzeph

02-14-2011, 09:25 PM

Sorry I'm very new to this!! :rolleyes:

Ok, here is the current 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" />

</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:

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! :thumbsup:

eberdome

02-14-2011, 09:29 PM

You haven't added the <div id="logo"></div> and the css #logo {... } to your code yet!

learnerzeph

02-14-2011, 09:35 PM

That is the original code before I edited it for the logo, this is the code after I have inserted the changes:-

HTML:-

<!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" />

</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:-

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;
}

eberdome

02-14-2011, 09:40 PM

does your background blackgold.jpg show up??

learnerzeph

02-14-2011, 09:48 PM

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 :confused:

eberdome

02-14-2011, 09:52 PM

try changing

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

to

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

learnerzeph

02-14-2011, 09:56 PM

Bingo!!!!!!!!!

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

Thanks again!

eberdome

02-14-2011, 10:03 PM

no worries. glad you got it working :)

learnerzeph

02-15-2011, 10:00 AM

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:

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;
}

abduraooft

02-15-2011, 10:49 AM

Add clear:left; to #navigation

PS: position: central; The valid values of position property are static,fixed,relative and absolute.

learnerzeph

02-15-2011, 11:01 AM

Fab, that has worked thank you!!! :)

So glad I found this forum! :thumbsup:

mac2martin

02-28-2011, 03:42 PM

Hi,

I have been following this thread and am trying to do exactly the same thing on a weebly site. What happened to Learnerzeph happened to me - followed the tutorial instructions and the gap at the top of the site just got smaller.

I followed your instructions and took "transparent" out but no change (although I could see the logo load behind the navigation bars and then be covered up).

I am also new to this and didn't understand "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".

Maybe this is the problem?

Also what was you instruction for the Navigation section of CSS - to replace "relative" with "central"?

Thanks for your help in advance, I really appreciate it