Jump to content

Archived

This topic is now archived and is closed to further replies.

dreamwest

Can i add text to a .css <div>

Recommended Posts

Can i add text to a .css <div>

 

.arrowlistmenu .openheader{ 
background:url(/images/close.png) no-repeat 8px 2px;
}

 

I want to add "Show This" next to the image

 

Im a bit lost on how to do this...

Share this post


Link to post
Share on other sites

You can put the text in a <span> inside the <div>, and position or margin the <span> to whatever side of the background image

 

<div><span>Text</span></div>

Share this post


Link to post
Share on other sites

Hmm. I think you'll want to add your text to your HTML rather than your CSS. Since you've specified your image as a background image in your CSS, you might find it easier to create a neighboring div to house your text.

 

Hope this helps.

 

Diana

Share this post


Link to post
Share on other sites

I've never actually used it, but AFAIK content: works with :after and :before

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after .openheader:after{
content: 'content is here';
}

 

 

Share this post


Link to post
Share on other sites

I've never actually used it, but AFAIK content: works with :after and :before

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after .openheader:after{
content: 'content is here';
}

 

 

 

This works!

 

Thanks

Share this post


Link to post
Share on other sites

I believe that :after and :before are not standard across all browsers, so you may want to check the major ones before going with this, unless the content that is added is not essential content.

Share this post


Link to post
Share on other sites

As its been said, Why would you want to do this?

 

If your using an image just put ALT Tags on it or as someone suggested put another DIV in there with your text included in it

 

#div { position : relative; top : 8px; left:10px; }
#div-in { position : relative; top : 5px; left: 5px; }

 

That would sit a DIV inside a DIV for you

 

Share this post


Link to post
Share on other sites

Why would you want to do it that way?

 

I can use  a.hover to change content without using javascript

 

 

.arrowlistmenu .openheader{
background:url(/images/close.png) no-repeat 8px 2px;
}

.arrowlistmenu:after a:hover{
background:url(/images/open.png) no-repeat 8px 2px;
}

 

Share this post


Link to post
Share on other sites



×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.