Solved

Amount of DIV tags there are not recommended as overkill -

Posted on 2004-10-28
444 Views
Last Modified: 2013-11-19
Hi there,

I wonder if anyone can help.

I have been using Visual Studio.NET and Macromedia Dreamweaver as my 2 editors, .Net for code and DM for positioning and XHTML etc.

I have been positioning DIV tags etc... which dreamweaver allows you to get a hold of and move visually on the screen, once you assign a style sheet and make it Positon: absolute... Excellent!

I have also been playing ASP.NET controls but dreamweaver doesn't allow you to get a hold of those and move them visual so my idea was this..

To put each control i need to position in a DIV Tag with an attached style sheet (external) and then I could just move the DIV tag which would obviously move the control...which I thought was a great idea but then I got a thinking .... One of my pages would technically have around 13 controls on (a advanced search form) so I would have potentially at least 13 different DIV tags ... not to mention my other DIV tags that i use for positioning things like menus etc..

So I figured I would send a message here with regards to weather it was overkill...???

I mean if I was to insert 1 table with 13 cells then I know this has quite a bit of html but the DIV tag would be smaller?????

A little confused with the way I should be doing this with regards to this, tables no probs... but I really so much want to use style sheet posiition (CSS)....

I am only designing for NN 6+ and IE5.5 + anyway... so there is no backward compat. problems as long as I am careful what tags I use within CSS:

Ideas? anybody have any examples I can take a look at to show that it is indeed possible with large amounts of DIV tags ??

Ian
0
Question by:ianinspain
    10 Comments
     
    LVL 49

    Expert Comment

    by:Roonaan
    Can you explain what you actual question is?

    Are divs better than tables when used for layouting: definitely.
    Are divs overkill when only used as containers for controls when positioning could effectively also done on the controls themself: possibly.

    As a resolution you might want to just create templates in dreamweaver and have for example <div id="id1"></div> replaced by your ASP-control. When you make sure you assign the same id to your control as the one originaly assigned to the divtag, you would have both the advantages of ASP controls as the nice drag and drop way of editing html in dreamweaver.

    -r-
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    For the Intranet Apps I work on we go enven further with that idea. Each of our user has their own stylesheet associated with their profile. When we give them a new app they use a "training" window to specify hwo they want the page setup including where they want the controls positioned and stacking order.  It is definitely not overkill.

    Just understand a couple of things.  Absolute positioning makes a page rigid.  To deal with differences in screen resolution, screen size and user preferences, you will need to be able to respond dynamically with scripting.

    Do the stylesheet , and then play with the page using various settings. Find those thngs that are a rendering problem whent he setting change, and decide how you want the controls to respond and be rendered under various conditions.  Then it just becomes a simple matter of writing a little code to manipulate the DOM.  That scripting will not make the page heavy, and will execute almost instantaneously.

    Example:

    <script type="text/javascript">
    function setSearchBox()
    {
    menu=document.getElementById('menu');
    srchBox=document.getElementById('searchBox');
    lPos=menu.offsetLeft+menu.offsetWidth+15;
    tPos=menu.offsetTop;
    srchBox.style.left=lPos+'px';
    srchBox.style.top=tPos+'px';
    }
    onload=setSearchBox;
    onresize=setSearchBox;
    </script>

    That script would insure that the controls in element searchBox are always position relative to the menu at load time, no matter what the resolution is and that on re-sizing the position will be re-calculated.

    If there are a lot of elements that have to be positioned or sized, it might mean 2 or 3 pages of code, but that adds very little overhead to the page.  The big gain it that it give you contro for a rigid presentation, but with fluid response capabilities.  When you start playing with this kind of DHTML approach you find you can really get creative an do just about anything you want.  

    I have an article that plays with some of this for form layout if you have afew minutes it might give some idea of how far you acn take it, and yu will see how simple the code is:

    http://cd-articles.fateback.com/Formsin4.html

    Let me know what additional help can give you.

    Cd&

    0
     

    Author Comment

    by:ianinspain
    Hi COBOLDinosaur,

    wow, great article! Okey dokey, I have been playing around (thats why I am little late in returning)...

    First of all this is the my ORIGINAL idea that I want to put into CSS - thought this would be easier to explain....

    http://www.cuttingedgedesigns.biz/my_aim_with_css.jpg

    Phew, easy with tables but with CSS well I got lost...

    Here is my attempt

    http://www.cuttingedgedesigns.biz/search.aspx     - Don't laugh ... I am doing enough of that <grin>!

    Okey... Basically I took on board the fieldset that was explained in your document

    And then I had a standard Div tag with position absolute called #searchContainer which represent a large square on the screen which is supposed to hold all the controls etc etc i.e Options, Drop Down Lists, Text Labels, the full monty...

    I then have another Div tag position absolute called #optionsContainer which is to hold the CHECKBOXES which are the options for the search, the other things are dropdownlists etc and are not options so hence I created a new Absolute DIV  -- INSIDE the first Div and aligned it near the right hand side of the original div (similar to picture above on link)

    inside the second div called #optionsContainer has the fieldset in there which covers all the options.

    This is where I lost it... <grin>.. It went completley wrong....

    The fieldset doesn't seem to want to stay inside the second Div for some strange reason...

    Also the options inside the Fieldset are not aligned correctly, should I use 2 divs inside the second div so that it aligns .. let me explain

    currently it says ( i use the letter O to resemble the square checkbox icon)

    Front Line Golf O
    Front Line Beach O
    Pool O
    Near Amenities O
    Finished O
    Views O
    Garden O

    where is should be something like this i.e all checkboxes are aligned underneath each other.,...

    Front Line Golf                  O
    Front Line Beach               O
    Pool                                 O
    Near Amenities                 O
    Finished                           O
    Views                              O
    Garden                            O

    all the controls have there own ID i.e. frontLineBeachCheckBox, poolCheckBox, nearAmenitiesCheckBox

    I think I explained most of it here, but instead of making this message really complicated, I am run through the majority... on my reply .. I can try and explain specifics.. Thanks...

    My CSS is in an external style sheet.... but its here for easy reading (below) but of course if you do VIEW SOURCE you can see it all...

    #main
    {
          position: absolute;
          margin-left:auto;
          margin-right:auto;
          margin-top:auto;
          margin-bottom:auto;
          width:300px;
          height:286px;
          left: 312px;
          top: 89px;
    }
    #searchContainer
    {
          position: absolute;
          top: 257px;
          width: 827px;
          height: 312px;
    }
    #optionsContainer
    {
          position: absolute;
          left: 539px;
          top: 19px;
    }


    0
     

    Author Comment

    by:ianinspain
    I also uploaded this

    http://www.cuttingedgedesigns.biz/idea.jpg

    I have sort of ringed the parts that I think should have DIV's with RED

    and the fieldset with blue

    You will notice that there are alot of Red's and one blue..

    Am I on the right lines or completely lost it?

    Ian
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Let me play with it.  I think you are getting the idea.  Let me show you a couple of things you can do.  Be back shortly.

    Cd&
    0
     
    LVL 53

    Accepted Solution

    by:
    I took a simplified version of the page and played with layout using fieldsets.  This will give you some idea of how much you can play with it.  You can move things around and re-arange them easily.  Now make the screen smaller instead of having to scroll across the pieces re-arrange themselves.  Changing font size does not break it either.  Layouts like this work for the user and can me modified easily because the cose is kept simple and clean.

    Cd&


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <!-- saved from url=(0045)http://www.cuttingedgedesigns.biz/search.aspx -->
    <HTML><HEAD><TITLE>Search</TITLE>
    <style type="text/css">
    fieldset {display:block; width:30%; float:left;
              margin-left:10px;border:3px ridge gold;
              }
    legend {font-weight:bold }
    </style>
    </HEAD>
    <BODY>
    <FORM id=Form1 name=Form1 action=search.aspx method=post>
    <DIV id=searchContainer>
    <fieldset>
    <legend>Area:</legend>
    <SELECT id=areaListBox multiple size=8 name=areaListBox>
       <OPTION value=1>Any Area / No Preferences</OPTION>
       <OPTION value=2>001 Inland East</OPTION>
       <OPTION value=3>002 Malaga To Benalmadena</OPTION>
       <OPTION value=4>003 Inland Malaga to Marbella</OPTION>
       <OPTION value=5>004 Fuengirola To Mijas</OPTION>
       <OPTION value=6>005 Mijas Costa</OPTION>
       <OPTION value=7>006 Cabopino To Rio Real</OPTION>
       <OPTION value=8>007 Marbella</OPTION>
       <OPTION value=9>008 Puerto Banus &amp; Nueva Andalucia</OPTION>
       <OPTION value=10>009 San Pedro To Guadalmina</OPTION>
       <OPTION value=11>010 New Golden Mile</OPTION>
       <OPTION value=12>011 Estepona</OPTION>
       <OPTION value=13>012 Inland West</OPTION>
       <OPTION value=14>013 Manilva to Cadiz</OPTION>  
       <OPTION value=15>014 East of Málaga</OPTION>
    </SELECT>
    </fieldset>
    <fieldset>
    <legend>Type:</legend>
    <SELECT id=typeListBox multiple size=8 name=typeListBox>
       <OPTION value=1>Aparthotel</OPTION>
       <OPTION value=2>Apartment</OPTION>
       <OPTION value=3>Apartment Dupl.</OPTION>
       <OPTION value=4>Atico</OPTION>
       <OPTION value=5>Bar</OPTION>
       <OPTION value=6>Bar and Restaurant</OPTION>
       <OPTION value=7>Bar/Bistro</OPTION>
       <OPTION value=8>Business</OPTION>
       <OPTION value=9>Chalet</OPTION>
       <OPTION value=10>Commercial</OPTION>
       <OPTION value=11>Country Home</OPTION>
       <OPTION value=12>Detached Villa</OPTION>
       <OPTION value=13>Duplex</OPTION>
       <OPTION value=14>Duplex penthouse</OPTION>
       <OPTION value=15>Finca</OPTION>
       <OPTION value=16>Freehold</OPTION>
       <OPTION value=17>Garage</OPTION>
       <OPTION value=18>Garden Apartment</OPTION>
       <OPTION value=19>Hostal</OPTION>
       <OPTION value=20>House</OPTION>
       <OPTION value=21>Luxury Penthouse Duplex</OPTION>
       <OPTION value=22>Penthouse</OPTION>
       <OPTION value=23>Penthouse Dupl.</OPTION>
       <OPTION value=24>Plot</OPTION>
       <OPTION value=25>Restaurant</OPTION>
       <OPTION value=26>Ruin</OPTION>
       <OPTION value=27>Semi-Detached</OPTION>
       <OPTION value=28>Studio</OPTION>
       <OPTION value=29>Studio Apartment</OPTION>
       <OPTION value=30>Tapas Bar</OPTION>
       <OPTION value=31>Townhouse</OPTION>
       <OPTION value=32>Under Construction</OPTION>
       <OPTION value=33>Villa</OPTION>
    </SELECT>
    </fieldset>
    <FIELDSET id=optionsFieldset style="text-align:right">
       <LEGEND id=optionsFieldsetLegend>Options</LEGEND>
       Front Line Golf
       <INPUT id=frontLineGolfCheckBox type=checkbox name=frontLineGolfCheckBox>
       <BR>
       Front Line Beach
       <INPUT id=frontLineBeachCheckBox type=checkbox name=frontLineBeachCheckBox>
       <BR>
       Pool
       <INPUT id=poolCheckBox type=checkbox name=poolCheckBox>
       <BR>
       Neat Amenities
       <INPUT id=nearAmenitiesCheckBox type=checkbox name=nearAmenitiesCheckBox>
       <BR>
       Furnished
       <INPUT id=furnishedCheckBox type=checkbox name=furnishedCheckBox>
       <BR>
       Views
       <INPUT id=viewsCheckBox type=checkbox name=viewsCheckBox>
       <BR>
       Garden
       <INPUT id=gardenCheckBox type=checkbox name=gardenCheckBox>
    </FIELDSET>
    <fieldset>
    <legend>Price €:</legend>
    <SELECT id=priceFromDropDownList name=priceFromDropDownList size="6">
       <OPTION value=0 selected>No Min</OPTION>
       <OPTION value=50000.00>&#128;50,000</OPTION>
       <OPTION value=100000.00>&#128;100,000</OPTION>
       <OPTION value=200000.00>&#128;200,000</OPTION>
       <OPTION value=300000.00>&#128;300,000</OPTION>
       <OPTION value=400000.00>&#128;400,000</OPTION>
       <OPTION value=500000.00>&#128;500,000</OPTION>
       <OPTION value=600000.00>&#128;600,000</OPTION>
       <OPTION value=700000.00>&#128;700,000</OPTION>
       <OPTION value=800000.00>&#128;800,000</OPTION>
       <OPTION value=900000.00>&#128;900,000</OPTION>
       <OPTION value=1000000.00>&#128;1 Million</OPTION>
    </SELECT>
    <span style="padding:10px; height:75px;padding-bottom-60px">to</span>
    <SELECT id=priceToDropDownList name=priceToDropDownList size="6">
       <OPTION value=0 selected>No Max</OPTION>
       <OPTION value=50000.00>&#128;50,000</OPTION>
       <OPTION value=100000.00>&#128;100,000</OPTION>
       <OPTION value=200000.00>&#128;200,000</OPTION>
       <OPTION value=300000.00>&#128;300,000</OPTION>
       <OPTION value=400000.00>&#128;400,000</OPTION>
       <OPTION value=500000.00>&#128;500,000</OPTION>
       <OPTION value=600000.00>&#128;600,000</OPTION>
       <OPTION value=700000.00>&#128;700,000</OPTION>
       <OPTION value=800000.00>&#128;800,000</OPTION>
       <OPTION value=900000.00>&#128;900,000</OPTION>
       <OPTION value=1000000.00>&#128;1 Million</OPTION>
    </SELECT>
    </fieldset>
    <fieldset style="text-align:center">
    <legend>Beds:</legend>
    <SELECT id=totalBedsDropDownList name=totalBedsDropDownList size="6">
       <OPTION value=0 selected>Any</OPTION>
       <OPTION value=1>At least 1</OPTION>
       <OPTION value=2>At least 2</OPTION>
       <OPTION value=3>At least 3</OPTION>
       <OPTION value=4>At least 4</OPTION>
       <OPTION value=5>At least 5</OPTION>
       <OPTION value=6>At least 6</OPTION>
       <OPTION value=7>At least 7</OPTION>
    </SELECT>
    </fieldset>
    <fieldset style="text-align:center">
    <legend>Bathrooms:</legend>
    <SELECT id=totalBathsDropDownList name=totalBathsDropDownList size="6">
       <OPTION value=0 selected>Any</OPTION>
       <OPTION value=1>At least 1</OPTION>
       <OPTION value=2>At least 2</OPTION>
       <OPTION value=3>At least 3</OPTION>
       <OPTION value=4>At least 4</OPTION>
       <OPTION value=5>At least 5</OPTION>
       <OPTION value=6>At least 6</OPTION>
       <OPTION value=7>At least 7</OPTION>
    </SELECT>
    </fieldset>
    <fieldset>
    <legend>Order results by:</legend>
    <SELECT id=orderByDropDownList name=orderByDropDownList>
       <OPTION value=3 selected>Baths</OPTION>
       <OPTION value=4>Bedrooms</OPTION>
       <OPTION value=2>Price (Highest First)</OPTION>
       <OPTION value=1>Price (Lowest First)</OPTION>
    </SELECT>
    </fieldset>
    <fieldset>
    <legend>Ref. No.:</legend>
    <INPUT id=refNumTextBox name=refNumTextBox>
    </fieldset>
    <fieldset style="width:45%;float:right">
    <INPUT id=changeSearchTypeButton type=submit value=Button name=changeSearchTypeButton>
    </fieldset>
    </DIV>
    </FORM>
    </BODY>
    </HTML>
    0
     

    Author Comment

    by:ianinspain
    Like wow!!! I am impressed, thats exactly what i wanted....

    How does CSS figure out how many to align width wise??

    Let me see if i understand the CSS.. width is 30% of the screen??and magin left is so whent here is 2 together there is a space.. and the border.. That one i know <grin>. And display block?? ...

    A big thnak you for this.....

    fieldset {display:block; width:30%; float:left;
              margin-left:10px;border:3px ridge gold;
              }
    legend {font-weight:bold }
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    The key to doing layouts is to keep it fluid and loose.  That way the minor differences in browsers won't break the pages, and the user preferences, don't make it unusable.  At virtually any reolution, screen size and with any user font-size settings it is still fully functional.  It does not have to be rigid and look the same for every user.  In fact just the opposite.  You want the user to be able to setup the browser the way they want, and still give them a good page.

    Cd&
    0
     

    Author Comment

    by:ianinspain
    cool... thanks
    0
     
    LVL 53

    Expert Comment

    by:COBOLdinosaur
    Glad we could help. Thanks for the A. :^)

    Cd&
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Product Review - Android Remix

    Come along for the ride with our Senior Product Manager, Brian Matis, as he reviews the Android Remix.

    Suggested Solutions

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    856 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    13 Experts available now in Live!

    Get 1:1 Help Now