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.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Member Nextoss's Avatar
    Join Date
    Jan 2010
    Location
    Buenos Aires
    Posts
    58
    Member #
    20918
    Hello, i still working in my web layouts, and i started to read some articles about DIV positioning, many people, between professional designers and not are talking about the best practices to align elements in DIV's, some are really effective others don't.

    I readed this:

    -1 - Good practice is to make a "wrap" to all site content.
    -2- ( text-align ) propierty is the best way to center images
    -3- ( position ) propierty have problems with other elements positioned |Static|Absolute|etc..|
    -4 - The default position for a DIV is Static

    I recommend highly this articles:

    [Centering Images Is Harder Than You Think]
    http://www.netmechanic.com/news/vol7/html_no10.htm

    Centenring Tables
    http://www.granneman.com/webdev/codi.../centertables/

    All, article you can read about positioning elements or DIV's use "tricks" CSS it's better than HTML but have a lot of display problems, check this:

    - Float propierty issue: If floated element's haven't enough space between them one float force other to drop below the first.

    - "Absolute Positioning Issue": 1px Rounding Error, because Absolute Positioning is a coordinate method.

    I readed other articles that talk about make a "fence" to the elements that align them like a "trick"

    So, doesn't exist a rule what control every element how we need, always we'll need tricks.

    I just post this here cause i need help with this, if you have a positioning method let us know it to improve our layouts because;

    Positioning Inline, block-level elements, and asign position for a div need's always a kind of trick

    Finally i want to know, how to make a layout that allow elements stay in his positions when the navigator is resized or the display resolution is low, makig possible appears the vertical and horizontal scroll bars without overlap any element of the website.:-(
    I just wanna improve, but there's a lot of ppl that are jealous for it. I really don't care it at all.

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    will adjust to screen when resized.

    position: absolute; left: 0px; right: 0px; width: auto;

    position: relative; width: auto;

    to properly center
    position: absolute; ..........just adjust the the left/right pixels

    position: relative; ...........must set a width to use auto margins
    position: relative; width: 100px; margin: 0px auto 0px auto;

    you can put absolute elements inside relative elements but it is not wise to put relative elements inside absolute elements.

    using text-align for anything other then text is only done by those that use editors to build and don't really know css. also there is nothing rong with using classic html, as long as its not used with an element positioned absolute you can use <center>, why not. but used on an absolute element it will not be valid or hold place, the element will escape the box.

    prevent overlapping, set a min-width: to the css for your overall div. yes a full page outer container div is perfect for this.

    while($get_it !== true){ continue; }

  4. #3
    Member Nextoss's Avatar
    Join Date
    Jan 2010
    Location
    Buenos Aires
    Posts
    58
    Member #
    20918
    Quote Originally Posted by Dorky
    will adjust to screen when resized.

    also there is nothing rong with using classic html, as long as its not used with an element positioned absolute you can use <center>, why not.
    Oh well, i readed about depreceated html code like DIV ALIGN and others... but i guess it's ok to get a better navigators compatibility.

    Good advice, thank you.
    I just wanna improve, but there's a lot of ppl that are jealous for it. I really don't care it at all.

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    Quote Originally Posted by Nextoss
    Oh well, i readed about depreceated html code like DIV ALIGN and others... but i guess it's ok to get a better navigators compatibility.

    Good advice, thank you.
    no. thats not what was intended. if it is not going to be supported in the near future i wouldn't use it. but <center> is not loosing support any time soon.

    while($get_it !== true){ continue; }

  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    center is deprecated, which means it will lose support at some point. In any technology solution, you always avoid the use of deprecated technologies when a new equivalent exists (unless you work for the government, lol)

  7. #6
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    oh. well the css i gave works.

    while($get_it !== true){ continue; }

  8. #7
    Banned
    Join Date
    Mar 2010
    Posts
    14
    Member #
    21414
    Nexos has mentioned the right attributes for div
    One major difference between using DIVS and Table is Table can be flexible and the content is not static and fixed on one place . But divs are really stuck with the text.

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    i think have that backwards james.

    while($get_it !== true){ continue; }

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    That didn't make ANY sense to me.

  11. #10
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    .center{
    display:block;
    margin: 0 auto;
    }

    .tcenter{text-align:center;}

    these 2 classes will center just about everything. Use tcenter for text, use center for other elements. ive never run into a situation where i couldnt use display block, i mean it makes sense...display block (take up a horizontal space 100%) and center within that space.

    ..whats wrong with these 2 classes? they work for everything ive ever needed.
    ok thank you bye <3
    aero..i love u


Page 1 of 2 1 2 LastLast

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 10:44 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com