Div layout to replace table usage

Question

newbie14 0 Posting Pro

10 Years Ago

I have googling a lot about this debate to move from table to div. What are your advices here to move or not. I have below my codes building layout using div. The issue I find with div for example below codes which I am referring to a template . MY issue is that on different resolution it looks different there is not like fix size. For eg. in some resolution its just nice and some it shrink. What is the best solution to ensure it stay in every resolution which I know if I would go back to table it will work but that is not advisable I guess.

<body>


    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                 <img alt="Logo" src="img/logo20.png" /> 

                <!-- theme selector starts -->
                <div class="btn-group pull-right theme-container" >

                    <h5>User Name:  my demo</h5>
                    Logout
                </div>



            </div>
        </div>
    </div>  

        <div class="container-fluid">
        <div class="row-fluid">

            <!-- left menu starts -->
            <div class="span2 main-menu-span">
                <div class="well nav-collapse sidebar-nav">
                    <ul class="nav nav-tabs nav-stacked main-menu">
                        <li class="nav-header hidden-tablet">Vtst1</li>
                        <li><a class="ajax-link" href="test1.php"><i class="icon-home"></i>  <span class="hidden-tablet">Test1</span></a></li>
                        <li><a class="ajax-link" href="test2.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">Test2</span></a></li>

                        <li class="nav-header hidden-tablet">Admin</li>
                        <li><a class="ajax-link" href="addM.php"><i class="icon-home"></i>  <span class="hidden-tablet">Master</span></a></li>
                        <li><a class="ajax-link" href="gridU.php"><i class="icon-eye-open"></i>  <span class="hidden-tablet">UD</span></a></li>


                        </ul>

                </div><!--/.well -->
            </div>
                        <!--/span-->
            <!-- left menu ends -->



            <div id="content" class="span10">
            <!-- content starts -->


            <div>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Home</a> <span class="divider">/</span>
                    </li>
                    <li>
                        <a href="#">Forms</a>
                    </li>
                </ul>
            </div>


            <div class="row-fluid ">
                <div class="box span6">
                    <div class="box-header well" data-original-title>
                        <h2>Add Master</h2>

                    </div>
                    <div class="box-content">
                        <form class="form-horizontal">
                            <fieldset>


                              <div class="control-group">
                                <label class="control-label" for="selectError3">Master Type</label>
                                <div class="controls">
                                  <select id="selectError3">
                                    <option>T1</option>
                                    <option>T2</option>
                                    <option>T3</option>

                                  </select>
                                </div>
                              </div>
                              <div class="control-group">
                                <label class="control-label" for="inputSuccess">Master Serial Number</label>
                                <div class="controls">
                                  <input type="text" id="inputSuccess">

                                </div>
                              </div>
                              <div class="form-actions">
                                <button type="submit" class="btn btn-primary">Save</button>
                                <button class="btn">Cancel</button>
                              </div>
                            </fieldset>
                          </form>

                    </div>
                </div><!--/span-->


              <div class="box span6 ">
                    <div class="box-header well" data-original-title>
                        <h2>Active Masters</h2>


                    </div>
                    <div class="box-content">
                        <table class="table table-striped table-bordered  datatable">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>Master Type</th>

                              </tr>
                          </thead>   
                          <tbody>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T111</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                            <tr>
                                <td>1</td>
                                <td class="center">T1</td>
                                <td class="center">T112</td>
                                <td class="center">
                                    <span class="label label-success">Active</span>
                                </td>

                            </tr>
                                                  </tbody>
                         </table>
                    </div>
                </div><!--/span-->


              </div><!--/row-->




                    <!-- content ends -->
            </div><!--/#content.span10-->


            </div><!--/fluid-row-->

web-design

5 Contributors
6 Replies
315 Views
6 Days Discussion Span
Latest Post 10 Years Ago Latest Post by veera100

VeEz commented: Really ! Helped me out Thanks ! +0

hericles 289 Master Poster

10 Years Ago

Which CSS template are you using to do this? I note you have a classes such 'div-fluid' and row-fluid'. Those would imply you are using a fluid layout which would adjust depending on the available screen size.
If you are using a template CSS there probably are classes which define set widths to elements (unless it is only a fluid template).

dany12 13 Light Poster

10 Years Ago

You have a bootstrap 3 template the should work after you insert this between the head tags

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

Hope this helps

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

newbie14 0 Posting Pro · Answer 1 · 2014-07-06T15:00:09+00:00

Dear Dany and Hericles,
                       Yes the template which I am using after doing further study is using bootstrap based. Actually how does fluid works. It is a standard works by itself or we need define it in the css file? Sorry kind of new to these.

oanahmed 0 Light Poster · Answer 2 · 2014-07-06T18:17:47+00:00

newbie14 actually the word

fluid

you and we are referring to here means that the webpage will adjust itself to the resolution. The technique used to make webpages adapt themselves according to the screen size or resolution is called Responsive Web Design. In this context there are classes namely container-fluid, div-fluid, row-fluid,etc. These classes are implementing the Responsive Web Design technique. It(Responsive Web Design) is not a standard thing built in to the HTML and CSS. It(Responsive Web Design) can only be implemented explicitily and by using CSS. Where as the Bootstrap is a web framework that is based on Responsive Web Design and is very popular among the Web Designers' community. This is the reason your web page was adjusting itself to the resolution. To overcome this problem with a simple, easy and little solution is to remove these class and ids as well that are implementing Responsiveness Design.

I hope it helped you alot...
If not, Just ask.....

dany12 13 Light Poster · Answer 3 · 2014-07-06T23:22:03+00:00

Twitter bootstrap is mainly a file with css that applies certain rules to your html.

For those who like to make it more complicated a framework.

That works like this you have a container a fixed one or a fluid one.

The fixed one will scale according to some sets of rules on tablet phones desktops.

The fluid one should scale on any device and look the same on all of them, that's the theory.

So you just use the classes in your html and bootstrap dose the rest.

To understand responsive design you need to understand grids floats css media queries.

One more idea use something to disable jquery animation when you are
on mobile or better yet use css3 and that will give you another
problem no ie 6, 7, 8 support but there is always a way so you use html5shiv.

This is my last post on daniweb

If you need more help ask the others.

Hope this helps you

veera100 0 Newbie Poster · Answer 4 · 2014-07-09T17:38:35+00:00

<div> is best compare with <table>.

the <table> may change the pixel resolution in different browser. But <div> is not change. so the div is the best choice.