CSS - Move Text Down But Keep Background In Place

I'm having a dumb moment coding my site. I can't get the #project_content tag in my stylesheet to work properly. It should place page contents to the right of the menu on this draft page but kicks it to the bottom. Could someone please take a look at the css to see where I've gone wrong. Thanks

I need the text "world leaders in spirometry" to be on the same base line as the text in the logo image for Vitalograph to the left of it.

This is what I want it to look like image link

This is what does look like web page link

Here is the CSS css link

How can I get abosolute vertical placement of the text best for firefox and IE?

I know I could put the tage into the logo as one image, but for SEO I would like to have the text there if possible.

Thanks!

Figured this was simple, but I can't seem to figure it out.

Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way.

With CSS like:

.imginfo {float:none;clear:both;margin-top:1em;}
.imginfo img {float:left;margin-right:1em;}

and code like:

Code:

<div class="imginfo">
  <img src="..." />
  Line of Text<br />
  Line of Text<br />
  Line of Text<br />
</div>

I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image.

Attempting to use vertical-align: bottom doesn't do anything with the text.

The effect I am looking for is like below. If you assume the XXX are the image...

Code:

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text
XXXXXXXXXXXX Line of Text

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?

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 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.

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>

Hello Friends,

I want to place an image bellow my (h1 heading). The image is a 50px-800px box with curved edges both the side. Basically we

place an image bellow any text with "background: url('image-location') repeat-x;" css code. But as i told the image have curved

edges at both sides. Hence, I have cut the image in 3 pieces namely h1.gif, h2.gif & h3.gif respectively. Now i am confused

how can i place it. Please help me!



This is the tag i am using

<div id="title">
<h1>This is the title</h1>
</div>

And This is the CSS code bellow,

#title {

height: 50px;
background: url('../img/h1.jpg') no-repeat;
background-attachment: fixed;
}

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.

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

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

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 have a site I am creating in Joomla - I'm not getting help from them, so maybe it's just a css problem that I can't figure out.

Here's the css because I'm not allowed to post the url

/* COMMON STYLE
--------------------------------------------------------- */
html, body, form, fieldset {art
margin: 0;
padding: 0;
background-color: #B8E700;
background-image: none;
text-align: center;

}

body {

font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
text-align: center;
}


body.contentpane {
width: auto; /* Printable Page */
margin: 1em 2em;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;

}

body.fs1 {
font-size: 10px;
}

body.fs2{
font-size: 11px;
}

body.fs3{
font-size: 12px;
}

body.fs4{
font-size: 13px;
}

body.fs5{
font-size: 14px;
}

body.fs6{
font-size: 15px;
}

/* Normal link */
a {
color: #006699;
text-decoration: underline;
}

a:hover, a:active, a:focus {
color: #333333;
text-decoration: underline;
}

/* Heading */
h1 {
font-size: 180%;
}

h2 {
font-size: 150%;
}

h3 {
font-size: 125%;
}

h4 {
font-size: 100%;
text-transform: uppercase;
}

ul {
list-style: none;
}

ul li {
padding-left: 30px;
background: url(../images/bullet.gif) no-repeat 18px 8px;
line-height: 180%;
}

ol li {
margin-left: 35px;
line-height: 180%;
}

th {
padding: 5px;
font-weight: bold;
text-align: left;
}
img {
border: none;
}



/* Note Style */
p.stickynote {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/sticky-bg.gif) no-repeat 5px center #FFFFFF;
}

p.download {
padding: 10px 0px 10px 40px;
border: 1px solid #CACACC;
background: url(../images/download-bg.gif) no-repeat 5px center #FFFFFF;
}

.blocknumber {
clear: both;
padding: 5px 15px 10px;
position: relative;
}

/* Check list */
ul.checklist {
list-style: none;
}

ul.checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/checklist-bg.gif) no-repeat 0 3px;
}

/* Small checklist */
ul.small-checklist {
list-style: none;
}

ul.small-checklist li {
margin-left: 15px;
padding: 0 0 5px 20px;
background: url(../images/icon_list.gif) no-repeat 0 3px;
}

/* Check list */
ul.stars {
list-style: none;
}

ul.stars li {
margin-left: 15px;
padding: 0px 0 5px 20px;
background: url(../images/star-bg.gif) no-repeat 0 3px;
}

/* Bignumber */
.bignumber {
float: left;
margin-right: 8px;
padding: 6px 7px;
display: block;
background: url(../images/ol-bg.gif) no-repeat top left;
color: #7BA566;
font: bold 20px/normal Arial, sans-serif;
}

/* Talking box. Thinking box. */
div.bubble1, div.bubble2, div.bubble3, div.bubble4 {
margin: 15px 0;
}

div.bubble1 span.author,
div.bubble2 span.author,
div.bubble3 span.author,
div.bubble4 span.author {
padding-left: 15px;
margin-left: 15px;
background: url(../images/author.gif) no-repeat center left;
font-weight: bold;
}

div.bubble1 div {
margin: 0;
width: 100%;
background: url(../images/bub1-br.gif) no-repeat bottom right;
}

div.bubble1 div div {
background: url(../images/bub1-bl.gif) no-repeat bottom left;
}

div.bubble1 div div div {
background: url(../images/bub1-tr.gif) no-repeat top right;
}

div.bubble1 div div div div {
background: url(../images/bub1-tl.gif) no-repeat top left;
}

div.bubble1 div div div div div {
margin: 0;
padding: 15px 15px 30px 15px;
width: auto;
}

div.bubble2 div {
margin: 0;
width: 100%;
background: url(../images/bub2-br.gif) no-repeat bottom right;
}

div.bubble2 div div {
background: url(../images/bub2-bl.gif) no-repeat bottom left;
}

div.bubble2 div div div {
background: url(../images/bub2-tr.gif) no-repeat top right;
}

div.bubble2 div div div div {
background: url(../images/bub2-tl.gif) no-repeat top left;
}

div.bubble2 div div div div div {
margin: 0;
padding: 15px 15px 35px 15px;
width: auto;
}

div.bubble3 div {
margin: 0;
width: 100%;
background: url(../images/bub3-br.gif) no-repeat bottom right;
}

div.bubble3 div div {
background: url(../images/bub3-bl.gif) no-repeat bottom left;
}

div.bubble3 div div div {
background: url(../images/bub3-tr.gif) no-repeat top right;
}

div.bubble3 div div div div {
background: url(../images/bub3-tl.gif) no-repeat top left;
}

div.bubble3 div div div div div {
margin: 0;
padding: 15px 15px 50px 15px;
width: auto;
}

div.bubble4 div {
margin: 0;
width: 100%;
background: url(../images/bub4-br.gif) no-repeat bottom right;
}

div.bubble4 div div {
background: url(../images/bub4-bl.gif) no-repeat bottom left;
}

div.bubble4 div div div {
background: url(../images/bub4-tr.gif) no-repeat top right;
}

div.bubble4 div div div div {
background: url(../images/bub4-tl.gif) no-repeat top left;
}

div.bubble4 div div div div div {
margin: 0;
padding: 15px 15px 55px 15px;
width: auto;
}

/* Legend */
.legend-title {
margin: 0;
padding: 0 3px;
float: left;
display: block;
background: #B8E700;
font-weight: bold;

top: -10px;
left: 7px;
}

.legend {
margin: 20px 0;
padding: 0 10px;
border: 1px solid #CACACC;
background: #FFFFFF;
position: relative;
}

/* JOOMLA STYLE
--------------------------------------------------------- */
.article_separator {
clear: both;
display: block;
height: 20px;
}

.column_separator {
padding: 0 25px;
}

/* content tables */
td.sectiontableheader {
padding: 4px;
border-right: 1px solid #fff;
}

tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
padding: 4px;
}

td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
padding: 3px;
}

table.contentpane {
border: none;
width: 100%;
}

table.contentpaneopen {
border: none;
border-collapse: collapse;
border-spacing: 0;
}

table.contenttoc {
margin: 0 0 10px 10px;
padding: 0;
width: 35%;
float: right;
}

table.contenttoc a {
text-decoration: none;
}

table.contenttoc td {
padding: 1px 5px 1px 25px;
background: url(../images/bullet-list.gif) no-repeat 5% 50%;
}

table.contenttoc th {
padding: 0 0 3PX;
border-bottom: 1px solid #CCCCCC;
text-indent: 5px;
}

table.poll {
padding: 0;
width: 100%;
border-collapse: collapse;
}

table.pollstableborder {
padding: 0;
width: 100%;
border: none;
text-align: left;
}

table.pollstableborder img {
vertical-align: baseline;
}

table.pollstableborder td {
padding: 4px!important;
border-collapse: collapse;
border-spacing: 0;
}

table.pollstableborder tr.sectiontableentry1 td {
background: #ECECEC;
}

table.searchintro {
padding: 10px 0;
width: 100%;
}

table.searchintro td {
padding: 5px!important;
}

table.adminform {
}

.adminform .inputbox {
}

.blog_more {
padding: 10px 0;

}

.blog_more strong {
margin: 0 0 5px;
display: block;
font-size: 125%;
}

.blog_more ul {
margin: 0;
padding: 0;
}

.blog_more ul li {
margin: 0;
padding: 0 0 0 17px;
background: url(../images/bullet.gif) no-repeat 6px 8px;
}

.category {
font-weight: bold;
}

h1.componentheading, .componentheading {
padding: 5px 0 15px;
margin: 0 0 10px;

}

.componentheading {
font-size: 200%;
font-weight: bold;
}

.contentdescription {
padding-bottom: 30px;
}

h2.contentheading, .contentheading {
padding: 5px 0 8px;
margin: 0;
font-weight: normal;
}

table.blog .contentheading {
font-size: 150%;
}

.contentheading {
font-size: 200%;
}

a.contentpagetitle,
a.contentpagetitle:hover,
a.contentpagetitle:active,
a.contentpagetitle:focus {
text-decoration: none !important;
}

a.readon {
float: left;
margin-top: 10px;
padding: 1px 5px 1px 14px;
border: 1px solid #B8E700;
display: block;
background: url(../images/arrow.png) no-repeat 5px 48%;
color: #006699;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}

a.readon:hover, a.readon:active, a.readon:focus {
border: 1px solid #ECECEC;
background: url(../images/arrow.png) no-repeat 5px 48% #FFFFFF;
}

table.contentpaneopen td, table.contentpane td {
}

table.contentpaneopen, table.contentpane, table.blog {
width: 100%;
}

.moduletable {
padding: 0;
}

ul.pagination {
margin: 15px auto;
padding: 10px 0;

}

ul.pagination li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

ul.pagination li span{
padding: 2px 5px;
}

ul.pagination a {
padding: 2px 5px;
border: 1px solid #B8E700;
}

ul.pagination a:hover, ul.pagination a:active, ul.pagination a:focus {
border: 1px solid #ECECEC;
background: #FFFFFF;
}

.pagenavbar {
padding-left: 14px;
}

.pagenavcounter {
padding: 8px 14px 0 14px;
}

.sectiontableheader {
padding: 8px 5px;
background: #444444;
color: #FFFFFF;
}

.sectiontableheader a {
color: #FFFFFF;
}

tr.sectiontableentry1 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom;
}

tr.sectiontableentry2 td {
padding: 8px 5px;
background: url(../images/hdot2.gif) repeat-x bottom #ECECEC;
}

tr.sectiontableentry1:hover td,
tr.sectiontableentry2:hover td {
background: url(../images/hdot2.gif) repeat-x bottom #FFFFCC;
}

.smalldark {
text-align: left;
}

div.syndicate div {
text-align: center;
}

.pollstableborder tr.sectiontableentry1 td,
.pollstableborder tr.sectiontableentry2 td {
background: none;
}

/* META
--------------------------------------------------------- */
.article-tools {
border-top: 1px solid #DDDDDD;
width: 100%;
float: left;
clear: both;
margin-bottom: 15px;
display: block;
background: #ECECEC;
}

.article-meta {
padding: 5px;
width: 80%;
float: left;
}

.createby {
padding: 3px 3px 3px 20px;
background: url(../images/icon-user.gif) no-repeat 0 2px;
}

.createdate {
padding: 3px 3px 3px 20px;
background: url(../images/icon-date.gif) no-repeat 0 2px;
}

.modifydate {
width: 100%;
float: left;
}

div.buttonheading {
float: right;
width: 15%;
}

.buttonheading img {
margin: 7px 5px 0 0;
border: 0;
float: right;
}

/* MAIN LAYOUT DIVS
--------------------------------------------------------- */
#ja-wrapper {
width: 100%;
margin: 0;

}

#ja-container2 {
padding: 20px 0;
background: url(../images/c-bg2.gif) no-repeat 18% 0;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-mainbody, #ja-mainbody-fl {
float: left;
width: 80%;
}

#ja-mainbody #ja-contentwrap {
float: right;
width: 75%;
}

#ja-mainbody-fl #ja-contentwrap {
float: left;
width: 100%;
}

#ja-mainbody-f, #ja-mainbody-fr {
float: none;
width: 100%;
}

#ja-mainbody-fr #ja-contentwrap {
width: 74.8%;
float: right;
}

#ja-mainbody-fr #ja-col1 {
width: 20%;
float: left;
}

#ja-mainbody-fr #ja-contentwrap {
width: 80%;
}

#ja-content {
padding: 60px 20px 0 40px;
}
#ja-contentwrap {
min-height: 300px;
height: auto;
}
* html #ja-contentwrap {
height: 300px;
}
#ja-mainbody-fl #ja-content {
padding-left: 0;
}

#ja-mainbody-f #ja-content {
padding: 0;
}

/* Full */

#ja-containerwrap-f #ja-containerwrap2 {
background: none;
}

#ja-containerwrap-f #ja-container,
#ja-containerwrap-f #ja-container2 {
background: none;
}

/* Full left */

#ja-containerwrap-fl #ja-containerwrap2,
#ja-containerwrap-fl #ja-container,
#ja-containerwrap-fl #ja-container2 {
background: none;
}


/* HEADER
--------------------------------------------------------- */
#ja-headerwrap {
color: #76C900;
line-height: normal;
height: 80px;
}

#ja-header {
position: fixed;
height: 80px;
color: #76C900;
}

.ja-headermask {
width: 602px;
display: block;
color: #76C900;
height: 80px;
position: absolute;
top: 0;
right: -1px;
}

#ja-header a {
color: #76C900;
}

h1.logo, h1.logo-text {
margin: 0 0 0 5px;
padding: 0;
font-size: 180%;
text-transform: uppercase;
}

h1.logo a {
width: 208px;
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
z-index: 100;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

h1.logo-text a {
color: #CCCCCC !important;
text-decoration: none;
outline: none;
position: absolute;
bottom: 40px;
left: 5px;
}

p.site-slogan {
margin: 0;
padding: 0;
padding: 2px 5px;
color: #FFFFFF;
background: #444444;
font-size: 92%;
position: absolute;
bottom: 20px;
left: 0;
}

/* Search */
#ja-search {

bottom: 15px;
position: absolute;
top:40px;
left:750px;
height:25px
}

#ja-search .inputbox
{
width:120px;
border: 1px solid #333333;
padding: 3px 5px;
color: #999999;

font-size: 92%;

}

/* MAIN NAVIGATION
--------------------------------------------------------- */

#ja-pathway {
font-size: 92%;
}

#ja-pathway strong {
margin-right: 5px;
font-weight: normal;
}

#ja-pathway a {
text-decoration: none;
}

#ja-pathway img {
margin: 1px 5px;
}

/* MODULE
--------------------------------------------------------- */
div.moduletable,
div.moduletable_menu,
div.moduletable_text {
padding: 0 0 20px;
margin-bottom: 15px;

}

div.moduletable h3,
div.moduletable_menu h3,
div.moduletable_text h3 {
padding: 0 0 8px;
margin: 0;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

/* Module rounded */
div.module h3 {
margin: 0 -15px 10px;
padding: 8px 15px 5px;
border-bottom: 2px solid #B8E700;
color: #7BA566;
font-size: 125%;
font-weight: bold;
text-transform: uppercase;
}

div.module_black,
div.module_green,
div.module_blue,
div.module_red,
div.module {
margin-bottom: 20px;
float: left;
clear: both;
width: 100%;
background: url(../images/b-br.gif) no-repeat bottom right #FFFFFF;
}

div.module div {
background: url(../images/b-bl.gif) no-repeat bottom left;
}

div.module div div {
background: url(../images/b-tr.gif) no-repeat top right;
}

div.module div div div {
padding: 0 15px 10px;
background: url(../images/b-tl.gif) no-repeat top left;
}

div.module_black div div div div,
div.module_green div div div div,
div.module_blue div div div div,
div.module_red div div div div,
div.module_text div div div div,
div.module div div div div {
margin: 0;
padding: 0;
float: none;
width: 99%;
background: none;
}

div.module_text h3 {
margin: 0 0 10px;
width: 100%;
clear: both;
display: block;
overflow: hidden;
}

div.module_text span {
padding: 0 3px 0 0;
float: left;
clear: both;
display: block;
background: #B8E700;
font-weight: bold;
}

div.module_text {
margin-bottom: 20px;
padding: 0;
float: left;
clear: both;
width: 100%;
background: url(../images/bt-br.gif) no-repeat bottom right #B8E700;
}

div.module_text div {
background: url(../images/bt-bl.gif) no-repeat bottom left;
}

div.module_text div div {
background: url(../images/bt-tr.gif) no-repeat top right;
}

div.module_text div div div {
padding: 0 15px 10px;
display: block;
background: url(../images/bt-tl.gif) no-repeat top left;
}

div.banneritem_text {
padding: 5px 0 !important;
}




/* SPOTLIGHT
--------------------------------------------------------- */
/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left div.moduletable,
.ja-box-full div.moduletable {
padding-right: 30px;
background: none;
}

.ja-box-right div.moduletable {
padding-left: 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

.ja-box-center div.moduletable {
padding: 0 30px;
background: url(../images/vdot2.gif) repeat-y left;
}

#ja-botsl h3 {
background: none;
}

#ja-botslwrap {
background: #B8E700;
color: #B8E700;
}

#ja-botsl {
padding: 15px 0;
}

#ja-botsl div.moduletable {
padding-top: 0;
padding-bottom: 0;
margin: 0;
}

#ja-botsl h3 {
margin: 0 0 12px;
padding: 0;
color: #FFFFFF;
}

#ja-botsl a {
color: #B8E700;
}

#ja-botsl a:hover, #ja-botsl a:active, #ja-botsl a:focus {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl p, #ja-botsl ol {
padding: 0;
margin: 0 !important;
}

#ja-botsl ul li {
padding: 0 0 0 15px;
margin: 0;
background: url(../images/bullet2.gif) no-repeat 3px 8px;
}

#ja-botsl ol li {
margin-left: 25px;
padding: 0 !important;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator {
display: none;
}

#ja-botsl table {
border-spacing: 0;
border-collapse: collapse;
}

/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
padding: 5px 0 30px;
}

#ja-footer {
padding: 0;
color: #B8E700;
}

#ja-footer .copyright {

display: block;
color: #B8E700;
font-style: normal;
font-size: 92%;
}

#ja-footer ul {
margin: 0 0 5px;
padding: 0;
}

#ja-footer li {
margin: 0;
padding: 0;
display: inline;
background: none;
}

#ja-footer li a {
display: inline;
color: #666666;
padding: 0 15px 0 0;
font-weight: bold;
font-size: 92%;
line-height: normal;
text-decoration: none;
text-transform: uppercase;
}

#ja-footer li a:hover, #ja-footer li a:active, #ja-footer li a:focus {
color: #333333;
text-decoration: none;
}

.ja-cert {
font-size: 92%;
top: 18px;
}

.ja-cert a {
margin: 0 0 0 5px;
padding: 0;
border: none;
border: none;
text-decoration: none;
}

.ja-cert a span {
display: none;
}

.ja-cert a img {
border: none;
}

.banneritem {
display: block;
margin-top: 15px;
}

/* MISCELLANOUS
----------------------------------------------------------- */
ul.accessibility {
position: absolute;
top: -100%;
}

/*usertool*/
ul.ja-usertools-font {
font-size: 11px;
position: absolute;
top: 8px;
right: 70px;
}

ul.ja-usertools-font li {
padding: 0;
margin: 0;
display: inline;
background: none;
}

/*collapsible h3*/
h3.show {
background: url(../images/arrow2.png) no-repeat 90% 60%;
cursor: pointer;
}

h3.hide {
background: url(../images/arrow3.png) no-repeat 90% 60%;
cursor: pointer;
}

/*others*/
#ja-banner {
margin: 15px 0;
text-align: center;
}

div.back_button a,
div.back_button a:hover,
div.back_button a:active {
margin: 10px 0;
display: block;
background: none!important;
text-decoration: none!important;
}

#form-login p {
margin: 0 0 5px;
}

#form-login ul {
margin: 10px 0 0;
}

#form-login .inputbox {
width: 90%;
}

.clr {
clear: both;
}

.hasTip img {
margin: 10px 5px 0 0;
border: none;
}

/* Tooltips */
.tool-tip {
float: left;
border: 1px solid #D4D5AA;
padding: 5px;
background: #FFFFCC;
max-width: 200px;
}

.tool-title {
padding: 0;
margin: 0;
margin-top: -15px;
padding-top: 15px;
padding-bottom: 5px;
background: url(../../system/images/selector-arrow.png) no-repeat;
font-size: 100%;
font-weight: bold;
}

.tool-text {
margin: 0;
font-size: 100%;
}

#system-message dd.message ul,
#system-message dd.error ul,
#system-message dd.notice ul {
padding: 0;
margin: 0;
}

#system-message dd.message ul li,
#system-message dd.error ul li,
#system-message dd.notice ul li {
background: none;
padding: 5px;
margin: 0;
color: #FFFFFF;
}

/* System Standard Messages */
#system-message dd.message ul {
background: #006699;
border: none;
}

/* System Error Messages */
#system-message dd.error ul {
background: #BF0000;
border: none;
}

/* System Notice Messages */
#system-message dd.notice ul {
background: #EE9600;
border: none;
}

/* Clearfix */
.clearfix:after {
clear: both;
display: block;
content: ".";
height: 0;
visibility: hidden;
}

* html > body .clearfix {
width: 100%;
display: block;
}

* html .clearfix {
height: 1%;
}

/* Firefox Scrollbar Hack - Do not remove */
html {
margin-bottom: 1px;
height: 100%!important;
height: auto;
}

#Table_01
{
left:0px;
top:0px;
width:950px;
overflow: hidden;
}


#top01 {
position:fixed;
left:0px;
top:0px;
width:248px;
height:68px;
background: url(../../../images/top01.jpg);
background-repeat:no-repeat;


}

#logo {
position:fixed;
left:248px;
top:0px;
width:89px;
height:68px;
background:url(../../../images/logo.jpg);
background-repeat:no-repeat;
}

#top02 {
position:fixed;
left:337px;
top:0px;
width:312px;
height:68px;
background:url(../../../images/top02.jpg);
background-repeat:no-repeat;
}

#index-04 {
position:fixed;
left:649px;
top:0px;
width:301px;
height:74px;
background:url(../../../images/index_04.jpg);
background-repeat:no-repeat;
}

#top03 {
position:fixed;
left:0px;
top:68px;
width:297px;
height:168px;
background:url(../../../images/top03.jpg);
background-repeat:no-repeat;
}

#index-06 {
position:fixed;
left:297px;
top:68px;
width:352px;
height:6px;
background:url(../../../images/index_06.jpg);
background-repeat:no-repeat;
}

#index-07 {
position:fixed;
left:297px;
top:74px;
width:288px;
height:172px;
background:url(../../../images/index_07.jpg);
background-repeat:no-repeat;
}

#top04 {
position:fixed;
left:585px;
top:74px;
width:317px;
height:165px;
background:url(../../../images/top04.jpg);
background-repeat:no-repeat;
}

#index-09 {
position:fixed;
left:902px;
top:74px;
width:48px;
height:172px;
background:url(../../../images/index_09.jpg);
}

#index-10 {
position:fixed;
left:0px;
top:236px;
width:297px;
height:10px;
background:url(../../../images/index_10.jpg);
}

#index-11 {
position:fixed;
left:585px;
top:239px;
width:317px;
height:7px;
background:url(../../../images/index_11.jpg);
}

#index-12 {
position:fixed;
left:0px;
top:246px;
width:1px;
height:33px;
background:url(../../../images/index_12.jpg);
}

#index-13 {
position:fixed;
left:1px;
top:246px;
width:949px;
height:28px;
background:url(../../../images/index_13.jpg);
}

#bottom01 {

left:0px;
top:653px;
width:950px;
height:32px;
background:url(../../../images/bottom01.jpg);
}


#othersunnypages-14
{
background:url(../../../images/othersunnypages_14.jpg);
position:fixed;
top:247px;
left: 1px;
width: 949px;
height: 5px;
}

#othersunnypages-15
{
background-image:url(../../../images/othersunnypages_15.jpg);
position:fixed;
top:279px;
width:152px;
height:142px;
}

#othersunnypages-16
{
background-image:url(../../../images/othersunnypages_16.jpg);
position:fixed;
top:279px;
left: 152px;
width: 798px;
height: 41px;
}

#othersunnypages-17
{
background-image:url(../../../images/othersunnypages_17.jpg);
position:fixed;
top:320px;
left: 152px;
width:510px;
height:23px;
}

#othersunnypages-18 {
background-image:url(../../../images/othersunnypages_18.jpg);
position:fixed;
top:320px;
left: 662px;
width:33px;
height:23px;

}

#othersunnypages-19 {
background-image:url(../../../images/othersunnypages_19.jpg);
position:fixed;
top:320px;
left: 695px;
width:203px;
height:23px;

}

#othersunnypages-20
{
background-image:url(../../../images/othersunnypages_20.jpg);
position:fixed;
top:320px;
left:898px;
width:52px;
height:23px;
}

#othersunnypages-21 {
background-image:url(../../../images/othersunnypages_21.jpg);
position:fixed;
top:343px;
left: 152px;
width:504px;
height:24px;
}

#othersunnypages-22 {
background-image:url(../../../images/othersunnypages_22.jpg);
position:fixed;
top:343px;
left: 656px;
width:43px;
height:24px;
}

#othersunnypages-23 {
background-image:url(../../../images/othersunnypages_23.jpg);
position:fixed;
top:343px;
left: 699px;
width:200px;
height:24px;
}

#othersunnypages-24 {
background-image:url(../../../images/othersunnypages_24.jpg);
position:fixed;
top:343px;
left: 899px;
width:51px;
height:24px;
}

#othersunnypages-25 {
background-image: url(../../../images/othersunnypages_25.jpg);
position:fixed;
top: 367px;
left: 152px;
width:504px;
height:54px;
}

#othersunnypages-26 {
background-image:url(../../../images/othersunnypages_26.jpg);
position:fixed;
top:367px;
left: 656px;
width:43px;
height:54px;
}

#othersunnypages-27 {
background-image:url(../../../images/othersunnypages_27.jpg);
position:fixed;
top:367px;
left: 699px;
width:193px;
height:54px;
}

#othersunnypages-28 {
background-image:url(../../../images/othersunnypages_28.jpg);
position:fixed;
top:367px;
left: 892px;
width:58px;
height:54px;
}

#othersunnypages-29 {
background-image:url(../../../images/othersunnypages_29.jpg);
position:fixed;
top:421px;
left: 0px;
width:69px;
height:201px;

}

#othersunnypages-30 {
background-image:url(../../../images/othersunnypages_30.jpg);
position:fixed;
top:421px;
left:69px;
width:587px;
height:201px;
}

#othersunnypages-31 {
background-image:url(../../../images/othersunnypages_31.jpg);

top:421px;
left: 656px;
width:43px;
height:201px;
}

#othersunnypages-32 {
background-image:url(../../../images/othersunnypages_32.jpg);
position:fixed;
top:421px;
left: 699px;
width:193px;
height:201px;
}

#othersunnypages-33 {
background-image: url(../../../images/othersunnypages_33.jpg);
position:fixed;
top:421px;
left: 892px;
width:58px;
height:201px;
}

#othersunnypages-34 {
background-image:url(../../../images/othersunnypages_34.jpg);
position:fixed;
top:622px;
left: 0px;
width:950px;
height:31px;
}


#othersunnypages-36 {
background-image:url(../../../images/othersunnypages_36.jpg);
position:fixed;
top:685px;
left:0px;
width:950px;
height:15px;
}

Hi All,
It has been 20 years since I last wrote a program and CSS wasn't even thought of then so I need a little help.

I wish to place a text area/box with a background I can put text on top of in my html. Any image should work. I wish the text area/box to start 15% from the left edge and cover 70% of the screen width and be as high as the image. I would like the image to automatically re-size to take care of different screen resolutions. I would like to have no scroll bars on the text area/box and I would like the text to be fixed so it cannot be changed by someone typing in the text area/box. However for future reference I would like to know how to turn the scroll bars on so the text scrolls but the image stays fixed.

I have included the html I thought would work but doesn't.

Any help would be greatly appreciated,

Thanks,
**** Roose

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<meta http-equiv="Content-Type"" content="text/html; charset=UTF-8">
<meta name="revisit-after" content="7 days">
<meta content="MSHTML 6.00.5730.13" name="GENERATOR" >
<title>TestBox</title>
<style tyle=text/css>
txta {
width: 735px;
background-image: url(new.jpg);
border: 1px solid #781351;
height: 80px;
padding: 1px;
position: absolute;
left:15%;
}
</style>
</head>
<body>
<div id="txta">
<textarea name="t1" width "735px" height: "85px">
</div>
</body>
</html>

Hi,

can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style.

<td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br />
<a href="neoceram.php">Design</a> <br />
<a href="pyroceram.php">Development</a> <br />
<a href="patterns.php">Management</a> <br />
<a href="drilling.php">Portfolio</a> <br />
<a href="tints.php">Contact Us</a> <br /></td> </tr>

.td_1 {
background-image:url(nav_bar.gif);
background-position:left;
background-repeat:no-repeat;
background-color: transparent;
padding-top: 66px;
width: 154;
font-size: 12px;
font-weight:600;
line-height: 21px;
position: absolute;
font-family:Arial, Helvetica, sans-serif;
}

Thanks for all your help,

mdh2000