CSS Help Please [Archive] - Dynamic Drive Forums

mujahidtaban

12-19-2010, 10:55 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;"> Mujahid Taban

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

Schmoopy

12-19-2010, 11:01 AM

If you want to use it within the <head> tag, and not an external CSS file, you can do this:

<html>

<head>

<style>
img{
border:none;
}

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

</head>

<body>

<img src="http://www.urdufans.com/forum/ls/admin.gif">Mujahid Taban

</body>

</html>

You can replace the id="heart" bit, with whatever you feel is relevant for that element. Just remember to replace the #heart bit within the <style> tag too.

Sorry about the indentation, it never copies very well from my editor onto here >.<

mujahidtaban

12-19-2010, 11:08 AM

Thanks Schmoopy.

Please also tell me how I can use this in external css. I think the code will remain same. Right?

Schmoopy

12-19-2010, 11:13 AM

Yea that's right, for an external CSS file, use:

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

In your style.css file:

img{
border:none;
}

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

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;"> Mujahid Taban
</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. You have 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"> Mujahid Taban
</body>

</html>

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

Mujahid Taban

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

traq

12-20-2010, 04:38 AM

add font-weight: bold; to the #heart rule in your css file.

To use css to add the admin.gif image before the span, you could use the :before pseudo-class:
#heart:before{ content: url(http://www.urdufans.com/forum/ls/admin.gif) }

traq

12-20-2010, 09:39 PM

short answer: no.
long answer: maybe, but it's "wrong" and -more importantly- won't always work, especially across different browsers.

It's best to make two separate rules.

mujahidtaban

12-21-2010, 06:20 AM

short answer: no.
long answer: maybe, but it's "wrong" and -more importantly- won't always work, especially across different browsers.

It's best to make two separate rules.

hmmmm ok. may be its a foolish question: can i include external multple css in css OR any other way to solve my problem? like i said that i have option to edit only the code between #heart{I CAN ENTER CSS CODE HERE}

traq

12-21-2010, 07:02 AM

I'm not sure what you mean when you say that you "have option to edit only the code between #heart{I CAN ENTER CSS CODE HERE}".

Also, I'm a little confused by "there is a place for entering CSS code for this heading".

Are you using an html editor of some sort (dreamweaver, frontpage, or similar) or a CMS (joomla, wordpress, etc.)?

I don't understand why you would be limited in where or how you can write your css code. Therefore, I don't think I'm answering your question correctly.

In any case, this
#heart{
color: #FF0000;
background-image: url('http://www.oneurdu.org/images/0/1.gif');
font-weight: bold;
before{ content: url(http://www.oneurdu.org/images/1/1.gif)
}with or without outer brackets, is not a valid construct. If it works at all, it won't work reliably or consistently.

CSS considers #heart and #heart:before to be different selectors. CSS selectors can't be "nested", they must all be listed independently. your rules need to be seperate:
#heart{
color: #FF0000;
background-image: url('http://www.oneurdu.org/images/0/1.gif');
font-weight: bold;
}
#heart:before{
content: url(http://www.oneurdu.org/images/1/1.gif)
}