Text justification

[RockyRakoon]

I've taken over a website that was put together with Dreamweaver, and I'm no Dreamweaver expert.  There is a main template that lays out the header and sidebars, and most of the individual pages are based on this template.

I've obviously done something wrong to the template, I guess.  In the past, when I wanted to create a new page, I just pulled up an old page, saved it under a new name, and then made the changes I needed to make to it.  The basic page had a title and a main graphic followed by text.  The title was centered, and the graphic was centered, and the text was left justified.  I've obviously done something to screw this up, even though when I look at the code it looks like it should be right.  When I put my cursor into the text region and select the CSS window, and select the "left justified" icon, everything on the page gets left justified, including the title and graphic which I still want centered.

I think I've done something to the template because now all pages on the site (hundreds of them) are all fully center justified, and I can't figure out how to get the text left justified while leaving what needs to be centered, centered.

I'll be glad to share files with someone if the will help.

Rocketman

[Jon Fritz]

Sounds like you've made a change in the external .css file that every page uses. It's probably nothing to do with your template file in reality.

You probably need to find where you've accidentally added the text-align:center in your external .css file and remove it.

It's all guess work without seeing the files though.

[RockyRakoon]

Well, I'm not smart enough to have done that so it must have been inadvertent...and I can't figure out how to post the template's css file.  Is there a way to reach out to someone to share the file?  I can add an image and I'll do that...

You can see the title is centered, and the two graphic files are centered, but so is the text below that.  And if I put my cursor into that text and tell it to left justify the title and graphics do too.  I know from the template that the two sidebars and the center area above the horizontal line are editable areas.

Rocketman

[Nancy OShea]

RockyRakoon,

Can we get a few details first?

• Which version of Dreamweaver are you using?
• What is the URL to your online website?
• Can you upload the template.dwt file to your server and post that URL?

We can glean what we need with our browser's developer tools.

[RockyRakoon]

Yes, Nancy, glad too.

The website was created in Dreamweaver CS6 and I maintained it with CS6 until I upgraded to CC last year.  The url for the website is:

www.detailandscale.com

The template file is D_and_S_Ads.dwt, located in the "Templates" folder off the root.

Does this help?

Rock

[Nancy OShea]

I see a lot of <p> tags with align="center" attributes.   Maybe you have 1 or more orphaned paragraph tags on that page.  Check your code for validation errors.

Your home page alone has 86 errors and 40 warnings but most of those are related to the  horrid MM rollover behaviors.  When you eventually rebuild the site to be mobile-friendly,  you will replace those antiquated rollovers with CSS.  So don't waste any time fixing  those scripts.

[Invalid] Markup Validation of http://www.detailandscale.com/ - W3C Markup Validator

[RockyRakoon]

Nancy, thanks for taking the time to look at this...though it makes me want to go find a bridge to jump off of

I live in a college town...maybe I need to find me a good CS student who wants to take this on as a project...

Rock

[BenPleysier]

Don't worry too much about the validation at this stage.

To get to the crux of the problem that you are faced with, have a look at this code from D_and_S_Ads.css:

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 10px;
    padding-left: 10px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
    font-style: normal;
    text-align: center;
}

This is where the p element gets its styling. Try removing the , p from the selector list.

[RockyRakoon]

Ben, thanks for taking the time to help me.  I removed the ,p as you suggested and it had a good effect!  My webpage now has the things centered that need to be centered AND the text is left justified.  But what I lost in the process was the 10px padding on the sides of the container, so that the text goes right up against the border.  Any suggestions on how to get that back?  Sorry to be asking again!  Here's what I have now:

This old vet is greatly appreciative of your help!

Rock

[Jon Fritz · Accepted solution]

Add the p tag as its own selector, just after the ending } bracket in the code snippet Ben posted, and give it the padding (and any other styles) you want...

p {
     padding-left:10px;

     padding-right:10px;

}

CSS is actually a very simple "language" to learn. A solid understanding of the basics can be obtained in a weekend. A decent tutorial on the basics can be found here.

[RockyRakoon]

Thank you, Jon, and thanks to Ben and Nancy for taking the time to help me out.

Jon, I have bookmarked the tutorial site and will try to get myself up to speed.

Thanks to the Adobe support community!

Rock