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
    USA
    Posts
    6,176
    Do you mean something like this?
    http://www.imaputz.com/cssStuff/bigFourVersion.html

    KDLA

  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
    USA
    Posts
    6,176
    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

  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
    USA
    Posts
    6,176
    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

  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
    USA
    Posts
    6,176
    Depends on where you want the scrollbar - a scrollbar per row, or a scrollbar for the entire table. Either way, it will work.

  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
    USA
    Posts
    6,176
    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

  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

"

"

X vBulletin 4.2.2 Debug Information

  • Page Generation 0.17742 seconds
  • Memory Usage 2,967KB
  • Queries Executed 13 (?)
More Information
Template Usage (34):
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (5)bbcode_code
  • (1)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (12)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (12)postbit
  • (12)postbit_onlinestatus
  • (12)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates