Free Republic
Browse · Search
General/Chat
Topics · Post Article

Skip to comments.

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

Posted on 01/22/2013 7:21:39 PM PST by 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.


TOPICS: Computers/Internet
KEYWORDS: html

1 posted on 01/22/2013 7:21:42 PM PST by Blogger
[ Post Reply | Private Reply | View Replies]

To: Blogger

us.homelinux.net is where my page is housed right now.

Wagstaff’s script is found in the article link.


2 posted on 01/22/2013 7:31:34 PM PST by Blogger
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger
css language:

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

html:

img src="blahblahblah.jpg" alt="Blah" class="center"

Close enough?

3 posted on 01/22/2013 7:34:22 PM PST by Obama_Is_Sabotaging_America (IMPEACH OBAMA)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger

You do have two separate page types in your folder.. One for the css, and one for the html which references the .css code from the .css page.. The html page is for content and images and the .css page is for structure.


4 posted on 01/22/2013 7:39:21 PM PST by Obama_Is_Sabotaging_America (IMPEACH OBAMA)
[ Post Reply | Private Reply | To 2 | View Replies]

To: Obama_Is_Sabotaging_America

Yes. I have in my main folder my index.html page. It references the CSS style sheet which is in a folder called CSS.


5 posted on 01/22/2013 7:43:11 PM PST by Blogger
[ Post Reply | Private Reply | To 4 | View Replies]

To: Blogger

Surrounding things in old-fashioned center /center tags still works, too.


6 posted on 01/22/2013 7:43:33 PM PST by The_Reader_David (And when they behead your own people in the wars which are to come, then you will know...)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger

SYNTAX
The float CSS property can accept one of 4 values: left, right, none, and inherit.

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/


7 posted on 01/22/2013 7:44:26 PM PST by smokingfrog ( sleep with one eye open (<o> ---)
[ Post Reply | Private Reply | To 1 | View Replies]

To: The_Reader_David

not with this page :(


8 posted on 01/22/2013 7:46:53 PM PST by Blogger
[ Post Reply | Private Reply | To 6 | View Replies]

To: Obama_Is_Sabotaging_America

Your css worked great for a static image, but it busted up my existing class, class=”rotator”


9 posted on 01/22/2013 7:50:39 PM PST by Blogger
[ Post Reply | Private Reply | To 3 | View Replies]

To: Blogger

Can you give a link to the page you’re trying to correct?


10 posted on 01/22/2013 7:53:22 PM PST by mlizzy (If people spent an hour a week in Eucharistic adoration, abortion would be ended. --Mother Teresa)
[ Post Reply | Private Reply | To 1 | View Replies]

To: mlizzy

us.homelinux.net


11 posted on 01/22/2013 7:55:30 PM PST by Blogger
[ Post Reply | Private Reply | To 10 | View Replies]

To: Blogger

It looks beautiful on my screen... What are you trying to “correct”?


12 posted on 01/22/2013 8:06:02 PM PST by mlizzy (If people spent an hour a week in Eucharistic adoration, abortion would be ended. --Mother Teresa)
[ Post Reply | Private Reply | To 11 | View Replies]

To: mlizzy

I would like the rotating images to be in the center below the links.


13 posted on 01/22/2013 8:09:20 PM PST by Blogger
[ Post Reply | Private Reply | To 12 | View Replies]

To: mlizzy

And thank you. The base template is a free template online. Can’t take too much credit for it. But the images are mine for our church.


14 posted on 01/22/2013 8:11:08 PM PST by Blogger
[ Post Reply | Private Reply | To 12 | View Replies]

To: Blogger

On the following site I think that you will be able to find what you need. There are links on the left-hand side of the page for ‘cascading style sheets’ and ‘css keywords’:

http://www.htmlgoodies.com/


15 posted on 01/22/2013 8:13:17 PM PST by spel_grammer_an_punct_polise (Learn three chords and you, too, can be a Rock Star!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger
On my screen, your rotating images are centered perfectly. Looks very nice. As a matter of personal taste, I'd probably take out a space or so above the rotating images (close it up in other words) and take out a few spaces below the images (again, to get rid of the extra space)...

Dang, I wish I could do this... I should grab your code. :)
16 posted on 01/22/2013 8:19:20 PM PST by mlizzy (If people spent an hour a week in Eucharistic adoration, abortion would be ended. --Mother Teresa)
[ Post Reply | Private Reply | To 13 | View Replies]

To: mlizzy

Go for it :) It was free too. Again, I’m a newbie to CSS. Started with HTML probably 15 years ago and when the company we had designing our new website just didn’t satisfy, guess who got drafted :) I’m learning, but this one is frustrating. Not centered on my page at all. All the way to the left.


17 posted on 01/22/2013 8:21:53 PM PST by Blogger
[ Post Reply | Private Reply | To 16 | View Replies]

To: mlizzy

They aren’t centered for me.


18 posted on 01/22/2013 8:30:35 PM PST by Kirkwood (Zombie Hunter)
[ Post Reply | Private Reply | To 16 | View Replies]

To: Blogger

Ha! Drafted! Well, you’ve done a nice job over this-a-way... so I don’t know how to help. I love all the images, but especially the Fight, Finish, Faith shot and the group shot too. Nice work... We’re on Linux Ubuntu using Firefox if that is helpful, and like I said, it’s all right-on and centered.


19 posted on 01/22/2013 8:32:22 PM PST by mlizzy (If people spent an hour a week in Eucharistic adoration, abortion would be ended. --Mother Teresa)
[ Post Reply | Private Reply | To 17 | View Replies]

To: Blogger

The rotating images are centered on my screen. Sounds like an issue with your browser not reading the html or css properly.


20 posted on 01/22/2013 8:33:10 PM PST by spel_grammer_an_punct_polise (Learn three chords and you, too, can be a Rock Star!)
[ Post Reply | Private Reply | To 17 | View Replies]

To: spel_grammer_an_punct_polise

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


21 posted on 01/22/2013 8:36:43 PM PST by Blogger
[ Post Reply | Private Reply | To 20 | View Replies]

To: Blogger

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.


22 posted on 01/22/2013 8:37:45 PM PST by Kirkwood (Zombie Hunter)
[ Post Reply | Private Reply | To 17 | View Replies]

To: spel_grammer_an_punct_polise

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


23 posted on 01/22/2013 8:37:49 PM PST by Blogger
[ Post Reply | Private Reply | To 20 | View Replies]

To: Kirkwood

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.


24 posted on 01/22/2013 8:41:23 PM PST by Blogger
[ Post Reply | Private Reply | To 22 | View Replies]

To: Blogger
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>
25 posted on 01/22/2013 8:48:49 PM PST by douginthearmy
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger

Are you setting the margins?

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

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


26 posted on 01/22/2013 8:48:49 PM PST by Kirkwood (Zombie Hunter)
[ Post Reply | Private Reply | To 24 | View Replies]

To: Blogger

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


27 posted on 01/22/2013 8:55:11 PM PST by Kirkwood (Zombie Hunter)
[ Post Reply | Private Reply | To 24 | View Replies]

To: Blogger

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


28 posted on 01/22/2013 8:55:15 PM PST by Kirkwood (Zombie Hunter)
[ Post Reply | Private Reply | To 24 | View Replies]

To: Kirkwood; douginthearmy

this looks like what I need! Thank you!


29 posted on 01/22/2013 8:55:40 PM PST by Blogger
[ Post Reply | Private Reply | To 26 | View Replies]

To: Blogger
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).

30 posted on 01/22/2013 9:00:35 PM PST by ponygirl (Be Breitbart.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ponygirl

Thanks, Ponygirl!


31 posted on 01/22/2013 9:08:27 PM PST by Blogger
[ Post Reply | Private Reply | To 30 | View Replies]

To: Blogger

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


32 posted on 01/22/2013 9:09:22 PM PST by Jeff Chandler (http://www.youtube.com/watch?v=tpAOwJvTOio)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Jeff Chandler

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


33 posted on 01/22/2013 9:16:43 PM PST by Blogger
[ Post Reply | Private Reply | To 32 | View Replies]

To: Blogger

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


34 posted on 01/22/2013 9:27:53 PM PST by gunsequalfreedom (Conservative is not a label of convenience. It is a guide to your actions.)
[ Post Reply | Private Reply | To 1 | View Replies]

To: ponygirl; Blogger
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.

35 posted on 01/22/2013 9:37:05 PM PST by re_nortex (DP...that's what I like about Texas.)
[ Post Reply | Private Reply | To 30 | View Replies]

To: Blogger
...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
36 posted on 01/22/2013 9:39:50 PM PST by willyd (Don't shoot, we're Republicans!)
[ Post Reply | Private Reply | To 1 | View Replies]

To: Blogger

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.


37 posted on 01/22/2013 9:53:44 PM PST by spel_grammer_an_punct_polise (Learn three chords and you, too, can be a Rock Star!)
[ Post Reply | Private Reply | To 23 | View Replies]

To: Blogger

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?


38 posted on 01/22/2013 10:04:06 PM PST by smokingfrog ( sleep with one eye open (<o> ---)
[ Post Reply | Private Reply | To 24 | View Replies]

To: Blogger

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.


39 posted on 01/22/2013 10:49:27 PM PST by Obama_Is_Sabotaging_America (IMPEACH OBAMA)
[ Post Reply | Private Reply | To 9 | View Replies]

To: re_nortex

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 :)


40 posted on 01/23/2013 4:13:22 AM PST by Blogger
[ Post Reply | Private Reply | To 35 | View Replies]

To: Obama_Is_Sabotaging_America

I’ve been playing around with the div tags, yes. Definitely need to understand more.


41 posted on 01/23/2013 4:18:24 AM PST by Blogger
[ Post Reply | Private Reply | To 39 | View Replies]

To: Blogger
A little off topic, but . . .

If the page is displaying correctly in some browsers but not others, it may be because the browser is not compatible with the CSS. For example, if you want the dwindling number of Explorer 6.0 users to see your page correctly displayed, you may have to write some E6.0-specific CSS code.

To check and see how your page will display in different browsers, you can use free Internet tools such as Adobe Browser Lab or BroswerShots.

42 posted on 01/23/2013 4:36:37 AM PST by Scoutmaster (End it now - enditmovement.com)
[ Post Reply | Private Reply | To 1 | View Replies]

Disclaimer: Opinions posted on Free Republic are those of the individual posters and do not necessarily represent the opinion of Free Republic or its management. All materials posted herein are protected by copyright law and the exemption for fair use of copyrighted works.

Free Republic
Browse · Search
General/Chat
Topics · Post Article

FreeRepublic, LLC, PO BOX 9771, FRESNO, CA 93794
FreeRepublic.com is powered by software copyright 2000-2008 John Robinson