[SOLVED] Centering!

[mcdanielnc89]

ok. my css is this...

HTML: Select all

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]

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]

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]

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]

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]

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]

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

[MikeHopley]

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.

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>.

Deprecated doesn't always mean bad.

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

[mcdanielnc89]

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]

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]

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]

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]

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?

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.

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]

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

[trandrus]

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]

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">

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:

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

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]

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">

[Marc]

Why not

Code: Select all

img.displayed{
display:block;  --------What is this being used for?? -----------------
margin:0 auto;
}

[MikeHopley]

Are you sure you've updated your styesheet? The style rules are not present.

[trandrus]

HTML objects can be rendered as either inline or block.

Inline elements like <span> and <img> have no default margins or padding and are intended to display on one line (not multiple lines) and therefore have no height attribute. If you try to specify the height of an inline element you will fail.

Block elements like <div> and <p> are intended as a block. There is default margin and padding (a carriage return to the user) and you can specify height and width attributes.

The CSS specifies the horizontal AND vertical margins for the image:

Code: Select all

margin: 0 /*vertical margins*/ auto /*horizontal margins*/;

and should therefore be redefined as a block element. This tells the image to automatically render the horizontal margins based on the parent DOM node and to set the vertical margins to 0.


Read about margins:
http://www.w3schools.com/css/pr_margin.asp

And inline vs. block elements:
http://www.webdesignfromscratch.com/...and-inline.cfm