...
PDA

Trying to divide a <td> using <div>'s and failing

nablen
03-06-2009, 12:07 AM
My problem:
I want to divide my <td> into three sections horizontally using only <div> or other html commands. As you and see from my page: Nablenpage.com/music there are three catagorys: Techno, Rock, Punk. i want them to be seperated horizontally. I also have borders on right now so you can see the <td> and <tr> divisions. Iv tryed everything i know, if you could help, or point me in right direction that would be great!

Heres my code:




<?php
include("variables.php");
?>
<html>
<title><?php echo $header ?></title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="img/style.css" />
</head>
<body bgcolor="3d3737">
<center>
<table border="1" cellspacing="0" cellpadding="0" width="1200" height="1000">
<tbody><tr height="5%">
<td id="topleft" width="4%">
</td><td id="mid" width="12%">
<a href="http://xyz.freelogs.com/stats/n/nablen/" target="_top"><img border="0" alt="hit counter dreamweaver" src="http://xyz.freelogs.com/counter/index.php?u=nablen&s=a" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://xyz.freelogs.com/counter/script.php?u=nablen></script>
<br><a style="font-size:12" href="http://www.freelogs.com/" target="_top"></a>
</td>
<td width="80%" id="mid">
<form action="http://www.google.com/cse" id="cse-search-box">
<div align="right">
<body text="green">
<b>
<big>
Welcome to Nablenpage.com music section! Feel free to browse the music!
</big>
</b>
</body>
<input type="hidden" name="cx" value="015142564998557832108:0bkyjmffqww" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</td>
<td width="4%" id="topright"/>
</tr>
<tr height="50%">
<td width="4%" id="sidebar"/>
<td width="12%" id="sidebar" style="text-align:center; vertical-align:top">
<a href="http://nablenpage.com">
<img src="img/button_home.gif"/>
</a><br />
<a href="http://nablenpage.com/phpBB3/">
<img src="img/button_forum.gif"/>
</a><br />
<a href="http://meebo.com">
<img src="img/button_meebo.gif"/>
</a><br />
<a href="http://nablenpage.com/pandora">
<img src="img/button_pandora.gif"/>
</a><br />
</td>
<td width="80%">
<div style="position:fixed; width:33.3%; align:left;">
<img src="img/button_techno.gif"/>
<br />
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer"/>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
<div style="position:fixed; width:33.3%; align:right;">
<img src="img/button_rock.gif"/>
<br />
</div>
</div>
<div style="position:fixed; width:33.3%; align:right;">
<img src="img/button_punk.gif"/>
<br />
</div>
</td>
<td width="4%" id="sidebar"/>
</tr>
<tr height="40%">
<td width="4%" id="sidebar"/>
<td width="12%" id="sidebar"/>
<td width="80%"/>
<td width="4%" id="sidebar"/>
</tr>
<tr height="5%">
<td width="4%" id="bottomleft"/>
<td width="12%" id="mid">
<!-- Site Meter -->
<a href="http://sm5.sitemeter.com/stats.asp?site=sm5nablen" target="_top">
<img src="http://sm5.sitemeter.com/meter.asp?site=sm5nablen" alt="Site Meter" border="0"/></a>
<!-- Copyright (c)2006 Site Meter -->
</td>
<td width="80%" id="mid"/>
<td width="4%" id="bottomright"/>
</tr>
</center>
</body>
</html>





And if its really an easy fix, i apologize ahead of time, i simply dont know where to start diagnosing the problem.

-Nablen
nablen
03-06-2009, 12:09 AM
To make it alittle clearer i put spaces in where i think the problem zone is:



<?php
include("variables.php");
?>
<html>
<title><?php echo $header ?></title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="img/style.css" />
</head>
<body bgcolor="3d3737">
<center>
<table border="1" cellspacing="0" cellpadding="0" width="1200" height="1000">
<tbody><tr height="5%">
<td id="topleft" width="4%">
</td><td id="mid" width="12%">
<a href="http://xyz.freelogs.com/stats/n/nablen/" target="_top"><img border="0" alt="hit counter dreamweaver" src="http://xyz.freelogs.com/counter/index.php?u=nablen&s=a" ALIGN="middle" HSPACE="4" VSPACE="2"></a><script src=http://xyz.freelogs.com/counter/script.php?u=nablen></script>
<br><a style="font-size:12" href="http://www.freelogs.com/" target="_top"></a>
</td>
<td width="80%" id="mid">
<form action="http://www.google.com/cse" id="cse-search-box">
<div align="right">
<body text="green">
<b>
<big>
Welcome to Nablenpage.com music section! Feel free to browse the music!
</big>
</b>
</body>
<input type="hidden" name="cx" value="015142564998557832108:0bkyjmffqww" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</td>
<td width="4%" id="topright"/>
</tr>
<tr height="50%">
<td width="4%" id="sidebar"/>
<td width="12%" id="sidebar" style="text-align:center; vertical-align:top">
<a href="http://nablenpage.com">
<img src="img/button_home.gif"/>
</a><br />
<a href="http://nablenpage.com/phpBB3/">
<img src="img/button_forum.gif"/>
</a><br />
<a href="http://meebo.com">
<img src="img/button_meebo.gif"/>
</a><br />
<a href="http://nablenpage.com/pandora">
<img src="img/button_pandora.gif"/>
</a><br />
</td>











<td width="80%">
<div style="position:fixed; width:33.3%; align:left;">
<img src="img/button_techno.gif"/>
<br />
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer"/>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
<div style="position:fixed; width:33.3%; align:right;">
<img src="img/button_rock.gif"/>
<br />
</div>
</div>
<div style="position:fixed; width:33.3%; align:right;">
<img src="img/button_punk.gif"/>
<br />
</div>
</td>















<td width="4%" id="sidebar"/>
</tr>
<tr height="40%">
<td width="4%" id="sidebar"/>
<td width="12%" id="sidebar"/>
<td width="80%"/>
<td width="4%" id="sidebar"/>
</tr>
<tr height="5%">
<td width="4%" id="bottomleft"/>
<td width="12%" id="mid">
<!-- Site Meter -->
<a href="http://sm5.sitemeter.com/stats.asp?site=sm5nablen" target="_top">
<img src="http://sm5.sitemeter.com/meter.asp?site=sm5nablen" alt="Site Meter" border="0"/></a>
<!-- Copyright (c)2006 Site Meter -->
</td>
<td width="80%" id="mid"/>
<td width="4%" id="bottomright"/>
</tr>
</center>
</body>
</html>


-nablen
Fisher
03-06-2009, 12:46 AM
If I'm looking at it correctly, you have position fixed on the 3 divs, and a width of 33%.

Get rid of the fixed position and add float:left to their styles. That will put them all beside each other.
Excavator
03-06-2009, 12:49 AM
Hello again nablen,
The fact that your struggling a bit with this would indicate your pretty new to coding. I can't help but think that, since your just learning...why not start out learning the correct way to do it?
That's what I did. I was lucky enough when I first started to have someone show me how to position elements using floats and margins so I never bothered to learn tables and, because of that, never had to UNlearn using tables for layout.
I've already pointed out the link about tables in my sig for you.

Have a look at a demo with a plain container centering 3 divs - http://nopeople.com/CSS/3%20equal%20divs/index.html there is a back button at the top of that page that links to the whole list of demos - who knows...may get you started in the right direction.
nablen
03-06-2009, 01:34 AM
Excavator, thank you for all your help, fisher you too.

first looking at the page you gave me Excavator is very usful, but its in CSS, and i would like a html solution. If im missreading sry im learning.

Fisher: i tryed float left for all of them, but it wouldnt push them over, i was able to make one float right and it moved over, but i still have a problem with 2 in one spot. I put on my webpage: nablenpage.com/music and thats what i got.


this is my code i made for that section for now:

<div style="float:left">
<img src="img/button_techno.gif"/>
<br />
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer"/>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
<div style="float:left">
<img src="img/button_rock.gif"/>
<br />
</div>
</div>
<div style="float:right;">
<img src="img/button_punk.gif"/>
<br />
</div>


-nablen
Fisher
03-06-2009, 01:36 AM
You have one of your </div> tags out of place. It's putting the flash and the other div into the first.

Try:<div style="float:left; width:33.3%;"> <img src="img/button_techno.gif"/><br />
<div id="flashPlayer">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
</div>
<div style="float:left; width:33.3%;"><img src="img/button_rock.gif"/><br />
</div>
<div style="float:left; width:33.3%;"><img src="img/button_punk.gif"/><br />
</div>
nablen
03-06-2009, 01:43 AM
I did exactly as you said fisher and this is what i got x.x : nablenpage.com/music



exact code:

<div style="float:left; width:33.3%;"> <img src="img/button_techno.gif"/><br />
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer"/>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
<div style="float:left; width:33.3%;"><img src="img/button_rock.gif"/><br />
</div>
<div style="float:left; width:33.3%;"><img src="img/button_punk.gif"/><br />
</div>
Fisher
03-06-2009, 01:48 AM
You have a closing tag on the flashplayer div.
In fact, when you use swfobject, the script should be outside the tag completely.
One last time:
<div style="float:left; width:33.3%;"> <img src="img/button_techno.gif"/><br />
<div id="flashPlayer"></div>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject("playerMultipleList.swf", "mymovie", "295", "200", "7", "#FFFFFF");
so.addVariable("autoPlay","no")
so.addVariable("playlistPath","playlist.xml")
so.write("flashPlayer");
</script>
</div>
<div style="float:left; width:33.3%;"><img src="img/button_rock.gif"/><br />
</div>
<div style="float:left; width:33.3%;"><img src="img/button_punk.gif"/><br />
</div>
nablen
03-06-2009, 01:52 AM
It worked, thank you fisher! greatly appreciated :D.
Camron467
03-06-2009, 02:57 AM
For future notice, use the code tags to put code in, it makes it much easier on the rest of us.

Thanks,
Camron

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum