Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Incorporating link bars into title banners?

    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!
    Attached Thumbnails Attached Thumbnails Incorporating link bars into title banners?-banner.jpg  

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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.)

    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.

    Code:

    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

    Code:
    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.
    Last edited by BoldUlysses; 02-20-2009 at 06:07 AM. Reason: Clarificationististization
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    gnomeontherun (02-20-2009)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •