Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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.

  • Users who have thanked Fisher for this post:

    nablen (03-06-2009)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    You have one of your </div> tags out of place. It's putting the flash and the other div into the first.

    Try:
    Code:
    <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>

  • Users who have thanked Fisher for this post:

    nablen (03-06-2009)

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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>

  • #8
    Regular Coder
    Join Date
    Jan 2009
    Posts
    316
    Thanks
    7
    Thanked 92 Times in 91 Posts
    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:
    Code:
    <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>

  • Users who have thanked Fisher for this post:

    nablen (03-06-2009)

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    13
    Thanks
    6
    Thanked 0 Times in 0 Posts
    It worked, thank you fisher! greatly appreciated .

  • #10
    New Coder
    Join Date
    Feb 2009
    Location
    Texas
    Posts
    56
    Thanks
    6
    Thanked 3 Times in 3 Posts
    For future notice, use the code tags to put code in, it makes it much easier on the rest of us.

    Thanks,
    Camron
    Free PSD to XHTML/CSS conversion - Dimby.net
    Which doctype should I use?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •