|
CSS - Converting A Html Table To Css Div W/ Image In It?
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.. Similar TutorialsCan someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables. I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page Code:
<TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%" border="0" align="center">
<tr>
<td><form action="" method="post" name="form1">
Login <br>
<input name="login" type="text" id="login" size="12" maxlength="6">
<br>
Password:</span><br>
<input name="pass" type="password" id="pass" size="12">
<br>
<input type="submit" name="Submit" value="Submit">
</form></td>
</tr>
</table></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top> <IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
</TR>
</TABLE>
Any help please??? My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? Hi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!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" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I am not sure if something like the attached should be put in an html table or done with css positioning. Any thoughts? Hello all, First time poster here...hoping to find some answers! I think this is a pretty common issue so I'll be brief. I have a header that is currently coded in HTML (with tables), and I want to convert it to CSS. Of course I need to do this with my entire site, but I figure the header will be a good place to start. This is what I need to convert to CSS: eyemagic.net/zc_header4.htm Thank you for your help! -Dave Hello, I am working with something like this: Code: <div>content one here</div> <table><tr><td>content two here</td></tr></table> How can I get the div to overlap the table and appear on top of it? Thanks! I inherited a big huge site; so there is way much going on; this is a simplification... I am trying to use CSS to divide it into columns, with a column as a div. For debugging, I draw a border around the columns to show me the boundaries. But when I include the following code within the column div: Code: <div class="mycolumn"> <p>Hi, I'm in the Div!</p> <table><tr><td><p> I'm in the table</p> </td></tr></table> <p>Hi, I'm after the table; I would expect to still be in the div</p> </div> The bottom border of the div is drawn right beneath the words "Hi, I'm in the Div", and both "I'm in the table" and "I'm after the table" are outside the box boundary. This does NOT happen if I create a separate test html file and include my Column CSS, but it does happen withing the application. Now, what's going on in the application is extremely complex, involving dozens of included CSS files, javascript, smarty templates which include other smarty templates, and over 4000 files in all. Could one of the other CSS files or something else be redefining <td> somehow, or any other obvious thing that could be breaking the div? Obviously, I keep trying to debug it, but if any old hand has an explanation that might save me another 8 hours, that would be greatly appreciated. Thanks, Chris 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 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 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>
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. First of all i am new to CSS styling . I am using asp.net and i have created an html table in wich i added some treeviews, labels and stuff. I aslo created a StyleSheet where i wanna add style to a specific label within the table. Maybe it's very simple but i don't know what else to do, i am trying to do that by ours. For instance, #Label1 { color:Orange; } it's not working, if has no effect. Label1 is the name of the label. I think i'm not refering correct the Label. Should i add a reference to the table too? i tried something but it were wrong I'm pretty new to CSS but I'm slowly working through problems on a site I am making for some friends (more accurately a template for their content publisher) and I came across a problem. I have a table that contains all of the pictures spaced properly, but I can't get it to resize down to something that makes sense. I tried adding style="... directly to it as well as width="... but none seem to resize it. (I tried both fixed and percentages) Link: http://www.coreconsciousness.com/orangenew.html Heres the code, the external CSS doesn't contain anything important at the moment: Code:
<!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 name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" /><!--Don't add anything above this line, you may change the DTD to match your page-->
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="main.css" type="text/css" />
<style type="text/css">
td.c1
{
background-image:
url('images/textboxorange.gif');
background-repeat: repeat-y;
width:100%;
}
</style>
</head>
<body>
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" width="900px">
<tr>
<td colspan="8"><img src="images/Orangenew_02.png" alt="" /></td>
</tr>
<tr>
<td colspan="8"><img src="images/Orangenew_04.png" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/Orangenew_05.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_06.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_07.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_08.png" alt="" /></td>
<td rowspan="2"><img src="images/Orangenew_09.png" alt="" /></td>
</tr>
<tr>
<td><img src="images/Orangenew_11.png" alt="" /></td>
<td><img src="images/Orangenew_12.png" alt="" /></td>
<td rowspan="3"><img src="images/Orangenew_13.png" alt="" /></td>
</tr>
<tr>
<td colspan="7"><img src="images/Orangenew_14.png" alt="" /></td>
</tr>
<tr>
<td colspan="8" class="c1">
<h1>#CONTENT#</h1>
<img src="images/Orangenew_15.png" alt="" />
</td>
</tr>
</table>
</body>
</html>
Hi, Have a problem with a left-hand table, the content of which is dragged down the page when the right-hand table grows in the same direction, say when filling it with content. I need to anchor that left-hand table in place but allow the right-hand table to stretch vertically. Have tried absolute CSS positioning, spacers, extra tables, 100% height - nothing seems to work. I've simplified the HTML code for readability, but the general layout is pretty much intact: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="668" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="49" colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="667" height="49"> </td> </tr> </table></td> <td width="1"></td> </tr> <tr> <td width="147" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="147" height="147"> </td> </tr> </table></td> <td width="520" height="32" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="32"> </td> </tr> </table></td> <td></td> </tr> <tr> <td height="24" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="520" height="24"> </td> </tr> </table></td> <td></td> </tr> <tr> <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="517" height="419" valign="top"><div align="center">RIGHT-HAND TABLE </div></td> </tr> </table></td> <td height="91"></td> </tr> <tr> <td height="328" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="146" height="328" valign="top"><div align="center">LEFT-HAND TABLE </div></td> </tr> </table></td> <td></td> </tr> <tr> <td height="482"> </td> <td> </td> <td></td> </tr> </table> </body> </html> Thanks, Dyb I have a table as specified: Code:
<div id="box"> // 800px set to center it with the rest of page
<table id="box"> // for the rest check the css code
<tr>
<td id="box_top"></td>
</tr>
<tr>
<td id="box_left"></td>
<td id="box_middle"></td>
<td id="box_right"></td>
</tr>
<tr>
<td id="box_bottom"></td>
</tr>
</table>
</div>
Code:
div#box {
width: 800px;
height: auto;
}
table#box {
table-layout: fixed;
width: 761px;
height: auto;
border-collapse: collapse;
}
#box_top {
background-image: url(images/table_02.png);
width: 761px;
height: 27px;
}
#box_left {
background-image: url(images/table_05.png);
background-repeat: repeat-y;
width: 19px;
min-height: 200px;
}
#box_middle {
background-image: url(images/table_06.png);
width: 761px;
min-height: 200px;
background-repeat: repeat;
}
#box_right {
background-image: url(images/table_07.png);
background-repeat: repeat-y;
width: 18px;
min-height: 200px;
}
#box_bottom {
background-image: url(images/table_12.png);
width: 761px;
height: 26px;
}
The table is collapsed (not at the minimum height), and the middle BG is not repeating, not even showing up. Is there anything wrong here? I've tried making a table using <div> tags but I can't really get the float / clear down yet. I've been doing CSS for a whole 2 days . Here is a view of the website. (the first table is using <table>), the 2nd I was trying <div> with floating elements. Hey guys, Im having problems cleaning up my HTML and replacing it by CSS code. <td width="65" height="1" style="vertical-align: top" align="left" bgcolor="#F0F0F0"> The html table code above is what I've been trying to change to CSS. Please help Is it not possible to do the following? What is the correct way of aligning a cell if not? PHP Code: TD.theader { background-color: #D0D0D0; border: 1px solid #000000; padding:5px; horizontal-align: right; } 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! |
|||||||