Background Colour in CSS

Hi there,
I'm creating a page in CSS and found that in selecting a
colour for a column, it only applies the colour behind where there
is actual content. After that, it reverts to the default colour of
the whole container. How can I make it so that the colour will
continue on down the page indefinitely? The reason I ask is because
the content in the neighboring box is longer and so it looks ugly
with this sudden cut off box beside it.
Thanks very much!
M

> I'm creating a page in CSS and found that in selecting a
colour for a
> column,
> it only applies the colour behind where there is actual
content. After
> that, it
> reverts to the default colour of the whole container.
How can I make it so
> that
> the colour will continue on down the page indefinitely?
There really isn't a concept of 'columns' in CSS as there is
with tables
(ie, TD).
A CSS column is usually a DIV container. A div will ONLY be
as high as the
content.
This is perhaps one of the main gripes people have creating
columnar layouts
with CSS.
Common workarounds are to apply colors in 'layers' by
wrapping your columns
in container divs, giving them a background color, and then
giving your
longer columns their own background color. The catch is that
you have to
know what the tallest column will be, and that's not always a
given.
Another option is to make a GIF of your column colors and
apply that as a
background to the main wrapper DIV.
Finally, there are some javascript options as well that, upon
page load,
will determine the height of the tallest column and adjust
the others
accordingly.
-Darrel

Similar Messages

Background colour around my website page in CSS

I want to set up a background colour around my website page. I can do this for each page individually in Page Properties but am looking for a way to do this through CSS so I can change all pages in the future. I thought I had succeeded by creating a new CSS property and applying it to the area to the side of my page, however, when I uploaded it, it was red instead of grey. Any suggestions welcome. Thanks.

Add some css for the body tag in your stylesheet...
body {
background-color:#000000;
This would make the <body> of each page black.
If you have already tried this, we would need to see your code to figure out why it isn't working, specifically, what in your page css or stylesheet.css is overwriting it.
Could you post a link to one of your pages?

Missing background colour in image rollover in IE

Just noticed I have a missing image background colour on a
rollover link - it's fine in firefox and safari, but awol in IE(6).
link
here
The CSS looks like :
a:link img {
padding: 5px;
border: 1px solid #999999;
a:visited img {
padding: 5px;
border: 1px solid #999999;
a:active img {
padding: 5px;
border: 1px solid #999999;
a:hover img {
padding: 5px;
border: 1px solid #8C595A;
background-color:#CD8B8D;
Any ideas?

Hi Everyone,
Great thread. I thought you guys might find this interesting.
There is an IE Img Hover Bug that most people run into with
border color change on hover that answers some of the questions
here.
Lain71, at the end I included code you can use with a thick
border that should do what you want and will work cross-browser.
I thought it might be beneficial to anyone else searching the
forum for IE img hover issues to offer some additional detail.
Most people first run into trouble when they have an image
link and try to handle border color change like you would on a text
link. Unfortunately, this is incorrect CSS for doing this but it
works in IE6 :-/ It doesn't .. as it shouldn't ..work in the Gecko
browsers.
a.blah{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover{
border-color: #33FFFF;
<a href="#" class="blah"><img src="mypic.gif"
width="100" height="100"
border="0" /></a>
In IE6, the border changes color on hover. Also, note that IE
is actually rendering the code incorrectly by stretching the border
around the image inside the link element. So it achieves the
desired effect....until...
Testing the page in FF or NN is where the trouble starts, as
you notice the border no longer surrounds the image.
FF and NN render that code correctly by applying the border
to the link element only.
By doing so, the height of the border is equal to text line
height ..as Joe mentioned..which is usually not the height of the
image.
This same effect happens with background color and background
images when applied to a:hover.
So, now to make it work in FF and NN you use the correct CSS
to apply the border to the image inside the link, similar to
Lain71's code:
a.blah img{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover img{
border-color: #33FFFF;
<a href="#" class="blah">test<img src="mypic.gif"
width="100" height="100"
border="0" /></a>
Now it works in FF and NN beautifully, but...
Now it doesn't work in IE ! There's no hover effect.The
border doesn't change color.
And there's the "bug."
*********The bug:
In IE, you cannot apply a hover rule to an image link without
first
declaring a hover rule for that link. (Go figure!!!!!!).
This works nicely, I've found.
a.blah img{
border: 3px;
border-color: #CC0099;
border-style:solid;
a.blah:hover{
background-color:transparent;}
a.blah:hover img{
border-color: #33FFFF;
<a href="#" class="blah">test<img src="mypic.gif"
width="100" height="100"
border="0" /></a>
Now it works in IE, NN and FF.
So,
a.blah:hover {background-color:transparent;}
takes care of IE's need to apply a hover rule to the link
before applying a hover rule to the image link without changing the
look of things..
Take care,
Tim

Struts html:text tag background colour

How to change the background colour of Struts <html:text> tag?

styleClass and styleId, you can put css value on it

White background colour in Iframe?

Hi everyone
I hope you are able to help me with this problem I am having:
I am working with an Iframe, where I would like the
background colour to be a specific colour, relating to the colour
next to the Iframe.
The colour sorounding the Iframe is this #E6E3D2, the
background colour of the html-page to which I am linking in the
Iframe is the same colour, but nonetheless, the Iframe keeps
providing a white frame surrounding the content-html-page.
I have tried to make the Iframe and content.html page the
exact same width, but that just give me a vertical scroller + the
white frame.
This is what I mean:
http://i439.photobucket.com/albums/qq112/GD-Klubben/Example.jpg
Are there anyone out there, who can explane to me (in very
slow and easily understanding phrases ;o)) how I can get rid of the
annoying white background colour?

No, I haven't uploaded it anywhere yet. Not before I can
solve the problem.
But the code to the index.html is this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Grand Danois Klubben i Danmark</title>
<style type="text/css">
BODY {
SCROLLBAR-FACE-COLOR: #FFFFFF;
SCROLLBAR-HIGHLIGHT-COLOR: #000000;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #000000;
SCROLLBAR-ARROW-COLOR: #6699FF;
SCROLLBAR-TRACK-COLOR: #000000;
SCROLLBAR-DARKSHADOW-COLOR: #990000;
</style>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<div align="center">
<table width="1143" height="582">
<tr>
<th width="1135" height="24"
scope="row"> </th>
</tr>
<tr>
<th height="550" scope="row"><table width="1023"
align="left">
<tr>
<th width="109" height="547" scope="row"><table
width="100" cellpadding="5">
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th class="style23" scope="row"><div
align="right"></div></th>
</tr>
<tr>
<th height="210" scope="row"> </th>
</tr>
</table>
<p><br />
</p>
<p><br />
<br />
<br />
</p></th>
<td width="106"><br />
<table width="102" align="center" cellpadding="5">
<tr>
<th width="86" scope="row"><div
align="left"><span
class="style23">Forside</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style21">Grand Danois</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Klubben</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Medlemskab</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Hvalpe</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Opdrættere</span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Udstilling </span></div></th>
</tr>
<tr>
<th scope="row"><div align="left"><span
class="style16">Champions</span></div></th>
</tr>
<tr>
<th height="24" scope="row"><div
align="left"><span
class="style16">Links</span></div></th>
</tr>
<tr>
<th height="32" scope="row"><div
align="left"></div></th>
</tr>
</table>
<br />
<br />
<br />
<br />
<br /></td>
<td width="792"><div align="center">
<br />
<br />
<br />
<iframe src="Underside Grand Danois.html" width="785"
height="495" scrolling="Auto" frameborder="0"</iframe>
</div></td>
</tr>
</table></th>
</tr>
</table>
</div>
</body>
</html>

Getting the hex colour code of a Jpanel background colour

Hello,
I have been attempting to retreive the hex colour code of a jPanel's background colour, so far I have the code
Integer.toHexString(jPanelgetBackground().getRGB()));However this is returning an 8 digit string (for example. if the jpanels background color is white, this will return ffffffff instead of a the six digit value ffffff that I want. If I try black 000000 my code returns ff000000.
I am trying to retreive the colour and then use it in a CSS file. However every time there is an extra ff added to the start of the string. Where am I going wrong?

Integer.toHexString(jPanel.getBackground().getRGB() & 0xffffff);Message was edited by:
sabre150

How to insert background colour into text?

Hi,
I'm relatively new to Dreamweaver so I'm not sure how exactly to phrase this question. Within a div file on my HTML I have created I have a few links taking the user to another page. .
For the sake of clarity I have inserted an image to express what I am trying to say.
The background colour for my div is a chocolate brown. I was wondering if there was any way of creating a background for the text for each link within the div? So the text would have a background with a different colour?
I'm trying to create something that looks like this:
Does anyone know if this is possible to do? Do I have to create separate Div files within the main div file to do this?
Apologies for the lack of detail, I just don't know the technical words to show what I'm looking to do! Any tips or links to tutorials would be hugely appreciated.
Thanks for reading.

First, we need to examine the HTML code used to construct your menu. The modern approach is to use an unordered list like this:
<nav>
     <ul>
          <li><a href="#">Menu Item1</a></li>
          <li><a href="#">Menu Item2 </a></li>
          <li><a href="#">Menu Item3</a></li>
          <li><a href="#">Menu Item4</a></li>
          <li><a href="#">Menu Item5</a></li>
     </ul>
</nav>
Then style your navigation with CSS like this:
<style>
/**zero out margins & padding on everything**/
margin:0;
padding:0;
/**fix the CSS Box Model on % layouts**/
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
nav {
    width: 100%; /**adjust width as needed**/
    background-color: #960;
    padding: 30px;
nav ul {
    margin: 0;
    padding: 0
nav li {
    width: 20%;
    list-style: none;
    font-size: 14px;
    float: left;
    text-align: center;
/**menu links**/
nav li a {
    display: block;
    text-decoration: none;
    margin-right: 6px;   /* space between links */
    width: auto; /* adjust as needed or use auto */
    padding: 6px;
    font-weight: bold;
    line-height: 2em;
    color: #FFF;
    background: orange;
/**menu style on mouse over**/
nav li:hover {
    color: #FFF;
    background: #1e5799;
/**clear floats after nav element**/
nav:after {
    clear: both;
    display: block;
    content: ' ' ;
/**END MENU STYLES**/
</style>
Nancy O.

Why does my footer background colour change when adding a float to a DIV element?

Bear with me as I am a student learning dreamweaver....
I am trying to insert a series of 4 DIVs into a footer area with a black background. WHen I insert a float to constrain them to a horizontal position, the black background disappears and the body background shows through. A strip of the footer displays on top of the area where the DIVs are placed. The float works but the problem is with the background colour. It's almost as if the divs have been pushed down below the footer area. I have tried placing my cursor in several locations before inserting the float but it doesn't change anything.
Can anyone help?

It all depends on the code you're working with.   In the following example, I applied overflow:hidden to the <footer> element.
Copy & paste this code into a new, blank HTML page to see how it works.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Layout</title>
<style type="text/css">
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #CCC;
    padding: 0;
    color: #000;
    width: 1000px;
    margin: 45px auto;
header {width: 100%; display:block; background: #A5C9C9; min-height: 100px}
section {width: 100%; display:block; background:#FFF; min-height: 300px}
footer {width: 100%; display:block; background: #FF9; overflow:hidden;}
aside {width: 22%; float:left; display:block; margin-right: 4%; background:#D8E9B6; min-height: 200px;}
aside:last-child {margin-right:0}
</style>
</head>
</body>
<header>
<h1>Content for header goes here</h1>
</header>
<section>Content for section goes here</section>
<footer>
    <aside>aside 1</aside>
    <aside>aside 2</aside>
    <aside>aside 3</aside>
    <aside>aside 4</aside>
</footer>
</body>
</html>
Nancy O.

Background colour on menu div

I've got a bit of a problem that has been driving me mad for the last 24 hours. I have created a CSS rollover menu. I have made the div that holds the menu the same width as my wrapper, 800 pixels. I have created 4 rollover menu buttons, however they don't quite fill the whole of the 800 pixels. I have given the div a grey background colour and I was hoping it would fill in the gap at the end. However, it doesn't matter what I do, there is still white gap leftover. Obviously the easiest solution I have found this to make each button 200 pixels wide, that means that because I have for now, they fit in perfectly. Having said that, there is quite a wide gap between the writing on the buttons. But that's not really the point, I can't understand why I'm not able to fill in the extra gap with colour
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu2-1.jpg[/IMG]
[IMG]http://i205.photobucket.com/albums/bb230/Oscarfishlover/menu1.jpg[/IMG]

Thanks guys, that sorted the problem. However, I can see now that if I do want to add a submenu, I may have a problem. Is there any way around this problem where I can still have a submenu, but still have my div background visible? I have included the code for my menu. You'll have to forgive me, I've been using Joomla! for the last few years and it does make you rather lazy because we just basically use templates, rather than having to code everything :-)
#navMenu {
    margin:0;
    padding:0;
    background-color: #999;
    overflow: hidden;
#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    background-color:#999;
#navMenu li {
    padding:0;
    list-style:none;
    position:relative;
    float: left;
    margin: 0;
    background-color: #999;
#navMenu ul li a {
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    text-decoration:none;
    display:block;
    color:#fff;
    text-shadow: 1px 1px 1px #000;
    font-weight: bold;

How replace a background colour in Fireworks ??

I know how to do this in Photoshop, but I only have Fireworks
on this laptop
to work with at the moment. I have an GIF image of a line
drawing (made
from a few different shades of grey), but the background is
white. I want
to change the background colour to the same colour as my
webpage background.
How do I replace the white with another colour?
Cheers
ss.

Synapse Syndrome wrote:
> I know how to do this in Photoshop, but I only have
Fireworks on this laptop
> to work with at the moment. I have an GIF image of a
line drawing (made
> from a few different shades of grey), but the background
is white. I want
> to change the background colour to the same colour as my
webpage background.
> How do I replace the white with another colour?
Choose Filters (the live ones accessible via the Property
inspector [+])
and then Other. Select Convert to Alpha. Change the canvas
color to
whichever one you wish.
Alternatively, select the background with the Magic wand tool
and delete it.
Linda Rathgeber [PVII] **Adobe Community Expert**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Background colour not visible

I've applied a background colour to the body div using
external CSS so that it will fill the margins around my centred
main wrapper div. However, the background colour does not seem to
be applied, whether viewed in Dreamweaver, IE7, Firefox or Safari.
I've used the same code to put a background colour on the main
wrapper div and this worked fine. Strangely enough, if I apply the
same code as an embedded rule then this works fine!
I've selected web colours only.
Any ideas why the code doesn't work?

Remove the 'hash'# symbol before the body.
#body {
text-align:center;
font:small/1.2 Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color:#ccffff;
RSW14 wrote:
> I've applied a background colour to the body div using
external CSS so that it
> will fill the margins around my centred main wrapper
div. However, the
> background colour does not seem to be applied, whether
viewed in Dreamweaver,
> IE7, Firefox or Safari. I've used the same code to put a
background colour on
> the main wrapper div and this worked fine. Strangely
enough, if I apply the
> same code as an embedded rule then this works fine!
>
> I've selected web colours only.
>
> Any ideas why the code doesn't work?
>
> #body {
> text-align:center;
> font:small/1.2 Arial, Helvetica, sans-serif;
> margin: 0;
> padding: 0;
> background-color:#ccffff;
> }
> #wrapper {
> position:relative;
> margin-left:auto;
> margin-right:auto;
> text-align:left;
> width:760px;
> border:5px;
> border-color:#796460;
> border-style: solid;
> background-color:#ffffcd;
> }
>

Design Studio 1.3: include image, change textbox background colour, Data labels allingment

Dear Community,
I've been trying to rebuild one of my Analayis Office Workbooks within Design Studio.
Attempting this, I've come across some questions I hope to find answers to, with your help:
1. How can I include images, in a local application? I've inserted the "image" component, but I can't asign an Image file to this.
2. How can I change the background colour of a textbox-component?
3. I have a chart in my Dashboard. The bars I want to be labled. But defining, that data labels should be placed outside the bars, there is a mixed result. Some bars show the labels outside, some others display the lable somewhere within the bar.
Who can help with those questions? Thanks a lot.
Kind regards
Sarah

1. How can I include images, in a local application? I've inserted the "image" component, but I can't asign an Image file to this.
When working in Local Mode, go to Application -> Open Repository Folder -> and open the folder that your BI Application is named. Place your image file there. Go back to your Design Studio Image component and set the src to the name of that image file. It should show up. This gets a little more involved when working on the BI Platform or NetWeaver Platform, as you'll want to publish the Image to a public folder on the CMS somewhere (for BI Platform), or the MIME Repository (for NetWeaver Platform). But the concept is similar in that you have to know where to place the files once you are at that point. Also as an approach that should work without any need to publish the image to the platform (as it's a little tedious), please read this document:
How to embed images inside of a Design Studio App without uploading to server.
Or, if you do not want to go through the base-64 encoding, consider the addon I blogged about here:
Design Studio 1.2 SDK - An Image Component free of MIME Repository worries
The deployable version can be downloaded from this blog:
Design Studio 1.2/1.3 SDK - Design Studio Utility Pack
2. How can I change the background colour of a textbox-component?
You will have to write a CSS rule like this:
.testbox {
background : #009966;
Then assign 'testbox' as the CSS Class to the text input box.
3. I have a chart in my Dashboard. The bars I want to be labled. But defining, that data labels should be placed outside the bars, there is a mixed result. Some bars show the labels outside, some others display the lable somewhere within the bar.
Not sure how much control the delivered chart components would give you here. Maybe one of the third party addons listed in this post could help?
List of Design Studio SDK Components

Background colour of div

I have created a repeating region on a page so that a client can add other items - how can they alter the background colour of the complete div (as opposed to just highlighting the text) so that it stands out from the other divs?

Hi Captain Slocum,
Thanks for your patience. I should preface that InContext Editing doesn't explicitly give you the option to change the background color of a container, so what I'm proposing is sort of "tricking" a background color. This only appears to work consistently in Firefox too, since IE will wrap selected text in span tags even if the entire paragraph is selected.
For example, use the following HTML and CSS as a sample:
<!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" xmlns:ice="http://ns.adobe.com/incontextediting">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="includes/ice/ice.js" type="text/javascript"></script>
<style type="text/css">
body { background-color:#6CF;}
p {
margin: 0;
padding: 20px;
.container_elem { margin: 20px; }
</style>
</head>
<body>
<div ice:repeatinggroup="*">
<div ice:repeating="true" ice:editable="*" class="container_elem"><p style="background-color: #00ffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in accumsan dolor. Nullam vehicula elementum pharetra. Praesent eu varius ligula. Suspendisse libero tortor, sodales quis luctus sit amet, euismod sit amet leo. Praesent ultricies rutrum tortor eu hendrerit. Donec a blandit magna. Fusce et metus sed arcu dignissim ultrices. Mauris vehicula, elit sit amet porttitor placerat, neque nisl condimentum magna, eget facilisis tortor velit volutpat ante. Mauris tristique dolor vitae justo suscipit ut hendrerit lacus congue. In scelerisque diam in odio venenatis cursus. Nulla ac eros tortor. Sed placerat, odio eget lacinia laoreet, libero nisi rutrum eros, ac faucibus mauris mi id metus. Maecenas ut mattis turpis. </p></div>
</div>
</body>
</html>
To create a new region, duplicate the original.
Select all of the text within the new region and apply a highlight color.
Edit the text.
This should change the background color of the <p> (which also includes the padding around the paragraph) giving the appearance of a "container".If you give the .container_elem class a width you can create a sidebar appearance.
Is this what you're trying to accomplish?
Best regards,
Corey

Background Colour Change in Windows IE6

Hi,
Have tried to sort this through a CSS forum, but am now
wondering if it's an application problem. I've got a web page with
the background colour set as #FEFFDE which is a very pale peach
kind of colour. I've created a graphic (from a photo) in Freehand
and given it the same background colour. They blend beautifully in
IE and Safari and Mac, but in Windows IE the background shows as a
different colour (pale yellow), although the graphic is fine. It
looks like the CSS is ok, but someone has pointed out thatn doing a
screen capture in irfanview from Opera on windows, the page
background has RGB values 254,255,222 while the background in the
outer parts of the spiral gif image is 251,251,225. Both have been
selected using the cross-application colour palette on my Mac which
still shows as #FEFFDE. Help! I'm pretty new at this so may be
missing something obvious, but would be grateful for advice.
Kind regards,
Steph (NZ)

The best way to do it, if you are using a JPG would be to
make a small
graphic from the background of the JPG image, and use that
graphic as a
tiling background to fill the page.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Gondwanaland" <[email protected]> wrote in
message
news:f4cotd$9pc$[email protected]..
> Hi,
> Have tried to sort this through a CSS forum, but am now
wondering if it's
> an
> application problem. I've got a web page with the
background colour set
> as
> #FEFFDE which is a very pale peach kind of colour. I've
created a graphic
> (from a photo) in Freehand and given it the same
background colour. They
> blend beautifully in IE and Safari and Mac, but in
Windows IE the
> background
> shows as a different colour (pale yellow), although the
graphic is fine.
> It
> looks like the CSS is ok, but someone has pointed out
thatn doing a screen
> capture in irfanview from Opera on windows, the page
background has RGB
> values
> 254,255,222 while the background in the outer parts of
the spiral gif
> image is
> 251,251,225. Both have been selected using the
cross-application colour
> palette on my Mac which still shows as #FEFFDE. Help!
I'm pretty new at
> this
> so may be missing something obvious, but would be
grateful for advice.
> Kind regards,
> Steph (NZ)
>

Add background colour to text

Hi
I was just wondering it its possible to add a text background colour in muse (for links) natively or would I have to achieve this by using CSS?
Had a search but could not find an answer.
Thanks

Yes ... but I don't know why the above solution has been picked as Correct, because it's wrong ...
Just create the text wording you want then give it give that a background FILL colour as would with any other element ... to make it look better add a STROKE of about 1 (or 2) ... then a bevel (rounded corners) of 3 ... then use the 'Spacing' option (right panel) and use the pixel settings to give the text equal spacing from the edges so they're not too tight to the borders ...
The button below (which is on a black background) was given a Facebook link ... when hovering over the link you get the hand popup to show it's a web link ... and was customised to the colour theme of the website ... then use the STATE options to create colours for Over, Down and Active ... to show feedback when using the button ...
Just click on the text field to set a hyperlink ... no need to actually highlight the whole text itself ... and don't forget to tick the 'open in new window or tab' box if that's what you want it to do ...
cheers,
Gem

Background Colour in CSS

Similar Messages

Maybe you are looking for