Andy - how did you do the alignment on your Services page? [Sitemap]

View Full Version : Andy - how did you do the alignment on your Services page?

Mike J

Feb-17-2009, 11:09 PM

Allen

Feb-18-2009, 07:32 AM

I know this should be simple but...I'm trying to duplicate what Andy has done at:http://www.moonriverphotography.com/gallery/830860_WaToT

Here is my gallery: http://www.smugmug.com/gallery/7390491_dWrTo
It is set to journal style.

The problem I'm having is that the bullets for items 1-5 are covered up by the image. You can partially see the bullet for item 6. Andy's page does not have this problem. I don't see anything magic in his code but then again, I really don't know HTML.

Also - how do you eliminate the Gallery Pages:1 blocks above and below the images?
You have hide owner checked for that gallery and your CSS is not active.

Add this to your CSS.

.gallery_7390491 .photo.left {padding-right: 20px;}

You also have some errors in there like <ul">
Try this, keeps it from wrapping under photo putting in table.

<table>
Test alignment 
 
Make the bullets appear 
Magazine Covers 
<ul> 
<li>Bullet1.</li> 
<li>Bullet2.</li> 
<li>Bullet3.</li> 
<li>Bullet4.</li> 
<li>Bullet5</li> 
<li>Bullet6.</li> 
<li>Bullet7</li> 
</ul>
</table>

Mike J

Feb-18-2009, 09:52 AM

You have hide owner checked for that gallery and your CSS is not active.

Add this to your CSS.

.gallery_7390491 .photo.left {padding-right: 20px;}

Thanks Allen! I unchecked the hide owner and added the above to the CSS. Works like a charm :clap THanks for your help.

<table>
Test alignment 
 
Make the bullets appear 
Magazine Covers 
<ul> 
<li>Bullet1.</li> 
<li>Bullet2.</li> 
<li>Bullet3.</li> 
<li>Bullet4.</li> 
<li>Bullet5</li> 
<li>Bullet6.</li> 
<li>Bullet7</li> 
</ul>
</table>
[/quote]
I put this in the description of the photo. It still wraps underneath the photo but I don't think this will be a big deal.

Lastly - is there are way to get rid of the Gallery Pages: 1 at the top and bottom?

Thanks again for the great support!

Ryan Armbrust

Feb-18-2009, 10:10 AM

Mike, I always add the following bit of code to my guestbook, comments and services pages.
Just remember to change the code to reflect your gallery number.

.gallery_1498277 #albumNav_top {display: none;}
.gallery_1498277 #albumNav_bottom {display: none;}
.gallery_1498277 .pageNav {display: none;}
.gallery_1498277 #breadcrumb {display: none;}

Allen

Feb-18-2009, 10:11 AM

Thanks Allen! I unchecked the hide owner and added the above to the CSS. Works like a charm :clap THanks for your help.

I put this in the description of the photo. It still wraps underneath the photo but I don't think this will be a big deal.

Lastly - is there are way to get rid of the Gallery Pages: 1 at the top and bottom?

Thanks again for the great support![/quote]
Add this to your CSS.

.gallery_7390491 .pageNav {display: none;}

The caption is wrapping because you didn't add in the html like I posted, no table.

Mike J

Feb-18-2009, 02:25 PM

.gallery_7390491 .pageNav {display: none;}

This and Ryan's reply did the trick. Thanks again...

The caption is wrapping because you didn't add in the html like I posted, no table.
I've added in your html (copy/paste) into the caption of the now two photos in this gallery: http://thejulianafamily.smugmug.com/gallery/7390491_dWrTo

What I don't understand is that the behavior is different depending upon if the photo is to the left or to the right. When the photo is to the right, the table seems to work out fine and does not wrap under the photo and the bullets are also indented. When the photo is ont the left, the table does not prevent the wrap under the photo and the bullets are idented differently.

Allen

Feb-18-2009, 02:48 PM

This and Ryan's reply did the trick. Thanks again...

I've added in your html (copy/paste) into the caption of the now two photos in this gallery: http://thejulianafamily.smugmug.com/gallery/7390491_dWrTo

What I don't understand is that the behavior is different depending upon if the photo is to the left or to the right. When the photo is to the right, the table seems to work out fine and does not wrap under the photo and the bullets are also indented. When the photo is ont the left, the table does not prevent the wrap under the photo and the bullets are idented differently.
See if this works better.

<html>
Test alignment 
Make the bullets appear 
<table style="width:400px;">
Magazine Covers
<ul>
<li>Bullet1.</li> 
<li>Bullet2.</li> 
<li>Bullet3.</li> 
<li>Bullet4.</li> 
<li>Bullet5</li> 
<li>Bullet6. asdsa d asd sa das dsa dsa dsa dsa dsa dsdasdas dsa dasdsa dsa dsa dsad dsa dsad asd dsa dasdsafdddd dddddddddddd dddddddd ddddddddddddddd dddddddddd ddddddddddddddd a das dsa d das d sad sa dsa dsa dsa d das ds ad sad as das d ad asd sa ds dsa dasdsa dsa dsa dsa dsa dsa dsa dsa dsa dsa dsa d sad sad sa dsa dsa ds ad sad sa dsa dsa dsa d sad sa dsa dsa dsa dsa d sad dsa dsa d sad sad sad sad</li> 
<li>Bullet7</li>
</ul>
</table>
</html>

<html>
Test alignment 
Make the bullets appear 
<table>
Magazine Covers
<ul>
<li>Bullet1asdsad dasdas dasdasd asdas dasdasdsad dsadsa.</li> 
<li>Bullet2.</li> 
<li>Bullet3.</li> 
<li>Bullet4 asdsa dsa dsa dsa dsa dsa ds dsa d sad sad sad sa dsa dsa dsa dsa ds ad sad sad sa dsa ds dsa ds ad sad sa ds ads ad sa dsa da sds adsa.</li> 
<li>Bullet5 dasdsa d dsadas dsa dsadsadsad dsa das dsa dsa dsa ds ad sad sa dsa ds ad asd sa dsa dsa</li> 
<li>Bullet6 asdsa das dsa das dsa das das das das das d asd asd sa das dsa d asd as das dsa ds a d sad sadasdas dasdas das dsa das dsa dsa d asdas d sad asdsadsad as das d asd asd sa d as dsa ds ad sa d asd sad sadas.</li> 
<li>Bullet7 asdsa das dsa dsa das das das das das das das d sad asd as das d asd asd sad as dsa d asd asd sa das ds ad sad sa dsa dsa d asd as das d sad as dasd sadas dsa das d asdaddsadad </li> 
</ul>
</ul>
</table>
</html>

Mike J

Feb-18-2009, 04:09 PM

See if this works better.

Works great. Feel like an idiot for leaving out the <HTML> </HTML> tags. You've been a great help. Today I find some of your tutorials so I've got some more reading to do... Thanks again. :clap

Mike J

Feb-18-2009, 07:03 PM

Works great.

Oops. Spoke too soon. Works great in IE6 and IE7 but in Firefox I still get the old behavior off the text wrapping below the photo and the indent of the bullets when the photo is left is off. It almost looks like Firefox is ignoring some of the formatting information? If I go into one of the captions and then save, it looks to respect the table width. If then refresh the page, the formatting changes and wraps under the photo.

I'm beginning to wonder if going to all HTML page would be easier?