Question on a Span tag I created ? - CSS-Tricks

This topic is empty.

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

Author

Posts
October 28, 2013 at 10:42 am #154336

iizag
Participant

Hi, I have a question on span tags. I use them when I create an article in word press so I can make changes to many articles in the future if I need to so it saves time and improves page speed. My question is on a span tag I use on text. This is the span from my style sheet:

h3 div.dental-textbodyheader{ background: none repeat scroll 0 0 transparent; color: #182945; font-family: arial; font-size: 18.5px; font-weight: 600; text-transform: uppercase; line-height: 33px; }

And when I create a header this is how I place it in my article :
<h3><div class="dental-textbodyheader">The Morning of the Surgery</div></h3>

I have some questions :
1.) Is the code created wrong ?

2.) My issue is when I put this span tag into an article if I ever click on the visual view ( using word press) text editor then when I go back to text view I have to re-add all the H3 tags because for some reason they disappear. This sucks as its time consuming.

I tried this :
<div class="dental-textbodyheader"><h3>The Morning of the Surgery</h3></div>

but it does not work for some reason?

any tips/ advice would be great. Thank you

October 28, 2013 at 11:04 am #154340

nkrisc
Participant

Are you talking about <span> tags? I’m confused, I don’t see any in the code you posted.

As for the <h3> tags disappearing, sounds like it might simply be a wordpress issue?

October 28, 2013 at 11:31 am #154344

Paulie_D
Member

Heading tags should not contain divs AFAIK…?

October 28, 2013 at 1:12 pm #154353
Paulie_D
Member
```
<div class="dental-textbodyheader">
<h3>The Morning of the Surgery</h3>
</div>
```
Is the way it should be but, to be honest, I see no particular reason for a div at all unless it’s going to hold something else as well.
October 28, 2013 at 1:44 pm #154372

Alen
Participant

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

are there any negatives for me using divs as paragraph headers?

Not necessarily. If you’re trying to section off the title for presentational purposes you can wrap it in a div.

http://codepen.io/anon/pen/oFzug

October 28, 2013 at 2:05 pm #154376
Paulie_D
Member
With this
```
<h3 class="dental-textbodyheader">
The Morning of the Surgery
</h3>
```
you just need this
```
h3.dental-textbodyheader{
background: none repeat scroll 0 0 transparent;
color: #182945;
font-family: arial;
font-size: 18.5px;
font-weight: 600;
text-transform: uppercase;
line-height: 33px;
}
```
October 28, 2013 at 2:14 pm #154383

Josh
Participant

I’ll second @Paulie_D on this . . . I’m not understanding your need for a div there at all.

October 28, 2013 at 3:14 pm #154389

Alen
Participant

do 2 hours of work changing all my div headers to span headers

You’re missing the point. span is just like div only difference is span is inline and div is not.

If you need a header. Use h1 or h2 etc. Only wrap it in div or span if you need to style it in relations to other content.

Do you have a link so I can take a quick look at the HTML?

October 28, 2013 at 3:27 pm #154392
Alen
Participant
Looking at the HTML, all you have to do is remove the div’s completely and apply the class of fitness-textbodyheader

Just use it like this:
```
<h3 class="fitness-textbodyheader">This is Title</h3>
```
October 28, 2013 at 3:31 pm #154393

Alen
Participant

http://codepen.io/anon/pen/zImEh

October 28, 2013 at 3:35 pm #154395

Alen
Participant

You don’t need to change CSS. You need to change your HTML structure. So dig into your templates and see what is producing it and adjust. I can’t tell you without looking at the PHP templates.

October 28, 2013 at 3:50 pm #154398
Alen
Participant
Oh I see… sorry I was thinking you’re messing with the templates, but you’re adding content via WP Admin. Even better…

All you have to do is:
1. Get rid off divs and/or spans
2. Add class to your h3’s
3. Make sure you add the CSS to your style.css file.
4. Done.
You will be left with:

Your HTML:
```
<h3 class="dental-textbodyheader">Some Title</h3>
```
Your CSS: (goes into style.css)
```
h3.dental-textbodyheader {
 background: none repeat scroll 0 0 transparent;
 color: #182945;
 font-family: arial;
 font-size: 18.5px;
 font-weight: 600;
 text-transform: uppercase;
 line-height: 33px;
}
```
October 28, 2013 at 3:55 pm #154400
Alen
Participant
h3 div.dental-textbodyheader means this:
```
<h3><div class="dental-textbodyheader"></div></h3>
```
h3.dental-textbodyheader means this:
```
<h3 class="dental-textbodyheader"></h3>
```
The use of div in the first example is redundant.

Also note no space h3. not h3 .
October 28, 2013 at 4:03 pm #154402

Alen
Participant

Why would you need to use span? I’m not following.

October 28, 2013 at 4:13 pm #154405
Alen
Participant
It’s not necessarily wrong if you want to use div or span. You could do it like you have it:
```
<h3><span class="dental-textbodyheader">Some title</span></h3>
```
You could target the header like this:
```
h3 span.dental-textbodyheader{}
```
or
```
.dental-textbodyheader{}
```
or
```
h3 .dental-textbodyheader{}
```
Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

The forum ‘CSS’ is closed to new topics and replies.