SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem layouts, 2 things side by side

    Hi, I am trying to align 2 pictures beside each other but contain them in 1 DIV tag but i can't get the pictures to line up properly.

    so far, I have is this:

    CSS:
    BODY {
    margin: 0px 0px 0px 0px;
    }

    #front-top-outside {
    border: 5px solid #C19987;
    }

    #front-top-1 {
    border-right-color: #C19987;
    border-right-style: solid;
    border-right-width: 5px;
    background-image: url(images/flower.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 184px;
    height: 188px;
    float: left;

    }

    #front-top-2 {
    background-image: url(images/ocean.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 25px;
    width: 518px;
    height: 188px;
    float: right;
    }

    HTML:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>accomodationkeywest.com</title>
    <link rel="stylesheet" type="text/css" href="layout.css" title="Screen" media="screen" />

    </head>
    <body>

    <div id="front-top-outside">

    <div id="front-top-1"></div>
    <div id="front-top-2"></div>


    </div>


    </body>
    </html>

    you'll have to substitute your own pictures in there to get it working right but I can't seem to get them aligned properly.

    what am I doing wrong??



  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to provide more information, it is not clear how you want the layout to look and how you wish it to act.
    • Are these really background images that are going to have content over the top of them or are they a header of some sort and the content continues below them ?
    • Do you want them on the same line but at opposite ends of that line or together in the middle or left or right aligned ?


    Assuming that there are a head and the content continues below them and that you want them side by side in the center of the page then have you tried something like

    Code:
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    
    #front-top-outside {
    border: 5px solid #C19987;
    text-align: center;
    }
    
    #Flower {
    border-right: 5px solid #C19987;
    }
    
    #Ocean {
    }
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>accomodationkeywest.com</title>
    <link rel="stylesheet" type="text/css" href="layout.css" title="Screen" media="screen" />
    
    </head>
    <body>
    
    <div id="front-top-outside">
    
    <img id="Flower" src="images/flower.jpg" height="188" width="184" alt="" />
    <img id="Ocean" src="images/ocean.jpg" height="188" width="518" alt="" />
    
    </div>
    
    </body>
    </html>
    Alternitively if they are meant to be in the top left and right corner with content starting between them then start with the same HTML but this CSS
    Code:
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    
    #front-top-outside {
    border: 5px solid #C19987;
    text-align: center;
    }
    
    #Flower {
    border-right: 5px solid #C19987;
    float: left;
    }
    
    #Ocean {
    float: right;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is how it is supposed to look like. (layout1.jpg)

    after this part, there will be more parts that will "connect" to this part but will have the same look. (borders, stuff side by side)

    and those are background pictures so that text will be on top of them.

    I tried to use the 2nd CSS but it doesn't come out right. (layout2.jpg)
    Attached Images Attached Images

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i've attached 2 files, but not sure if you can see them.

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since this is to be a background image, can you not concatenate the 2 image files into 1, including the board in the image to make sure you get proper colour matching ? This would greatly simplify things.

    You could then use

    Code:
    body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    }
    
    #front-top-outside {
    background-image: url(background.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    margin: 10px 30px 10px 214px;
    }
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <title>accomodationkeywest.com</title>
    <link rel="stylesheet" type="text/css" href="layout.css" title="Screen" media="screen" />
    
    </head>
    <body>
    
    <div id="front-top-outside">
      Text content here
    </div>
    
    </body>
    </html>
    If you want to maintain the 2 pictures separately, then in your original HTML code is good, try this CSS

    Code:
    #front-top-outside {
    border: 5px solid #C19987;
    width: 707px;
    }
    
    #front-top-1 {
    border-right-color: #C19987;
    border-right-style: solid;
    border-right-width: 5px;
    background-image: url(images/flower.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 184px;
    height: 188px;
    float: left;
    }
    
    #front-top-2 {
    background-image: url(images/ocean.jpg);
    background-repeat: no-repeat;
    background-position: center;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 25px;
    width: 518px;
    height: 188px;
    float: left; 
    }
    The width on front-top-outside should prevent the images from wrapping onto the next line when the window is too small, additionally it should allow you to center the front-top-outside div by setting left and right margin to auto should you want to.
    Last edited by BenANFA; Jan 28, 2004 at 03:38.

  6. #6
    SitePoint Zealot
    Join Date
    Dec 2002
    Location
    vancouver, bc
    Posts
    134
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your time and help, I really appreciate it.

    http://keywestvacation.us/test1/

    take a look here.

    it sorta works in IE but doesn't in firebird. (i'm trying to optimize for IE still)

    there are gaps that I can't get rid of

    I was hoping to get it looking like this:


    but there are gaps. and the weird part is. if you compare my CSS to the CSS I posted in the beginning, it is very very close. but before my layout looked like this:



    so i'm puzzled as to why?

    and what made the difference.

  7. #7
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is because your div front-top-outside in the first instance had no content to give it any height. An elements (a div say) height is not adjusted for any elements that are floated inside it, so in the first instance (your 2nd picture) the double beige bar is the top and bottom border of the div front-top-outside.
    On your current page you have put the images into the document so they act as content and effect the height of div front-top-outside.

    The problem here is that you are thinking about what you have (the images) and want it to look like on the page and coding your html accordingly not thinking about the semantics html involved so you end up with a situation that is hard to work.

    What you want is this:

    A header div with a border and a background image. That image is in 2 parts and should have a border between them. The text of the header appears over the right hand side of the background.

    So the first thing I do is concatinate your 2 images into 1, I don't put in borders in the image I just slap them together(image attached). And then I write the following code (note I have been to lazy to put my CSS into an external style sheet but you could do that if you wanted to).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>accomodationkeywest.com</title>
    <style>
    <!--
    body {
      padding: 0px;
      margin: 0px;
    }
    
    #Header {
      border: 5px solid #C19987;
      width: 712px;
      height: 198px;
      background-image: url(background.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      voice-family: "\"}\""; 
      voice-family:inherit;
      width: 702px;
      height: 188px;
    }
    
    html>body #Header {
      width: 702px;
      height: 188px;
    } 
    
    #Header p {
      border-left: 5px solid #C19987;
      margin: 0px 0px 0px 184px;
      height: 188px;
      padding: 150px 20px 0px;
      voice-family: "\"}\""; 
      voice-family:inherit;
      height: 38px;
    }
    
    html>body #Header p {
      height: 38px;
    } 
    -->
    </style>
    
    </head>
    <body>
    
    <div id="Header">
      <p>Header</p>
    </div>
    
    </body>
    </html>
    Things to note

    1) The html is very simple, just how we like it and it is clear what it is, a header that contains a paragraph of text.
    2) I have corrected you DTD so that IE6 and most other browsers work instandards mode, which is best.
    3) I have used the box model hack so that the page still works in IE5.x which is buggy. (I could have got away without using the box model hack by using extra divs, basically if you have with and padding or width and border or width and border and padding on an element then IE 5 calculates the element width incorrectly).
    4) I have been unable to test in IE5 but it should need more than adjustment
    5) In the sytle #Header p is is important that the height and top padding add up to the height of #Header (188px)
    Attached Images Attached Images

  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)
    Hi,

    Just to offer an alternative to benanfa's excellent tutorial above (as there is always more than one way to do something in css).

    This has the drawback of having the images in the html. However there are no hacks needed and will work in ie5 upwards without problems.

    css:
    Code:
    #example img {border: 5px solid #C19987;}
    #example img#Ocean {border-left:none}
    Html:
    Code:
    <div id="example">
    <img id="Flower" src="http://keywestvacation.us/test1/images/flower.jpg" height="188" width="184" alt="" /><img 
    id="Ocean" src="http://keywestvacation.us/test1/images/ocean.jpg" height="188" width="518" alt="" /> 
    <!-- keep image tags touching in html otherwise ie5 inserts a white space -->
    </div>
    Paul

  9. #9
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK . . . maybe I'm a little slow because I know this has been mentioned before but I still don't quite 'get' it. So can you please 'splain it again?

    Why are two hacks needed to reset the height/width? Isn't the box model hack enough?

    Code:
    #Header {
      border: 5px solid #C19987;
      width: 712px;
      height: 198px;
      background-image: url(background.jpg);
      background-repeat: no-repeat;
      background-position: left top;
      voice-family: "\"}\""; 
      voice-family:inherit;
      width: 702px;
      height: 188px;
    }
    
    html>body #Header {
      width: 702px;
      height: 188px;
    }

  10. #10
    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)
    Hi,

    The second hack html>body #header is needed for browsers that don't suffer from the box model hack but do suffer from the voice family hack. (This is why it was called be kind to opera).

    A browser that understands the box model but fails on the voice family hack will get the values that were only supposed to be for ie5 and 5.5.

    Ie6 understands the voice family hack but doesn't understand the child selector which is why you need both as well.

    I prefer the sbmh (simplified box model hack) because it only affects ie and it looks neater.
    e..g
    Code:
    * html #test {
     width:712px;   /* for ie5 and 5.5 */
     w\idth:702px;  /* for ie6 */
     height:198px;  /* for ie5 and 5.5 */
     he\ight:188px; /* for ie6 */
    }
    Paul

  11. #11
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And Paul scores another one. Thanks. I think I 'got' it this time. Guess I need to go back and redo a bunch of pages.

  12. #12
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    I prefer the sbmh (simplified box model hack) because it only affects ie and it looks neater.
    e..g
    Code:
    * html #test {
     width:712px;   /* for ie5 and 5.5 */
     w\idth:702px;  /* for ie6 */
     height:198px;  /* for ie5 and 5.5 */
     he\ight:188px; /* for ie6 */
    }
    Wow, I hadn't seen that before, it is definately neater, I tend to avoid the box model hack entirely (my no doing pixel presices designs) because the hack is so messy but this is neat enough that I might use it.

  13. #13
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BenANFA
    Wow, I hadn't seen that before, it is definately neater, I tend to avoid the box model hack entirely (my no doing pixel presices designs) because the hack is so messy but this is neat enough that I might use it.
    I also try to avoid it (and do so successfully) but have had to use it to get widths of a few data tables to read correctly in IE 5.5.


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
  •