|
HTML - Center Background In Table?
Hi,
I can't seem to figure out how to have a centered background image in a table in addition to its background color. Here's the site in question: http://deliciousintlbakery.com/test.htm I want to keep the red background in the table, but I also want an image centered behind the text (the address of the cafe). Here's the code: <table width=70% cellpadding="0" cellspacing="0" border=1 align="center" style="font-family: Arial ; font-size: 9pt;" bordercolor="#FFCC00"> <tr><td> <table width=100% cellpadding="0" cellspacing="0" bgcolor="8D2B25" height="250" border="0" style="font-family: Copperplate Gothic Bold ; font-size: 9pt;"> </td></tr> Thanks! Similar TutorialsI am using the coding below to add color and an image to my background. I have seen the codes to center my background and to fix it so it does not move, however, I do not know where to put that code in relation to the code below? I need to have a color background and non-repeating fixed background image. THANKS FOR ANY HELP THAT YOU CAN GIVE kara: <BODY BACKGROUND="http://i17.photobucket.com/albums/b96/inkedflamingo/logoandlinksperfectSMALLERcopy.png" BGCOLOR="#FFFF66" TEXT="#000000" LINK="#0000FF" VLINK="#FF66FF" ALINK="#FF0000" > Hi all! I used to use <div align="center"> (see below) and since I've started using XHTML 1.0 Transitional, align="center" has been depreciated. I have tried using css margin: 0 auto; and margin-left: auto; margin-right: auto; and nothing is centering my table on a form. I have to use tables since its required on my project and there are more stuff inside the tables then my example below. But css for the div should work.. any thoughts, helps, would be greatly appreciated. Thanks! s-one <!?xml-stylesheet href="http://www.w3.org/StyleSheets/TR/W3C-REC.css" type="text/css"?> <!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> </head> <body> <div align="center"> <table><tr><td><img src="images/photo.png"></td></tr></table> </div> </body> </html> On my page at http://www.sticksite.com/birds/ the large table with 44 thumbnail pictures, is no longer centered in Firefox, but it is centered in Internet Explorer. I even tried using the <center> tag but that did not center it either. Is there a simple solution? Does anyone know why div align="center" works in firefox only but not ie when centering a table? this table wont center in IE but its center in firefox can anyone help me with this? http://lilions.com/contact/ I cant fit the hole code so please view page source to see if something offsetting it somewhere else on the page thanks Code: ul.pureCssMenum0 a {
padding:8px 10px 0px 10px;
}
ul.pureCssMenum0 ul a {
padding:2px 5px 5px 10px;
}
ul.pureCssMenum0>li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li {
margin:0px 0px 0px 0px;
}
ul.pureCssMenum0 li li {
margin:2px 0px 0px 2px;
}
</style>
<!-- End PureCSSMenu.com STYLE -->
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum0">
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/home">HOME</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/news"><span>NEWS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/lnews">LATEST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/pnews">PAST NEWS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/team"><span>TEAM</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/roster">ROSTER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachingstaff">COACHING STAFF</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontoffice">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/fieldinfo">FIELD INFO</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/gameday"><span>GAMEDAY</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/schedule">SCHEDULE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/standings">STANDINGS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/statistics">STATISTICS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/history">HISTORY</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/fanzone"><span>FANZONE</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/teamstore">TEAM STORE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/gallery">GALLERY</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/tickets">TICKETS</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/calander" target="_blank">EVENTS CALANDER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/sponsorship">SPONSORSHIP</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="#"><span>APPLICATIONS</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/frontofficeapp" target="_blank">FRONT OFFICE</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/coachapp" target="_blank">COACH</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/playerapp" target="_blank">PLAYER</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="http://lilions.com/dancerapp" target="_blank">DANCER</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://lilions.com/contact">CONTACT US</a></li>
<li class="pureCssMenui0"><a class="pureCssMenui0" href="http://fivestarfootballleague.com/" target="_blank">FSFL</a></li>
</ul>
</body>
<br></br><br></br>
<center>
<img src="http://lilions.com/home/images/tpc.jpg"></center><center><img src="http://lilions.com/home/images/cnttp.jpg"></center><table style="border-collapse: collapse;" width=1000 height=450>
<td id="center-mid">
</center><center><font color="#FFFFFF"><table border="3" bordercolor="FFFFFF" width="630" bgcolor="000000"></center></br><td><p><i><b><center><font color="#FFFF00">donbonacorsa@yahoo.com <donbonacorsa@yahoo.com></center></b></i></p></font>
<form action="index.php" method="post"><table width="630" border="0" cellspacing="2" cellpadding="0">
<h4>
<center>
<p>Have questions or comments? Please feel free to fill in the form below to send me an email.</p>
</center>
</h4>
<center></h4><div id="content">
<p><tr align="center"><center>
<td width="29%" class="bodytext">Your Name (required):</td></tr>
</center>
<tr align="center"><center>
<td width="71%"><input name="name" type="text" id="name" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Your Email (required)</td></tr>
</center>
<tr align="center"><center>
<td><input name="email" type="text" id="email" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Subject</td></tr>
</center>
<tr align="center"><center>
<td><input name="subject" type="text" id="subject" size="32"></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext">Comment:</td></tr>
</center>
<tr align="center"><center>
<td><textarea name="comment" cols="45" rows="6" id="comment" class="bodytext"></textarea></td></tr>
</center>
</p>
<p><tr align="center"><center>
<td class="bodytext"> </td></tr>
</center>
<tr><center>
<td align="center" valign="top"><input type="submit" name="Submit" value="Send"></td></tr>
</center>
</p></table></tr></td></form></td>
</table>
</div>
</b>
</h3>
</body>
<center>
<img src="http://lilions.com/home/images/cntbtm.jpg"></center>
<br></br>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" class="credit_white1"><font color="#ffffff"><img src="images/spacer.gif" width="30" height="1">Copyright 2011, MajorKillenDesign.com, Inc. All Rights Reserved.</font><br><br></td></center>
</tr>
</table>
<center>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2">
<tr>
<td width="800" height="2" bgcolor="#D4D601"></td>
</tr>
</table>
<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="15">
<tr>
<td width="800" height="15" class="subMenu"><p style="margin-left: 25px; margin-right: 0px; margin-top: 3px; margin-bottom: 5px" align="right">
<i> <a href="http://lilions.com/contact/">
Contact The Lions</a> </i>
| <a href="http://majorkillendesign.com/">
Site & Design Sales</a> </p></td>
</tr>
</table>
<script language="JavaScript">
if (document.location.toString().indexOf("home") == -1) {
document.write('<table valign="top" border="0" cellspacing="0" cellpadding="0" width="800" height="2"><tr><td width="800" height="2" bgcolor="#D4D601"></td></tr></table>')
}
</script>
</tr>
</table></center>
</html>
Hello, I have been fighting with this for several months. I am trying to get this to work across the board with IE and FF and was hoping I could get some help that I might be over looking. Please bare with me on this as it is detailed. Ok, this is a page that outputs Christmas displays users submit. Here is a sample page. http://www.mesquitechristmas.com/loc...y.php?id=%2021 Yes this page is XHTML Valid before we even start. Only problem I have in FF is that the Google Map will not center, but in IE6,7 it does. I have a div class assigned to it just to center it. Now I can assign a div align="center" but that will not validate. Code: div.c1 {text-align: center}
Other then that it renders and looks perfect in FF as usual because of it being a superior browser. Now in to my IE problems.... First, in both IE 6,7 if you look at the table that says "About this display..." you will notice a red line dividing each row. In FF this looks fine and works. But in IE if their is not content the line does not show in the entire row. What could be causing this? I would like this line to show regardless if there is content or not like it shows in FF. Lastly in IE6 only Below the "return to list" button their is a HUGE gap that does not show up in IE7 or FF. I have been trying to fix this for months and can not get it right. Any idea why this is happening? I am running out of time and could greatly use the help and suggestions. If you need me to post some code for these isolated problems I would be glad to. Otherwise you can just view source of the code to see it. -Thanks <table> <tr align="center"> <td align="justify" <script src="http://tag.contextweb.com/TagPublish/getjs.aspx?action=VIEWAD&cwrun=200&cwadformat=300X250&cwpid=510467&cwwidth=300&cwheight=250&cwpnet=1 &cwtagid=41771"></script> </td></tr></table> this can be seen on my site englishtrunkshowco ---click any category on home page, then scroll down and you will see the misalignment of the ad Code: <td class="row5" style="text-align:center;" width="50"> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">2</b> <span style="color:#c9c5be;">topics</span> <br /> <b style="font-size:15px; color:#c9c5be; font-family:Georgia;">1</b> <span style="color:#c9c5be;">posts</span><br /><br /> </td> I'm not sure how it's looking in IE, but in Firefox all the text in this table cell is aligned to the right. I can't figure out why. Row5 only adds a background color and nothing else. http://sa.zrkonium.net/ It's visible here ^ The grey topics/posts text is aligned to the right in Firefox rather than in the center where it should be. I can't figure out why it's not aligning right. Any help appreciated. Quote: <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img824.imageshack.us/img824/2089/thumb115.jpg" border="0" /> <br /></th> <th><img src="http://img185.imageshack.us/img185/7507/thumb116.jpg" border="0" /> <br /></th> <th><img src="http://img545.imageshack.us/img545/5185/thumb130.jpg" border="o" /> </th> </tr> <tr> <td><strong>Κομπιούτερ Γραφείου</strong></td> <td><strong>Κομπιούτερ Γραφείου</strong></td> <td><strong>Ευρετήριο Τηλεφώνου Mini</strong></td> </tr> <tr> <td>Κωδ: 115</td> <td>Kωδ: 116</td> <td>Κωδ: 130</td> </tr> </tbody> </table> <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img580.imageshack.us/img580/7339/thumb132.jpg" border="0" /></th> <th><img src="http://img824.imageshack.us/img824/6352/thumb133.jpg" border="0" /></th> <th><img src="http://img837.imageshack.us/img837/53/thumb141.jpg" border="o" /> </th> </tr> <tr> <td> <p><strong>Κύβος - Organizer </strong></p> <p><strong>γραφείου</strong></p> </td> <td><strong>Βάση ημερολογίου</strong></td> <td><strong>Ημερολόγιο Τοίχου</strong></td> </tr> <tr> <td>Κωδ: 132</td> <td>Kωδ: 133</td> <td>Κωδ: 141</td> </tr> </tbody> </table> <table style="height: 196px;" border="0" width="480"> <tbody> <tr> <th><img src="http://img835.imageshack.us/img835/227/thumb141a.jpg" border="0" /></th> <th><img src="http://img841.imageshack.us/img841/7104/thumb142.jpg" border="0" /></th> <th><img src="http://img295.imageshack.us/img295/4448/thumb189.jpg" border="o" /> </th> </tr> <tr> <td> <p><strong>Ημερολόγιο Τοίχου</strong></p> </td> <td><strong>Επιτραπέζιο Ημερολόγιο</strong></td> <td><strong>Χάρακας Πλαστικός</strong></td> </tr> <tr> <td>Κωδ: 141Α</td> <td>Kωδ: 142</td> <td>Κωδ: 189</td> </tr> </tbody> </table> If you test this text to w3schools you ll see that my rows is not center. Can anybody help me to do that right?? I need a three column table in which the center column will have multiple rows, the number will vary. For exampe, this works. I need a third column that will look like the first, just one row corresponding to the seven rows in the second column. Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> </tbody> </table> If I do this Code: <table border=1> <tbody> <tr><td rowspan=8>Dry skin</td></tr> <tr><td>46.0 </td></tr> <tr><td>9.0 </td></tr> <tr><td>35.3 </td></tr> <tr><td>12.5 </td></tr> <tr><td>20.8 </td></tr> <tr><td>27.0 </td></tr> <tr><td>4.0 </td></tr> <tr><td>third column, same row? </td></tr> </tbody> </table> another row is started. I just want third column that has one row corresponding, correlated with the seven rows in the second column. I don't know how to do that. I apologize if it is improper protocol to post a link rather than the actual code but since View>Source exists for seeing both the html and css code and there is a fair amount of code...here is the link: http://nicolemuller.com/IMS/FINAL/ne...al/signin.html I don't know what I'm doing wrong but I cant get all the elements in the 2 rows to align and center with the rule of the menu strip. Any help would be great-thanks! Hello to all Forum members. It's my first post here. I have a problem on my site using FF 2.0 and opera. When you open http://review4dummies.com/test/index.php you see it has horizontal alignment = center, but when you click on link About Us the site will move about 10 pixels to the right and of course its centered but... huh not exactly. When you browse and click on link Contact Us its back to normal. Clicking on report-a-bug does not move site too. I was checking whole code and noticed that if i add some paragraphs and blank tables to the about-us.php file everything seems to be ok. This is driving me nuts, any help will be apreciated. PS: in ie6 everyting seems to be ok. PS2: I also noticed this bug on some sites: eg. home.pl when you click on menulink "Praca" it will move horizontaly too. eg2. nazwa.pl when you click on menulink "KONTAKT" it will move too. Anybody? Best Regards! Hi, How to center a html table in a page. I want the table should remain in center even the browser is re-sized. I want to code to work in all browsers.. how can I do this? thanks Hi, I have the following problem i'm trying to solve with HTML: I have a simple table with 3 columns. I want the table to have a 100% width of the screen. Furthermore the center column must ALWAYS have a width of 1000. The left and right column should just be there too fill the gaps up if you have a wider screen than 1000. Setting these left/right columns to width "100%" doesn't work because than it would just make the left column fill up the space and the right column will have a width of 0. How can I solve this? Some example could would be highly appreciated Thanks, betonboor Not a major programmer but I needed to make a website. I am having a problem with my website where I have 5 pages, same structure, built with tables, all tables centered. In IE the tables align center on each page. But in Firefox --- 3 of the pages are different, lining up about 10 pixels left of center. Does anyone know how I can fix this problem? I have browsed around other sites as well and many of them have this problem. Any advice would be greatly appreciated. I know tables are horrible but thats all I know/can learn. Hi, Yesterday, I wasted a couple hours trying to center the Paypal button inside a form inside a table. You can see it near the bottom of this page: http://www.jesussaidfollowme.org/new...t-theology.htm Do you know how to solve my puzzle? Thank you, Greg hi, i would like to know if its possible to place a table background image on top of the td color within that table... example he www.tomesrabold.com/levy/thingstodo.html I would like the image at the bottom to be on top of the yellow bar at left. The image at the bottom is the background to the entire table, while the left bar is the background color to the td. How/where can I add a background color to this table? thanks. Code: <TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TR>
<TD><font class=tbody>
<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">
<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>
<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>
<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>
</td></tr></table></td></tr></table></td></tr></table></form>
<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"> <a href="?action=login"> Home</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername"> Contact Us</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone5.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div>
</font>
</TD>
</TR>
</TABLE>
Hi, I have searched the forums for an answer to this question, but I couldn't find anything that solves my problem. I have designed a site in Dreamweaver. http://www.dirt-e-riders.com In IE 6 and IE 7 it shows correctly, but in firefox the backgound image for my table doesn't show. In effect I have two main tables, each sized at 100% width. Table 1 is at the top of the page and contains a bg. in jpg format Table 2 is just below that and also contains a bg. in gif format I didnt make the bg for table1 a gif cause the quality is too poor. The bg for table1 does not show, but the bg for table 2 does. I have already tried to read the bg from my CSS with no repeat but it does the same. Could someone please help me. I'm new to web design. Your help will be greatly appresiated. Thanks I'm new to the forum and hope i'm asking in the right place. I have modified some code to break one image into seperate images and display them at different places on a page, but i would like to use one of the images as a background to a table, below is the code (excluding javascript) to seperate one item that i've called Logo and show it on it's own; <body onload="crop('images/New_Logo.png', 'Logo', 0, 0, 960, 99); > <div id="Logo" style="width:960px; height:99px; margin-bottom:20px;"></div> I've tried different variations to show as background but it wouln't work, i was thinking along the lines of <table background="Logo"> .... </table> |
|||||||