Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2018
    Posts
    119
    Thanks
    25
    Thanked 0 Times in 0 Posts

    title looks weird with span tag....

    hey guys!

    I have the following div class and tried to style it up a bit but for some reason, it looks strange on my screen:

    Code:
    </head><body>
      <header>
    <div class="header2_welcome">
    <h1>Welcome to <span>PianoCourse101</span></h1>
    </div>
    
    This is my CSS code:
    
    div.header2_welcome h1{
      text-align: center;
      font-family: 'Pacifico', cursive;
      font-size: 50px;
    }
    
    div.header2_welcome h1 span {
      display: inline-block;
    }
    but it looks like this:

    -title_error-png

  2. #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,919
    Thanks
    64
    Thanked 601 Times in 595 Posts

    Lightbulb

    Quote Originally Posted by piano0011 View Post
    hey guys!

    I have the following div class and tried to style it up a bit but for some reason, it looks strange on my screen:

    Code:
    </head><body>
      <header>
    <div class="header2_welcome">
    <h1>Welcome to <span>PianoCourse101</span></h1>
    </div>
    
    This is my CSS code:
    
    div.header2_welcome h1{
      text-align: center;
      font-family: 'Pacifico', cursive;
      font-size: 50px;
    }
    
    div.header2_welcome h1 span {
      display: inline-block;
    }
    but it looks like this:

    -title_error-png
    I'm not sure what the endpoint display should look like but you don't need
    1. the leading "div" in either of your CSS statements
    2. the h1 in either statement as the class could be defined within a <h1 class="header2_welcome"> tag
    3. the second CSS statement at all (as far as I can see) could be eliminated.

    What is the reason for such a large font size (50px)?
    It should be defined in '6em' so as to resize correctly with browser changes.
    Last edited by jmrker; Sep 14th, 2018 at 05:28 PM.

  3. Users who have thanked jmrker for this post:

    piano0011 (Sep 15th, 2018)

  4. #3
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,312
    Thanks
    3
    Thanked 564 Times in 550 Posts
    Hi there piano0011,

    as jmrker has pointed out, keep you code simple.

    Code:
    
    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico"  media="screen">
    <style media="screen">
    body {
        background-color: #f9f9f9;
        font: 100% / 162% verdana, arial, helvetica, sans-serif;
     }
    
    h1 {
        font-family: pacifico;
        font-size: 3.25em;
        font-weight: normal;
        line-height: 1em;
     }
    
    h1::after {
        display: inline-block;
        content: 'Piano Course 101';
     }
    </style>
    
    </head>
    <body> 
    
     <h1>Welcome to </h1>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  5. Users who have thanked coothead for this post:

    piano0011 (Sep 15th, 2018)

  6. #4
    Administrator VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    11,087
    Thanks
    6
    Thanked 1,333 Times in 1,302 Posts
    Quote Originally Posted by coothead View Post

    Code:
    
    h1::after {
        display: inline-block;
        content: 'Piano Course 101';
     }

    This is not a good idea. Generated content with CSS should not contain crucial information; this should be in the HTML, otherwise the document/content doesn’t make sense. Generated content should – just as JavaScript – only be used to enhance the styles of the already working page/document or add supplementary information (such as numbering/counters etc.).

  7. The Following 2 Users Say Thank You to VIPStephan For This Useful Post:

    coothead (Sep 14th, 2018), piano0011 (Sep 15th, 2018)

  8. #5
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,085
    Thanks
    4
    Thanked 446 Times in 435 Posts
    Quote Originally Posted by VIPStephan View Post
    only be used to enhance the styles of the already working page/document or add supplementary information (such as numbering/counters etc.).
    Or for text that only applies to specific media targets, such as "show/hide menu" inside a label since that would be gibberish when CSS isn't applied.

    But yeah, the whole point of a H1 is to have meaningful text inside it in the markup since again, HTML is for everyone, not just sighted users on visual UA's.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  9. Users who have thanked deathshadow for this post:

    piano0011 (Sep 15th, 2018)

  10. #6
    Regular Coder
    Join Date
    Sep 2018
    Posts
    119
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks but the reason for the div class is to separate the h1 tag as I might have to style other h1 tag from other pages.... a h1 class would I suppose style all h1? I am still trying to understand how to use em... Are there any good youtube videos on this? I am also wondering if this is a browser issue and I shouldn't worry too much about it because now, it looks like this?

    -title_error2-png
    Last edited by piano0011; Sep 15th, 2018 at 05:23 AM. Reason: clarify question


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •