HTML & CSS Help Needed

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.ht ^ | 1/22/13 | Blogger

[Blogger]

Trying to use Dylan Wagstaff's Rotator at us.homelinux.net. I can't get my main image centered. It's been years since I've done webpages, so I am a complete newbie at CSS. Any help is appreciated.

I tried to do what he suggested in his page, but to no avail. Sure it is my lack of knowledge, but can someone tell me what I need to modify and how I need to modify it?

Been playing around with it for hours and can't figure it out.

[Blogger]

Well, I’m on firefox using Windows 7. My work computer doesn’t see them as centered either. So, the infamous browser incompatibility issue :(

[Kirkwood]

Is it only the image rotator that won’t center? Have you tried successfully to center a static image in the same location on the page?

It probably “looks” centered for those with displays set to lower resolutions.

[Blogger]

I.E. 9 doesn’t like it either. Could it be Windows 7?

[Blogger]

The css code mentioned above centered everything but putting the class in the sheet ripped the images apart and killed the rotating effect. That sounded violent. Must ban CSS!

Anyway, if I could figure out how to use the helpful class=center code above, with the rotator script I might be good to go.

[douginthearmy]

The reason the margin-left: auto; margin-right: auto; is not working is because you have the width: 100%. It needs to be a pixel value, the size of your images plus whatever border you have. The margin to the left and right of a 100% wide block is going to be zero. If the block is smaller than the width of the page (i.e. width: 900px) then the auto margins will fill in equally on left and right thereby centering your <div>

[Kirkwood]

Are you setting the margins?

http://www.elated.com/articles/css-center-content/

http://simplebits.com/notebook/2004/09/08/centering/

[Kirkwood]

http://stackoverflow.com/questions/7217315/html-css-content-always-centered

[Kirkwood]

http://stackoverflow.com/questions/7217315/html-css-content-always-centered

[Blogger]

this looks like what I need! Thank you!

[ponygirl]

too many errors to go into here. Open your page in Firefox browser, go to Tools > Web Developer > Error Console to view list. You're using HTML declarations in CSS, which won't work... the browser just drops the declaration if it doesn't recognize. See the error console to find where they are.

Don't use the div tags as margin/padding around your images (such as the rotator image.) Use the margin and padding properties applied to the element that holds the rotator. Apply margin-left: auto; margin-right: auto; to center rather than "align: center" (which is HTML, not CSS).

[Blogger]

Thanks, Ponygirl!

[Jeff Chandler]

I can fix that for you. I’ll Freepmail you the PayPal account to send the $500.00 to.

[Blogger]

at this point I’d almost be willing to take you up on it — almost :)

[gunsequalfreedom]

CSS I can’t help you with but for html search FR for a thread called html sandbox

[re_nortex]

Don't use the div tags as margin/padding around your images (such as the rotator image.) Use the margin and padding properties applied to the element that holds the rotator. Apply margin-left: auto; margin-right: auto; to center rather than "align: center" (which is HTML, not CSS).

Since the main problem has already been identified a few posts up, I'll add your very good suggestions with a couple of my own.

Use a tool like tidy to unclutter the source and to spot HTML syntax errors. I was going to take a stab at it but was put off by the long lines of text and a hard to read layout of the HTML. White space is good and lines that don't occupy too much horizontal space are easier for the eye to parse.

Also there's a lengthy run of <BR> to force line breaks. This is better (and less fragile) done via CSS. I also see (not on this page) but elsewhere, a use of repeated &nbsp; sequences to force horizontal spacing which is likewise better handled with CSS.

Now that you've evidently got the crux of the problem solved, that's just some after-the-fact stylistic tweakage.

[willyd]

...rotator code

Use only one div ... not div id=rotator and div class=rotator in your css style use: #rotator { width: 745px; height: 345px; margin: 0 auto; } Remove the other references to rotator

[spel_grammer_an_punct_polise]

I’m on WinXP and IE8 and they are centered. In IE8 there is an option to select ‘Compatibility View’. I have no idea if that option is available in IE9.

[smokingfrog]

In Safari, the large image appears to be off to the right. There is also a background image, so maybe that is throwing things off?

[Obama_Is_Sabotaging_America]

Have you explored ‘div’ tags? They are the King of web layout as they are layers and no matter where they are on a page they don’t affect anything else nor does anything affect them. If you create a div tag for your image in question, it will be processed by the browser as a layer and is compatible with all current browsers as far as I know.

[Blogger]

Yes, I knew the breaks in the HTML were awkward. without them, everything below the rotator went underneath the rotator. HTML I know (at least the old version). Will work on my CSS skills :)