Re: [css-d] Markup for image URL in CSS rule
Great catch Cory! I don't think background image is the right solution
though. Look at it now. www.zanalysts.net
Tim
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Cory Shubert
Sent: Thursday, February 21, 2008 12:55 PM
To: CSS Discussion
Subject: [css-d] Markup for image URL in CSS rule
h4 {
background: transparent url(/images/windows-logo.gif) no-repeat
center center;
padding-left: 42px;
}
Question on markup code in CSS. I have seen markup as above, where the
image tag inside parenthesis has quotation marks and sometimes without.
Which is it, q.marks or not?
Thanks,
Cory
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup for image URL in CSS rule
On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert
[EMAIL PROTECTED] wrote:
h4 {
background: transparent url(/images/windows-logo.gif) no-repeat
center center;
padding-left: 42px;
}
Question on markup code in CSS. I have seen markup as above, where the
image tag inside parenthesis has quotation marks and sometimes without.
Which is it, q.marks or not?
Thanks,
Cory
Firstly, I would like to note that CSS in NOT a markup language; it's
a styling language. If you have some images for presentatioal purposes
then they should be in the CSS. Images that are part of the content
are the ones that should be marked up. An example, an image of Hillary
Clinton on a newpaper website is content, and therefore should be
marked up with HTML's element img:
img src=hillary.jpg alt= title=Hillary Clinton /
An image of say, Email this article link is presentational as it's
not part of the content, and therefore should go in the CSS:
a href=article.php?send_articleSend Article/a
CSS could be:
a {
background: url(email.gif) no-repeat top left;
padding-left: 12px;
}
Using double or single quotations or not using them at all doesn't
make a difference but for IE5 for Mac which doesn't support single
quotes.
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup for image URL in CSS rule
Isn't my issue a presentational one? I would compare my objective to your
Email this article example.
Tim
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Usamah M. Ali
Sent: Thursday, February 21, 2008 1:12 PM
To: Cory Shubert
Cc: CSS Discussion
Subject: Re: [css-d] Markup for image URL in CSS rule
On Thu, Feb 21, 2008 at 11:54 PM, Cory Shubert
[EMAIL PROTECTED] wrote:
h4 {
background: transparent url(/images/windows-logo.gif) no-repeat
center center;
padding-left: 42px;
}
Question on markup code in CSS. I have seen markup as above, where the
image tag inside parenthesis has quotation marks and sometimes without.
Which is it, q.marks or not?
Thanks,
Cory
Firstly, I would like to note that CSS in NOT a markup language; it's
a styling language. If you have some images for presentatioal purposes
then they should be in the CSS. Images that are part of the content
are the ones that should be marked up. An example, an image of Hillary
Clinton on a newpaper website is content, and therefore should be
marked up with HTML's element img:
img src=hillary.jpg alt= title=Hillary Clinton /
An image of say, Email this article link is presentational as it's
not part of the content, and therefore should go in the CSS:
a href=article.php?send_articleSend Article/a
CSS could be:
a {
background: url(email.gif) no-repeat top left;
padding-left: 12px;
}
Using double or single quotations or not using them at all doesn't
make a difference but for IE5 for Mac which doesn't support single
quotes.
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup for image URL in CSS rule
Thank you for the correction, Usamah! I also added height:37px to ensure the full image was being displayed. What do I do about the extra image behind the image title? It's not even full-size? Regards, Tim -Original Message- From: Usamah M. Ali [mailto:[EMAIL PROTECTED] Sent: Thursday, February 21, 2008 1:22 PM To: Big Moxy Cc: Cory Shubert; CSS Discussion Subject: Re: [css-d] Markup for image URL in CSS rule On Fri, Feb 22, 2008 at 12:06 AM, Big Moxy [EMAIL PROTECTED] wrote: Great catch Cory! I don't think background image is the right solution though. Look at it now. www.zanalysts.net Tim I'm very sorry, but the background positioning should be left center NOT center center. When you do this, the image is perfectly put on the left and the link next to it, but you would see duplicated image because you're setting the anchor to inherit the background properties of its parent, which is the div contacting the background image. I altered these in Firebugand it looks just perfect. Usamah __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup for image URL in CSS rule
On Fri, Feb 22, 2008 at 12:34 AM, Big Moxy [EMAIL PROTECTED] wrote:
Thank you for the correction, Usamah! I also added height:37px to ensure the
full image was being displayed. What do I do about the extra image behind
the image title? It's not even full-size?
Regards,
Tim
You have this in the CSS:
a {
color: #3F2C57;
background: inherit;
text-decoration: none;
}
a:hover {
color: #808080;
background: inherit;
}
Remove the two background: inherit instances.
Usamah
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Markup for image URL in CSS rule
Once you grasped the basic concept of using background images, then it's a matter of trial error until you get the perfect look you're after. Try changing the background position to left top or left bottom or applying padding the a links in the CSS or a combination of all these and others. Good luck, Usamah On Fri, Feb 22, 2008 at 12:54 AM, Big Moxy [EMAIL PROTECTED] wrote: Great! Thank you! Is it possible to get the text positioned so that it aligns with the bottom of the image? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
