PDA

Click to See Complete Forum and Search --> : Centre image/banner

Alison556
02-18-2008, 04:13 PM
I'm not sure if I should be posting this here or on CSS but can anyone tell me how to centre my website banner image?

I've tried:

<img border="0" src="images/forum_banner.jpg" width="930" height="236" align="center" />

And it doesn't work.

I've tried:

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}<img src="images/forum_banner.jpg" alt="#" class="center" />

and that didn't work either (or maybe I did something wrong)

And I even tried:

<div style="text-align: center;"><img border="0" src="images/forum_banner.jpg" width="930" height="236" /></div>

and that didn't seem to work either.

Am I going dreadfully wrong somewhere?

Thanks,

Alison
TJ111
02-18-2008, 04:20 PM
<img class="center" src="path/to/image.jpg">


img.center {
display: block;
margin: 0 auto;
}


That doesn't work?
Alison556
02-18-2008, 05:28 PM
No, but I could be being a bit clueless here - this is the first time I've ever attempted anything like this, so I'm kinda flying by the seat of my pants.

I put the img.center { bit in my style.css sheet and the HTML code into my web page and all I get is the space for the image but no image.

And I've tried every variation in between and it just ain't happening.

Is there any specific place in my style.css file that it should be going?
Frank62
02-19-2008, 02:52 AM
Alison,

Its extremely easy, if you know the right syntax:

<div align="center"><img border="0" src="images/forum_banner.jpg" width="930" height="236"></div>
bathurst_guy
02-19-2008, 03:09 AM
align and border are depreciated.
<div style="text-align: center; width: 100%;margin: 0; padding: 0;"><img src="images/forum_banner.jpg" width="930px" height="236px" style="border: 0;margin: 0 auto;" alt="Alternate Text for Screenreaders and spiders"></div>
Frank62
02-19-2008, 03:23 AM
Guy,

That doesn't work on images in FF en Saf, neither in quirks nor standards. Only on text.
bathurst_guy
02-19-2008, 03:26 AM
I just tested it in Safari and it is centred
Frank62
02-19-2008, 03:34 AM
@Guy,

On my 1024 screen I did not see the margin: 0 auto inside the img tag. Only the text-align: center.

But, although you are in fact right, I find this code semantically ugly. If it were my site, the W3C could take a hike in this case.
bathurst_guy
02-19-2008, 03:55 AM
Using a mix of text-align and margin: 0 auto your usually safe in most browsers. I don't often do this for just an image though, but I use the same style for my entire page, centering a fixed width div containing the body. (not <body> I mean my text)
roondog
02-19-2008, 05:05 AM
Alison, in order to get margin: 0 auto to work you need a valid doctype not sure if you do. That is usually a reason why it doesn't work also for ie you need to have text-align:center for the body.
Alison556
02-19-2008, 08:34 AM
I tested all the different ways I tried in both Firefox and IE6 and it didn't work on any of them. :(

Would it help if I posted up the code for the page? Is a link easier? I've not published it yet, but I could if a link is easier to look at.

This is the first time I've ever really got into doing a site with "proper" code. I always used FrontPage before and I've been really going at it trying to make sure that it was clean code I was using. I hope I've succeeded!
TJ111
02-19-2008, 10:12 AM
Good move trying to use "Proper Code", you will thank yourself later. Yes a link to the page would help tremendously :) .
Alison556
02-19-2008, 01:44 PM
Here's the link to where I've uploaded it.

http://www.dogsandco.orgfree.com

I've made the banner fit the whole of the top of the page at the moment, but I was originally going to make it smaller and centre it.

Does it look OK the way it is or should I make it smaller and keep up the battle to make my centring work?
Death
02-21-2008, 09:15 AM
I think it looks fine just the way it is. I like the way it matches your navagation bar. It makes the page flow a lot better. And if you really wanted it centered simply shrink the image some then change your body rule to this:

body {
padding:25px;
text-align:center;
}

This will center your banner without effecting the rest of the page (from what I saw).

Thanks, Death

PS - Also I would adjust the width of your banner to 941 pixels.
Alison556
02-21-2008, 05:36 PM
Thank you. I've decided to leave it the size it is (well, changed to 941 as per your suggestion) since you think it looks OK like that.

If I wanted to centre a photograph that was actually in the main body of the page, would I use the same rule as you put above or something different?
Alison556
02-21-2008, 05:43 PM
Oooh, it's OK. I tried what Frank62 suggested and it worked - well, fine in IE6 and FF anyway.

You can't believe how excited I am at sorting a problem out myself (well kind of!!)

Thank you all so much.
Death
02-21-2008, 05:47 PM
That depends. If it is an Inline element then no it won't work. If it is a block level element then yes. For example.

<img src="banner.jpg" alt="" style="text-align:center" />

This will do nothing because an Image is an Inline element. Now if you were to put the Image In a block level element. For example.

<div style="text-align:center;">
<img src="bannger.jpg" alt="" />
</div>

This should put your Image In the center of your divison (of course the center is based upon the width and height of division).

Thanks, Death
Death
02-21-2008, 05:50 PM
Oooh, it's OK. I tried what Frank62 suggested and it worked - well, fine in IE6 and FF anyway.

You can't believe how excited I am at sorting a problem out myself (well kind of!!)

Thank you all so much.

Unfortunately, the align attribute is deprecated and you should use CSS instead. Of course It's your choice whether you want a valid page or not.

Thanks, Death
Alison556
02-21-2008, 07:44 PM
Oh No! Back to the drawing board............
Frank62
02-22-2008, 07:36 AM
What do you want a valid page for? Not to ensure that pages are browser proof, because I've seen pages that validated perfectly, but did not work at all in one or more of the current browsers (IE6, IE7, FF en Saf). And that was not due to javascript or something like that, but just to plain HTML and/or CSS.

You want a valid page to make the chance greater that it will be browser proof. But the best guarantee is still: test it in those browsers. Then, as long as you have a correct (= code-matching) DTD, there is little to worry about future rendering.

I would suggest Tidy's check: http://flumpcakes.co.uk/css/html-tidy/. That is much more pragmatic than the W3C validation.
Frank62
02-23-2008, 07:23 AM
Also, this validates perfectly, as HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
</head>
<body>
<div align="center"><img src="image.gif" width="10" height="10" alt="image"></div>
</body>
</html>


Check it out yourself at http://validator.w3.org/#validate_by_input .

Semantically pure, intuitive, browser-proof and validated code. What more do you want?
ray326
02-23-2008, 01:06 PM
I'd start the body with a div as Frank did but I'd use the image as a centered background. (Well if I were doing it from scratch the first thing I'd think about doing is making the image a background for an h1 at the beginning of the body but I see you're using that below.)
Alison556
02-23-2008, 08:29 PM
Thanks everybody. I think I've got the images centred OK but now I'm having problems with the bloomin text!

I will get there in the end and yes Frank62, you're right cos when it was originally done in FrontPage, everything showed up on FF and IE no problem, even though the code wasn't always valid but now that I've tried to make it valid, things aren't displaying properly.

I can't believe how addictive it is doing this though - I'm sitting up till all hours plodding away at it!
Frank62
02-23-2008, 10:52 PM
Alison,

Assuming that the problem you have with the text is that it is being centered, too, you probably put the center-aligning div around a too great area. It should always be wrapped only around that portion that you want centered.
Alison556
02-24-2008, 09:28 AM
Thank you, I think I've got it. Some of the text under pictures was meant to be centred and wasn't. It's probably not valid code but at least it's working!!
Death
02-25-2008, 08:53 AM
Also, this validates perfectly, as HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Page title</title>
</head>
<body>
<div align="center"><img src="image.gif" width="10" height="10" alt="image"></div>
</body>
</html>

Check it out yourself at http://validator.w3.org/#validate_by_input .

Semantically pure, intuitive, browser-proof and validated code. What more do you want?

Your right, but I can't help but wonder how this will help her when HTML is replaced and stricter habits come into view? You can't use transitional forever.

Thanks, Death
Frank62
02-25-2008, 03:48 PM
You can't use transitional forever.


You can. As long as the code is matching the DTD, and the code validates, there is no reason to believe why suddenly browsers would not support it anymore. Browser makers would be very stupid to stop that support, because it doesn't cost them any development expenses. So they would only loose users, and they all want an as big as possible market share.

Maybe someday a whole new way of making websites will be developed. With the 'ease' of HTML and the effect of Flash. And maybe HTML will go out of fashion completely then. But so will strict HTML then.