Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS positioning panels problems

CSS positioning panels problems

Problem

I've been trying to make this layout for weeks now but i just cant seem to get it like this at all!

So if it's not to much trouble can some one try and get me a link or something like that so I can continue with my site.

Problem courtesy of: Jrop

Solution

Here's a step in (hopefully) the right direction.

Demo

Some very important things to keep in mind here:

positioning basics

setting an element's position to absolute will let you freely place it based on pixel coordinates, but it's usually a good idea to place it in a container to restrict it. You create a container for absolutely positioned elements by creating a parent with a position of relative (or anything other than the default, static).

use variable values (percentages)

Also, you want to position the elements with percentages so that it can be resized and to ensure centering. You can give an element a % width or height and it will be the % of the width or whatnot of its first non-static parent.

positioning the elements

You can then position the elements based on percent values using the Left and top properties. Left for position:absolute elements indicate "some value from the left edge of the first non-static parent". Likewise for top, bottom, and right.

centering an element

to position an element with absolute positioning in the middle of its first non-static parent, you give it a left value of 50% and a top value of 50%. (50% of the parents width from the left edge of that parent and 50% of its height from the top). This will position the top left corner of the element in the middle to the parent. to center the element fully, you need to offset it by half its width and height. You can use margin-left and margin-right with negative values for this.

From there on you can just adjust as needed as I did in the provided demo. Study the code (also pasted below for future reference) and see how the elements are positioned and what properties where used.

HTML

CSS

.container
{
    width: 300px;
    height: 300px;
    position:relative;
    margin:100px;
}

.block, .center
{
    width:25%;
    height:25%;
    background:#5aa;
    border-radius:10px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-12%;
    margin-top:-12%;
}

.center
{
    width:30%;
    height:30%;
    margin-left:-15%;
    margin-top:-15%;
}

.center
{
    border-radius:100%;
}

.tl
{
    left:20%;
    top:20%;
}
.tr
{
    left:80%;
    top:20%;
}
.br
{
    left:80%;
    top:80%;
}
.bl
{
    left:20%;
    top:80%;
}
.t
{
    top:10%;
}
.r
{
    left:90%;
}
.b
{
    top:90%;
}
.l
{
    left:10%;
}
Solution courtesy of: Joseph Marikle

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS positioning panels problems

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×