Incorporating link bars into title banners? [Archive]

Graz

02-20-2009, 02:13 AM

First off, apologies if this is the wrong forum for this to be in.

Secondly, my level of Photoshop and Web Design are both quite basic, so please bare that in mind with any suggestions ;)

Okay, what I'm trying to do is have my title banner at the top of the page, with company logo etc inside it, and a bit of design (see attached image).

Now I want the links to sit in between the red and blue swooshes (preferably with the links being drop down menus), and I figured that to do that I probably have to make them part of the same image?

Does the text have to be part of the image, or can they put over the top of the banner image with code? Is there an altogether better way of doing this, with the same effect? Could I make the banner a background image, and then somehow position the links with HTML/CSS or something onto the right part of the image?

I'm generally just thoroughly confused on where to start with it!

Another question... with banner headers like the one attached, I'm assuming there is no way to make it perfectly fit the screen, no matter what the resolution? If so, what is the best size to make it, so people don't have to scroll sideways on small resolutions, but doesn't look too small on large resolutions?

Cheers, and I hope I've explained myself relatively well!

BoldUlysses

02-20-2009, 04:35 AM

Hi Graz,

Well, the regulars are going to be pissed at me for just giving you a block of code and graphics, but what the heck, I'm feeling generous today. :)

(Just promise me you'll write the phrase "'Bear in mind' not 'Bare in mind'" 50 times. Deal? Deal.) :D

The short answers to your questions are the text does not have to be an image; in fact, for accessibility and a host of other reasons it's better that it not be. And you're on the right track with using backgrounds for the graphical building blocks of your page.

What we're going to do here is make the links into a list, which is what they really are, and style and position them much like we'd do anything else on the page. The "curtains" will be in a 600px-wide container that will center on the page. Behind that, on the <html> tag, we'll place a 2000px-wide (but very small since there are few colors) PNG file that will extend the background to fill the width of the browser window when it's larger than 600px. That should satisfy all resolutions from a graphical standpoint.

Observe. Link here (http://www.sufferndesign.com/helping/page6.html).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>Page 6</title>

<style type="text/css">

* {
margin:0;
padding:0;
}

html {
background:#fff url("bannerbg1.png") 50% 0 no-repeat;
font-size:100%;
}

#container {
width:600px;
height:200px;
margin:0 auto;
background:#fff url("banner1.png") no-repeat;
padding-top:137px;
}

#container ul {
list-style-type:none;
margin-left:80px;
width:440px;
overflow:auto;
}

#container li {
float:left;
}

#container li a {
font-family:verdana, arial, sans-serif;
font-style:italic;
text-decoration:none;
color:#fff;
font-size:1.2em;
display:block;
line-height:1.2em;
width:110px;
text-align:center;
}

#container li a:hover {
color:#000;
}

</style>

</head>

<body>

<div id="container">

<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">links</a></li>
</ul>

</div>

</body>
</html>

Notice how simple and semantic the actual HTML code is. Some of the key elements are highlighted, especially the

background:#fff url("bannerbg1.png") 50% 0 no-repeat;

since that controls the background image behind the actual curtains. The 50% 0 tells the image to position itself 50% (halfway) across the browser window (i.e. centered) in the x direction and 0 in the y direction (or at the top).

Anyway, I hope that helps. CSS dropdown menus are another animal. For the best tutorial on those go here (http://www.alistapart.com/articles/dropdowns).