Solved: Background images for table cells - Page 3

upgrader · 10-17-2009

You will need to use padding again to put the text into the correct area, use the guide below for help. If you get stuck, ask

CSS Padding

Tygra · 10-18-2009

Upgrader, from adding any padding this happens...

Call on DarkLord and see what he says.

upgrader · 10-18-2009

You must have done the padding wrong, please post your code.

I'm trying to get you to learn it hence posting the link to how padding works above, instead of pasting the correct code

Tygra · 10-19-2009

Upgrader I know how padding works. It's the space between the text and the block that's its inside.

But this is the code anyway...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Table Colour Backgrounds</title>

<style type="text/css">

body {font-family: "Book Antiqua"
font-size: 20px;
color: black;}

h1 {font-size: 30px;}

.arsenal {display: block;
position: absolute;
background:url('bkred.gif');
width: 250px;
height: 350px;
left: 100px;
top: 60px;
color: white;
font-size: 20px;
padding-top: 55px;

text-align: center;}

.brighton {display: block;
position: absolute;
background:url('bkblue.gif');
width: 250px;
height: 350px;
left: 400px;
top: 60px;
color: white;
text-align: center;}

.chelsea {display: block;
position: absolute;
background:url('bkgreen.gif');
width: 250px;
height: 350px;
left: 700px;
top: 60px;
color: white;
text-align: center;}

</style>

</head>

<body>

<h1>Table colour backgrounds</h1>

<div class="arsenal">

<p>Bengal Tiger</p>

</div>

<div class="brighton">

</div>

<div class="chelsea">

</div>

</body>

</html>

upgrader · 10-20-2009

Hi Tygra,

You haven't added padding to the left, right or bottom so it's going to hit the sides.

Tygra · 10-21-2009

Upgrader, I added padding to all sides and got this...

upgrader · 10-21-2009

Hi Tygra, can you please post the code. If paste the code at each problem it will make it much quicker to resolve.

Also, you shouldn't remove no-repeat from the background attributes otherwise you get the tiled effect like above.

10-17-2009	#15
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,308 PC Experience: Some Experience	Re: Background images for table cells You will need to use padding again to put the text into the correct area, use the guide below for help. If you get stuck, ask CSS Padding __________________ PCHF Rules--PCHF Prework--PCHF Downloads

10-18-2009	#16
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Background images for table cells Upgrader, from adding any padding this happens... Call on DarkLord and see what he says.

10-18-2009	#17
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,308 PC Experience: Some Experience	Re: Background images for table cells You must have done the padding wrong, please post your code. I'm trying to get you to learn it hence posting the link to how padding works above, instead of pasting the correct code __________________ PCHF Rules--PCHF Prework--PCHF Downloads

10-19-2009	#18
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Background images for table cells Upgrader I know how padding works. It's the space between the text and the block that's its inside. But this is the code anyway... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title>Table Colour Backgrounds</title> <style type="text/css"> body {font-family: "Book Antiqua" font-size: 20px; color: black;} h1 {font-size: 30px;} .arsenal {display: block; position: absolute; background:url('bkred.gif'); width: 250px; height: 350px; left: 100px; top: 60px; color: white; font-size: 20px; padding-top: 55px; text-align: center;} .brighton {display: block; position: absolute; background:url('bkblue.gif'); width: 250px; height: 350px; left: 400px; top: 60px; color: white; text-align: center;} .chelsea {display: block; position: absolute; background:url('bkgreen.gif'); width: 250px; height: 350px; left: 700px; top: 60px; color: white; text-align: center;} </style> </head> <body> <h1>Table colour backgrounds</h1> <div class="arsenal"> <p>Bengal Tiger</p> </div> <div class="brighton"> </div> <div class="chelsea"> </div> </body> </html>

10-20-2009	#19
upgrader Tech Support Team Join Date: Jul 2006 Location: /home/upgrader/ Posts: 7,308 PC Experience: Some Experience	Re: Background images for table cells Hi Tygra, You haven't added padding to the left, right or bottom so it's going to hit the sides. __________________ PCHF Rules--PCHF Prework--PCHF Downloads

10-21-2009	#20
Tygra Silver Member Join Date: Dec 2007 Posts: 170 PC Experience: Experienced	Re: Background images for table cells Upgrader, I added padding to all sides and got this...

Similar discussions...
Thread	Thread Starter	Forum	Replies	Last Post
Selecting Excel Cells With C#	madmatt2006	Programming	2	05-04-2009 12:45 PM
Erase unnecessary Line Breaks in the cells	artner0112	Office Software	5	10-22-2008 02:22 PM
Pending: background images/themes missing from web sites	ras85uk	Internet Help	1	07-04-2008 04:59 AM
<News> Ships Test Fuel Cells	Newsie	IT News	0	08-06-2007 08:35 AM
<News> Microsoft Denies it Will Sell Fuel Cells	Newsie	IT News	0	04-18-2007 08:33 AM

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode