Inconsistent Editing

Report · Dec 22, 2019

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:

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

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:

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

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

Report · Dec 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:

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

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

Report · Dec 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

Report · Dec 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;

}

Report · Dec 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.

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

Report · Dec 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!

Report · Dec 22, 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.

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

Report · Dec 23, 2019

Well say that - not 'span tags are meaningless'

The whole post is confusing because we do not know if the OP is using h2 as a 'redeclared' css selector, one they have made up. Using a selector name which is allocated to a default selector is 'stupid' to say the least but when someone has a lack of knowledge, as is quite clear in this case, it is confusing for everyone.

The original question asked was: 'Why doesnt the span tag center the asterisks'

I provided the answer not once, but twice. If that goes above and beyond the scope and knowledge of those that participate in the forum then they need to take some time out and go learn some basic css or they might want to take on board my responses for a quicker solution to their problem.

Report · Dec 24, 2019

Nancy

The eight asterisks were formated using h2 which is in the head of the documents. You say that I't telling DW what to do. In the sense that I highlight text and apply a font from either the head of my document or from my style sheet, that is correct. However it's not me adding the code, it's DW using the style.

This is the line of code at the start of my story where I typed 'chapter': Style story is the default font.

<p class="stylestory">chapter</p>

This is the line of code after I highlighted 'chapter' and applied the font h2:

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

I didn't add the span tags manually and the alignment is left.

If remove the code for the default font:

chapter</p>

Look what happens if I now highlighted 'chapter' and applied the font h2:

<span class="h2">chapter

It aligns center as it's supposed to.

Asterisk font code:

h2 {

font-family: "Arial";

color: #006600;

text-align: center;

font-size: 16px;

font-weight: bold;

letter-spacing: 25px;

}

Story Style (no alignment)

.stylestory {

font-family: "Arial";

color: #242424;

font-size: 16px;

line-height: 16pt;

word-spacing: 5px;

}

Thanks for your ongoing help.

Alan

Report · Dec 24, 2019

DW is NOT desktop publishing software. Web pages have strict rules that permit browsers to read them. Printed pages do not have strict rules. Anything goes as long as the printer can interpret it.

CSS styles should be applied to the HTML selector names. The parent of all selectors is the <body> tag. Therefor, your global styles should be applied to the body selector. Styles cascade downwards. Child elements inherit styles from the parent selector. The less complicated you make this, the better. I should also mention that point is never used on screen. That's a unit of measure for printed pages only. Consider the following document.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
font-family: Arial, Gotham, "Helvetica Neue", Helvetica, "sans-serif";
font-size: 16px;
line-height: 1.5;
}
h1 {
text-align:center;
color:#555;
}

h2 {
color: #006600;
text-align: center;
font-weight: bold;
letter-spacing: 25px;
}
p {
color: #242424;
word-spacing: 5px;
}
</style>
</head>
<body>
<h1>Chapter 1</h1>
<h2>******</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus laboriosam voluptates recusandae quibusdam repudiandae provident expedita voluptatibus, blanditiis doloribus ratione iusto consequatur dicta repellendus maxime, aliquid perferendis magna.</p>
</body>
</html>

This is how it appears in DW Live view.

Happy Christmas!

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

Report · Dec 24, 2019

Sorry Nancy, you lost me there. I can't create a new HTML document for all my stories. I have to use a template and in my template I had h1 and h2 in the head section for Chapter and Asterisk styles as well as the document title. I thought that DW used stylesheet to allow different font styles. All of my other styles from my stylesheet work just fine. I highlight the text, apply the style and it works. It seems as if the issue is with just the h1 and h2 styles. Again, I repeat what I said, sometimes DW overwrites the code for the style and sometimes it just adds the code for the new style to the code for the old style which causes the issues I'm having. I guess I'm just going to have to edit the code to fix the problem.

Alan

Report · Dec 22, 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, the only real Dreamweaver alternative.

Report · Dec 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

Report · Dec 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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Dec 25, 2019

Nancy

If I use h1 from that list, the only thing it formats is alignment.

Alan

Report · Dec 25, 2019

"If I use h1 from that list, the only thing it formats is alignment."

That's because your CSS doesn't contain more rules for the <h1> tag. Add desired rules directly to your CSS code, save and it will function as desired. Same goes for <h2>, <h3> etc...

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

Report · Dec 26, 2019

Nancy

This is in my CSS file.

Alan

.h1 {

font-family: "quicksand", sans-serif;

font-size: 18px;

color: #983200;

text-align: center;

font-weight: 400;

letter-spacing: 5px;

font-style: normal;

}

Report · Dec 25, 2019

Ben

From that link it says: 'When you apply two or more styles to the same text, the styles may conflict and produce unexpected results.'

That is exactly what is happening as I said in my OP. It's why I'm saying that DW adds code for the new style and leaves the old code which as DW point out may cause confusion. If DW don't intend to cause confusion, why dont they replace the old code with the new. This is something I cannot control.

Alan

Report · Dec 25, 2019

Alan,

In my opinion, DW is a tool that is to be used by persons that have a working knowledge of HTML, CSS and to a lesser degree, JS. DW does make coding slightly easier (faster) with heads-up displays, code hints etc. But care still needs to be taken that the resulting code is the correct code.

To say that it is outside of the control of the user, is incorrect, the user has full control by going to Code view.

Wappler, the only real Dreamweaver alternative.

Report · Dec 26, 2019

I dont know how DW works now as I don't use the current version/s BUT what you describe of how you thought it should work, used to be the case, in older versions.

Although I never used the user inteface to apply the css styling I did test it out on an old version of DW and it does what you want:

Selecting the word 'chapter' in design view and applying the 'stylesstory' class via the user interface would result in:

'<p class="stylestory">chapter</p>'

If you select the word 'chapter' again and then apply the 'h2' class via the user interface would result in:

'<p class="h2">chapter</p>'

Not:

'<p class="stylestory"><span class="h2">chapter</span></p>'

But again I would say this - whatever is inside the '<span></span>' tag WILL NOT center as it wont stretch the whole width of the '<p></p>' tag because its not a block level element. You need to make it a block level element by adding:

display: block;

to the 'h2' css selector.

However applying a span tag where its not needed is a sh*tty solution - youre better off following the examples that Nancy has provided, where you use the correct tag/css combination for the result you require and as Ben has said, a little bit of coding and css knowledge is also beneficial.

Report · Dec 26, 2019

osgood

I have display: block; added to my h1 and h2 and it doesn't make any difference. I'm not going to take up any more of people's time on this because it's pretty obvious I have no clue what I'm doing or that I'm expecting DW to something that it seems it's not designed to do. In the future I'll remove the code that DW left in to fix the issue. End of conversation.

Alan

Report · Dec 26, 2019

Try this simple test below, first run the page/code as it is in the browser, then run it after un-commenting 'display: block;' (i.e. removing /* */) in the h2 class.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Span Test</title>
<style>
.h2 {
font-family: "Arial";
color: #006600;
text-align: center;
font-size: 16px;
font-weight: bold;
letter-spacing: 25px;
/* display: block; */
background-color: red;
}

.stylestory {
font-family: "Arial";
color: #242424;
font-size: 16px;
line-height: 16pt;
word-spacing: 5px;
}
</style>
</head>
<body>
<p class="stylestory">Chapter</p>
<p class="stylestory"><span class="h2">Chapter</span></p>
</body>
</html>

Report · Dec 26, 2019

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>

<title>STORY TITLE</title>

<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>

<tbody>

<tr>

<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>

</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>

<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>

<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>

<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>

</tr>

</tbody>

</table>

</div>

</span></body>

</html>

Report · Dec 26, 2019

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.

Report · Dec 26, 2019

osgood

My h1 and h2 in my style sheet do have periods in front of them but not in my HTML docunent. I added periods to h1 and h2 in my template and it now works just fine. Was it something as that?

Alan

Adobe Community

Inconsistent Editing

1 Correct answer