Fixed width full justified text with Stretchy?

[Teetime]

I'm new to SmugMug and am starting to build my site. I've used the Easy Customization tool to set my banner to auto full width, which I like. I have some unlisted galleries that also go full width as expected.

I will have several html-only galleries that will have a picture or two, and some text. I would like to fix the width of the body at 750 px but still have the banner full width. I would like for the text in the body to be full justified, and the photo to float (left or right depending on the page).

I'm almost there with my CSS but can't figure this out: How do I get the full justified text centerd on the page (while maintaining the image float at the edge of the text)?

Here is my CSS for the gallery discription:

.gallery_9168595 #albumDescription {width: 750px;text-align:justify;padding-right: 10px}


Here is a link to the gallery I am working on:
http://takeonesolutions.smugmug.com/gallery/9168595_2MADj

Thx,
Jerry

[jfriend]

I'm not 100% sure I understand what you're trying to do, but try this CSS:

Change this line of your CSS from this:


.gallery_9168595 #albumDescription {width: 750px; text-align:justify; padding-right: 30px;}

to this:


.gallery_9168595 #albumDescription {
margin: 0 auto;
width: 750px;
text-align:justify;
font-size: 18px;
}
.gallery_9168595 .floatRight {margin-left: 15px;}
.gallery_9168595 #breadCrumbTrail {display:none;}


Then, remove the <font> tag from the albumDescription. It's much easier to control the font size from your CSS (I added that to your CSS) and you also failed to close the <font> tag with a </font> which can lead to other problems.

Then, lock the gallery style to the Smugmug style so the Style picker button will go away and the user can't mess with it.

[Teetime]

John, it looks like you understood perfectly. Thanks for your help - I've also gotten a lot of info from many of your previous posts here.

I see you have removed the breadcrumbs from this page. Do you recommend doing this for all html-only pages that are directly below the home page? I assume the breadcrumbs should be left on for the true galleries?

Also, for this page, would it be good practice to place the image and text in separate divs?

Finally, can you recommend a good reference for CSS?

Thanks again,

Jerry

I'm not 100% sure I understand what you're trying to do, but try this CSS:

Change this line of your CSS from this:


.gallery_9168595 #albumDescription {width: 750px; text-align:justify; padding-right: 30px;}

to this:


.gallery_9168595 #albumDescription {
margin: 0 auto;
width: 750px;
text-align:justify;
font-size: 18px;
}
.gallery_9168595 .floatRight {margin-left: 15px;}
.gallery_9168595 #breadCrumbTrail {display:none;}


Then, remove the <font> tag from the albumDescription. It's much easier to control the font size from your CSS (I added that to your CSS) and you also failed to close the <font> tag with a </font> which can lead to other problems.

Then, lock the gallery style to the Smugmug style so the Style picker button will go away and the user can't mess with it.

[denisegoldberg]

I see you have removed the breadcrumbs from this page. Do you recommend doing this for all html-only pages that are directly below the home page? I assume the breadcrumbs should be left on for the true galleries?

Finally, can you recommend a good reference for CSS?
For some thoughts on the breadcrumb, see Are you really sure you want to hide the breadcrumb? Think of your viewers! (http://www.dgrin.com/showthread.php?t=111484)

On the CSS reference front, have you seen CSS (Customizing SmugMug Simplified) (http://www.dgrin.com/showthread.php?t=54833), linked from the >>> CUSTOMIZATION: Start here <<< sticky at the head of this forum? I found that to be very helpful.

--- Denise

[Teetime]

Denise, thanks - I had somehow missed the CSS reference. It is exactly what I was looking for.

Jerry

For some thoughts on the breadcrumb, see Are you really sure you want to hide the breadcrumb? Think of your viewers! (http://www.dgrin.com/showthread.php?t=111484)

On the CSS reference front, have you seen CSS (Customizing SmugMug Simplified) (http://www.dgrin.com/showthread.php?t=54833), linked from the >>> CUSTOMIZATION: Start here <<< sticky at the head of this forum? I found that to be very helpful.

--- Denise

[jfriend]

Also, for this page, would it be good practice to place the image and text in separate divs? There's no reason to place a single image in a div because you can always just give the img itself a CSS ID or classname if you want to address it with CSS. It is generally a good idea to put your text in a <div> (forces a newline at the start of the block) or <span> (does not force a newline at the start of the block) and give it a classname. This way you can style it with CSS or tweak it's position with margins.