PDA

View Full Version : centering a header on different screen resolutions


betthat
05-29-2008, 04:58 AM
i've made a banner type header for my webpage, its about 2000px in width, is there a code i can use to make it automatically resize in the browser window (if someone has a screen resolution of 800 x 600 px, or 1024 x 768px or whatsoever)? if so what are the codes, in css and in html?

Rob_Che
05-29-2008, 08:06 AM
Do you want the banner to resize or centre ?

Centering content: Use a CSS Wrapper (http://www.dreamweaverclub.com/css-center-content.php)

Rob

pete
05-29-2008, 09:44 AM
Look at http://www.domedia.org/oveklykken/css-centering-div.php

betthat
05-29-2008, 02:45 PM
i want it to be centered...i guess its a dumb question but i'm kinda new to this stuff, all i know is a few basic html codes. the question is...will it resize itself on different screen resolutions automatically if i make it center?

domedia
05-29-2008, 02:48 PM
No it won't. In order to make an element to change width based on the parent element, in this case the browser/body, you need to set the width to a relative one like:
#wrapper { width: 90%;}

betthat
05-29-2008, 03:42 PM
ok thanks =]

Rob_Che
05-29-2008, 10:04 PM
Might be worth adding that images won't be resized...

domedia
05-29-2008, 10:13 PM
Ah yes, if that's what you're after, the web does not work like that.

Cary
05-30-2008, 12:40 AM
Try this code and change the width of your browser :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width:75%;
margin:0 auto;
}
#banner {
width:100%; /* define width as a percentage and don't define the height */
}
</style>
</head>
<body>
<div id="wrapper">
<img id="banner" src="http://www.dreamweaverclub.com/assets/logo-dw-2006-10.gif" alt="Dreamweaver Club">
</div>
</body>
</html>

Death Dream
05-30-2008, 02:05 PM
Might be worth adding that images won't be resized...

That's not all totally true if its a background image lol True they wont resize but they will give the illusion they have with the repeat.

~Death Dream~

davidj
05-30-2008, 02:14 PM
Might be worth adding that images won't be resized...

unless you export out of photoshop with the...

... Include Drag Handles...

option ticked

then you can resize as you wish!

or did i just invent some new feature?

domedia
05-30-2008, 06:41 PM
Yeah I think you did... :) browsers are notoriously bad at resizing images, so you always want to display it in the native size.

Rob_Che
05-30-2008, 08:05 PM
I wouldn't want an image that I (lovingly) created to be resized by a browser... They can't even keep my divs in line, how would they deal with an image!? :-P

edit: you will notice that I hold browsers 100% responsible for my coding errors.

Death Dream
06-02-2008, 07:02 PM
edit: you will notice that I hold browsers 100% responsible for my coding errors.

I stand right beside you on that!

~Death Dream~