...

View Full Version : What am I doing wrong? Banner only on homepage



tom.senex
11-15-2011, 12:35 AM
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?

Excavator
11-15-2011, 01:29 AM
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 -


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

tom.senex
11-15-2011, 03:01 PM
Thanks, still no luck! This is really driving me insane!

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

Tom

skill3d
11-15-2011, 03:42 PM
Have a div element for the header, so in html you'd put:



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


#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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum