46 users online (0 members and 46 guests)  


  Results 1 to 4 of 4

Related

  1. Replies: 4
  2. Replies: 2
  3. Replies: 5
  4. How do you make text.....    Forum: HTML Forum
    Replies: 4
  1. #1
    keytone's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2011
    Posts
    11

    Make a piece of text appear with acolored background around it?

    I've seen it before, but I can't find it anywhere in tutorials. I want to have a colored background area behind a piece of text. Can anyone help me? For instance, I want to have a black box or oval-type area with a red text on it in a sentence. Thanks, John

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Make a piece of text appear with acolored background around it?

    Hi there keytone,

    Here is an example of an oval container for you to try.

    It will work OK in modern browsers, older browsers will display the code as a rectangular container.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>border radius</title>
    
    <style type="text/css">
    body {
        background-color:#300;
     }
    #oval {
        width:480px;
        padding:50px 100px;
        border:2px solid #f00;
        border-radius:380px/190px;
        -moz-border-radius:380px/190px;
        margin:40px auto 0;
        background-color:#000;
        font-weight:bold;
        color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <div id="oval">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    </div>
    
    </body>
    </html>
    
    Further reading:-

  3. #3
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Make a piece of text appear with acolored background around it?

    Hi there keytone,

    you might find that CSS box-shadow gives the oval container a little something extra.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>border radius</title>
    
    <style type="text/css">
    body {
        background-color:#300;
     }
    #oval {
        width:480px;
        padding:50px 100px;
        border:2px solid #f00;
        border-radius:380px/190px;
        -moz-border-radius:380px/190px;
        margin:40px auto 0;
        -moz-box-shadow:  #c33333 22px 22px 44px;
        -webkit-box-shadow:#c33333 22px 22px 44px;
        box-shadow:#c33333 22px 22px 44px;
        background-color:#000;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:16px;
        font-weight:bold;
        color:#f00;
     }
    </style>
    
    </head>
    <body>
    
    <div id="oval">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p>
    </div>
    
    </body>
    </html>
    

  4. #4
    firestone's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2011
    Posts
    13

    Re: Make a piece of text appear with acolored background around it?

    nice code thanks for sharing