SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    CA
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Liquid layout and liquid fonts

    I bet you veterans are tired of this question, but us newbies, like myself, have to deal with the contradictions of site design between tables versus CSS.

    I have read quite a few posts here on liquid layouts but still falling short of comprehending the concept in CSS.

    Is the following statement true? If I want a liquid design in CSS I use % just like I would in tables?

    If you don't mind, follwing are more of my thoughts. Hopefully someone can trigger the right mind set for me to understand css liquid layout.

    My thoughts:

    As much as I want to learn CSS for layout, I really struggle with the concept of liquid design usign CSS. With tables it isn't that hard to figure out. You make a table 100% and it expands and shrinks according to the user's resolution. From what I have read on CSS layout, most talk about liquid design by making the middle column margins of a 3 column layout Left 240, Right 240 or some other number like Right 140, Left 140. I read one book, spent hours on the interent and I'm still scratching my head. Many tell you to do this or that, but never exlplain why their recommendation makes the design liquid. I need to understand the concept to grasp why something makes it a liquid design. Just telling me to make the middle column margins Right 240 and Left 240...that doesn't explain why this makes it liquid.

    I notice from looking at other sites on zen garden, a lot of designers don't seem to be concerned about liquid design. They design for 800 x 600, but with tables you can have your layout expand or shrink depending on the monitor resolution. This concept is easy to grasp with tables...I just don't get it with CSS.

    The other concept I read about is using em for fonts. Yet, I can't find much on solving the problems you have with em fonts. Here is what I mean. If I design a 3 column css layout and in the 3rd column put a few boxes with their own text, when you change the text size in explorer, one box of text will overlap another box. The only way I can control this is make the font fixed using px. This way the font size can not be changed by the viewer. Am I missing something in understanding em fonts? How do I prevent the overlap problem when text size is changed.

    I appreciate any feedback....I'm not going to give up cause I know CSS is the future.

    Steve.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't have time to answer all your questions as I'm just going out so I'll leave it for others to chip in.
    The other concept I read about is using em for fonts. Yet, I can't find much on solving the problems you have with em fonts. Here is what I mean. If I design a 3 column css layout and in the 3rd column put a few boxes with their own text, when you change the text size in explorer, one box of text will overlap another box. The only way I can control this is make the font fixed using px. This way the font size can not be changed by the viewer. Am I missing something in understanding em fonts? How do I prevent the overlap problem when text size is changed.
    When you use ems (or %) for font-size then the text can be enalrged by the user in IE (other browsers will let you enlarge anyway). This means that if you have put that text in a container with a fixed height and width then you could run into the problems you mention as the container won't expand with the text.

    Therefore your container should either be described by its content so that it will expand as required or you define the size of your container in ems to start with. This will keep the relationship between the text and its container constant no matter what size the user selects.

    I need to understand the concept to grasp why something makes it a liquid design. Just telling me to make the middle column margins Right 240 and Left 240...that doesn't explain why this makes it liquid.
    Well it sounds quite obvious to me but I realise it may look strange at first glance. All you are doing is making the centre column fluid because it is always 240px away from the content on either side.

    Therefore as the screen is resized smaller the outer columns remain contant at 240px but the middle column adjusts to match the screensize as required.

    Just as you set at able to with 100% an element will be automatically be 100% if no positioning is set and will just take up whatever space there is. So setting an element with 50% will make it 50% of its parent. If the parent is the body then thats 50% of the available screen size.

    However fluid design isn't just about percentages. You can set a table to 100% and have a number of cells across the screen. But if the cells are full oif content such as images then the table may not shrink at all. With css you can float content and when the screen resizes smaller the floats drop down to find room underneath. Theoretically the screen could be resized quite small and still be viewable without a scrollbar wheras a table would be stuck wide as the cells can't drop down to be visible.

    This is a different concept to tables and many people fail to grasp the differences. The web isn't all about graphic design although good graphic design is important. Its also about satsifying the various medium that will be viewing your site.

    Previously tables was we had but now we have css and we can add different emphasis to our layouts. We loose some of the aspects of table design but gain much more in other areas.

    Tables and css are just different tools from the same toolbox and are not meant to replace each other . They both have a job to do and they both need to be applied in the correct manner for the best results.

    Paul

  3. #3
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    CA
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=Paul O'B]Hi,

    I don't have time to answer all your questions as I'm just going out so I'll leave it for others to chip in.

    Paul, thanks for your quick reply. I have read quite a few of your posts and I'm quite impressed with your knowledge. I know that some of these concepts may seem obvious, but I'm not too proud to admit that they go right over my head. I hope others do chip in -- the more info the more I can learn.

    After reading your reply, I think I come to the conclusion that using percentage with Divs basically is the same concept as using percentages with tables.

    Thanks again

    Steve

  4. #4
    SitePoint Addict loadx's Avatar
    Join Date
    Jul 2004
    Location
    Melbourne, VIC, Australia
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to bring up an old thread but i was just discussing with a friend the use of %'s for width,height etc as apposed to hard coded pixel values..now my question is Which is seen as a web design standard as so to speak and should i opt for pixel values over %'s because they are more precise or do i go for the % option to take account for multiple resolutions and text resizing etc.

    daunting i know

    i'd just like to know others thoughts on this.

  5. #5
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    There is no standard in this case. Whatever works for you and suits the site.

    I prefer fixed mostly because I don't like having 30+ word lines in higher resolutions.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    friend the use of %'s for width,height etc as apposed to hard coded pixel values
    If you want the relationship between your content and your content outer to be consistent then ts best to use ems and then the page will grow or shrink uniformly as required.

    Of course its not always as straight forward as that because images don't scale (unless a zoom facility like opera has is used) and you may want to set the dimensions of the parent in pixels in those cases.

    If you have a left nav that contains text in ems but the nav is 150px wide, then you get the situation that when the texts size is increased it grows out of the nav container and breaks the look of the layout. If the nav had been coded in ems then the nav would grow at the same rate as the text.Sizing in ems isn't the same as sizing with percent as it won't stretch with the screen so you can still have accurate measurements etc.

    In the end it all boils down to testing and trying out different things until you get something that suits the design in hand

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •