|
HTML - Making Table Positions Static
Hello,
I have a website constructed with tables since I haven't had the time to learn CSS. When the browser window gets resized, the table disappears and moves below my ad (aligned left). I want my table to NOT move even if the browser window is resized. I am able to achieve this by "converting tables to layers" but I don't like how it makes my site look and it messes up the format of some of my content. The code is: <table width="800" border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"><div align="center"><a href="index.htm"><img src="images/banner.png"width="800" height="120" border="0"></a> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td colspan="5"><div align="center"> </div></td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td><div align="center"><a href="index.htm"><img src="buttons/home.png" alt="Home Page" width="67" height="15" border="0"></a></div></td> <td><div align="center"><a href="videos.htm"><img src="buttons/videos.png" alt="Videos" width="85" height="15" border="0"></a></div></td> <td><div align="center"><a href="gallery.htm"><img src="buttons/gallery.png" alt="Gallery" width="107" height="15" border="0"></a></div></td> <td><div align="center"><a href="about.htm"><img src="buttons/about.png" alt="About" width="80" height="15" border="0"></a></div></td> <td><div align="center"><a href="contact.htm"><img src="buttons/contact.png" alt="Contact" width="108" height="15" border="0"></a></div></td> </tr> <tr> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> <td width="160"><div align="center"></div></td> </tr> <tr bgcolor="#FFFFFF"> <td height="223" colspan="5"><p class="style2"> </p> <p class="style3"> </p> <p></p></td> </tr> </table> Thank you! Similar Tutorialshello everyone. I'm a newbie at this HTML stuff. I've made my first webpage and everything is working fine. I added some .SWF files and placed them where I wanted using <div> coding. My problem is whenever you resize the browser window, the flash movies move with it, they "float" over the rest of the page. How do I make them stay static when you resize the window? Could someone please help me with this problem? I appreciate it very much. Ok, this page looked all screwed up with firefox and IE so I made tables. However, as you can see, I need those bottome pics/tables, underneath the top banner and to the right of the left banner. Any ideas how I do that? http://www.bringbackwendell.com/new2.html I want to make a table with two rows But i want to make sure that the data in the 2nd column is always align to the right.....Like this Data1 Data2 Data2 Data3 And not <tr><td>Data1<\td><td I want this side of the row to always be align to the right..>Data1</td></tr> Data2Data3 I know this is easy...But i am not quite sure how to do.... I want "Marriage Encounter Talks" to appear under Sunrise room from 3:00 - 5:00 and Ohio Book Resale Setup to appear under Mountain View Room from 2:00 - 5:00. How can I do that ? This is my code. PHP Code: <table border="1" cellspacing="3" cellpadding="5" width="75%" height="100%" summary="This table contains Tuesdays reservations"> <caption align="bottom">All times listed in central time</caption> <thead> <tr> <th>Time</th> <th>Sunrise Room</th> <th>Mountain View Room</th> <th>Arbor Hall</th> <th>Mitchell Theater</th> <th>Gold Room</th> <th>Blue Room</th> <th>Green Room</th> </tr> </thead> <tr> <th>8:00</td> <td rowspan="5">Marriage Encounter</td> <td rowspan="2">Breakfast Club of Ohio</td> </tr> <tr> <th>8:30</th> </tr> <tr> <th>9:00</th> </tr> <tr> <th>9:30</th> </tr> <tr> <th>10:00</th> </tr> <tr> <th>10:30</th> </tr> <tr> <th>11:00</th> <td rowspan="2"></td> <td rowspan="2">Ohio Conference of Librarians<td> </tr> <tr> <th>11:30</th> </tr> <tr> <th>12:00</th> <td rowspan="3">Marriage Encounter Luncheon</td> </tr> <tr> <th>12:30</th> </tr> <tr> <th>1:00</th> </tr> <th>1:30</th> </tr> <tr> <th>2:00</th> <td rowspan="5">Ohio Book Resale Setup</td> </tr> <tr> <th>2:30</th> </tr> <tr> <th>3:00</th> <td rowspan="5">Marriage Encounter Talks</td> </tr> <tr> <th>3:30</th> </tr> <tr> <th>4:00</th> </tr> <tr> <th>4:30</th> </tr> <tr> <th>5:00</th> </tr> </table> Hi I need to make a table to display data(obviously), but i only want to use divs. It needs 11 columns and a flexible amount of rows as i will be adding to it. I attempted to make one myself, but when i end and div tags, it goes straight to a new line. I dont want to use tables, it needs to be valid XHTML 1.0 transitional and cross-browser compatible. Can anyone help me? Thanks in advance, Chris Hi everyone, I am working on a table for a future website and I need some help. I need to make the text at the top vertical, as in taking the word and turning it 90 degrees to the left. The best way for me to explain this is to show u the problem/test page. http://aquariachat.com/bigchangesare...chartfeb23.php I am making the chart/table in a simple html editor if that information is of any use. Thanks a lot, Drew Im having an issue in some browsers with making a whole cell in a table a link. I have simplified my code to that below for ease of troubleshooting here. Using the code below, and assuming you have two image files named AlphaThumb.jpg (approx 80x100 px) and Alpha.jpg (A larger version of AlphaThumb.jpg) in a folder with the html and css files I achieve the desired result in IE7, IE8 & in Lunascape6 (Ver 6.3.4). However Firefox (Ver 3.6.13), Safari (Ver 5.0.3) & Opera (Ver 11.00) all have the same issue, in that the link doesn't work. If anyone has any ideas I'd be grateful for some input. Regards, Stoney ------------- The Html code ------------- <html> <link rel="stylesheet" type="text/css" href="Stylesheet1.css" /> <body> <table border="1" class="aggregatestable"> <tr> <a href="Alpha.jpg" target=_blank> <td class="productalpha"> </td> </a> <td class="productname">Alpha</td> <td>Some random text about our product Alpha.</td> </tr> </table> </body> </html> ------------ The css code ------------ td.productname { width: 100px; height: 80px; } td.productalpha { background-image: url(AlphaThumb.jpg); background-repeat: no-repeat; background-position: center; width: 100px; height: 80px; cursor: pointer; } Hi there I am trying to make a template whereby the whole table fills 100% height of the browser window. My problem is, is that i have a nested table containing 2 rows and 2 tds. The first row and td needs to be aligned to the top and the 2nd needs to align to the bottom - and to the bottom of the browser window. This is my code so far: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Homepage</title> <style type="text/css" media="all"> body { margin:0; padding:0; height:100%; } table { border-collapse:collapse; border-spacing:0; } td { margin:0; padding:0; } html { height:100%; } </style> </head> <body > <table width="100%" cellpadding="0" cellspacing="0" style="height:100%;"> <tr> <td width="50%" style="background-image:url(leftheader_image.gif); background-repeat:repeat-x; background-position:top right;"></td> <td width="980" height="244" style="background-image:url(header_image.jpg); background-repeat:no-repeat; background-position:top left; vertical-align:top;"><img src="spacer.gif" width="980" height="1" alt="" /></td> <td width="50%" style="background-image:url(rightheader_image.gif); background-repeat:repeat-x; background-position:top left;"></td> </tr> <tr> <td width="50%" style="background-image:url(leftbody_image.jpg); background-repeat:repeat-x; background-position:top right; background-color:#fbefd5; vertical-align:bottom;" ><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td width="50%" height="119" style="background-image:url(leftgrass_image.gif); background-repeat:repeat; background-position:top right; vertical-align:bottom;"></td> </tr> </table></td> <td width="980" bgcolor="#fbefd5" style="background-image:url(body_image.jpg); background-repeat:repeat-x; background-position:top left; background-color:#fbefd5; height:100%; vertical-align:top;"><table width="100%" style="height:100%" cellpadding="0" cellspacing="0"> <tr> <td valign="top"><p>content</p></td> </tr> <tr><br /> <td width="980" height="118" style="vertical-align:bottom; background-image:url(grass_image.gif); background-position:top left; background-repeat:repeat-x;"> </td> </tr> </table></td> <td width="50%" style="background-image:url(rightbody_image.jpg); background-repeat:repeat-x; background-position:top left; vertical-align:bottom; background-color:#fbefd5; "><table width="100%"> <tr> <td width="50%" height="118" style="background-image:url(rightgrass_image.gif); background-repeat:repeat; background-position:top left; "></td> </tr> </table></td> </tr> </tr> </table> </body> </html> What i need is for the left grass image, the grass image and the right grass image all aligned to the bottom of the browser window, but all these images need to be set as backgrounds as i need the left and the right to repeat on the x and footer links will be overlayed to the grass image in the middle. The result i am getting at the moment is IE7 displays 100% further than the height of the browser window, resulting in a scroll and the grass image does not align to the bottom along with the left and right grass. This is near the top directly beneath the content td. In Firefox, all images are aligned to the bottom, but the grass image is pushed further down than the left and right and so is not lined correctly, resulting in a slight scroll. The left and right grass images are aligned at the bottom of the browser window, before needing to scroll to see the rest of the middle grass. I know that's a lot to take in, does it make sense? Thanks in advance. Hi I'm designing a simple website in NVU, but although it displays correctly in NVU and Firefox, for some reason the tables aren't centred in Internet Explorer (they stay on the left side of the browser). The site is at www.saturdaynightmusical.com Any tips on why this is displaying differently in IE would be greatly appreciated! Many thanks for your time. Hi guys, I'm a newb here, and I'm trying to create a table with a fixed position like this one http://www.adachiu.me/ I have made one, but if I resize the window it will move into the table and look all wrong. This website that I have provided does not do that; it will go up and down with the page when you scroll, and if you resize than it will not move into the table. Does anybody know how to fix this? Thanks Sean Ok so I have a html list with images on the left of each list item, but I want to have the imagine in-line with each link. Here is what it looks like at the moment: And here is the code: Code: <li> <img src="http://www.aidtheboss.com/images/paper&pencil_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;"/> <a href="http://www.truefootballmanager.com/2010/03/football-manager-2011.html">Wonderkids List</a> </li> <li> <img src="http://www.aidtheboss.com/images/users_two_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/11/football-manager-2010-free-players.html">Best Players</a> </li> <li> <img src="http://www.aidtheboss.com/images/folder_add_48.png" class="left_float" height="30px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/01/you-play-football-manager-2009-too-much.html">Ultimate FM2011 Downloads</a> </li> <li> <img src="http://www.aidtheboss.com/images/questionmark_48.png" class="left_float" height="20px;" width="20px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2008/10/football-manager-2009-interview-with.html">How to Play FM Online</a> </li> <li> <img src="http://www.aidtheboss.com/images/globe_48.png" class="left_float" height="23px;" width="23px;" style="padding-right:5px; padding-bottom:7px;" /> <a href="http://www.truefootballmanager.com/2009/11/football-manager-2010-kits.html">Football Manager Live</a> </li> Any help on what needs to be added in would be appreciated! I have managed to create a div to insert my banner But I have another problem: when I clicked to see my favorites the div banner which I inserted moves, is there anyway to make the div code static? I have tried adding the following code: HTML Code: #adsense-container
{
position: static;
But once this code has been uploaded the banner is re-positioned to the left and is unable to use the X / Y axis to position the it. Can anyone help? Please i would like to know how i can create a side menu that would actually be independent of the content of the page. What i normally do is insert a table and split it into two, one for the menu and the other for the content, but i always struggle with setting the menu t align properly with the content, since many at times the content is always more than the menu, it would bring the menu lower than where i want it to be, please is there anyway i cant create a menu that is not going to move irrespective of the length on the content section. I am working on this page http://www.thenewmonarchs.com/home.html If you scroll down (depending on your screen's resolution) you will see a little white bar with links over it located on the left-hand side of the page. I could not for the life of me find any help on google, so I came here. Hopefully this isn't too ambitious of a first post... I need to find a way to get that white bar (which is an image) and the links over it to be static on the page. If there is any help I can get, I would greatly appreciate it. hello, im wondering if any1 knows a css, java or html script that can help me out i would like to have a background move with my screen so if my site visitor scrolls down to read more the background moves with them, i looked on google for a bit but couldnt find 1then i saw this forum thought maby some1 might be able to help me out here Thanks Hi I'm a little confused about the bottom "application" bar on facebook. It appears to be static, meaning it does not "reset" whenever you visit a new page (if you have a chat session going on, for example). The only way I can see this is coded, is by placing the bar in a div on top of the content in an iframe. The source code is kindda confusing, so I can't really figure this one out. Anybody know if this is in fact the case? Best regards sorenchr Hello All, This is my first post to HTMLforums, and I apologize if it makes me look like a buffoon. I have been working with Adobe Dreamweaver 5 for about six months now, teaching myself as I go, and am beginning to get the hand of basic coding. I am, at present, creating a website and cannot figure out how to create a Flash Banner (that would have picture on the left, logo in the center and a media player on the right; though I will build that in a separate program) that is always present so that the music playing doesn't restart. Basically, the links in the Banner would be "Home", "About", "Tour" and so on, and I would want, when someone clicks on the link, for the banner to remain but the content below to change to that page (all of those pages are currently separately HTML pages with the same code for the heading and the CSS stylesheet). I assume that for the link element I would need to incorporate some kind of _self tag with the link, but I do not know where to place it. Also, i do not know how to "anchor" the banner so that it is always there and not reloading every time someone changes pages. Any insight or advice would be much appreciated! Thanks, and best to everyone, BarabasKid Hey guys, Im relatively new to html, although i have a good amount of college programming experience. What im trying to do is create a static menu (home, about us, products etc.) so that every sub page of the site can reference it without needing the menu code as part of that sub page. This is for obvious reasons: if i want to add a menu item, i dont want to have to add its link to the 'home' page, the 'products' page etc. Hopefully this makes sense. If this has been posted before, i would gladly take a link. I tried searching, but am unsure of the proper query (because i barely know how to explain what i mean in english lol) Any help is just awesome. Thanks, Travis p.s. Im no good with CSS; if there is a way of avoiding them that'd be great. This is hobby, and i will learn if necessary but would prefer not to. Hello. I'm a newbie here. I've been asked to design a web site for a club I'm involved with. Unfortunately they have purchased a cheap hosting package, so I have no Java/JSP, no PHP and no MySql. Pure static pages only. Sigh. I've found a nice looking template I can use - has nice drop down menus for navigation etc. It doesnt use frames. Now, since I want to navigate between half a dozen content pages, it seems that each of my pages has to contain all the common stuff - the menu, sidebars, etc. I'd kill for an <import src="..."/> tag :-) So, are there any design patterns that will allow me to achieve templating of all the menus and common code? Alternatively, are there any code-time coding tools that will generate run-time static pages based on templates? Any advice welcome. Thanks. imo. Please, how to make static web page? What best to make it in? I have to put in logo at top then text? Will it show same in browsers? Please help |
|||||||