HTML - Outline Around The Tables
You will actually have to look at the site: http://www.avenuemall.com/
I need to know how to create the gray lines around the tables. I hope that explains it well enough. Whenever I do tables there is 2 lines outlining the table (boxing it in) or I put "0" in the border and there is none. It looks like each table is outlined by gray, I need to know how to do that. I looked at the coding, but I just got more confused. Is there are a quick easy answer for this? Thank you, ~eDee Similar TutorialsHello I thought my site was good to go until I viewed it on a pc. I took a look at it in IE on a pc and noticed outlines around the graphic nav. Do I need to add a bit of code somewhere? I'm attching a screenshot and below is my url to the site. thanks! http://www.bru.us.com html: <!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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/global/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="nav/design.gif"/><br> <a href="tg_moodboard.html"class="catlink">TowerGroup</a><br> <a href="cbuy_moodboards.html"class="catlink">Click&Buy</a><br> <a href="mca_home.html"class="catlink">MCA</a><br> <a href="incretin_home.html"class="catlink">Incretin Forum</a><br> <a href="fifa.html"class="catlink">FIFA World Cup</a><br> <a href="psr.html"class="catlink">PSR</a><br> <a href="baraclude_banner.html"class="catlink">Baraclude</a><br> <a href="forest.html"class="catlink">Forest</a><br><br> <IMG SRC="nav/other.gif"/><br> <a href="divided.html"class="catlink">Divided</a><br> <a href="india_photos.html"class="catlink">Photography</a><br><br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br> <a href="contact.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(1)" onMouseOut="out(1)"></a><br> </div> <div id="subnav"> <ul> <li><a href="tg_moodboard.html">Mood Boards</a></li> <li><a href="tg_direction_a.html">Home A</a></li> <li><a href="tg_direction_b.html">Home B</a></li> <li><a href="tg_sublevel.html">Sublevel</a></li> </ul> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> css: body { font-family: sans-serif; background-color: #ffffff; font-size: 11px; margin: 0px; } #description { background: #ffffff; font-family: sans-serif; padding: 10px; line-height: 14px; margin: 0px 10px 10px 20px; } #portfolio { background: #ffffff; padding: 3px; margin: 0px 10px 10px 10px; } #header { position: absolute; top: 0px; background-color: #ffffff; margin: 20px; height: 80px; padding: 10px; } #subnav { background: #ffffff; padding: 0px; margin: 0px 0px 0px 0px; line-height: 10px; } #navigation { background: #ffffff; padding: 10px; margin: 0px 10px 10px 20px; } h1 { font-size: 16px; font-family: sans-serif; line-height: 24px; color: #000000; margin: -1px 0px 0px 0px; padding:0; } p { margin: 0px; padding: 0px; } a:link { font-family: sans-serif; font-size: 11px; color: #5b5b5b; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; text-decoration: none; line-height: 11px; font-family: arial, serif; } a:hover{ font-family: sans-serif; color:#C1A62E; font-size: 11px; text-decoration: none; background-color: line-height: 11px; font-family: arial, serif; } a.catlink:link { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; font-family: arial, serif; } a.catlink:visited { font-family: sans-serif; color: #5b5b5b; font-size: 11px; line-height: 14px; margin:0; padding:0; } a.catlink:hover { background-color:#C1A62E; font-family: sans-serif; color: #C1A62E; font-size: 11px; line-height: 14px; margin:0; padding:0; } .navheader1 { color: #C1A62E; font-size: 12px; line-height: 19px; margin:0; padding:0; } .navheader2 { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } a1:link { color: #5b5b5b; font-size: 11px; line-height:17px; font-family: Georgia, "Times New Roman", Times, serif; margin: 20px 20px 30px 0px; padding:0; } ul { margin: 0 0px 0 0; padding: 17px 10px 10px 2px; } li { display: inline; margin: 0 8px 0 0; padding: 0 0 0 10px; background: url(images/global/icon_asterisk.gif) no-repeat center left; } #description { position: absolute; top: 125px; left: 140px; width: 270px; } #navigation { position: absolute; top: 125px; width: 110px; } #subnav { height: 30px; position: absolute; top: 125px; margin-left: 475px; width: 3200px; } #portfolio { position: absolute; top: 160px; margin-left: 475px; width: 3400px; } Hi Friends, I have placed my SWF file in my HTML page and i upload the file in server. That time i saw the outer line in my html file. I cannt click first time, if suppose click second time, that time only processing. So how can i solve the problem. Any required JS or other some. Vjn Hi Friends, I am using mailer in html but i cannot remove the outline link of the image. For example i using like this:- <a style="outline:none; border:none; border-style:none;" href="http://www.google.com/"><img src="images/logo.png" /></a> how can i remove the linked image outline. i am waiting for yours reply. If do you have the solutions send me your reply this id vjn_23@yahoo.co.in Vijayan M How do you do an Outline that expands when u click a item? it would look something like this -Chapter 1 -Chapter 2 -Chapter 3 and then when you click on... lets say Chapter 1 it will expand into -Chapter 1 -Chapter 2 -subsection -Chapter 3 Thanks! I have a set of images on my webpage in a grid that are links to other pages. ON safari these images apear 'normal', but on firefox they have a grey outline them, it's something to do with them being links but i'm not sure how to sort it out. Any ideas? Thanks Dyfrig I have a set of images on my webpage in a grid that are links to other pages. ON safari these images apear 'normal', but on firefox they have a grey outline them, it's something to do with them being links but i'm not sure how to sort it out. Any ideas? Thanks Dyfrig Website - http://www.jakobmetzger.com/misc/sites/kindlingeffects/ CSS - http://www.jakobmetzger.com/misc/sit...stylesheet.css The CSS that is related to the rollover images in under /*-- Features Rollover Image--*/ Whenever someone clicks one of the features on that page in firefox it leaves a grey box around it. Is there a way I can remove that box or somethign I can do to hide it? Hello I'm new to doing websites but recently I have come to understand that particularly Internet Explorer has lots of issues! I realized this after a design that I had evolved mainly testing between Firefox and Safari just went retarded in Internet Explorer, and now I'm not sure what to expect. Can anyone outline the main issues that set IE apart? And whether there is a way to circumvent them? Because for everything I've tried so far Firefox Safari and Omniweb all behave predictably and relatively the same. Thanks- Frustrated Fishpaws I'm sure a lot of you know about the css hack for FF to show nofollow links on a page. I have a question about it. On my site I have some links with two "rel" tags, one of which is a nofollow tag. For some reason the firefox doesn't show the nofollow tag. Does anyone know anything about this? It is ok to have two rel tags? I want to know that my nofollow links are working! I have a problem that is driving me crazy. I am not an expert by any means with html, but I can usually figure these things out, and this one has stumped me. For my site, I have an .png image that is an outline for what I want my advertisement to be located within. Below is the banner: location: Code: http://www.topsocomsites.com/skins/darktheme/ad-outline.png How do I use HTML to insert my javascript ad code that displays my banners to be located in the empty space of the above outline? Thanks in advance for your help! Hi Normally, when you have more than one table in your code, the tables will be placed one under each other. Example: <table> ... </table> <table> ... </table> When you want the tables to be placed next to each other, you need to set the align attribute. Example: <table align="left"> ... </table> <table align="left"> ... </table> BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables". Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag? Thanks for your help praiser Hey everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code. How I want it to look: How it looks now: I want the tables to line up at the top and re-size according to each other so they're always aligned at the top. Code: coming in next 2 posts Hello everyone. Im making a website for my company and i need a little help. I made a table and tried to put a fixed width on it so then I could put text in it. Problem is, -when i type with no spaces ex aaaaaaaaaaaaa the text just keeps going forever instead of dropping down to the next line Also Ive been having some other problems -if I zoom in to like 200% on IE my text doesnt stay centerd with the page, it stays centered with the screen -And if I zoom in really far in Fire Fox my background stays centered with the screen instead of the page I made the page using photoshop and exported as html to get me started so ill post the whole script. Its not a whole lot. --------------------------- <html> <head> <title>K2 Layout 3-0</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-image: url(images/bg2.jpg); background-repeat: repeat-y; background-position: center; background-color: #0d141e; } body,td,th { color: #FFF; } </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (K2 Layout 3-0.psd) --> <center> <table id="Table_01" width="1024" height="225" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4"> <img src="images/K2-Layout-3-0_01.gif" width="93" height="225" alt=""></td> <td colspan="6"> <img src="images/K2-Layout-3-0_02.gif" width="840" height="166" alt=""></td> <td rowspan="4"> <img src="images/K2-Layout-3-0_03.gif" width="91" height="225" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/K2-Layout-3-0_04.gif" width="714" height="1" alt=""></td> <td rowspan="2"> <img src="images/K2-Layout-3-0_05.gif" width="126" height="43" alt=""></td> </tr> <tr> <td> <img src="images/K2-Layout-3-0_06.gif" width="71" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_07.gif" width="211" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_08.gif" width="141" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_09.gif" width="163" height="42" alt=""></td> <td> <img src="images/K2-Layout-3-0_10.gif" width="128" height="42" alt=""></td> </tr> <tr> <td colspan="6"> <img src="images/K2-Layout-3-0_11.gif" width="840" height="16" alt=""></td> </tr> </table> <table id="Table_02" fixed width="830" border="0" cellpadding="0" cellspacing="0"><tr><td> Text Here Text Here Text Here Text Here </td></tr> </table> </center> <!-- End Save for Web Slices --> </body> </html> -------------------- Any help at all appreciated Thanks Has anyone heard of this software?: http://www.table2css.com/ I've been told that my site at http://www.ColoradoProcessServers.net was done with tables, and they're late 90's era stuff, which is why I'm having such trouble trying to get rid of white space above and below the row of logos on my page. Or would it be very hard for me to learn how to do a proper job of this myself, without attending college? ( don't have time or money ) Or might it not cost much to pay someone to work with me? I could send them code from the style.css and each page, and they could send it back converted without the tables, then I test it? Hey htmlforum and members can someone help me out with a carousel for image *small_blank.png*..(just start me off) thanx... -tikki- PHP Code: <tr> <td colspan="3" rowspan="2"> <img src="imagesxx/small_blank.png" width="234" height="83" alt=""></td> <td> <img src="imagesxx/spacer.gif" width="1" height="74" alt=""></td> </tr> i have the script needed http://www.dynamicdrive.com/dynamici.../carousel2.htm Hi, im relatively new to html and I need help with creating tables for making a proffesional site for a practice assignment. Iv'e attached an image of the way I would like the site to look... I also need help with one other thing, when the mouse pointer is moved over the buttons at the top id like them to display a drop down menu of sub categories. Thanks in advance Hi everybody, I am kind of a newbie and i have a "big" problem which i can't solve. I created some menu tables on the left side of my site, but I cannot seem to align them to the top of the table and they keep moving to the middle. On one version of this site i "pushed" them upwards with another 100% height invisible table from the bottom but it doesnt seem to work on an other version. Please help me! How could I align the tables to the top inside of another table? Thanks a lot for your help! If I was hardly understandable I'm sorry, I created a little example table: <table height=400 width=600 border=3 bordercolor=#000000><tr> <td width=20% border=3 bordercolor=#000000><table> <td border=3 bordercolor=#000000 align=center><table><tr><td><table border=1 bordercolor=#000000><tr><td><table align=center><tr><td> Menu 1</td></tr></table></td></tr><tr><td><table><tr><td></td><td> <a href="">Button 1</a></td></tr></table></td></tr><tr><td><table> <tr><td></td><td><a href="">Button 2</a></td></tr></table></td></tr> </table></td></tr></table><table><tr><td><table border=1 bordercolor=#000000><tr><td><table align=center><tr><td>Menu 2</td> </tr></table></td></tr><tr><td><table><tr><td> </td><td><a href="">Button 1</a></td></tr></table></td> </tr><tr><td><table><tr><td></td><td> <a href="">Button 2</a></td></tr></table></td></tr></table></td></tr> </table></td> </table></td> <td width=80% border=3 bordercolor=#000000 valign=top align=center>How could I "stick" the menu tables on the left side to the top, like this text on the right side with valign=top? </td></tr><table> Is there a way to put together tables so they look like this: hey everyone, pretty simple question i am supposing, how do i stop the text in my tables from wrapping to fill the space inside the cell. The text in each cell flows over into a second line, and I end up getting writing that has huge spaces between each word, to try and fill out the line. I still want two lines, just normal sized spaces between words if that makes sense... EDIT: Title is supposed to be "Tables or CSS" I know, I know - HTML Tables are the spawn of Satan - however, I have a tabbed content box made from html/css/js - when you click on a tab, the content (underneath) changes accordingly. My questions is, I will be having a static list, with the corresponding answers (to the data in the list) targetting from an Excel Driven database - don't ask me why, just what my boss wants... Here is what I have so far: Quote: <TABLE CELLPADDING="2" CELLSPACING="2"> <TR><TD>Sponsor ID:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Client Number:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Sponsor Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Brand Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Status:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Tier:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Sponsor Phone:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Phone Number:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Support Email Address:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Parent Name:</TD><TD>FILLER TEXT</TD></TR> <TR><TD>Misdirect Scripting:</TD><TD>FILLER TEXT</TD></TR> </TABLE> He wants the content separated in a "ruled" look, like Excel - however, I didn't know if it would be cool to just use HTML - or if there is another way to do this - It's not going out on the internet (it's going on our Intranet via SharePoint) so I'm not worried about conjunctions and standards (not using HTML tables), etc. Just need to know if there is another way to separate the info with a solid black line - horizontal/vertical between the cells - that looks better than an HTML table border. Thanks! |