center image

[jrthor2]

Can someone help me get the image in the below link to be centered?

http://74.220.207.192/~zluthorg/photo_gallery/?level=picture&id=2 (http://74.220.207.192/%7Ezluthorg/photo_gallery/?level=picture&id=2)

Thanks!

[cbalke]

try this:

<p id="picture-holder" align="center"><a accesskey="v" href="/%7Ezluthorg/photo_gallery/images/albums/council/council11web.jpg"><img class="photos-large" src="http://74.220.207.192/~zluthorg/photo_gallery/thumbs/lrg-2-council11web.jpg" title="" alt="" /></a></p>

[jrthor2]

align is not a valid XHTML, and I tried it and that didn't work.

[dtm32236]

try:

<p id="picture-holder" style="margin:0 auto;"><a accesskey="v" href="/%7Ezluthorg/photo_gallery/images/albums/council/council11web.jpg"><img class="photos-large" src="http://74.220.207.192/~zluthorg/photo_gallery/thumbs/lrg-2-council11web.jpg" title="" alt="" /></a></p>

[jrthor2]

nope, that didn't work either

[dtm32236]

hmmmm.... try adding width:100% to "picture holder", then, in the <a>, do:
display:block; margin:0 auto;

also, you can only use a class once in a single html document - you have id="hide" several time - you should change this ID to a class...

and you can't have spaces in urls:
<a href="../publications/documents/newsletters/December 2007.pdf"

should be:
<a href="../publications/documents/newsletters/December%202007.pdf"


and in your default-text.css, on line 96, you have:
margin-left::5px;

[jrthor2]

I've tried your suggestion, and still the image is left aligned. I know about the id="hide". I'm trying to come up witha solution for the menu's to show on top of form elements. I'll fix the spaces in filenames shortly. I also fixed line 96 in my default-text.css. Thanks.

[dtm32236]

no problem...

Can't you just make "hide" a class instead of ID? That should work fine...

i don't know why this isn't centering - try the margin:0 auto; in both the <a> and the <img> tags. one of those has gotta work.

[jrthor2]

ok, I fixed the id="hide" issue. It's still not centering the image though. I put your code in for the margin.

[Lazer]

Hi
<link rel="stylesheet" type="text/css" media="screen" href="/~zluthorg/inc/css/main.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/~zluthorg/inc/css/default-text.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/~zluthorg/inc/css/calendar.css" />
<link rel='stylesheet' type='text/css' href='http://74.220.207.192/~zluthorg/photo_gallery/themes/default/gallery.css' />

Why do you have 4 css files?
Did you check for no conflicts?

[dtm32236]

there's still spaces in some of the links:
<a href="/~zluthorg/schedules/?category=Altar Guild"

<a href="/~zluthorg/schedules/?category=Altar%20Guild"

i gotta run out for an hour or so... i'll try to figure this out when i get back.

where's Centauri, WebJoel, etc... when you need them?

[jrthor2]

I hear ya there. Thanks for your help.

[here-to-help]

You can probably just wrap your picture-holder in a div like this:


<div align="center" style="width:100%; margin:0px; padding:0px;">

<p class="picture-holder"><img class="photos-large" src="http://74.220.207.192/~zluthorg/photo_gallery/thumbs/lrg-2-council11web.jpg" title="" alt="" /></p>

</div>


Sorry:
CORRECTION:
better probably to set your image float to none;

<img class="photos-large" style="float:none;" src="lrg-2-council11web.jpg" title="" alt="">

Good luck:

--------------------------------
Fun Media Web Design
www.funmediadesign.com

Fun Media Web Templates:
www.funmedia.ca

[Major Payne]

align is not a valid XHTML, and I tried it and that didn't work.Doesn't matter. I don't see a valid document type for XHTML Strict.

I didn't have time to go through all your CSS and HTML, but I did put this in a div which centers your image. Maybe you can use it as is or modify it:

<div style="width:300px; margin: 0 auto;">
<p class="picture-holder"><img style="width: 288px; height: 433px;" class="photos-large" src="http://74.220.207.192/%7Ezluthorg/photo_gallery/thumbs/lrg-2-council11web.jpg" title="" alt=""></p></div>

Ron

[Siddan]

Hi

In your default-text.css file at row 106 you have the .main img set to float:left. Remove it and see what happens

[jrthor2]

Ok, I removed the float: left;, but now where I have images with text to the right of them, the text is not aligned to the top of that image, so the text looks out of place now. Look at this link and You'll see what I mean. I want the text to be aligned tot he top of the image.

http://74.220.207.192/~zluthorg/photo_gallery/?level=collection&id=2 (http://74.220.207.192/%7Ezluthorg/photo_gallery/?level=collection&id=2)

Thanks!!

[here-to-help]

Well, I am not sure what it is you want then...
do you want the image to be centered? or the for it to float left so the text can be top aligned?

--------------------------------
Fun Media Web Design
www.funmediadesign.com

Fun Media Web Templates:
www.funmedia.ca

[jrthor2]

In reality, I'd like both. Is there a way to keep the images floated left, but for this page, override that style to center the images?

[here-to-help]

Here is what you can try:

Put the picture (thumbnail) and the link, the text, etc...
inside a div and put the text that is to appear top-aligned next to the thumbnail, also inside a div with css styles to align them properly.
And make your thumbnails float left.

like this:


<div style="border:#00FF00 solid 2px;">
<h1 class="side">
<a href="" title="View Council Photos">
<img class="photos" src="5-council14web.jpg" title="Council Photos" alt="Council Photos" style="float:left;">
</a>

<div align="left" style="float:none; margin-left:120px; height:120px; border:#FF0000 solid 2px;">
Council
</div>

</h1>

<h3 class="side">(17 pictures)</h3>

<p>

<a href="" title="View Council Photos">
View Council Photos
</a>
</p>

</div>


I tried it here locally, it works fine.
You just need to line them up to your needs...
I also put coloured borders around them to show you where the divs are.

--------------------------------
Fun Media Web Design
www.funmediadesign.com

Fun Media Web Templates:
www.funmedia.ca

[jrthor2]

ok, I took your code an tested it and it worked. I then started taking your code out to see if I really needed all those div's. It appears that the only thing I needed was to have the style="float:left" on my image tag. I removed all the other code you suggested and they line up now. Now, my question is, if I take that float:left and put it in my style sheet, in the photos class, and remove it from the image tag, it doesnt work. How can I not use an inline style for this?

Thanks.

[here-to-help]

Well, to be honest you have 3 or 4 style sheets, you should check to see if there isn't any img floats specified globally anywhere else...that may cause conflicts.

Also, just had a very brief and quick look, there are a few references to img {float:none;} etc...
again, check for conflicts.