How to add small background behind the letters

Saber · 09-28-2012, 05:37 PM

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:

DanInMa · 09-28-2012, 06:07 PM

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>

DanInMa · 09-28-2012, 06:08 PM

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>

DanInMa · 09-28-2012, 06:10 PM

here's a site to learn more : http://www.htmldog.com/guides/cssbeginner/

Saber · 09-28-2012, 06:22 PM

Quote:

Originally Posted by DanInMa

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>

Saber · 09-29-2012, 02:01 AM

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..

transybao · 09-29-2012, 11:58 AM

You put it into a <div>...</div> tag and then set css <style type="text/css">

SB65 · 09-29-2012, 12:11 PM

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.

Saber · 09-29-2012, 10:47 PM

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>

Saber · 09-30-2012, 01:41 PM

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>

SB65 · 09-30-2012, 03:44 PM

Quote:

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.

DanInMa · 10-02-2012, 02:37 PM

Sorry, I missed a qoutation, merked in red.

Quote:

Originally Posted by DanInMa

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>

DanInMa · 10-02-2012, 02:40 PM

Quote:

Originally Posted by Saber

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.

DanInMa · 10-02-2012, 02:41 PM

oh also sorry for the slow reply. My home was burlgarized so I have no computers at the moment.