www.webdeveloper.com
Results 1 to 12 of 12

Thread: Div Help

  1. #1
    Join Date
    Oct 2005
    Posts
    232

    Div Help

    Alright, I am big on using tables personall but I have run into trouble with a script I am using, conflicting with tables, so I can't scroll with them. Could somebody please tell me if it is possible (and if so how) to recreate this using divs? Thanks.

    Code:
    <table width="454" align="left"><tr align="left"><td>Name</td><td>Member Group</td><td width="180">Ascociations</td><td>Contact</td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=5">Spartan</a></td>
    <td><a href="">Black Hand</a></td>
    <td width="180"><a href="admin.php">Admin</a>, <a href="management.php">Management</a></td>
    <td><a href="mailto:spartan@thedarkbrotherhood.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=845">Torment</a></td>
    <td><a href="">Black Hand</a></td>
    <td width="180"><a href="admin.php">Admin</a>, <a href="management.php">Management</a></td>
    <td><a href="mailto:torment@thedarkbrotherhood.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=75">Khamul</a></td>
    <td><a href="">Black Hand</a></td>
    <td width="180"><a href="management.php">Management</a>, <a href="level.php">Level Design</a>,<a href="game.php">Game Design</a></td>
    <td><a href="mailto:rie_petersen54@hotmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=93">Fenbab</a></td>
    <td><a href="">Speakers</a></td>
    <td width="180"><a href="creative.php">Creative Design</a></td>
    <td><a href="mailto:tonilalali@msn.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=435">Aracondal</a></td>
    <td><a href="">Speakers</a></td>
    <td width="180"><a href="admin.php">Admin</a>,<a href="creative.php">Creative Design</a></td>
    <td><a href="mailto:aracondal@gmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=117">Cliffworms</a></td>
    <td><a href="">Speakers</a></td>
    <td width="180"><a href="level.php">Level Design</a>, <a href="game.php">Game Design</a></td>
    <td><a href="mailto:mr__legault@hotmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=356">Rubberchrist</a></td>
    <td><a href="">Speakers</a></td>
    <td width="180"><a href="sound.php">Sound Design</a></td>
    <td><a href="mailto:adambaumeister@yahoo.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=1916">Tasty</a></td>
    <td><a href="">Speakers</a></td>
    <td width="180"><a href="testing.php">Beta Testing</a></td>
    <td><a href="mailto:seangreen2@gmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=1321">Guy</a></td>
    <td><a href="">Brotherhood</a></td>
    <td width="180"><a href="admin.php">Admin</a>, <a href="game.php">Game Design</a></td>
    <td><a href="mailto:guy_misampbell@hotmail.co.uk">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=29">Sabotender</a></td>
    <td><a href="">Brotherhood</a></td>
    <td width="180"><a href="graphic.php">Graphic Design</a></td>
    <td><a href="mailto:masterbezz@hotmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=138">Ferris</a></td>
    <td><a href="">Brotherhood</a></td>
    <td width="180"><a href="creative.php">Creative Design</a></td>
    <td><a href="mailto:ferris.m@gmail.com">Email</a></td></tr>
    
    <tr align="left"><td><a href="http://www.thedarkbrotherhood.com/sanctuary/index.php?showuser=322">D-Katana</a></td>
    <td><a href="">Brotherhood</a></td>
    <td width="180"><a href="creative.php">Creative Design</a></td>
    <td><a href="gordon.shure@gmail.com">Email</a></td></tr>
    
    </table>

  2. #2
    Join Date
    Aug 2006
    Posts
    167
    i supposed its better to use tables for your content. do you have a link to the page or the source code for it + the code for the script that is causing the problem. and sorry but what do you mean by can't scroll with them
    ______________
    __________

    ______________
    __________

    ______________
    __________

  3. #3
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Do you mean something like this?
    http://www.imaputz.com/cssStuff/bigFourVersion.html

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  4. #4
    Join Date
    Oct 2005
    Posts
    232
    I have used several scripts and styles to allow scrolling without scrollbars (because they /really/ don't work with the site). The way it is set up, you can scroll with the mouse wheel, or by clicking on the text and using the up/down arrows. If I use tables in my main content then the scrolling does not work in Firefox, at least, not for the content area that uses tables.

    Here is the page where I have set up the table (it is not finished, I stopped when I realized that I had this problem): http://www.vvclans.com/db/contact.php

    P.S.
    Quote Originally Posted by KDLA
    Do you mean something like this?
    http://www.imaputz.com/cssStuff/bigFourVersion.html

    KDLA
    No, unfortuneatly not like this, I cannot use the table attribute anywhere within my main data.
    Last edited by bmass; 08-09-2006 at 09:12 AM.

  5. #5
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    You can do this with floats, and then create a wrapper div with a max-height (Fx) and height (IE) setting, with an overflow property set to scroll.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  6. #6
    Join Date
    Oct 2005
    Posts
    232
    Alright how do I do that? And will that still allow me to use the invisible scrollbars?

  7. #7
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Code:
    #wrapper {
    height: ###px; /* fill in desired height */
    max-height: ###px; /*same here */
    overflow: scroll;
    width: 99%;
    border: 1px solid red;}
    #column1 {
    float: left;
    width: 33%;
    margin: 0;
    }
    #column2 {
    width: 33%;
    margin: 0;
    }
    #column3 {
    float: right;
    width: 33%;
    margin: 0;
    }
    Code:
    <div id="wrapper">
    <div id="column1">
    ...
    </div>
    <div id="column3">
    ...
    </div>
    <div id="column2">
    ...
    </div>
    </div>
    You'll want to tweak the values, but this will get you started.

    KDLA
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  8. #8
    Join Date
    Oct 2005
    Posts
    232
    Cool thanks, and do I just use a new <div id='wrapper'> for each new row?

  9. #9
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Depends on where you want the scrollbar - a scrollbar per row, or a scrollbar for the entire table. Either way, it will work.
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  10. #10
    Join Date
    Oct 2005
    Posts
    232
    Is there anyway to do the entire table without using any scrollbar? The only reason I need to use divs is because the <table> property messes up the scrolling, I just need to recreate the table.

  11. #11
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    Leave out the height, max-height, and overflow properties.
    I must have misunderstood your request. This might work better:
    (Code edited)
    Code:
    #wrapper {
    width: 99%;
    border: 1px solid red;}
    .row {
    clear: both;
    display: block;
    width: 100%;
    }
    .column1 {
    float: left;
    width: 33%;
    margin: 0;
    }
    .column2 {
    width: 33%;
    margin: 0;
    }
    .column3 {
    float: right;
    width: 33%;
    margin: 0;
    }
    Code:
    <div id="wrapper">
    <div class="row">
    <span class="column1">Person 1's Name</span>
    <span class="column3">Person 1's Email</span>
    <span class="column2">Person 1's Info.</span>
    </div>
    <div class="row">
    <span class="column1">Person 2's Name</span>
    <span class="column3">Person 2's Email</span>
    <span class="column2">Person 2's Info.</span>
    </div>
    </div>
    KDLA
    Last edited by KDLA; 08-09-2006 at 06:29 PM. Reason: Errors in coding
    FYI
    * My screen resolution is set at 1680x1050
    * I'm accessing your site through a T1 line
    * I'm probably viewing it using Firefox (unless browser is specified)

  12. #12
    Join Date
    Oct 2005
    Posts
    232
    Thank you very very much. That was exactly what I was looking for, I really appreciate it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles