Jump to content


Photo

Can i add text to a .css <div>


  • Please log in to reply
10 replies to this topic

#1 dreamwest

dreamwest

    Advanced Member

  • Members
  • PipPipPip
  • 1,223 posts
  • Locationaustrailia

Posted 24 October 2008 - 09:40 PM

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...
Hauling buckets will keep you a slave, building pipelines will set you free

#2 ifubad

ifubad

    Advanced Member

  • Members
  • PipPipPip
  • 158 posts

Posted 25 October 2008 - 12:53 AM

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>

#3 TheFilmGod

TheFilmGod

    Advanced Member

  • Members
  • PipPipPip
  • 1,941 posts
  • LocationNew Jersey

Posted 26 October 2008 - 06:06 PM

Yes, you can.
content: '.....content goes here ....';

The future is here.

#4 dreamwest

dreamwest

    Advanced Member

  • Members
  • PipPipPip
  • 1,223 posts
  • Locationaustrailia

Posted 02 November 2008 - 11:00 PM

Yes, you can.

content: '.....content goes here ....';


Doesnt work :(
Hauling buckets will keep you a slave, building pipelines will set you free

#5 likethegoddess

likethegoddess

    Newbie

  • New Members
  • Pip
  • 9 posts
  • LocationSan Francisco

Posted 03 November 2008 - 12:00 AM

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
likethegoddess graphic & web design
http://www.likethegoddess.com

#6 Mchl

Mchl

    Advanced Member

  • Staff Alumni
  • 8,507 posts
  • LocationHigh Memory Area

Posted 03 November 2008 - 03:22 AM

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';
}



NetBeans fanatic | ExtJS masochist | C++ denier
PHP4 & MySQL4 are no longer supported.
PHPFreaks Tutorials | PHP Debugging: A Beginner's guide | PHP Security Tutorial || How To Ask Questions The Smart Way
Flingbits tutorials | Class Autoloading

#7 dreamwest

dreamwest

    Advanced Member

  • Members
  • PipPipPip
  • 1,223 posts
  • Locationaustrailia

Posted 03 November 2008 - 04:28 AM

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
Hauling buckets will keep you a slave, building pipelines will set you free

#8 jcombs_31

jcombs_31

    Advanced Member

  • Staff Alumni
  • 2,066 posts
  • LocationFL

Posted 03 November 2008 - 07:29 AM

Why would you want to do it that way?

#9 haku

haku

    Advanced Member

  • Staff Alumni
  • 6,177 posts

Posted 04 November 2008 - 03:40 AM

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.

#10 stublackett

stublackett

    Advanced Member

  • Members
  • PipPipPip
  • 327 posts
  • LocationHartlepool, UK

Posted 04 November 2008 - 07:17 AM

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

:: If in doubt echo it Out! ::
PHP / XHTML / CSS Developer Portfolio || [url=http://www.solumac.com] Bespoke Websites

#11 dreamwest

dreamwest

    Advanced Member

  • Members
  • PipPipPip
  • 1,223 posts
  • Locationaustrailia

Posted 04 November 2008 - 04:59 PM

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;
}

Hauling buckets will keep you a slave, building pipelines will set you free




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com