Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: CSS Positioning

  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Positioning

    Hi. I am trying to position all these images together to make them seamlessly match. I have done it using a main body, then all the div's inside the main and floating left. The problem is that i had to use relative positions for the last 3 pieces because they end up floating out the bottom. Here is an image of what I'm talking about with the the slices shown and separated and numbered so you can see them better and what order they are in. Is there a way to put them together successfully without relative positioning, or is relative positioning totally ok to use for this purpose? I was thinking of maybe the slices being in a bad order but i don't know how to fix that to make it work exactly if that's the case. Thanks.


  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by haysuess View Post
    Hi. I am trying to position all these images together to make them seamlessly match. I have done it using a main body, then all the div's inside the main and floating left. The problem is that i had to use relative positions for the last 3 pieces because they end up floating out the bottom. Here is an image of what I'm talking about with the the slices shown and separated and numbered so you can see them better and what order they are in. Is there a way to put them together successfully without relative positioning, or is relative positioning totally ok to use for this purpose? I was thinking of maybe the slices being in a bad order but i don't know how to fix that to make it work exactly if that's the case. Thanks.

    We need to see your code.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, here is the html page, then the CSS sheet:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>product006</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel=StyleSheet href="styles/styles.css" type="text/css">
    </head>
    <body>
    <div id="main">

    <div id="banner"></div>

    <div id="leftmenu"></div>

    <div id="eyepiece"></div>

    <div id="knob"></div>

    <div id="iso"></div>

    <div id="rightside"></div>

    <div id="buttons"></div>

    <div id="strip"></div>

    <div id="last"></div>

    </div>
    </body>
    </html>



    <style type="text/css">
    *
    {
    margin:0;
    padding:0;
    border:0;
    }

    body {
    background-color: #000000;
    margin-top:0px;
    }

    #main
    {
    width:1174px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 0px;
    }

    #banner
    {
    background-image:url(images/product006_01.jpg);
    width:1174px;
    height:145px;
    margin-left:auto;
    margin-right:auto;
    clear:left;

    }

    #leftmenu
    {
    background-image:url(images/product006_02.jpg);
    width:305px;
    height:655px;
    position:relative;
    float:left;
    }

    #eyepiece
    {
    background-image:url(images/product006_03.jpg);
    width:272px;
    height:225px;
    float:left;
    }

    #knob
    {
    background-image:url(images/product006_04.jpg);
    width:597px;
    height:102px;
    float:left;
    }

    #iso
    {
    background-image:url(images/product006_05.jpg);
    width:511px;
    height:390px;
    float:left;
    }

    #rightside
    {
    background-image:url(images/product006_06.jpg);
    width:86px;
    height:553px;
    float:left;
    }

    #buttons
    {
    background-image:url(images/product006_07.jpg);
    width:214px;
    height:430px;
    float:left;
    position:relative;
    bottom:430px;
    left:305px;

    }

    #strip
    {
    background-image:url(images/product006_08.jpg);
    width:58px;
    height:267px;
    float:left;
    position:relative;
    bottom:430px;
    left:305px;
    }

    #last
    {
    background-image:url(images/product006_09.jpg);
    width:569px;
    height:163px;
    float:left;
    position:relative;
    bottom:163px;
    left:247px;
    }
    </style>

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    haysuess,

    To me it looks like you're approaching this problem wrong. In the days before CSS image slicing was common, and often the only way to achieve layout with tabled approaches.

    What I would suggest instead of all of this images slicing would be to merge them into one camera image, and then set that as the background of a containing div for the entire picture:

    Code:
    <div id="camera">
       <h1>Banner</h1>
       <h2>Menu</h2>
       <ul>
         <li>Item 1</li>
          . . . 
       </ul>
    </div>
    
    
    CSS:
    
    #camera {
       height: ...
       width: ...
       background: #fff url(/img/camera.jpg) left top no-repeat;
       }
    #camera h1 {
       text-align: right;
       ... 
       }
    #camera h2 {
       ...
       }
    #camera ul {
      ...
      }
    You can specify a required height and width on the div if you want it to wrap exactly around the background image.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm... I guess you're right, for some reason I was thinking each thing HAD to be separate. It was just a learning experience anyways. Is there any major drawback do doing it the way I did?

  • #6
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Yes,

    The big drawbacks are:

    1.) images are difficult to slice together, as often pixel-to-pixel precision is difficult to achieve cross-browser (different browsers render CSS in quirky ways)

    2.) the semantics of the markup are muddy with this method; you have to put entirely presentational divs in that code (for slices without content) which is kind of against the purpose of CSS and the separation of content and presentation

    3.) employing that many floats and positioned elements will almost certainly bring out common browser rendering bugs (like IE6s peekaboo bug)

    4.) it's difficult to maintain. If you had used one image in the background, if you ever need a new image or a larger image you just swap the image out and you're done. If you had used a sliced image not only do you have to go back and edit ALL of the slice code, you might have to change the slices completely to make them fit which will certainly be more effort than what it's worth.

    And even though you're starting out, it's good to step back from things like these and start to look at them more critically--the more thought you put into your design upfront means the less work it'll take to change things down the road.

  • Users who have thanked vtjustinb for this post:

    garydarling (09-26-2007)

  • #7
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cool thanks for the great response. I work professionally as a designer but have just done the graphic part in photoshop while the cms company i work for made the entire system and sliced up the images so i have been learning a ton of php, mysql, and am learning the more advanced features of CSS. It's pretty amazing. Thanks again!

  • #8
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    No problom. If you're the type that likes to read check out books by Jeffery Zeldman, Dan Cederholm, Dave Shea, and Andy Budd. All great introductions to web standards and modern CSS design.


  •  

    Posting Permissions

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