|
CSS - Css Table Image Problem
Hi all!
I am stuck with writing my first CSS style based website. First you should know that I'm using a external CSS script. What do I have? I have a page with a background image. Then I need text right? Well I need to align the text, to do so, I created this (for the index page): Code: <div id="content"> <div id="colOne"> <p></p> </div> <div id="colTwo"> <p></p> </div> </div> To style it with CSS, I wrote this in my external STYLE.CSS script: Code:
#colOne {
float: left;
width: 500px;
}
#colTwo {
float: right;
width: 184px;
}
This all works, I have 2 'tables' almost next to each other. Well now you know how my script works, it may help you find a solution for my question: ----- Because my background has light and dark colours, I want to create a 50% invisible background for my table, so the text is more visible and I am still able to see the background. I found out, that I have to use a image and use this code: Code: <div style="width:250px;margin:0 auto;"> <span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;"> <img src="image.gif"></span> </div> Let say image.gif is a black image100*100, when you apply this code, you will be able to look trough the image. so I thought I could use it onto my tables, take a small black image, make it the background, let it repeat it so the whole table would be black, and then apply the code... but I don't know how, because the script is not written for a external CSS script, and I don't know how to use a image as a table background. Can anyone please tell me how to do this? I prefer that you complete my script(A) Thanks for helping me out, Stef Similar Tutorialsi have table in which i display bunch of query results. i use <table width="80%" ....background="something.gif"> when the user's screen resolution is high the table still takes 80% of the space but the background image starts repeating. is there a way to automatically extend the image width in case the user's screen resolution is high? thanks for the help in advance Hello, I recently started creating websites again and I have been pulling my hair out on this Firefox compatibility issue. The site navigation looks great in IE but in Firefox a couple of the background images are skewed down and to the left. Since all my tricks from years ago are so outdated now, I decided to try CSS for a simplified navigation setup. The code is probably pretty messy since I chopped it together from numerous sources and still am not completely sure how it works. Background: I created a large 794x1200 PNG image that contains two complete border and navigation sets. I am using CSS to both position the appropriate portion in each table/cell as well as switching to a slice on the 2nd image set for rollover purposes. An example of the current test is he (URL address blocked: See forum rules) *not sure if this is okay but would be best to see the example. If it is not allowed as a non-clickable then feel free to delete. It is here - classtime . org / test6 . htm and the navigation image is he (URL address blocked: See forum rules) *classtime . org / navigate . png I would be eternally grateful to anyone that can help me figure out why the site works great in IE but is coming up skewed in Firefox. As a side note, when I pull up the site in Frontpage, it shows the left-most cell as being larger than it is supposed to be even though it is hardcoded. To get my left image bar to show up in the correct place I had to use a value of "left: -40px;" I'm not sure why that is but I suspect it has something to do with the problem. Thank you very much for taking a look. My jumbled code is as follows: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<title>Ultrasonic Blind Company - Elk Grove Village, Illinois</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css" media="screen">
a:link {color: #FFF4D1;}
a:visited {color: #FFF4D1;}
a:hover {color: #74060c;}
a:active {color: #FFF4D1;}
.top a
{
display: block;
width: 794px;
height: 120px;
background-image: url('navigate.png');
}
.top a:hover {
background-position: 0px -601px;
}
#left {
left: -40px;
width: 150px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: 0px -120px;
position: relative;
}
#left li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: center;
font: bold 18px Batang;
line-height: 50px;
}
#left li, #left a {height: 50px; width: 146px; display: block;}
#panel1b {top: 10px;}
#panel2b {top: 63px;}
#panel3b {top: 116px;}
#panel4b {top: 169px;}
#panel5b {top: 223px;}
#panel1b a:hover {background: transparent url('navigate.png') 0px -730px no-repeat}
#panel2b a:hover {background: transparent url('navigate.png') 0px -785px no-repeat}
#panel3b a:hover {background: transparent url('navigate.png') 0px -839px no-repeat}
#panel4b a:hover {background: transparent url('navigate.png') 0px -890px no-repeat}
#panel5b a:hover {background: transparent url('navigate.png') 0px -945px no-repeat}
#right {
width: 154px;
height: 460px;
display: block;
background: url('navigate.png');
background-repeat: no-repeat;
background-position: -640px -120px;
position: relative;
}
#right li {margin: 0px; padding: 0px; list-style: none; position: absolute;
text-align: right;
font: bold 18px Batang;
}
#right li, #right a {height: 85px; width: 154px; display: block;}
#panel1r {top: 0px;}
#panel2r {top: 100px;}
#panel3r {top: 200px;}
#panel4r {top: 300px;}
#panel1r a:hover {background: transparent url('navigate.png') -640px -721px no-repeat}
#panel2r a:hover {background: transparent url('navigate.png') -640px -821px no-repeat}
#panel3r a:hover {background: transparent url('navigate.png') -640px -921px no-repeat}
#panel4r a:hover {background: transparent url('navigate.png') -640px -1021px no-repeat}
</style>
</head>
<body bgcolor=#74060c>
<div align=center>
<table id="Table_01" width=794px height=600px border=0 cellpadding=0 cellspacing=0>
<tr>
<td colspan="3" height="120" width="794" bgcolor="#FFF4D1">
<div class="top">
<a href="(URL address blocked: See forum rules)"></a>
</div>
</td>
</tr>
<tr>
<td align=left valign=top height=674px width=150px bgcolor="#FFF4D1">
<ul id="left">
<li id="panel1b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Contact</a></li>
<li id="panel2b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Residential</a></li>
<li id="panel3b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Commercial</a></li>
<li id="panel4b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Coupons</a></li>
<li id="panel5b"><a href="(URL address blocked: See forum rules)" style="text-decoration: none">Questions</a></li>
</ul>
</td>
<td align=left valign=top width=490px height=674px bgcolor="#FFF4D1">
aaa</td>
<td align=left valign=top width=154px height=674px bgcolor="#FFF4D1">
<p align=right> <ul id="right">
<li id="panel1r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel2r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel3r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
<li id="panel4r"><a href="(URL address blocked: See forum rules)" style="text-decoration: none"></a></li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
Hi, I have centered a table horizontally and vertically. To do this I put a table inside a table. so i don't want to use absolute positioning, as the position would change if the window size changes... My problem, with relative positioning, is that I can't figure out how to put my "some text" over an image -which is inside the table cell- in the exact position i want, without "collateral damage"... The collateral damage is that if I put the <div> tag inside the table (see example 1), it will occupy the space and as result the image wll be moved down and layout won't be centered vertically anymore... If I put the <div> tag outside the table (see example 2), as result there will be more occupied space at the top, and the layout isn't centered anymore... Here you can see the code i used for both example 1 and example 2: example 1: <html> <head> <title>relative problem - example 1</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <table border=1> <tr> <td width="640" height="480"> <div id="Layer1" style="position:relative; left:50px; top:50px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> example 2: <html> <head> <title>relative problem - example 2</title> </head> <body> <table width="100%" height=100% border="1"> <tr> <td width="100%" height="100%" align="center" valign="middle"> <div id="Layer1" style="position:relative; left:0px; top:200px; width:50px; height:200px; text-align:left; overflow: auto; z-index:1;"> some text some text some text some text some text some text some text some text some text some text some text some text </div> <table border=1> <tr> <td width="640" height="480"> <img src="http://www.pbworks.net/images/help.jpg" width="640" height="480"> </td> </tr> </table> </td> </tr> </table> </body> </html> thx for letting me know... I have a dynamic table that is in the cell of another table. For the life of me I cant get it to stick to the top of the cell. It wants to sit at the midline of it vertically. Thanks for reading. Wasn't sure if this was a CSS issue or an issue with the HTML. I am not using a DOCTYPE declaration, so that may also be the issue. I have a portion of a page where I want an image to appear. It is a static image that sits in between 2 scripts. When placed, in both IE and Firefox, there is a 1-2px white space between it and the next TD. The original code was like this: Code: <td width="144"> <SCRIPT> write_minorlinks_xml() </SCRIPT> <img src="images/site/database.gif"/> <SCRIPT> write_dblinks_xml() </SCRIPT> </td> Which makes it appear as this in either browser: I added a div into there so now it reads: Code: <div class="db"><img src="images/site/database.gif"/></div> Stats as follows: image width = 144px I've tried changing the TD, Table and Image attributes both in the CSS and in the HTML itself. No change. It is also important to show what the scripts do. You can't view it in the source but if you could, it would show up like this: Code: <td width="144"> <TABLE class="links" border="0" cellspacing="0" cellpadding="0"> <TR><TD class="minor_link"><span class="minor_link"> <a href="url" target="_top">name</a></span> </tr></td></table> <img src="images/site/database.gif"/> // </td> Also to note, the XML in the script name is in the name only. And the class "minor_link" does not exist. I am thinking that the extra space could be because of the code the scipts put in there. However, Since putting the image code into a div, I changed the background color to #FF7A7A (which is the pink color of the trailing edge of the image, which matches the border to the right of it.) As a result, Firefox now displays it as: Which is fine for cheating sake, but it still displays as the first image in IE. Here is the portion of the CSS that concerns the div (which has made no change in either IE or Firefox) Code: div.db
{
background-color: #FF7A7A;
padding: 0px;
margin: 0px;
}
Any help or ideas would be appreciated. Hi there just wanted to ask a question. I got a table in css and i just want to know what is the command to move an image to the centre of the table. Thank you Hello.This should be simple enough. I have an image on my page(image1.bmp),immediatly folowed by a table(class=table1). The thing is I want the image to be flush with the top of the table with no gap,but there is a small gap,How can I fix this? Thanks note(I left a //here mark on the html page where the problem is. css sheet: Code:
#menu {
clear: both;
margin: 30px;
padding: 0;
background: url(menu.jpg) repeat-y center top;
font: 12px/26px Courier New;
height: 26px;
background: #006633;
text-align: center;
}
#menu ul {
float: none;
list-style: none;
margin-top:0; padding: 0;
margin-right:0; padding: 0;
margin-bottom:0; padding: 0;
margin-left:90; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: inline;
float: 0 auto;
padding-top: 8px;
padding-right: 28px;
padding-bottom: 8px;
padding-left:8px;
color: gold;
text-decoration: none;
}
#menu ul li a:hover {
background-color:003300;
color: gold;
}
#menu ul li#current a {
background-color: #eee;
color: #333;
}
a { color: black;font-size: 10pt; text-decoration: none;
border-bottom-style: solid; border-bottom-width: 0px }
a:link { border-bottom-color: navyblue }
a:visited { border-bottom-color: purple }
a:hover { border-bottom-color: green }
a:active { border-bottom-color: red }
H1.texter {
font-family: 'Lucida Console';
font-size: 15pt;
color: #black;
font-variant: normal;
text-decoration: none;
}
H1.texter2 {
font-size: 14px;
color: #black;
font-family: 'Lucida Console';
font-variant:normal;
FONT-WEIGHT: normal;
}
H1.texter3 {
font-family: 'Lucida Console';
font-size: 10pt;
FONT-WEIGHT: normal;
color: navyblue;
text-decoration: none;
}
TABLE.Table1
{
height: 150px;
width: 380px;
top-border-style:hidden;
border-top:hidden;
border-bottom:solid;
border-left:solid;
border-right:solid;
border-color: #000000;
background-color:white;
border-width: 1px;
margin: 0px;
padding: 0px ;
}
TABLE.Table2
{ margin: 0px;
padding: 0px;
height: 199px;
width: 430px;
background-color:limegreen;
}
html sheet: Code:
<html>
<head>
<title>Keep track and review golf scores</title>
<meta name="description" content="Keep track of and review golf scores"/>
<meta name="keywords" content="Golf","records","review","tabulation"/>
<meta name="robots" content="index" />
<link rel="stylesheet" type="text/css" href="style.css" title="BlueSky 3.0
CSS"></head><body>
<style>
body
{
background-color: limegreen;
<font FACE="Lucida Console">
}
H1.texter1 {
font-family: 'H1.texter2 {
font-family: 'Lucida Sans Unicode';
font-size: 75pt;
color: black;
FONT-WEIGHT: normal;
font-variant:Not Set;
}
</style>
</head>
<body>
<div id="menu">
<ul align="center">
<li><a
href="golfgame/Users/register.php">Join</a></li>
<li><a
href="golfgame/Users/Log_in.php">Login</a></li>
<li><a href="golfgame/Users/help/tour.html"
>Tour</a></li>
<li><a href="golfgame/Users/contact.php">Contact</a></li>
</ul>
</div>
<br>
<IMG SRC="green4.bmp" align="left">
<IMG SRC="green4.bmp" align="right">
<br>
<center>
<table width=300><tr><td align='left'><IMG SRC="golf.bmp">
</td ><td align='center'>
<IMG SRC="golf.bmp">
</td><td align='right'>
<IMG SRC="golf.bmp">
</td></tr></table>
</center>
<br><br><center>
<IMG SRC="logo.bmp" align="center">
</center>
<br><center>
<IMG SRC="image1.bmp">
//here
<table class=table1>
<tr><td align='left'><br>
<h1 class=texter2><li>content here
scores!</li></h1></td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
<tr><td><h1 class=texter2>
<li>content here</li></h1>
</td></tr>
</table>
</center>
</body></html>
Hi. I've got a question regarding placing an image within a table cell and using CSS to achieve a certain result. The table cell's width is determined at 530px, but the height is dependent on the actual length of the copy. What I'm looking to accomplish is have an image ghosted in the background of the text. It is supposed to appear in the lower right hand corner of the cell. I've already created the image with a transparent background, but it's not implementing correctly. Can I use a Z-Index style to achieve the item being placed under the text? Also, how do I make sure that the image is positioned in the lower right hand corner of the cell regardless of the height of the cell? Thanks! Simon315 I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. Hey all, a fairly simple situation which is driving me crazy! =p I have a table row which has two columns. Now using css I have set the row to have a background image like so: Code: background-image:url(images/newsmiddle.jpg); background-repeat:repeat-y; } Now in firefox this works fine ( he content box has the image run through both columns as intended ). But in Internet Explorer on the second column the bg image starts again as if I had set the background image for that cell which is not what I want. Anyone able to help for an IE solution? Thanks This post can be deleted, I solved my problem. he http://www.cyclomedia.co.uk/?ie6escape.html i worked out a much better way to do this layout (no inner tables) but this bug in IE6 still persists in this version. the html and css validate so i doubt it's something i've done. kudos to anyone who can figure it out but as a note, if you add another floated div (just containing enough content to wrap e.g. "...") then it holds the image in! hello, i have a few tables with different background-image (style attribute) in my page. how can i print the page with the background images i know @media print should help, but i don't know how. * does the css have to be external, or can i use the tag <style> PLEASE HELP I have an image I want to display in a <td> cell, that scales with the cell dimensions. How do I do that? Hi, my rollover image for my table does not work. It does not seem to preload the images as expected, so the rollover effect does not look good. There seems to be some type of a lag when I rollover. I don't understand why? Below is the code. It can also be found at http://members.lycos.co.uk/eflix/junk.html Code: <html>
<head>
<SCRIPT language="JavaScript">
if (document.images){
var preloadPic1 = new Image();
preloadPic1.src = 'http://members.lycos.co.uk/eflix/TBOFF.gif';
var preloadPic2 = new Image();
preloadPic2.src = 'http://members.lycos.co.uk/eflix/TBON.gif;';
}
</SCRIPT>
<STYLE>
.topbar {background-image:url('http://members.lycos.co.uk/eflix/TBOFF.gif'); }
.topbar2 {background-image:url('http://members.lycos.co.uk/eflix/TBON.gif;');}
</STYLE>
</head>
<body>
<br><br><br><br><br><br><br>
<table cellspacing=0 cellpadding=0 border=0 width=770>
<tr><td>
<table cellspacing=0 cellpadding=0 width=770 border=1 bordercolor=#6DBEE8
style="border-collapse: collapse; border-width: 1px;">
<tr height=20>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">A</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">B</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">C</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">D</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">E</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">F</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">G</a>
</td>
<td class="topbar" align=center
onMouseOver="className='topbar2'"
onMouseOut="className='topbar'">
<a class="topbarlink" href="">H</a>
</td>
</tr>
</table>
</td></tr>
</table>
</body>
</html>
I have a web page shell that loads various content into different cells. The entire page is essentially a table. I have 4 graphic overlays that I want to impose on each cell to round the corners. I've tried doing it this way: CSS: Code: .LeftPanelTable {
WIDTH: 182px;
border-style: none }
.LeftPanelCell {
WIDTH: 160px;
vertical-align: Top;
border-style: none }
.ActionOptionsPanel {
background-color: #DDDDDD;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
#soft_corner_ul {
background:url("http://www.fourfreedomsblog.com/images/corner_ul.gif") no-repeat top left}
#soft_corner_ur {
background:url("http://www.fourfreedomsblog.com/images/corner_ur.gif") no-repeat top right}
#soft_corner_ll {
background:url("http://www.fourfreedomsblog.com/images/corner_ll.gif") no-repeat bottom left}
#soft_corner_lr {
background:url("http://www.fourfreedomsblog.com/images/corner_lr.gif") no-repeat bottom right}
HTML: Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
<div id="soft_corner_ul"><div id="soft_corner_ur"><div id="soft_corner_ll"><div id="soft_corner_lr">
This is the table cell content
</div></div></div></div>
</td>
</tr>
</table>
However, I still see a faint border around the cell, which spoils the effect of the rounded corners. If I change it like this: Code: .ActionOptionsPanel {
background-color: #DDDDDD;
background-image:url("http://www.fourfreedomsblog.com/images/corner_ul.gif");
background-repeat: no-repeat;
background-position: bottom right;
color: #000000;
font-family: verdana;
font-size: 12px;
border-style: none}
Code: <table class="LeftPanelTable">
<tr>
<td class="ActionOptionsPanel">
This is the table cell content
</td>
</tr>
</table>
then the border doesn't appear, but I don't know any way to do this with more than one image. Suggestions? Thanks... my goodness what a popular site this seems to be. im just a n00b in css and xhtml right now, but hopefully not for long. im trying to use a table to arrange the images in my website introduction page. im trying to make the page look exactly the same no matter the browser window size. im trying to float the two images that have the names programmingimg.gif and programmingtext.gif, but they are not floating to the right, they are just staying adjacent to the other image in the same cell. one other problem that i am having is, that the only way for me to stretch the background gif across the window size it to fake a background. its just the first image in the file with a z index of -1. this works in FIREFOX but not in IE. in IE, nothing can be seen except the background image. does anyone have a solution to either of these 2 problems? css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Patrick Allard's Very Graphic Website</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <img src="backgroundfire2.gif" alt="background image" id="bg" /> <table border="1" class="introlayout"> <tr> <td class="introtitle"> <img src="titlemaxfontgreyredfire.gif" alt="background image" id="titleimg" /> </td> </tr> <tr> <td class="skillpics"> <img src="analogskillspic.jpg" alt="background image" id="analogskillsimg" /> <img src="programmingpic.jpg" alt="background image" id="programmingimg" /> </td> </tr> <td class="skilltext"> <img src="analogskillsmaxfontblackbluefire.gif" alt="background image" id="analogskillstext" /> <img src="programmingmaxfontblackbluefire.gif" alt="background image" id="programmingtext" /> </td> </tr> <td class="menu"> <img src="mainmenumaxfontblackbluefire.gif" alt="background image" id="mainmenuimg" /> </td> </tr> </table> </body> </html> html: Code:
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
img#bg
{
position:fixed;
width:100%;
height:100%;
z-index:-1;
}
img#titleimg
{
width:100%;
}
img#mainmenuimg
{
text-align:center;
width:30%;
}
img#analogskillsimg
{
width:40%;
height:60%;
}
img#programmingimg
{
float:right
vertical-align:bottom;
width:40%;
height:60%;
}
img#analogskillstext
{
vertical-align:bottom;
width:40%;
}
img#programmingtext
{
float:right
width:40%;
}
table.introlayout
{
width:100%;
height:100%;
}
td.introtitle
{
width:100%;
height:10%;
}
td.skillpics
{
vertical-align:bottom;
width:100%;
height:70%;
}
td.skilltext
{
vertical-align:top;
width:100%;
height:10%;
}
td.menu
{
text-align:center;
width:100%;
height:10%;
}
I'm working on this site: www.wirelessguy.net I have this coded into my css file for the table in the iFrame: Code:
table#welcome
{
border:1px dotted red;/*testing out table*/
height:100%;
width:100%;
}
The html looks like this for the table: Code:
<table id="welcome">
<tr>
<th id="welcome">Welcome to the American Communications Web Site</th>
</tr>
</table>
The table will not fill up the iframe, and it's not lining up in the middle. Anyone have any ideas? |
|||||||