Skip to main content
E
English100
Inspiring
December 22, 2019
Answered

Inconsistent Editing

  • December 22, 2019
  • 3 replies
  • 3357 views

Im finding that DW is inconsistent when it comes to aplying font styles. I have a font style styleastorisk which uses Arial font with a left alignment and h2 with a center alignment. This is a line of code with eight asterisks in the body of my document with sytleasterisk aplied:

 

<p class="stylesasterisk">********</p>

 

If I select the eight asterisks and apply style h2 to it, DW keaves the code for styleasterisk and adds the code for h2:

 

<p class="stylesasterisk"><span class="h2">********</span></p>

 

As a result, the eight asterisks take on the font and color of h2 but do not align to the center - they stay aligned left.

 

In another instance in the same document, DW replaces the code for styleasterisk with the code for h2 and as a result the asterisks align to the center like this:

 

<span class="h2">********</span></p>

 

The asterisks also align to the center if I edit the code and remove this:

 

<p class="stylesasterisk">

 

I don't know why there are these inconsistencies OR why the style h2 doesn't align center. Its as if it's taking its alignment from styleasterisk.

I should add, that styleasterisk is in my stylesheet and h2 is the the head of the docunent. I don't know if this has anything to do with the anomaly

 

Alan

 

 

 

This topic has been closed for replies.
Correct answer osgood_

Osgood

Okay, what's that supposed to prove? I already have display block; in my h1 and h2 font style in the head of my document and it doesn't center align.

This is the code after applying h2 to the word 'Chapter'  (exactly the same as in your example):

<p class="stylestory"><span class="h2">Chapter</span></p>

Chapter is aligned left. So, why doesn't my document perform as your example does?
Alan

 

Here's the code of my template document (I've removed personal information code):

The interesting thing is, if I copy and paste this code into a new HTML document and highlight Chapter and select h1 from the Format dropdown list, the word center aligns but retains the font stylestory. So, becasue there is no valid stylesheet available (I blocked its URL) Im thinking there's some sort of conflict going on. If I highlight 'Chapter' in my unedited template select h1 from the Format dropdown list it doesn't have the correct color or word spacings or font BUT it center aligns. If I do it again and select h1 from my style sheet dropdown list it has the correct font etc., but aligns left???

<head>
<link href="https://wwwxxxxxx/stylesheet.css" rel="stylesheet" type="text/css">
<meta name="RATING" content="RTA-5042-1996-1400-1577-RTA">
<title>STORY TITLE</title>
<meta charset="UTF-8">
<style>
h1 {
font-family: "quicksand", sans-serif;
font-size: 18px;
color: #983200;
text-align: center;
font-weight: 400;
letter-spacing: 5px;
font-style: normal;
display: block;
}
h2 {
font-family: "Arial";
color: #006600;
text-align: center;
font-size: 16px;
font-weight: bold;
letter-spacing: 25px;
display: block;
}
</style>
</head>
 
<body>
<span style="text-align: left">
<div id="comments">
  <table width="83%"  border="0" cellpadding="0" cellspacing="0">
    <tbody>
    <tr>
      <td width="16%" ><span class="styletitle"><img src="https://www.xxxxxx/main_image_small.png" alt="" width="185" height="138" title="Small Image"></span></td>
      <td align="center" bgcolor="#B9E181" style="text-align: center"><p class="styleheader">Story Title</p>
        <span class="styleccursive3"><span style="text-align: center">A story </span></span></td>
      <td nowrap="nowrap" bgcolor="#B9E181" style="text-align: left">&nbsp;</td>
      </tr>
    <tr>
      <td height="48" colspan="3"><span class="style1"><span class="styledisclaimercaps" style="font-size: 14px; font-weight: bold;">STANDARD DISCLAIMER All characters in the story are fictitious; any similarity to any persons, places, individuals or situations is purely coincidental. </span></td>
      </tr>
    <tr>
      <td style="border:2px solid #000A00;"height="25" colspan="3" align="center" bgcolor="#99CC66"><span class="style1"><a href="http://www.xxxxxx/Home_Page.html" class="stylelinks">HOME</a><strong> </strong><span class="stylelinks"><strong>|</strong></span><span class="style4"><span class="style5"> <a href="http://www.xxxxxx/Contact.html" class="stylelinks">CONTACT ME</a></span></span></span></td>
      </tr>
    <tr>
      <td height="">&nbsp;</td>
      <td width="66%" align="left" valign="top"><p><span class="stylesubheader"><br>
        <p class="stylesubheader">Story Summary</p>
        <p class="stylestoryinfo">Word Count: 0000</p>
        <p class="stylestoryinfo">Published: Xxxx 00 2019</p>
        <hr>
        <p class="stylestory"><span class="h1">Chapter</span></p>
        <hr>
        <p align="left" class="stylecontact" style="color: #993300; font-size: 14px;">CONTACT THE AUTHOR</p>
        <span class="stylestory">I'd love to hear what you thought of this story—did you love it, hate it or meh?</span>  Your comments are the only reward an author receives.
        <p align="left" class="stylestory">If you wish to contact me direct then please click here: <a href="mailto:xxxxxx.org?subject=STORY TITLE">Email Me</a> </p>
        <p align="left" class="stylestory">Or click <a href="https://www.xxxxxx/Home_Page.html">here</a> return to my home page.</p>
        <p align="left" class="stylestory">Or use the  form mail below. If you wish to receive a reply, please include your email address. I reply to all emails.</p>
        <p align="left" class="stylestory">Thanks</p>
        <span class="styleccursive3">xxxxxx</span><br>
        <br>
<br>
        <span class="stylestory">If you would like to be notified when new stories are published on this website, please click <a href="mailto:xxxxxx?subject=Add My Email Address">here</a> to have your email address adding to my list. I only send out email notifications using the Bcc: option to maintain my readers privacy. </p>
        </span>
        <hr>
 <div class="commentsform"></div>
            <br>
        <hr>
        <p class="styledisclaimer"> Copyright © 2016/2017/2018/2019/2020 by xxxxxx ALL Rights Reserved! This material may <span style="font-weight: bold">NOT</span> be reproduced in any form  without the written permission of the author. <span class="styledisclaimer1">You may download them for your own personal use, but if you wish to post them on other websites, please get my permission beforehand.</span></p></td>
      <td width="18%">&nbsp;</td>
    </tr>
  </tbody>
</table>
<p align="left" class="stylecapps" style="color: #993300; font-size: 14px;"></p>
<p align="left" class="stylecapps" style="color: #993300; font-size: 14px;"></p>
<p align="left" class="stylecapps" style="color: #993300; font-size: 14px;"></p>
<p align="left" class="stylecapps" style="color: #993300; font-size: 14px;"></p>
</div>
 
<p class="style1" style="font-size: 16px; color: #2B2B2B;">&nbsp;</p>
</span></body>
<a href="https://clustrmaps.com/site/1atxb"  title="Visit tracker"><img src="//www.clustrmaps.com/map_v2.png?d=T07gSUgrj58GY1mrkExH7SR-PtFW3GiUxWVI4LTUxHg&cl=ffffff"  alt="" width="0" height="0"</a>
</html>

 

 


I said this would lead to confusion IF you choose to use h1, h2 etc as css class names. h1 - h6 are reserved for the default  'heading' tags.

 

YES you CAN re-declare h1- h6 as classes if you want confusion to reign.

 

The problem that no-one has spotted is as they are class names you have to include the .  (period) infront of the selector, like below:

 

 

.h1 {
font-family: "quicksand", sans-serif;
font-size: 18px;
color: #983200;
text-align: center;
font-weight: 400;
letter-spacing: 5px;
font-style: normal;
display: block;
}
.h2 {
font-family: "Arial";
color: #006600;
text-align: center;
font-size: 16px;
font-weight: bold;
letter-spacing: 25px;
display: block;
}

 

Your h1, h2 css selectors do not currently have a period infront of them so are meaningless as a class name unless that period is present - as they current are the attributes will only apply to the default h1 and h2 tags.

 

All my code proved was IF you know what you are doing it works.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
December 23, 2019

It looks like you are not using the tag selector located at the bottom left of the document window. For more, see https://helpx.adobe.com/au/dreamweaver/using/apply-remove-or-rename-css.html

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
E
English100Author
Inspiring
December 24, 2019

When you say 'tag selector' do you mean the style from the dropdown list under CSS in the Properties toolbar? I tried to add a screenshot but the forum is messed up right now.

Alan

 

 

 

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 24, 2019

No.  If you look at my screenshot, you'll see the FORMAT options in the HTML Properties panel.  That's what you should use.  If needed and available, you can add a CLASS from the same panel. 

 

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 22, 2019

Alan,

DW does exactly what you tell it to do.   You're not giving it the right instructions.

And <span> tags are meaningless.  You don't need them.  Best practice is to use headings for important content and paragraphs for descriptions.   If you want your heading to take on the styles of both h2 and styleasterisk, use 2 classes.

 

<h2 class="h2 styleasterisk">******</h2>

 

Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    December 22, 2019

    span tags are not meaning less - might be in the context that the OP is using them, but that is down to lack of knowledge. span tags are useful if you want to change the color of a section of the text in the middle of a paragraph for instance, but you know that!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 23, 2019

    <span> tags lend no semantic meaning or structure to the document the way headings, paragraphs and lists do.   <span> tags are convenient when used to change styles mid sentence but from what I can tell, that's not what Alan is doing.  All that's required is a simple style on the <h2> tag like this.

     

    <h2 style="text-align:center">******</h2>

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    December 22, 2019

    Its more due to your lack of css knowledge than anything to do with Dreamweaver.

    The p tag is a block level element and will take up the width of its parent container. The span tag on the other hand is not a block level element therefore will NOT take up the internal space of its container, either horizontally or vertically, hence why you see the asterisks still aligned to the left when you add the <span></span> tag

     

    add display: block; to the span css and see what happens.

     

    Below is an example:

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Asterisk Example</title>
    <style>
    .asterisk {
    font-size: 30px;
    color: green;
    }
    .asterisk-centered {
    font-size: 40px;
    color: red;
    display: block;
    text-align: center;
    }
    </style>
    </head>
    <body>
    <p class="asterisk">********</p>
    <p class="asterisk"><span class="asterisk-centered">********</span></p>

    </body>
    </html>

     

    <----------- ---- CODE ENDS ----------->

     

    Incidentally you may not need the span tag, depending on what it is you are doing - you can just add the second class after the first css class:

     

    <p class="asterisk asterisk-centered">********</p>

     

    Then just add the additional or updated property styles you require:

     

    .asterisk-centered {
    color: red;
    text-align: center;
    }

      E
      English100Author
      Inspiring
      December 22, 2019

      Osgood

      Thanks for the quick response. Im not the one adding the code, DW is adding the p tage and the span tag. All I'm doing is highlighting the word and selecting the CSS style from the dropdown list of styles in my sytlesheet file. I should add that if the text I highlight (such as Chapter Ten) is formatted as stylestory with no alignment, then the same things happen. My basic question is, why does DW in some instances replaces the code for one style with another and sometimes just adds the code for the new style to that of the old style?

      These are my two styles in the example I gave:

      h2 is asterisk centered and this style is in my CSS file as well as in the head section of each document.

      .h2 {
      font-family: "Arial";
      color: #006600;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 15px;
      }  
       
      This is the asterisk style in my CSS file 
       
      .styleasterisk {
      font-family: "Arial";
      color: #006600;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 15px;
      }
       
      As you can see, both styles have center alignment so I dont know why it aligns left.
       
      Alan
       
      O
      osgood_
      Legend
      December 22, 2019

      As I said the span tag is NOT taking up the full width of your p tag therefore it aligns to the left.

       

      Put a background color on the span css and you will see it stops where the text inside it ends, so the text inside it cant align to the center of the p tag unless you make the span a block level element - display: block;

       

       

      .h2 {

      display: block;
      font-family: "Arial";
      color: #006600;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      letter-spacing: 15px;

      }

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices