[SOLVED] Centering!

mcdanielnc89 · #1 Oct 21st, 2007, 03:05

ok. my css is this...

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

my html is this...

HTML: Select all

<IMG class="displayed" src="http://www.webforumz.com/images/aboutus.png" alt="About us">

it doesn't center. lol

trandrus · #2 Oct 21st, 2007, 04:40

Dare I point out the obvious, though I'm sure its just a mistake:

Code: Select all

<img class="displayed" src="http://www.webforumz.com/images/aboutus.png" alt="About Us" />

You need to open the image tag. I've found that centering objects like images is done best like this:

Code: Select all

<div align="center">
     <img src="http://www.webforumz.com/images/aboutus.png" alt="About Us" />
</div>

MikeHopley · #3 Oct 21st, 2007, 08:56

Quote:

Originally Posted by trandrus

I've found that centering objects like images is done best like this:

Code: Select all

<div align="center">
     <img src="http://www.webforumz.com/images/aboutus.png" alt="About Us" />
</div>

That method is deprecated. Use CSS and auto margins instead.

Applying margin: 0 auto; to an element will cause it to be centred inside the parent container (but this fails on IE5 and IE6 in quirks mode).

Do a search, either here or on Google. This has been covered many, many times.

alexgeek · #4 Oct 21st, 2007, 16:50

This should work as it usually requires you to specify a height and width:

HTML: Select all

img.displayed {
display: block;
margin: 0 auto;
height: 100px; 
width: 100px;
}

Obviously change the height and width.

trandrus · #5 Oct 21st, 2007, 17:51

Total server work required for CSS solution: 571B
Total server work required for align='center': 528B

Try it yourself:
http://www.rossandrus.net/examples/d...d/standard.php
http://www.rossandrus.net/examples/d...deprecated.php

Test the load time:
http://www.websiteoptimization.com/services/analyze/

That's not even taking IE5 and 6 into consideration. The CSS solution also forces you to display the image as block which is less flexible for things like rows of horizontally centered icons, etc. Deprecated doesn't always mean bad.

mcdanielnc89 · #6 Oct 21st, 2007, 18:03

hmm ok so which way is teh way to do itr if it's depreciated, and tyhe height and width would be pointless to do as that vlass is used for several other images...

alexgeek · #7 Oct 21st, 2007, 18:08

I just told you how to do iit the non-depcricated way.

MikeHopley · #8 Oct 21st, 2007, 18:11

Quote:

Originally Posted by trandrus

Total server work required for CSS solution: 571B
Total server work required for align='center': 528B

Try it yourself:
http://www.rossandrus.net/examples/d...d/standard.php
http://www.rossandrus.net/examples/d...deprecated.php

Test the load time:
http://www.websiteoptimization.com/services/analyze/

You've got to be kidding me.

You're talking about a mere 8% increase in server work, for a tiny total amount of work, on a presentational effect that will be used sparingly.

Compared to the total work required for a typical webpage, this is irrelevant. It's far more important to understand the reasons for preferring CSS-based presentation to HTML-based presentation. Saving a few bytes here and there is of dubious value.

Moreover, since both pages are invalid HTML, they hardly constitute good examples. Finally, note that although the CSS solution has an initial performance cost, it becomes more efficient the more you use it.

Quote:

The CSS solution also forces you to display the image as block which is less flexible for things like rows of horizontally centered icons, etc.

No it doesn't. You can make the image inline, and place a <div> around it instead. Then centre the <div>.

Quote:

Deprecated doesn't always mean bad.

Yes it does, actually. http://en.wikipedia.org/wiki/Deprecated

mcdanielnc89 · #9 Oct 21st, 2007, 18:20

Quote:

Originally Posted by alexgeek

This should work as it usually requires you to specify a height and width:

HTML: Select all

img.displayed {
display: block;
margin: 0 auto;
height: 100px; 
width: 100px;
}

Obviously change the height and width.

Okay, I guess I'm not quite understanding this aparently. WHy do I need to state the height and width if the css class is used for more than one image? If i do that; then wouldn't all images be the same and disportioned if they're not the same size?

MikeHopley · #10 Oct 21st, 2007, 18:24

You should not state the height and width. For images inserted via the <img> element (as opposed to CSS backgrounds), the height and width are given in the HTML.

Width is required for centring other boxes (<div>s, typically) that lack an inherent width.

mcdanielnc89 · #11 Oct 21st, 2007, 18:28

If that is the case MikeHopley then what is wrong with my code to make it not center? Is my CSS wrong?(Obviously it has to be)

MikeHopley · #12 Oct 21st, 2007, 18:46

Quote:

Originally Posted by mcdanielnc89

If that is the case MikeHopley then what is wrong with my code to make it not center? Is my CSS wrong?(Obviously it has to be)

What browser are you using? Can you provide a link?

I suspect this is IE nuttiness. But the simplest explanation requires that I know more about your browser/code.

trandrus · #13 Oct 21st, 2007, 18:47

Quote:

You're talking about a mere 8% increase in server work, for a tiny total amount of work, on a presentational effect that will be used sparingly
...
Finally, note that although the CSS solution has an initial performance cost, it becomes more efficient the more you use it.

If it's going to be used sparingly, then why does CSS make sense?

Quote:

It's far more important to understand the reasons for preferring CSS-based presentation to HTML-based presentation.

Yes, I agree it is important to understand the difference between the two. However, I would argue that it's far more important to understand the advantages and disadvantages for both cases. If you're trying to center a horizontal navigation bar on the page, why would you go through all the trouble of setting it up in CSS? The real power of CSS comes from targeting child objects that are repeatedly used in a page which decreases the needed amount of markup.

Quote:

Moreover, since both pages are invalid HTML, they hardly constitute good examples.

They're invalid because there is no doctype because I wrote it by hand in about 2 minutes. Google makes this same mistake, by the way:
http://validator.w3.org/check?uri=www.google.com

mcdanielnc89 · #14 Oct 21st, 2007, 18:48

Yes it is IE7, and a link to where one of the images not responding is located here.

trandrus · #15 Oct 21st, 2007, 19:08

You need to set the class of your images to link with the information in your stylesheet. Your code modified:

Code: Select all

<div>
      <img class="mycenter" src="images/monthlysignin.png" alt="Monthly Sign-In Logo">
      <br>
      <br>
      <p class="style7">
        NBJF's Sign-in will be discontinued until the site is up
        and running 100%!<br>
        Thank you for your cooperation!
      </p>
      <br>
      <img class="mycenter" src="http://www.newbreedjesusfreaks.com/images/saesons.jpg"  alt="Seasons Logo" />
    </div>

And add the class to your stylesheet:

Code: Select all

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

If this doesn't work then it might be a browser bug related issue, in which case you should consult:
http://centricle.com/ref/css/filters/
But make sure your code is sound before you start looking into browser discrepancies.

MikeHopley · #16 Oct 21st, 2007, 19:09

Quote:

Yes it is IE7, and a link to where one of the images not responding is located here.

You need to specify width and height in the html. Like this:

Code: Select all

<img src="http://www.newbreedjesusfreaks.com/images/saesons.jpg" alt="Seasons Logo" width="200" height="100">

Quote:

Originally Posted by trandrus

If you're trying to center a horizontal navigation bar on the page, why would you go through all the trouble of setting it up in CSS?

Because:

It's no trouble if you actually know what you're doing.
The CSS way is much more flexible, allowing you to change your mind about the style of the navbar.

Quote:

The real power of CSS comes from targeting child objects that are repeatedly used in a page which decreases the needed amount of markup.

The real power of CSS is the systematic separation of style from content, allowing site-wide changes to be made with minimal effort, and reducing the overall complexity of your code.

mcdanielnc89 · #17 Oct 21st, 2007, 19:24

ok. my css is

Code: Select all

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

html is now...

Code: Select all

<img src=
  "http://www.newbreedjesusfreaks.com/images/saesons.jpg"
  alt="Seasons Logo" width="382" height="271" class="displayed">

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] Centering!