CSS - Setting Text Background

Don't know if I got the language right on the headline? I've got the following css for my forms:
.form table {
border-collapse: collapse;
color: black;
border: 1px solid black;}

and the markup looks like this

<table class="form" width="100%" cellspacing="0">

however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class...

any ideas...

good
http://www.rickweston.com/my_ucwdc/membership/register.php

bad
http://www.rickweston.com/judge/about_judge/index.php

thnks for any help

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

I took over a website from a graphic designer. Needless to say, everything including all the text was a graphic.

Now having said that I have an about page that is just that. I have taken that graphic and yes I know I should probably break it up but.

So what I have done is take all or almost all of the text off of the graphic, the problem is, the customer can't change the text on their about page because of it being a graphic.

Now I can set the graphic as a background image or a single image on a page. And what I need to do is float text over the image.

Here is the image

And here is the new image

So how would I do the same with the text only using real text? Right now I have the image in a table and the text right justified. I'm sure there is a better way.

I'm having trouble positioning this opaque text. I woud like to use it as a centered background on every cell of my table.

http://section31.us/temp/absolute.htm

Can anyone help me out. To get this to work the way I want, do I have to use the z-index property as well?

Hi,

Ive coded a page so that there is a coloured div with 30% opacity and then added another div inside it for text but the text also has the 30% opacity... how do i get it to display the text correctly?

Here is my example

Thanks for any help,
Mike

http://www.refinethetaste.com/html/

I added a new tabbed links with a drop line menu. The problem here is, my links in the tabbed area varies and background comes short sometime. You can see it at the link, red main menu area... Can I make background extend with the text?

Code:

<style type="text/css">
.pro_linedrop {
height:26px;
width:776px;
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif);
position:relative; 
z-index:500;
}

.pro_linedrop .select {
margin:0; 
padding:0; 
list-style:none; 
white-space:nowrap;
}

.pro_linedrop li {
float:left;
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif);
}

.pro_linedrop .select a {
display:block; 
float:left; 
background: url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif); 
padding:0 0 0 15px; 
text-decoration:none; 
line-height:26px; 
white-space:nowrap; 
}

.pro_linedrop .select li.line a {color:#FFFFFF;}

.pro_linedrop .select a b {
display:block; 
padding:0 30px 0px 15px; 
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_off.gif) right top;
}

.pro_linedrop .select a:hover, 
.pro_linedrop .select li:hover a {
background: url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif); 
padding:0 0 0 15px;
line-height:26px;
}

.pro_linedrop .select a:hover b, 
.pro_linedrop .select li:hover a b {
display:block; 
padding:0 30px 9px 15px; 
background:url(http://www.refinethetaste.com/html/THEMES/default/images/bg_mainmenu_on.gif) right top; 
}

.pro_linedrop .sub {
display:none;
}
.pro_linedrop ul ul {display:none;}



.pro_linedrop .sub {
margin:0; 
padding:0;
list-style:none;
}

.pro_linedrop .sub li {background:transparent;}

.pro_linedrop .select :hover .sub {
height:20px;
display:block; 
position:absolute;
float:left;
width:774px;
top:26px; 
left:0; 
text-align:center;
background:#9f0b0b;
}

.pro_linedrop .select :hover .rt li {float:right;}

.pro_linedrop .select :hover .sub li a {
display:block; 
height:25px; 
line-height:20px; 
float:left; 
padding:0 10px; 
margin:0; 
color:#FFFFFF;
font-size:10px;
}

.pro_linedrop .select :hover .sub li.subline a {color:#9f0b0b;}

.pro_linedrop .select :hover .sub li a:hover,
.pro_linedrop .select :hover .sub li:hover
{color:#000; line-height:20px; position:relative;}

.pro_linedrop .select :hover .sub li:hover > a {color:#5f5548;}

.pro_linedrop .select :hover .sub :hover ul {
padding:0; 
margin:0; 
list-style:none; 
display:block; 
width:112px; 
position:absolute; 
left:-1px; 
top:25px; 
border:1px solid #ece7d1; 
border-top:0; 
background:#fff;}

.pro_linedrop .select :hover .sub :hover ul li a {width:80px; text-align:left; height:20px; line-height:18px;}
.pro_linedrop .select :hover .sub :hover ul li a:hover {line-height:16px;}

</style>

<div class="pro_linedrop">
<ul class="select">

<li class='line'><a href='#'>Administration Panel</a><ul class='sub'>
<li><a href='#'>Images</a></li>
</ul></li><li class='line'><a href='#'>Gift Baskets</a><ul class='sub'>
<li><a href='#'>Charcuteries Pochette</a></li>
<li><a href='#'>Cheese & Chocolate</a></li>
<li><a href='#'>Chocolate & Cookies</a></li>
<li><a href='#'>Classic Fancy Delight</a></li>
<li><a href='#'>Fresh Fruits</a></li>
<li><a href='#'>Pasta Lover's</a></li>
<li><a href='#'>Romantic Flower</a></li>
<li><a href='#'>Splendor Fine Food</a></li>
<li><a href='#'>Supplier Documents</a></li>
<li><a href='#'>Sweet Delight</a></li>
<li><a href='#'>Tea Lover's</a></li>
<li><a href='#'>Teddy Bear Basket </a></li>
<li><a href='#'>The Wish Chest</a></li>
<li><a href='#'>Visitor's Gratitude</a></li>
</ul></li> 

</ul>
</div>

What I'm after happening is for the background to have opacity but not the text.

I can make the background have opacity but I don't know how to stop the text being changed by it.

Here's the code that I'm using for this bit.
CSS
Code:

a:link{ font-size: 11pt; font-family: Verdana; text-decoration: none; color:#000000}
.back{background-color: #cd5b00; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: .5;}

html
Code:

							<tr>
								<td width="100%" class="back">
								<ul>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
									<li><a href="link.htm">link</a></li>
								</ul>
								</td>
							</tr>

The html code is on a div with a background image.

In the above code the background of the table has opacity but so does the text, is there anyway to stop the text having opacity as well?

Hope that makes sense, thanks for reading, if it's not clear let me know.

I am making this table area and I want the table to have a image as a background to give it more of a nice detail to it but I can't figure out how to get it to work for the table.

Thank you.

I am trying to make a rectangle with an image on the left and a horizontal list of anchor links on the right. Each anchor link should be a 32x32 px image with text underneath each image.

My problem is that the anchor links are not tall enough and the text is on top of the image instead underneath it.

Please help.

Code:

<style type="text/css">
.toolbar_list ul { float: right; text-align: right; margin:10px;}
.toolbar_list li{list-style: none;display: inline;}
.toolbar_list a { float: none; width: 32px; height: 32px; }

div.toolbarheader {line-height: 48px;padding-left: 55px;background-repeat: no-repeat; border-style:solid;}

.icon-32-delete    { background-image: url(stdimages/icon-32/delete.png); }
.icon-32-save    { background-image: url(stdimages/icon-32/save.png); }
.icon-32-new    { background-image: url(stdimages/icon-32/new.png); }
.icon-48-module    { background-image: url(stdimages/icon-48/module.png); }
</style>

</head><body>

<div class="toolbar_list">
 <ul>
  <li><a href="#" class="icon-32-delete delete" title="Delete">Delete</a></li>
  <li><a href="#" class="icon-32-save save" title="Save">Save</a></li>
  <li><a href="#" class="icon-32-new new" title="New">New</a></li>
 </ul>
 <div class="toolbarheader icon-48-module">Title</div>
</div>

When a user has the text display options set to big, the text gets out of the box. Does anybody have an idea to fix this or any alternative I can use so that this doesnt happen? I know its not the best design or css implementation but its my first css website:

http://aplistia.com/unitedTours/UnitedTours.php
(look at the white box surrounding the links: home, reserve, contact etc in the left side of the website.)

the css is he
http://aplistia.com/unitedTours/booksite.css

Hello. I am trying to center the text in my right column menu found at http://www.invisionshosting.com/v2/terms_of_service.php

If you take a look, you will see that the h2 (title bar) as well as each button has the text positioned at the top, and I need the text positioned in the center. I have tried padding-top: 5px; to position the text to the center, but just as I thought it would do, it moves the background down as well, causing a gap to form between each element. I need each button, including the title, to remain with a tight fit as it is now while positioning the text in the center.

The CSS I am using is as follows:

Code:

#menu_right {
	width: 200px;
	color: #702208;
	font-family: Arial, verdana, san-serif;
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0;
	font-size: 11px;
	}
	#menu_right h2 {
		color:#ffffff;
		background-image: url(../images/right_column_header.png);
		background-repeat: no-repeat;
		width: 200px; 
		height: 28px;
		text-indent: 10px;
		}
	#menu_right ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		width: 200px; 												/* Main Menu Item widths */
		}

.button_main_1 {													/* For Rest State */
	background-image:url(../images/right_column_button_off.jpg);
	background-repeat: no-repeat;
	width: 200px;
	height: 28px;
	color: #ffe7b8;
	text-indent: 30px;
	font-size: 13px;
	}
	.button_main_1 ul li {
		position: relative;
		}
	.button_main_1 a {												/* For Rest State */
		width: 200px;
		height: 28px;
		display: block;
		color: #236a9d;
		text-decoration: none;
		}
	.button_main_1 a:hover {										/* For Rest State */
		background-image:url(../images/right_column_button_over.jpg);
		background-repeat: no-repeat;
		width: 200px;
		height: 28px;
		display: block;
		color: #ffffff;
		text-decoration: none;
		}

The HTML is as follows:

Code:

<div id="menu_right">
 
<h2 class="menu_left">Title</h2>
<ul class="button_main_1">
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
<li class="button_main_1"><a href="#">Button</a></li>
</ul>

</div>

I have a floating div on top of a larger div that has a background. What I would like is to have the background of the floating div transparent so the background can be seen. However, when I make it transparent, it forces my text to be transparent also.

Any ways around this?

I currently have a PRE tag inside a DIV tag. The DIV tag has a limited size.
Often a long line of text will stretch outside the PRE tag. I do not mind this horisontal overflow as
the contents has more meaning when it is not wrapped.

My problem is that this overflow text flows under the right hand navigation column on my site. I would like the
PRE tag to be above everything else on my site. How can I do this?

The overflow text seems to have no background, making it hard to read if it is over an image.
Is there any way to get overflow text to have a brackground without expanding the PRE tag?

I am very, very new at web design, and would like to make a colored background behind text, although I am sure that is not the right name for it!

For example, in this this website I would like to emulate how to make that curved rectangular background behind the Online Poll, but I have no clue what the name or the source code behind it that makes it so!

If anyone could even just give me the proper name for it so I can google it, I would be very thankful!

I can make my menu using ul/li elements with either a background image with text in the li or I can just create an image with text in it and having alt text.

Is there a difference in regards to search engines and is there any other reason that I would want to have actual text with a background img on the li?

The reason that I would want to use images with the text built into them is that the text will no be resized and I can use a specific font.