Help with banner for all pages

Joined
Jun 17, 2007
Messages
37
Reaction score
0
Points
6
Hello all, i am designing my first sight and it is a daunting task to say the least. Anyways, i designed a banner in photoshop that i am wanting to use across the top of all of my web pages, my question is how do i assign that in my css (and correspondingly in my html document)?

Through trial and error, i made a <h1><div id="banner"> in my html then assigned some properties to #banner in my css document but that proved nothing. I got it to work when i put my image in the background in the body portion of my css but it was overlapping with some text so i decided i should seperate the two. I would really appreciate some help, thanks.
 
Joined
Jun 18, 2006
Messages
191
Reaction score
5
Points
18
Location
Minneapolis
Your Mac's Specs
MacBook Pro
On your CSS document:
#banner {
background: url(imagefolder/banner.gif) no-repeat;
}

on your html page:
<div id="banner"></div>
Lots of other parameters you can add, like position and div width and height. Do a little "googling" on CSS and you will find loads of good info.
 
OP
M
Joined
Jun 17, 2007
Messages
37
Reaction score
0
Points
6
Thanks for the help i got the banner up there although i'm still having a few issues:
1. i matched the background color of the image in the bottom right to my page and it shows up fine on opera but it shows up two different colors on safari.
2. i'm having problems getting all the text lined up on the left side of the page for some reason.
3. the banner won't center itself across the top center even though i have that entered for it under background-position.

Keep in mind that i'm very new to all this so sorry if the questions fall into the "idiot" category, also, hopefully my code isn't too much of a mess. I have dreamweaver but i'm trying to do most of it by code. Here it is:

html:
<style type="text/css">
</style>
<link href="css1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner"></div>
 
<p class="p1"><span class="style1"><em>W</em></span>elcome to the Backpacking Angler, where fly rod and solitude always meet. Long hikes with heavy backpacks, sore feet, and eager fish tempt an angler willing to commit to what some call the ultimate fly fishing experience. While other fisherman hammer roadside streams basking in the convenience of their fishing experience, the backpacking angler combs through thick rhododendron and increasingly narrowing trails to experience the most that the mountains have to offer.<br />
<span class="style1"><em>B</em></span>ackpacking Angler is a new site dedicated to those who traverse areas other anglers shun in search of fly fishing paradise. Whether you frequently enjoy backcountry trips or you are a novice wanting to learn, it is my hope that this site will both entertain and enrich anglers through a wide spectrum of media designed to accomodate different styles, inluding:</p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<ul style="list-style">
<li> Articles</li>
<li>Podcasts</li>
<li>Photos</li>
<li>Blog</li>
</ul>
<p class="p2">All contents © 2008 Craig Lancaster</p>
</body>
</html>



css:
body {
background-color:#46630a;
color:white;
background-image:url(Straight%20Fork,%207-14-07%20008.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:right bottom;
}
.p1 {
font: italic 14pt/22pt sans serif;
text-align:left;
width:40%;
float:left;
letter-spacing: normal;
}
ul {
font-family: "Courier New", Courier, monospace;
font-size: 18px;
font-style: italic;
float:left;
color: white;
}
.p1 .style1 em {
font-family: "Courier New", Courier, monospace;
font-size: 42px;
font-style: italic;
color: #FFFFFF;
text-decoration: none;
}
#banner {
background-image:url(BackpackingBannerUpdated2.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center top;
height:150px;
width:1000px;
border:#46630a;
border-width:medium;
}
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top