• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Text justification

Community Beginner ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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

Views

657

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jul 17, 2019 Jul 17, 2019

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.

Likes

Translate

Translate
Community Expert ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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

Screen Shot 2019-07-16 at 1.48.43 PM.png

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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.

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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.

CC-BugReport.jpg

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

Nancy O'Shea, Product User & Community Expert
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 16, 2019 Jul 16, 2019

Copy link to clipboard

Copied

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.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 17, 2019 Jul 17, 2019

Copy link to clipboard

Copied

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:

Screen Shot 2019-07-17 at 8.43.59 AM.png

This old vet is greatly appreciative of your help!

Rock

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 17, 2019 Jul 17, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jul 17, 2019 Jul 17, 2019

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines