...

View Full Version : CSS Help Please



mujahidtaban
12-19-2010, 10:41 AM
Hello there,

Without using CSS in HTML, I was using the code given below within BODY to show following two images:

one in the background http://www.urdufans.com/forum/bg/admin.gif
other on the left side http://www.urdufans.com/forum/ls/admin.gif



<img src="http://www.urdufans.com/forum/ls/admin.gif" style="border: 0pt none;"> <span style="color: #FF0000; background-image: url('http://www.urdufans.com/forum/bg/admin.gif')"><b>Mujahid Taban</b></span>

Using this code I was showing both images like http://i841.photobucket.com/albums/zz338/mujahidtaban/Temporary/633f0699.png

Now I want to use CSS within HEAD. Please tell me what CSS code I can use for this purpose?

Regards,
mujahidtaban

abduraooft
12-19-2010, 01:18 PM
# one in the background
# other on the left side
Can we have your complete html to see an elaborated picture?

mujahidtaban
12-19-2010, 03:12 PM
Let me elaborate my question.

For http://i841.photobucket.com/albums/zz338/mujahidtaban/Temporary/633f0699.png, I am using following code:

<html>

<head>

</head>

<body>
<img src="http://www.urdufans.com/forum/ls/admin.gif" style="border: 0pt none;"> <span style="color: #FF0000; background-image: url('http://www.urdufans.com/forum/bg/admin.gif')"><b>Mujahid Taban</b></span>
</body>

</html>

Now I want to use an external CSS file in order to reduce my code becasue I have to use "Mujahid Taban" many times in the page. Someone suggested me following CSS and HTML:

In style.css file:

img{
border:none;
}

#heart{
color: #FF0000;
background-image: url('http://www.urdufans.com/forum/bg/admin.gif');
}

In index.html file:

<html>

<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<img src="http://www.urdufans.com/forum/ls/admin.gif"> <span id="heart"><strong>Mujahid Taban</strong></span>
</body>

</html>

That reduced the code a little but I want only following code in HTML:

<span id="heart">Mujahid Taban</span>

Everything else should too be in external CSS. What CSS code I should use for LEFT SIDE image (heart) and for removing strong.

Excavator
12-19-2010, 03:33 PM
Hello mujahidtaban,
Since you can't have multiple background images we need to add another containing element of some sort. I just picked h1 because this looks like a heading?
See if this works for you -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
font: 100% Verdana, Geneva, sans-serif;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
h1 {
padding: 0 0 0 20px;
font-size: 1em;
color: #f00;
background: #fff url(http://www.urdufans.com/forum/ls/admin.gif) no-repeat;
}
#sparkle {background: url(http://www.urdufans.com/forum/bg/admin.gif);}
</style>
</head>
<body>
<div id="container">
<h1><span id="sparkle">Mujahid Taban</span></h1>
<!--end container--></div>
</body>
</html>

That's a little confusing, naming both images admin.gif...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum