Tutorial :CSS - Positioning



Question:

a. image (960x7) b. div (width:960, padding:10)

I want to position (a) so that it's 50px from the top, centered. I want to position (b) so that it's directly beneath (a) with no space.

My CSS follows:

@charset "utf-8";  * {margin:0;padding:0;}  body {background-color:#999;}  .pagetop {margin:50 auto;background:url(../img/pgtop.gif) top center no-repeat;}  .page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}  

My HTML follows:

<body>  <div class="pagetop" />  <div class="page">  <p>Warning <a href="#">sign</a>, warning sign...I see it but I...pay it no mind.</p>  </div>  

I'm trying to create a white container with rounded edges on a grey background. How can I do this simply and intelligently?


Solution:1

Check out this question for the rounded edges:

CSS Rounded corners

And for the positioning of the objects, I would go with something like this:

topimage {     position: absolute;     top: 50px;     text-algin: center;  }  


Solution:2

To put the elements without a margin between them, you want the top image to have a zero bottom margin:

margin: 50px auto 0;  

(Notice that you have to specify a unit (for example px) for any non-zero measurement.)

The background image will not give the top element it's size, you have to specify the width and height to match the size of the image. If the height is less than a regular character, you need to use something to keep Internet Explorer from expanding the element to the height of one character line, for example by using overflow: hidden; to keep the content from affecting the size of the element:

width: 960px; height: 10px; overflow: hidden;  

The padding is added to the size of the element, so you have to make the page element 20 pixels narrower:

padding: 10px; width: 940px;  


Solution:3

If your rounded corner image is 30px high, set .pagetop height to 30px, add 50px of padding to the top and set the top of the background image to 50px.

.pagetop {height:30px;padding-top:50px;margin:0 auto;background:url(../img/pgtop.gif) center 50px no-repeat;}  .page {margin:0 auto;width:960px;background-color:#fff;padding:10px;}  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »