|
HTML - Layering Tables Over Eachother?
Is that possible? Not nesting tables in a table but rather having a table overlap or cover an existing table?
Similar TutorialsI have two divs next to eachother. The first DIV has a float:left with width:100%; The second DIV has float:right with width:200px; But for some reason when the left div gets to width it pushes the right div down. http://i43.tinypic.com/2u5q6ol.jpg What i really want is that the left DIV jumps to a newline when it reaches the right DIV instead of the right edge of my screen. Anyone any idea how to do this?? HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Blaat</title>
</head>
<body>
<div style="float:left; width:100%; margin-right:-220px; border:#000 1px
solid;">
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj ffffffffff fffffffffff fffffff
fffffffff ffffffffff fffffffffff ffffffffff fffffffffff fffffffffffff
ffffffffff
<div style="float:right; width:200px; border:#000 1px solid;">
hhhhhhhhhhhhhhhh
</div>
</div>
</body>
</html>
Hello I have a problem getting my div boxes beside eachother This is what i want to do: Here is my css: Code: body {background-image:url(images/backround.png);
margin:0px;
/************************* ID's *************************/
}
#whitesite_middle
{
background-image:url(images/BgX.png);
width: 841px;
margin-left: auto;
margin-right: auto;
}
#whitesite_bottom
{
background-image:url(images/bunn.png);
width: 841px;
height: 21px;
margin-left:auto;
margin-right:auto;
}
#box
{
padding-left: 4px;
background-repeat:repeat
}
#box_bottom
{
background-image:url(images/Blue/buttom_blue_hoyre.png);
width: 500px;
height: 20px;
margin-left:50px;
margin-right:auto;
}
#box_top
{
background-image: url('images/login%20top.png');
width: 264px;
height: 26px;
}
#banner
{
background-image:url(images/banner.png);
width: 841px;
height: 148px;
margin-left:auto;
margin-right:auto;
}
#top_bar
{
background-image:url(images/top.png);
width: 841px;
height: 24px;
margin-left:auto;
margin-right:auto;
}
#whitesite_middle_2
{
background-image:url(images/BgX.png);
width: 841px;
margin-left: auto;
margin-right: auto;
}
#box_top_orange
{
background-image:url(images/login%20top.png);
width:264px;
height:26px;
margin:0px;
margin-left:50px;
margin-right:auto;
float:right;
}
#box_middle
{
background-image:url(images/Blue/center_blue_hoyre.png);
width:500px;
margin:0px;
margin-left:50px;
margin-right:auto;
background-repeat:repeat
}
#hvit_bar
{
background-image:url(images/hvit-bar.png);
width:841px;
height:26px;
margin-left:auto;
margin-right:auto;
}
#box_top_blue
{
width:500px;
height:26px;
margin-left:50px;
margin-right:auto;
}
#box_orange_middle
{
background-image:url(images/login%20center.png);
width:264px;
margin-left:50px;
margin-right:auto;
}
#content_middle
{
float:right;
margin-left:25px;
margin-right:auto;
}
The source for the html is on the site: http://habbxtra.net/hjem.php Thanks for any help! I have a web site with videos on and I take a frame from the video to use as a thumbnail. I don't want to have to put the "play" button on every thumbnail when editing the picture so I want to have a transparent play button. As you can see, I've done this on www.hucknallwarriors.co.uk/tv/. The play button is a separate, transparent image over the thumbnail. My issue is to do with the sizing of the image. I want to upload ONE high res image for the thumbnail which can be used in other areas of the web site so I want to be able to specify the size it's displayed on screen. As you can see on "http://hucknallwarriors.co.uk/category/warriors-tv/page/2/" the item at the top has a high res thumbnail and most of the picture is chopped off. It only shows the top left corner. The code I am using now is: Code: <a href="<?php the_permalink() ?>"><img style="THUMBNAIL URL HERE" src="http://hucknallwarriors.co.uk/playpng.png" alt="Play the video"></a><br /><b><?php the_title(); ?> Does anyone know a better code that I can specify both the top and bottom layer (the top layer being the play button) and have the bottom layer resized to my request? I did add height="???" and width="???" (replacing ??? with numbers, of course) but that made absolutely no difference at all. Thank you so much for reading this and I hope someone out there has the answer Hey all, I just finished up this semester at college and had an Intro to Web Development class. So, I got the site I made live because it was for my families business. The site is www.kceonline.com What I'm having trouble with is getting things to re size and fit right when the window is either shrunk or if viewed on a smaller resolution monitor. If you view the site, I got the Contact image and the small slide show to go under the main content. I then added the bigger picture of our cars and it won't shrink with the content, the same happens on the Links page and with the E-mail form on the Contact Us page. I was also wondering if anyone had some suggestions on what to do on the Gallery page to make it look more professional on smaller screens because it causes the rows to become smaller. I designed the site on a 19" wide so this problem wasn't really apparent to me at the time and I don't think I can figure it out alone. I messed with the Z-index for a while before my presentation but couldn't figure it out. Now that I have it live, my Grandma, who owns the company, is wanting to show it to people. Any help is appreciated lots. 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 i have tables.. http://teamsquirrels.net when one expands it goes under or over the other i want it to push the other one across how can i do this??? When i make a table, it will goto the next line, for example if i want an image on the left of my table, the image will go first, and thenthe table will automatically be displayed on the next line. Is there any way i can fix this is CSS, HTML, Javascript, anything? If you need more info on my problem i could take a print screenn... Cheers! Here's an example - I want the images to be at either side of the table, so theres no space... 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... 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 Any idea on how I can get a table with rounded edges? hi all, i'm having problems with tables i want it to look like this: http://www.exsilentio.org/apa/test/want.jpg here's the site, i don't know why they're not next to eachother, and at one point they were, but when i made the window smaller they weren't next to eachother...i also tried making a big table to put those tables in and it didn't work...thanks Code: <html>
<head>
<title>top</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
#table1, #table2 {
float: left;
margin-left: 0.5em;
margin-right: 0.5em;
}
html, body {scrolling: auto;}
</style>
</head><center>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="992" height="151" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="images/top_01.gif" width="992" height="109" alt=""></td>
</tr>
<tr>
<td>
<img src="images/top_02.gif" width="143" height="18" alt=""></td>
<td>
<img src="images/top_03.gif" width="145" height="18" alt=""></td>
<td>
<img src="images/top_04.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_05.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_06.gif" width="144" height="18" alt=""></td>
<td>
<img src="images/top_07.gif" width="19" height="18" alt=""></td>
<td>
<img src="images/top_08.gif" width="253" height="18" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/top_09.gif" width="992" height="24" alt=""></td>
</tr>
</table></center>
<center><table id="big1" width="973" border="0" cellpadding="0" cellspacing="0"><td>
<table id="table1" width="720" border="0" cellpadding="0" cellspacing="0">
<td align="left"><img src="images/bottom_01.gif" width="720" height="7" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="720" height="4" alt=""></td></tr></table>
<table width="19" cellpadding="0" cellspacing="0"><td> <img src="images/spacer.gif" width="19" height="5" alt=""></td>
<table id="table2" width="253" cellpadding="0" cellspacing="0" border="0">
<td align="right"><img src="images/bottom_03.gif" width="253" height="5" alt=""></td>
<tr><td align="center"bgcolor="d6d6d6">dsafasdf<Br><br>asfdasdfsd<br></td><tr>
<tr><td align="center"><img src="images/bottom_07.gif" width="253" height="4" alt=""></td></tr></table>
</table>
</body>
</html>
site I have my table all finished and everything.. it looks nice, except the fact that my words.. some of them are cut off. anyone know how to fix this? I have tried making my table smaller in width than my "div", but that still doesn't work. If you could please help me I would greatly appreciate it, and I would like to thank you in advance. Code: <table width="400" border="2" class="pay" id="pay">
<col class="itemsDesc" />
<colgroup span="2" class="firstCol" />
<colgroup span="1" class="feeCol" />
<thead>
<tr>
<th>Lessons</th>
<th>Per Term</th>
<th>Per Year</th>
</tr>
</thead>
<tbody>
<td>30 minutes</td>
<td>$600</td>
<td>$1100</td>
</tr>
<tr>
<td>45 minutes</td>
<td>$850</td>
<td>$1600</td>
</tr>
<tr>
<td>60 minutes</td>
<td>$1100</td>
<td>$2100</td>
</tr>
</tbody>
</table>
and my css: Code: * {margin: 0px; padding: 0px}
body {font-size: 14px;
font-family: 'Lucida Grande', Verdana, sans-serif}
table.pay {table-width: 400px; border: 10 px outset rgb(68, 76, 169)}
table.pay thead {background-color: ivory; border: 1px}
table.pay col.firstCol {background-color: rgb(255, 255, 192)}
table.pay col.feeCol {background-color: rgb(232,232,255)}
table.itemsDims {width:12%;}
im supposed to create a heading row group, a body row group, and column groups containing one column element belonging to the firstCol class, and another column element belonging to the feeColumns class which should span two columns in the web table. was just wondering where im going wrong here since when i do my css.. the background colors or no changes seem to be applied to the columns or the headers (thead) i dont know if this belongs in here, but i was wondering if you could please tell me the code for the rounded square outlines around the text like this http://profile.myspace.com/index.cfm...endid=35605078 any help will be appreciated Is there anyway that in Internet Explorer I can stop it auto-resizing? I think that is the problem I'm having, I'm not sure though. The problem is this: http://i37.photobucket.com/albums/e8...66/problem.png The cell on IE adds onto the top and bottom of the image for seemingly no reason. The image on the broken cell is a link as well. I tried making the image the background of the cell and having a transparent image as the link over the top but it brings up the same problems. There's no border around the image and no cell padding. The code used for that specific cell is: Code: <TD height="74" style="background-repeat:no-repeat;" COLSPAN=2><a href="MYLINK" target="_blank"><img src="http://i37.photobucket.com/albums/e85/pxi666/seashell/seashell_layout_09.png" width="411" height="74" border="0"></a></TD> Any ideas on what could be causing this? Thanks a lot in advance, Ollie Can someone give me a tutorial on tables please? I would very much apprieciate it. I don't really know anything on tables so please start basic. I hope to see a response soon. Ok I'm trying to get a page to look like this I did it with images, so theres no text. So there's 4 images basically I tried to do a table like this Quote: <table border="0"> <tr> <td><a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10&zenid=c1961df3cad20f9854cb47801f 85ee4d"><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-1.png" alt="" /></a></td> <td><img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-2.png" alt="" />, <img src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/picture-3.png" alt="" />, <a href="http://milkshakekicks.com/kicks/index.php?main_page=product_info&cPath=1&products_id=10 amp;zenid=c1961df3cad20f9854cb47801f85ee4d"><img style="border: 1px solid grey;" src="http://milkshakekicks.com/blog/wp-content/uploads/2009/01/battle_homepage.png" alt="" width="209" height="179" /></a></td> </tr> </table> but got this Should I not do this with tables? 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 |
|||||||