The <div style=" and the <span style=" are two different parts, is there a name that each is called?

HTML & CSS
42

Do you mean like this?

<div style="display:table;
<span style="display:table;
43

How come you told me this was wrong then? If I’m using span for fragment?

<div style="width: 256px; height: 150px; cursor: pointer; text-align: center; line-height:114px;background-color:#000000;border-radius: 50px; border: 5px solid #0059dd;">
    <span style="font-family: New Times Roman; font-size: 20px;color: #0059dd; ">[ ENJOY THE MUSIC ]</span>
</div>
44 
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/the-div-style-and-the-span-style-are-two-different-parts-is-there-a-name-that-each-is-called/229187/41
asasass
Jul 4,2016 4:48 AM
-->
    <style type="text/css">
.outer {display:table;}
.tcell {
    display:table-cell;
    vertical-align:middle;
    width:256px;
    height:150px;  /* height is treated as min-height */
    text-align:center;
    cursor:pointer;
    background-color:#000;
    border-radius:50px;
    border:5px solid #0059dd;
    font-family:New Times Roman;
    font-size:20px;
    color:#0059dd;
}
    </style>
</head>
<body>

<div class="outer">
    <div class="tcell">[ ENJOY THE MUSIC ]</div>
</div>

</body>
</html>

This is modeled after your blue box, not the blockquote. If you intend to use it for a blockquote, the blockquote element will be the .tcell (you will have three layers of elements).

45

What if I just use display:table, and that’s it, without table:cell? Like this?

<div style="display:table;background-color:black; width: 605px; height:68px;padding-left: 1px">

<span style="font-family: New Times Roman; font-size: 16px;color: white; "><q>Never let society to turn you into a grain of sand on the beach. Be different, be individual. Refuse to look alike with others. Leave your herd, only then you will have a real name and till then your name will remain as the grain sand.</q> ~ <em>Mehmet Murat ildan</em></span></div>
46

Fine, but you lose vertical-align:middle.

47

Where do you see that?

48

that’s in yours.

49

That’s not a fragment, as in a little part of something else. It’s standalone text.

As I’ve explained now more times than I can remember, unless you give full details of what you are trying to achieve, we cannot advise on best markup, and can only guess.

Off-Topic

Despite the number of times I’ve seen you use it, I do not believe there is a font called “New Times Roman”.

769×196 21.7 KB

The font I’m familiar with is called “Times New Roman”, and the string should be wrapped in quotes.

font-family: "Times New Roman", serif;
2 Likes
50

I didn’t know I could use table, instead of table-cell. There doesn’t seem to be a difference, they both do the same thing.

51

You said that about using a fixed height or padding-bottom, but that turned out to be untrue.

52

In my code. The ability to vertically align content is one of the most popular reasons for using display:table-cell. Remember, that is how you vertically centered your groups of 9 Radio boxes.

53

If I only have one font, I don’t need to put quotes, right? The quotes are only to signal to the browser that that’s your preferred font. Am I right about this?

54

Thank you for catching that.

55

How would you mark up standalone text?

56

No, you’re wrong.

The quotes are to indicate that the name is a string - it consists of more than one word. So

font-family: Arial, sans-serif;

but

font-family: "Times New Roman", serif;

You should always provide a fallback - even if it’s only a generic serif or sans-serif - in case your chosen font is not available on the visitor’s computer.

Off-Topic

Once again, please stop making multiple short replies. It makes the threads a pain to scroll through. Please combine them into one post.

1 Like
57

{vertical-align:[value]} does not apply do {display:table}

58

Can you please explain to me why it won’t let me use quotes?

59

I believe the outer quotes should be single quotes.

1 Like
60

I was told to put quotes there, I never knew you were supposed to do that.

61

You created a topic two days ago asking specifically about quotes, and I explained it to you then:

It is just the same issue here. If you try to nest the same type of quote (single or double), the browser will be unable to tell that they are nested and will, instead, assume the first two sets are a pair and the second two sets are a pair, resulting in it misinterpreting your code. Always nest single inside double or vice versa.