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 14 of 14
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts

    How to add small background behind the letters

    Hello, here is an example of what i need:

    Code:
    <body>
    <p>Hello stranger
    <p>Welcome to the site
    </body>
    Now how to make tose 2 sentances with White collor and the background with blue ? like this on the screen i just made to show you what i need:
    Attached Thumbnails Attached Thumbnails How to add small background behind the letters-testtt.jpg  

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    fisrt you want to start with a valid example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    </head>
    
    <body>
    <p>Hello stranger
    <p>Welcome to the site
    </body>
    
    </html>
    then you need to close your paragraph elements properly

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    </head>
    
    <body>
    <p>Hello stranger</p>
    <p>Welcome to the site</p>
    </body>
    
    </html>
    then you apply a Class to the elements you want to style


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    </head>
    
    <body>
    <p class="myClass1>Hello stranger</p>
    <p class="myClass1>Welcome to the site</p>
    </body>
    
    </html>

  • Users who have thanked DanInMa for this post:

    Saber (09-29-2012)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    then you embed CSS styling in your document

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    <style media="screen" type="text/css">
    
    .myClass1 {
      color: white;
     background-color : blue;
    
    }
    </style>
    </head>
    
    <body>
    <p class="myClass1>Hello stranger</p>
    <p class="myClass1>Welcome to the site</p>
    </body>
    
    </html>

  • Users who have thanked DanInMa for this post:

    Saber (09-29-2012)

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    here's a site to learn more : http://www.htmldog.com/guides/cssbeginner/

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DanInMa View Post
    then you embed CSS styling in your document

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    <style media="screen" type="text/css">
    
    .myClass1 {
      color: white;
     background-color : blue;
    
    }
    </style>
    </head>
    
    <body>
    <p class="myClass1>Hello stranger</p>
    <p class="myClass1>Welcome to the site</p>
    </body>
    
    </html>
    If i put this code on a test html page i only get white background with the black letters - Welcome to the site nothing more it's like typing this bellow, can you see if you have made a mistake ?

    Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    
    <p>My first paragraph.</p>
    
    </body>
    </html>

  • #6
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I got to here and it does the job.. there is only one problem. How to make the background color of the letters to the end of the given field...

    <span style="background-color: #0099FF"><span style="color:white"><b><small>Hello site</small></b></span></span><br>

    So now "hello site" is blue white on blue background, but i want the entire row after that, to be blue also even though there is no text in it and the next row to be as default white..

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You put it into a <div>...</div> tag and then set css <style type="text/css">

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    There's just two missing closing quotes in DanInMa's code:

    Code:
    <p class="myClass1">Hello stranger</p>
    <p class="myClass1">Welcome to the site</p>
    That'll do what you want. Use the w3c validator to pick up these kind of typos.

    Because p is a block element it will take up the widht of the page. span is an inline element and won't.

  • Users who have thanked SB65 for this post:

    Saber (09-29-2012)

  • #9
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I have problem.. so i'm using this now, but there is an extra row... The text in blue background is ok, but after that text there is empty row and after that is the regular text... there is no <br> or other.. how to remove this empty row... example:

    Text in blue background:
    (empty row that i need to remove)
    My text on the page... so any ideas !?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    <style media="screen" type="text/css">
    
    .myClass1 {
      color: white;
     background-color : blue;
    
    }
    </style>
    </head>
    
    <body>
    <p class="myClass1">Hello stranger</p>
    <p class="myClass1">Welcome to the site</p>
    </body>
    
    </html>
    Last edited by Saber; 09-29-2012 at 11:51 PM.

  • #10
    New Coder
    Join Date
    Sep 2012
    Posts
    36
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I found what i need, here it is :
    <div style="background-color: #0099FF"><span style="color:white"><b><small>my site</small></b></span></div>

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The text in blue background is ok, but after that text there is empty row
    That's coming from the default bottom margin on p. Make your css:

    Code:
    .myClass1 {
      color: white;
     background-color : blue;
     margin:0
    
    }
    and the earlier code is fine, with no extra markup.

  • #12
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Sorry, I missed a qoutation, merked in red.

    Quote Originally Posted by DanInMa View Post
    then you embed CSS styling in your document

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Title of document</title>
    <style media="screen" type="text/css">
    
    .myClass1 {
      color: white;
     background-color : blue;
    margin: 0;
    }
    </style>
    </head>
    
    <body>
    <p class="myClass1">Hello stranger</p>
    <p class="myClass1">Welcome to the site</p>
    </body>
    
    </html>

  • #13
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by Saber View Post
    I found what i need, here it is :
    <div style="background-color: #0099FF"><span style="color:white"><b><small>my site</small></b></span></div>
    You really may want to look up more information on CSS, maybe jsut a beginners tutorial to get you started ( check out stickies in the CSS forum for suggestions) . If you style your pages like this, which is referred to as inline styling, it's going to make things more difficult for you in the long run.

  • #14
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    oh also sorry for the slow reply. My home was burlgarized so I have no computers at the moment.


  •  

    Posting Permissions

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