www.webdeveloper.com
Results 1 to 10 of 10

Thread: CSS Positioning

  1. #1
    Join Date
    Apr 2005
    Posts
    91

    CSS Positioning

    I'm new to CSS and I have been working on a one page site to test out my skills or the lack of. and I have already run into a problem. I drew out some images, basic rectangle shapes. At the top of the page is one large rectangle that stretches 700px wide. I then have three images underneath. One rectangle 497px wide and another image 201px wide. Both of which should line up next to each other under the larger rectangle. Well this is not happening. Instead of all images lining up in two rows it is lining up in three rows.

    Here is my CSS so far. I would appreciate some correction and some explanation if possible. Thank You. I've also looked into the float property and z-index options. Maybe I was not using it correctly. The z-index does not seem to work at all in firefox/netscape/opera browsers and only in IE.

    Code:
    <style type="text/css">
    
    #container{
    position:relative;
    width:700px;
    height:480px;
    }
    
    #pageHeader{
    position:relative;
    background:#666 url(main_title.jpg) no-repeat;
    width:700px;
    height:80px;
    margin-bottom:1px;
    }
    
    #buttonOne{
    position:relative;
    background:#666 url(makeReservations.jpg) no-repeat;
    width:251px;
    height:37px;
    }
    
    #buttonTwo{
    position:relative;
    background:#666 url(tollFreeNumber.jpg) no-repeat;
    width:251px;
    height:37px;
    margin-top:1px;
    }
    
    #quote{
    position:relative;
    float:right;
    background:#666 url(quote.jpg) no-repeat;
    width:448px;
    height:75px;
    margin-left:252px;
    margin-top:1px;
    }
    
    </style>
    	
    </head>
    
    <body>
    
    <div id="container">
      <div id="pageHeader"></div>
      <div id="quote"></div>
      <div id="buttonOne"></div>
      <div id="buttonTwo"></div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Oct 2005
    Posts
    128
    Try this:
    Code:
    <style type="text/css">
    
    #container{
    width:700px;
    height:480px;
    }
    
    #pageHeader{
    background:#666 url(main_title.jpg) no-repeat;
    width:700px;
    height:80px;
    margin-bottom:1px;
    }
    
    #buttons{
    float:left;
    padding:0;
    width:251px;
    height:74px;
    }
    
    #buttonOne{
    background:#666 url(makeReservations.jpg) no-repeat;
    width:251px;
    height:37px;
    }
    
    #buttonTwo{
    background:#666 url(tollFreeNumber.jpg) no-repeat;
    width:251px;
    height:37px;
    margin-top:1px;
    }
    
    #quote{
    float:right;
    background:#666 url(quote.jpg) no-repeat;
    width:448px;
    height:75px;
    }
    
    </style>
    	
    </head>
    
    
    <body>
    
    <div id="container">
      <div id="pageHeader"></div>
      <div id="quote"></div>
      <div id="buttons">
        <div id="buttonOne"></div>
        <div id="buttonTwo"></div>
      </div>
    </div>
    </body>
    </html>
    I myself am fairly new with CSS but I'll try to explain what I did. I try to stay away from the using "position" so I took all of those out. I also took away the margin-left for quote since it is not needed when using the float. I also added a containing div for the buttons that way you float the button container to the left and the quote to the right and everything fits in it's place.

  3. #3
    Join Date
    Apr 2005
    Posts
    91
    TEGraphix

    Thanks it worked with a slight modification. Changed the width and height to better accomodate the container and add a top margin because the buttons were right on top of the pageHeader, thus making it no visible. Let me know if the correction made are correct or at least the best way to handle this. It's odd originally I did have another container created for the buttons but I could not get it to work so I ended up going a different route. When lining up images such as this would a container be the best way to handle such a task?

    Code:
    #buttons{
    float:left;
    padding:0;
    width:700px;
    height:75px;
    margin-top:80px;
    }

  4. #4
    Join Date
    Apr 2005
    Posts
    91
    scratch that its not working. It looked good in my WYSIWYG but when viewed on the browser it does not work.

  5. #5
    Join Date
    Oct 2005
    Posts
    128
    This should fix all your problems. I changed the html a bit to better accomodate what you are doing and corrected the css.

    Since you are just putting the buttons and quote side by side, it's easier to put those in their own div and float them side by side and keep pageheader separate. If they are in a separate div below pageheader, they will naturally show up below that div. And since both buttons are in a div together you don't have to do anything special for them to show up one above the other.

    Code:
    <style type="text/css">
    <!--
    
    #container{
    width:700px;
    height:480px;
    }
    
    #pageHeader{
    background:#666 url(main_title.jpg) no-repeat;
    height:80px;
    margin-bottom:1px;
    }
    
    #buttons{
    float:left;
    padding:0;
    width:251px;
    height:75px;
    }
    
    #buttonOne{
    background:#666 url(makeReservations.jpg) no-repeat;
    height:37px;
    }
    
    #buttonTwo{
    background:#666 url(tollFreeNumber.jpg) no-repeat;
    height:37px;
    margin-top:1px;
    }
    
    #quote{
    float:right;
    background:#666 url(quote.jpg) no-repeat;
    width:448px;
    height:75px;
    }
    
    //-->
    </style>
    	
    </head>
    
    
    <body>
    
    <div id="container">
    
      <div id="pageHeader"></div>
    
      <div id="content">
        <div id="buttons">
          <div id="buttonOne"></div>
          <div id="buttonTwo"></div>
        </div>
        <div id="quote"></div>
      </div>
    
    </div>
    
    </body>
    </html>

  6. #6
    Join Date
    Apr 2005
    Posts
    91
    Ok that worked great. I was putting the quote div with the button container you created. Thank You.

    Should I assume then when created my scenario again and I have two images that need to be lined up in such a way that the left image be placed in a container and the right image just needs to float right? Is there a reason why the image cannot just be floated to the left without using the container? Sorry for all the questions but as I told you I am new to this and would like to get a better understanding of this.

  7. #7
    Join Date
    Oct 2005
    Posts
    128
    To tell you the truth, I'm not sure. I'm also fairly new to CSS positioning, floating, etc. Here is a tutorial I saw posted elsewhere in this forum. I haven't looked at it myself yet.

    The reason I used the buttons div is because you had more than one image you wanted lined up on the left and I knew it would be easier to use a div to hold all images in case you wanted to add more images and they would line up with the others. I'm not sure if you could have some images in one div that aligns to the left and just float another div to the right.

    If anyone else reading this has some insight on the topic, please let us know.

  8. #8
    Join Date
    Apr 2005
    Posts
    91
    tegraphix

    My quote graphic has a border around it now that I can't seem to get off. I used the border: 0; and it is still there. Any suggestion on this?

  9. #9
    Join Date
    Oct 2005
    Posts
    128
    I would have to see your new code. It could be a background color issue.

  10. #10
    Join Date
    Apr 2005
    Posts
    91
    tegraphix

    I got it working thanks. Yeah I got rid of the background color all together and it worked. That seems strange though considering my other images utilized the same background color.

    Thank you for the fast reply.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles