SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Mechanicsville, MD
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    type placement @ different res

    Ok,

    www.ellinlaw.com (mouse over to close Rovion)


    I inherited this site and the owner demands it be done in css. I'm a person who designed in table for years and I'm not making the transition to css well at all. I've read several faqs here and elsewhere, but I'm still unsure as to how to fix this issue. Let me say that I know the markup isn't 100% semantic, so you don't have to list that per say. The client has people using IE, FF and the AOL browser at different resolutions and all of them are complaining about jogged content etc. If someone can look at the site in IE 6.0 @ 1024 x 768 and then a higher or lower resolution and at least give me hints or link to direction(s) to go in to fix this site wide issue, I'd be greatful, as I really don't want to go back to designing in tables or re-designing this site in tables.

    Thank you,
    Harp!

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

    The main problem is that your absolutely placed elements are replaced in respect of the viewport and not #container, which means that as you open the browsers window the page centers but your absolute content still sits at the left of the viewport.

    You would need to add position:relative to #container to create a local stacking context for further positioned elements..

    e.g.

    Code:
    #container {
        position:relative;
    }
    You also need to take care of the default margins and padding on the elements you are using or your positioning will be different from browser to browser. This can be done by using the following code:

    Code:
    * {margin:0;padding:0}
    
    That will remove all padding and margins from all elements which means that you have to set those explicitly for every element you use.

    e.g.
    Code:
    body{margin:0;padding:15px 0}
    This means that when you use p tag or heading tag then you need to set the exact margin you want.

    There are form element issues when using the universal selector in that manner so you could use as an alternative a reset css such as this:

    Your positions will need to be adjusted as follows and you will need to change the text size and line-height to fit in the space you have allocated.

    Code:
    #autopi { 
        color:#FFFFFF;
        position : absolute;
        left : 62px;
        top : 360px;
    }
    #autopi2 { 
        color:#FFFFFF;
        position : absolute;
        left : 220px;
        top : 360px;
    }
    #medical {color:#FFFFFF;
        position : absolute;
        left : 380px;
        top : 360px;
    }
    #family {color:#FFFFFF;
        position : absolute;
        left : 690px;
        top : 360px;
    }
    #autopi2 ul,
    #medical ul,
    #family ul,
    #autopi ul{list-style:inside;font-size:85%;line-height:1.2em}
    Your lists are incoreectly structured and they whould be wrapped in a ul and not a p tag.

    Code:
        <div id="autopi">
            <ul>
            <li>Automobile Collisions</li>
            <li>Bus Collisions</li>
            <li>Motorcycle Collisions</li>
            <li>Pedestrian Injuries</li>
            <li>Dog Bites</li>
            </ul>
        </div>
        <div id="autopi2">
            <ul>
            <li>Slips/Falls</li>
            <li>Premise Liability</li>
            <li>Product Liability</li>
            <li>Negligence</li>
            </ul>
        </div>
        <div id="medical">
            <ul>
            <li>Medical Neglect</li>
            <li>Nursing Home Negligence</li>
            <li>Hospital Negligence</li>
            <li>Birth Injuries </li>
            </ul>
        </div>
        <div id="family">
            <ul>
            <li>Legal Separation</li>
            <li>Divorce</li>
            <li>Child Custody/Vistation</li>
            <li>Adoptions</li>
            </ul>
        </div>
    There was no real need to wrap them all in a div as styles could have been applied to the ul directly.

    That should get you back on track but I should warn you that this approach of absolutely placing elements over the time of an image is not very professional and creates a very fragile layout. If the user resizes the text the layout will break because it is separate from the content.

    The page should really be created using elements in the flow and not absolutely positioned and the background should be made to expand with content. Of course this would mean a complete re-design and is a lot more involved than what you have done.

    Hope it helps anyway

  3. #3
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Mechanicsville, MD
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post

    The page should really be created using elements in the flow and not absolutely positioned and the background should be made to expand with content. Of course this would mean a complete re-design and is a lot more involved than what you have done.
    Paul,

    Thank you very much for answering this post. I will implement the fixes you've listed here on the existing site.

    When you mention the flow and background expanding (above), are you talking about floats or positioning things using some other method? I've read so much on css over the last 4 days that I've become confused as to the best way to organize content in css. Do you have a link that identifies with what you use as a solid base or can you reference a FAQ or a book that is a good place to start learning about the proper way to do the flow and background expansion?

    Thank you,
    Brian

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    or a book that is a good place to start learning about the proper way to do the flow and background expansion?
    Hey Brian,

    Bulletproof Web Design is an excellent book looking at how to implement XHTML and CSS with web standards in mind.

    The basic idea is you want to make your designs flexible, that is flexible with browser settings. People should be able to access your content with CSS disabled / images disabled / Increased font size etc..

    So because absolute positioning sets things ... absolutely it's bad for this reason because the elements will no longer effect anything else in the page. You want to keep as many things as possible in the normal flow of the document. Favour floats over absolute positioning always because you can keep things clear of them if you choose to.

    Here's a little tutorial I wrote explaining some of the issues - but I highly recommend that book by Dan Cederholm.
    http://www.yellowshoe.com.au/tips/ro...sign-elements/

    Hope it helps

  5. #5
    SitePoint Member
    Join Date
    Feb 2007
    Location
    Mechanicsville, MD
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Mark,

    Thank you for your book recommendation! As you can see, I need all the help I can get here.

    Harp!


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
  •