Cells floating

xogg · November 30, 2011, 10:50pm

Hi!

I’m having quite some trouble with a web I’m trying to develop.
It’s a mixture of css, javascript and html. I’m having a fading background (javascript), and the content (html tables imported from photoshop) driven by div tags. But the problem is that the table’s cells are floating in browser due to Position:relative.
I’ve changed it to position: absolute, and also written the exact dimensions: width and height in px, but it still won’t work!

Sorry if I’ve posted this in the wrong forum division!

Thanks,
xogg

sdt76 · November 30, 2011, 10:55pm

Hello xogg,
You have html table layout driven by DIV tags? How does that work? Do you mean a hybrid site? If you post a link, it’s much more helpful. Or at least cut and paste your HTML and CSS.

xogg · November 30, 2011, 11:14pm

Sorry, I’m not quite familiar with all the terms, still a newbie. Below is the full code of the page.

Thanks!
xogg

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Smooth fullscreen background slideshow in jQuery | Jasper Rooswinkel | www.jasperrooswinkel.com</title>

<!-- 
Easy fullscreen background slideshow in jQuery
By: Jasper Rooswinkel - www.jasperrooswinkel.com
Feel free to use and distribute but this notice must stay intact 
-->

<style>
	body, html {
		table-layout:fixed;
		top:0;
		left:0;
		max-height:768px;
	}
	
	#page_overlay {
	width:1025px;
	height:768px;
	position:absolute;
	left:0;
	z-index:2;
	top: 0;
	}
	
	#page_content {
		position:absolute; /* This is very important! */
 		z-index:2;
		;

	}

	
	img#bg {
		/* Stretch background */
		position:fixed;
		top:0;
		left:0;
		height:100%;
		width:100%;
		z-index:0;
	}
	
	#bg_grid {
		position:fixed; /* This is very important! */
		top:0;
		left:0;
		height:3027px;
		width:2035px;
	    background: url(bg.png) repeat;
			
		/* Display on top of background */
		z-index:1;
	}

	#image_description {
		position:fixed; /* This is very important! */
		right:-150px;
		bottom:60px;
		width:140px;
		height:38px;
		background-color:#dddddd;
		filter:alpha(opacity=80);
		-moz-opacity:0.8;
		-khtml-opacity: 0.8;
		opacity: 0.8;
		z-index:2;
		padding:5px;
		font-size:10px;
		line-height:12px;
		color:#333333;
	}
	
	a, a:link, a:visited, a:active {
		text-decoration:none;
		color:#A62F00;
	}
	
	a:hover {
		text-decoration:underline;
	}
body {

}
</style>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">
	var aImages = new Array();
	var aURL = new Array();
	var aArtists = new Array();
	var iPrev = -1;
	var iRnd = -1;
	
	aImages[0] = "images/bg.png";


	$(document).ready(function() {
	
		/* Define the function that triggers to fade in the background as soon as the image has loaded */
		$("img#bg").load(function()
			{
				/* Fade in during 3 seconds */
				$("img#bg").fadeTo(3000,1);
				
				/* Animate the picture description during 1 second */
				setTimeout(function() { $("#image_description").animate({right: '+=150'}, 1000) }, 1000);
			
			
			}			
		)
	
		/* Start the slideshow one second after the page is ready */ 
		setTimeout(LoadImages,1000);
		
    });

    function LoadImage(iNr)
	{
	
		/* Assign the new image to the background */
		$("img#bg").attr("src", aImages[iNr]);
 		
 
    };
    
    function LoadImages()
    {
    	
    	/* Select a random image number and make sure this is not equal to the previous image */
    	while(iPrev == iRnd)
    	{
    		iRnd = Math.floor(Math.random()*aImages.length);
    	}
    	
    	/* Show the selected image */
    	LoadImage(iRnd);
    	
    	iPrev = iRnd;
    	
    };
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" content="">
</head>
<body>

<!-- This is the main page -->
<div id="page_overlay">
	<div id="page_content">
		<table id="Table_01" max-width="1025" max-height="768" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="20">
			<img src="images/hyrje_shqip_01.png" width="23" height="768" alt=""></td>
		<td rowspan="3">
			<img src="images/hyrje_shqip_02.png" width="39" height="130" alt=""></td>
		<td rowspan="2">
			<img src="images/hyrje_shqip_03.png" width="137" height="88" alt=""></td>
		<td colspan="11">
			<img src="images/hyrje_shqip_04.png" width="825" height="82" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="82" alt=""></td>
	</tr>
	<tr>
		<td rowspan="19">
			<img src="images/hyrje_shqip_05.png" width="13" height="686" alt=""></td>
		<td rowspan="7">
			<img src="images/hyrje_shqip_06.png" width="1" height="284" alt=""></td>
		<td rowspan="19">
			<img src="images/hyrje_shqip_07.png" width="15" height="686" alt=""></td>
		<td rowspan="3">
			<img src="images/hyrje_shqip_08.png" width="424" height="49" alt=""></td>
		<td rowspan="3">
			<img src="images/hyrje_shqip_09.png" width="83" height="49" alt=""></td>
		<td rowspan="19">
			<img src="images/hyrje_shqip_10.png" width="12" height="686" alt=""></td>
		<td rowspan="10">
			<img src="images/hyrje_shqip_11.png" width="1" height="356" alt=""></td>
		<td rowspan="19">
			<img src="images/hyrje_shqip_12.png" width="13" height="686" alt=""></td>
		<td rowspan="3">
			<img src="images/hyrje_shqip_13.png" width="130" height="49" alt=""></td>
		<td rowspan="3">
			<img src="images/hyrje_shqip_14.png" width="90" height="49" alt=""></td>
		<td rowspan="19">
			<img src="images/hyrje_shqip_15.png" width="43" height="686" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="6" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/hyrje_shqip_16.png" width="137" height="42" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="42" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="3">
			<img src="images/hyrje_shqip_17.png" width="176" height="172" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="4">
			<img src="images/hyrje_shqip_18.png" width="507" height="235" alt=""></td>
		<td colspan="2">
			<img src="images/hyrje_shqip_19.png" width="220" height="141" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="141" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="7">
			<img src="images/hyrje_shqip_20.png" width="220" height="167" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td rowspan="14">
			<img src="images/hyrje_shqip_21.png" width="39" height="466" alt=""></td>
		<td><a href="galeria_anglisht.html" target="_self"><img src="images/hyrje_shqip_22.png" alt="" width="137" height="57" border="0"></a></td>
		<td>
			<img src="images/spacer.gif" width="1" height="57" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/hyrje_shqip_23.png" width="137" height="42" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="7" alt=""></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="images/hyrje_shqip_24.png" width="1" height="402" alt=""></td>
		<td colspan="2">
			<img src="images/hyrje_shqip_25.png" width="507" height="15" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="15" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="10">
			<img src="images/hyrje_shqip_26.png" width="507" height="240" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="20" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/hyrje_shqip_27.png" width="137" height="41" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="37" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/hyrje_shqip_28.png" width="1" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="8">
			<img src="images/hyrje_shqip_29.png" width="220" height="329" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="3" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/hyrje_shqip_30.png" width="137" height="28" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td rowspan="6">
			<img src="images/hyrje_shqip_31.png" width="1" height="316" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="18" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/hyrje_shqip_32.png" width="137" height="34" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="34" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/hyrje_shqip_33.png" width="137" height="42" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="42" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/hyrje_shqip_34.png" width="137" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/hyrje_shqip_35.png" width="137" height="208" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/hyrje_shqip_36.png" width="507" height="147" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="147" alt=""></td>
	</tr>
</table>
	</div>
</div>


<!-- The container for the background-image -->
<img id="bg" style="display:none" />

<!-- The container for the grid on top of the background-image -->
<div id="bg_grid">
</div>

</body>
</html>

sdt76 · November 30, 2011, 11:48pm

zogg, since you are a newbie, I hope you don’t mind me saying that you should never lay out your pages with tables. The best way to lay out pages is with CSS styling and free your layout of tables. Yes, it does mean that you don’t have the ease of automation out of Photoshop, but in the long run, you can do things with CSS only that you couldn’t do with tables, like position whole images, rather than slicing them up, and being able to overlap images and so on, and that’s just the design advantage, nevermind accessibility setbacks that table layouts cause etc. etc.

Having said all that, can I ask, are you attempting to center your table? What do you mean by “floating in the browser?”

ralphm · November 30, 2011, 11:53pm

Hi xogg. Welcome to SitePoint.

Unfortunately, the code you posted just presents a blank page if we run it in our borwsers, because much of the content (images mainly) aren’t available.

Any chance you can post a live link?

xogg · December 1, 2011, 8:11am

Hey guys!

Thanks a lot for your responses.
@ sdt76: Well I’m not quite familiar yet with CSS, so I’ll just have to stick with photoshop for a while! I’m actually trying to push my table on the top left of the browser, but for some reason, the table extends its height to 100% (rather then stay to it’s original height:760px), and this I think is making the cells to float on the browser in order to achieve the 100% of it; but yet I can’t find which piece of code is allowing the table to do so.

@ ralph.m: thanks!
I just uploaded it: http://rrenja.org/New%20Folder/index1.html

or in http://rrenja.org/New%20Folder/index2.html
(please don’t mind the table alignment here, and I haven’t changed the root folder for it’s content), the background image will show only as long as the table height. I’'m not being able to make the bg img to show fullscreen.

Thanks again,
xogg

ralphm · December 1, 2011, 8:50am

Sorry xogg, I’m not understanding what the issue is. The background shows fulscreen for me on Firefox.

Just checking—but you will eventually turn those words into real text, I trust? It’s not viable to leave them as images.

sdt76 · December 1, 2011, 4:28pm

I can’t see the issue either. For me, on Mac/Chrome I am able to see the table at a set height with a full background. What browser are you testing in, where you are seeing this?

xogg · December 1, 2011, 5:44pm

I’m testing it on Chrome, IE and Firefox, but attached is the img how the web should look (I’ve just changed the bg a bit in this version), and when opened in browsers, the links on the left are floating (if it’s showing the same thing to you, then the text should be inside the boxes with the lines deleted, not lower or higher), and yes, I’m gonna change the text with embedded word htms so the users can change them easily.

Thanks a lot!
xogg

Edit: Added img of how its showing at my screen (Untitled.jpg)

sdt76 · December 1, 2011, 7:39pm

It looks to me that the problem is with the image here: http://rrenja.org/New%20Folder/bg.png

It needs more space between the top and where the box begins. It looks like it needs about 50px space between the top and where the large box begins to align the image with the text with that box.

xogg · December 1, 2011, 9:49pm

yeah, but the buttons on the left are still floating, and the title (“kush”) is far from the text. In the original design, it’s supposed to be right above it.
But if this one doesn’t work out, then is there a chance to just make the bg of this link go fullscreen rather then have the height of the table: http://rrenja.org/New%20Folder/index2.html

Thanks a lot,
xogg