Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Junior Member
    Join Date
    Jul 2005
    Posts
    27
    Member #
    10680
    Hi guys, I find layers a really good way of working,as it seems to suit my design background, and like using flash you can simply place things where you want them.

    But I know a lot of people use tables too. Whats the current 'standard' or which method is usually preferred?

    Finally can table grids be disjointed or do they all have to line up.

    Thanks guys

  2.  

  3. #2
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    I assume you're working in Dreamweaver...

    Layers or <div>s are the most up-to-date method but Tables are still very widely used. I can see why too. It's basically because with tables, what you see is what you get. You can move them around and resize them and drop pictures in and text and all sorts... all on the fly. Sounds great...right?

    Well It is untill you consider the implications of your code...

    1. It will be very bulky as each table cell will have to have attributes for hight, width, padding, border, background etc... not to mention the content. So even a small table can have a huge ammount of code.

    2. Diffrent browsers will interpret the tables slightly differnetly. If you're luck you may get the majority to work but there will always be people who can't look at your site.

    3. Imagine you're a blind user's text reader... If you've got to jump from table cell to table cell and you have no idea of which one you're supposed to read first you'll end up reading things in the wrong order or even not at all and the user will get mad and switch you off...:surprised:

    Think about it this way:

    You make a simple site using XHTML... No tables at all. In fact... no attributes defining the way the site looks are even in your XHTML. you end up with code that looks like this:
    Code:
    <body>
          <div id="container">
                <div id="header">
                </div>
                <div id="navigation">
                      <ul>
                            <li><a href="index.htm"> Home</a></li>
                            <li><a href="about.htm"> About Us</a></li>
                            <li><a href="locations.htm"> Locations</a></li>
                            <li><a href="contact.htm"> Contact</a></li>
                            <li><a href="info.htm"> Info</a></li>
                      </ul>
                </div>
                <div id="content">
                      <h1>This is your title.</h1>
                      <p>this is your text. this is our text. this is your text.</p>
                </div>
                <div id="footer">
                </div>
          </div>
    </body>
    Looks like nothing. But because your divs have names you can use those names to refer to them in CSS. This is where the fun begins.

    You can control the position, size, colour, orientation, background, borders, padding, font... everything within CSS and add no extra code to your page! And because everything is defined you get much greater interoperability between browsers which means if you do it right your page will validate with the W3C!!!

    It allows you some really big advantages:

    1. You can keep your content and your layout information TOTALLY separated.

    2. You can achieve some awesome results with very little code.

    3. Change one style in your style sheet file to make changes site-wide.

    This is why most people on here will tell you to never use tables again. They are a very old fashioned way of laying out a site.... sort of like recording a music album and releasing it on cassette!!

    I hope this has been a help to you. If you have any more questions about any of this...there are plenty of people on here that will be more than willing to help.

    Visit these sites:

    http://www.csszengarden.com
    http://www.cssbeauty.com
    http://www.elated.com/tutorials/authoring/css/
    http://www.alistapart.com/articles/taminglists

    Also, download the program SimpleCSS.
    http://www.hostm.com/css/

    This helped me learn to understand CSS a lot in the beginning.

    Dan..
    No ma'am, we in IT don't have a sense of humor we're aware of.

  4. #3
    Junior Member
    Join Date
    Jul 2005
    Posts
    27
    Member #
    10680
    Thanks for that detailed reply mate!

    So tables are old news. And layers with CCS is the way forward, if im reading you right!

    I will have a look at those CCS links you have posted thanks for that.

    One final question, using layers, how do you auto centre and scale a site to fit the useres window?

    I know how to centre a table, but am confused how you would make a load of tables centre, whilst still keeping their position in relation to one another!

    Thanks again


    Geraint

  5. #4
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    No worries!

    Centering and stretching your "container" div to fit the viewer's browser can be a bit of a bugger. getting it to Center is easy.

    in the CSS for your container simply tell it to have a left AND right margin of AUTO. This keeps it centered.

    Getting it to stretch to fit the browser is tricky though. Because the attribute Maximum/Minimum Width isn't available in IE, if a user narrows it too much it will start moving things and overlapping things. Nasty.

    Your best bet is to find a width that suits most of your audience and use that. These days you'll probably be alright designing for people with a minimum resolution of 1024x768. So make your container about 800 px wide. that way when people resize their browser... no problems.

    As far as keeping all your elements positioned in relation to each other, there are a couple of methods really, If I want a nice simple site I just tell my container div to have a right and left margin of AUTO and it's position to be RELATIVE.
    I then position all the divs inside that ABSOLUTE. (ie. left: 0px, top: 0px).

    Some people tell me off for doing that on here but I find It works OK and it validates so I say go for it. Another way ( I suppose the "correct way") is to use floats. However Don't try to run before you can walk. They can be complicated to get your head around so wait til you have a more firm understanding of the basics of CSS first.

    After this I bet you're gonna want to know about getting some cool Navigation without using tables.... Hold on your hat. Just wait to see what you can do with simple lists <ul> and <li>

    http://css.maxdesign.com.au/listamatic/index.htm

    Hope you're progressing well.

    Catch ya later.

    Dan,
    No ma'am, we in IT don't have a sense of humor we're aware of.

  6. #5
    Senior Member
    Join Date
    Apr 2006
    Posts
    146
    Member #
    13110
    Liked
    1 times
    not tables :bandit:

  7. #6
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Quote Originally Posted by minute44
    in the CSS for your container simply tell it to have a left AND right margin of AUTO. This keeps it centered.
    Code:
    #container{
    margin: auto auto;
    }
    Quote Originally Posted by minute44
    Getting it to stretch to fit the browser is tricky though. Because the attribute Maximum/Minimum Width isn't available in IE, if a user narrows it too much it will start moving things and overlapping things.
    Another way to do this is by using percentages, but this gets VERY tricky, especially if you have gutters because they'd have to be proportional as well. For future references, this is called a "liquid layout."

    Quote Originally Posted by minute44
    Your best bet is to find a width that suits most of your audience and use that.
    agreed.

    Quote Originally Posted by minute44
    As far as keeping all your elements positioned in relation to each other, there are a couple of methods really, If I want a nice simple site I just tell my container div to have a right and left margin of AUTO and it's position to be RELATIVE.
    I then position all the divs inside that ABSOLUTE. (ie. left: 0px, top: 0px).

    Some people tell me off for doing that on here but I find It works OK and it validates so I say go for it. Another way ( I suppose the "correct way") is to use floats.

    However Don't try to run before you can walk. They can be complicated to get your head around so wait til you have a more firm understanding of the basics of CSS first.
    Though I do have a bit of a reputation for telling people off, I semi-agree, semi-disagree here. I agree in that you shouldn't bite off more than you can chew. I disagree in taking the easy way out when the "hard way" isn't that complicated. The problem with absolute positioning, really, is that it's absolute. The whole point of CSS is being able to change things with the wave of a wand, and if things are floated and positioned relatively, wave and walla... new layout! From my own experience, the problems with floating have actually been due to margins & padding.

    Quote Originally Posted by minute44
    After this I bet you're gonna want to know about getting some cool Navigation without using tables.... Hold on your hat. Just wait to see what you can do with simple lists <ul> and <li>
    Right on! Using unordered lists is the best way to create a navigation. Make sure to [minicode]list-style-type: none;[/minicode] and if you have a horizontal nav, you just may have to [minicode]li{float: left}[/minicode]

    Good luck gerlewislewis. Excellent post minute44.
    Shani

    I have an eye for detail like you'd never believe.

  8. #7
    Senior Member minute44's Avatar
    Join Date
    Mar 2006
    Location
    Nottingham, UK
    Posts
    264
    Member #
    12849
    Quote Originally Posted by DCScene

    Good luck gerlewislewis. Excellent post minute44.
    Why Thank You!!!

    Quote Originally Posted by DCScene
    Though I do have a bit of a reputation for telling people off, I semi-agree, semi-disagree here. I agree in that you shouldn't bite off more than you can chew. I disagree in taking the easy way out when the "hard way" isn't that complicated. The problem with absolute positioning, really, is that it's absolute. The whole point of CSS is being able to change things with the wave of a wand, and if things are floated and positioned relatively, wave and walla... new layout! From my own experience, the problems with floating have actually been due to margins & padding.
    I myself hven't been doing this too long, I've only gotten into CSS design in the last couple of months so I was trying to show gerlewislewis the way in which I found it easiest to start out... I would love to learn more about using floats to full effect as I think it's whats standing in the way of me creating better sites and improving my skills.

    Do you know any decent sites that could give me a few pointers on Floats?
    No ma'am, we in IT don't have a sense of humor we're aware of.

  9. #8
    Member
    Join Date
    Mar 2006
    Posts
    84
    Member #
    12765
    Well tables are a good start, but layers would probably prove to be better. Especially with the use of CSS and some DIV tags.

  10. #9
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    To minute44:
    In reference to floats (you might not like it) my best advice is to play.
    Some pointers:
    - Essentially a float will put your div, li, span, (etc.) NEXT to something as opposed to below it. If you have two divs, one with a float:left; and one with a float:right; inside a container, you should not have to set the margins BETWEEN them. If they both float the same you will. If, after width+margin+padding (either declared or default due to browser idiosyncracies) of both the elements you are floating is greater than the container, it will push the second element below the first. This is why it is essential to declare your margins!
    - For layouts, floats work best on block elements.
    - For navigation, a [minicode]float:left;[/minicode] will create a horizontal nav if put into the <li>.
    - For troubleshooting, put a border around your blocks, adjust width-margin-padding as needed.

    To NanashiX5:
    DW MX04 (and maybe MX) treat layers and divs as the same thing. Note to DW layout-mode users: when DW creates a layer, it also creates associated styles and embeds them in the <head>. Minute44 remarked on this earlier. The layers at lease some of us came to know in the late 90s / DW4 and earlier have become obsolete.
    Shani

    I have an eye for detail like you'd never believe.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com