SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with absolute / relative positioning

    Hi,

    Just starting my first major xhtml/css project and already hitting a brick wall. I'm feeling rather ill at the moment so perhaps I just can't focus on it properly.

    This is the mock-up I'm trying to achieve.

    http://www.trial.mlweb.co.uk/purple/image7.html

    This is the css so far

    HTML Code:
    /* PG css starts here */
    
    #container {
     width: 1027px;
     height: 950px;
     border: 1px solid #3a88e2;
     padding: 5px;
     }
    
    #header {
     width: 1015px;
     height: 220px;
     background: Url(images/headerbg.png) no-repeat;
     border: 1px solid #3a88e2;
     padding: 5px;
     margin-bottom: 5px;
     }
    
    #email, #callback #taglines{
     position: absolute;
     }
    
    #phone {
     position: relative;
     top: 150px;
     left: 15px;
    } 
    
    #column1 {
     width: 200px;
     height: 550px;
     border: 1px solid #3a88e2;
     padding: 5px;
     float: left;
     margin-bottom: 5px;
     }
    
    #column2 {
     width :446px;
     height: 550px;
     border: 1px solid #3a88e2;
     padding: 5px;
     float: left;
     margin-left: 5px;
     margin-bottom: 5px;  
     }
    
    #column3 {
     width: 335px;
     height: 550px;
     border: 1px solid #3a88e2;
     float: left;
     padding: 5px;
     margin-left: 5px;
     margin-bottom: 5px;
     }
    
    #footer {
     clear: left;
     width: 1015px;
     height: 134px;
     border: 1px solid #3a88e2;
     padding: 5px;
     }
    and this is the html

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Blank xhtml doc</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="pg.css" rel="stylesheet" type="text/css" />
      </head>
      <body>
        <div id="container">
          <div id= "header">
            <img src="images/phonenumber.png" alt="phone number 08707442259" id="phone" />
          </div> <!-- end of header div -->
          <div id= "column1">
            <img src="images/itiltraining.png" alt="ITIL training" id="itiltraining"/>
          </div> <!-- end of column1 div -->
          <div id="column2">
            <p>column2 content</p>
          </div> <!-- end of column2 div -->
          <div id="column3">
           <p>column3 content</p>
          </div> <!-- end of column3 div -->
          <div id="footer">
            <p>footer content</p>
          </div> <!-- end of footer div -->
        </div> <!-- end of container div -->
      </body>
    </html>
    I'm trying to start positioning the header items but the first img is refusing to shift. I appreciate the css is a little messy but I'm very new to this.

    I have uploaded the files here also.


    http://www.trial.mlweb.co.uk/purple/wireframe/
    Last edited by handyman103; Sep 6, 2007 at 08:50. Reason: numpton spotted about 10 mistakes as soon as I posted

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure what you're trying to do here, but when u absolutely position elements, they are positioned from their parent element. u must add "position: relative" to parent elements, and then add "position: absolute" to the child elements. the child elements will then position from the top left or top right corner of the parent element, whatever u specify.
    Steve Davis

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That, and you shouldn't use absolute positioning for your layout instead. Save it for those advanced effects that need it. For layouts, I suggest using floats and negative margins (where needed) instead.

    And just so you know, your page template is forcing a horizontal scrollbar at 1024x768 in Opera 9.23/Windows XP Pro SP2.

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    That, and you shouldn't use absolute positioning for your layout instead. Save it for those advanced effects that need it. For layouts, I suggest using floats and negative margins (where needed) instead.

    And just so you know, your page template is forcing a horizontal scrollbar at 1024x768 in Opera 9.23/Windows XP Pro SP2.
    Ahh that could be coz all of my pc's are 1280 horizontal width. I'll try adjust the template down a bit.

    So All I want to do is align the three green images in the header at the bottom. Clearly floating it left won't achive this. and negative margin? perhaps if you could explain a little?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    So All I want to do is align the three green images in the header at the bottom
    Just float them left and give then all a margin-top to move them into position.

    I assume you've put column heights in just for testing. In a real world layout you won't want to have a set column height as the content should dictate the height and grow and shrink accordingly.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And if you want to learn a bit about negative margins, read Paul's article at Search-This: http://www.search-this.com/2007/08/0...ative-margins/

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Just float them left and give then all a margin-top to move them into position.

    I assume you've put column heights in just for testing. In a real world layout you won't want to have a set column height as the content should dictate the height and grow and shrink accordingly.
    Will give that a go. As for the column heights I set them for layout and may remove them, It is a site for my work (and we are only a small company) I remember reading somewhere that you have more flexibility with the coding if you have complete control over the design.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I remember reading somewhere that you have more flexibility with the coding if you have complete control over the design.
    Yes you should have control over all the elements you use but you should control them wisely as ultimately you have no control over the design as the user can over-ride anything you set.

    If you set a height of xxpx on your layout then I bump up the text size your layout will be shot to pieces. You could set a height in ems to accommodate this but height is one of those dimensions that you would rarely use in a fluid layout where text content is concerned.

    You could really only use height in this way of you also control overflow and this would of course cause scrollbars to appear on the content which is never usually what you want.

    Having complete control over the design should really be about catering for all scenarios rather than restricting it to one fixed idea.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The idea with going for a complete css layout was that as my skills develop I can adapt the site with better techniques. We could use this site live asap and I'd rather get it to show at normal text size in the majority of browsers than spend ages checking and testing and tweaking it so 65 hits on the site last month with Netscape browser could see it the same way as everyone else. Perhaps if these people saw sites starting to look crap they may consider changing their browser

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by handyman103 View Post
    The idea with going for a complete css layout was that as my skills develop I can adapt the site with better techniques. We could use this site live asap and I'd rather get it to show at normal text size in the majority of browsers than spend ages checking and testing and tweaking it so 65 hits on the site last month with Netscape browser could see it the same way as everyone else. Perhaps if these people saw sites starting to look crap they may consider changing their browser
    Hello

    General page layout for FF OP NS and IE needs no emphasis on hacks tweaks and testing , basic solid and straight forward CSS HTML gives consisted results even in IE 6
    Last edited by all4nerds; Sep 7, 2007 at 04:52.

  11. #11
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well following feedback I'm reducing the site width to 88.75&#37; of the original which when I reduce the width / height of the divs (after I finish my butty) should present a compromise.


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
  •