Jump to content

divs within divs geometric css table design?

paddyhaig

By paddyhaig
in CSS Help

 Share

Recommended Posts

paddyhaig Member

paddyhaig

Posted
Posted

I am trying to make a box that will remain in the middle of my screen and inside that box will be 12 smaller boxes that will act as buttons. I would like for the box and buttons to be the same in all browsers and maintain balance in all resolutions (That is for the box to stay in the middle of the screen and for the smaller button/boxes to stay relative to the outer box).

Is the some formula that will help me layout the smaller boxes in a geometrically balanced layout, kinda like in a table only using AP Divs.

I have included my code and a photo.

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--

#bodyDiv {
position:absolute;
width:597px;
height:304px;
z-index:1;
left: 130px;
top: 65px;
background-color: #CCC;
border: 1px solid #000;
}

/*This is the table*/
table
{
border-collapse:collapse;
}
table, td
{
border: 1px solid black;
}

td
{
height:30px;
vertical-align:middle;
}

td
{
text-align:center;
font-weight: bold;
color: #FFF;
}

/*This is the end of the table*/

/*This is the beggining of the left column*/
#apDiv1 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 49px;
top: 32px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv2 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 50px;
top: 95px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv3 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 48px;
top: 157px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv4 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 48px;
top: 219px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the left column*/

/*This is the beggining of the middle column*/
#apDiv5 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 230px;
top: 31px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv6 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 230px;
top: 94px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv7 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 229px;
top: 155px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv8 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 229px;
top: 216px;
background-color: #D6D6D6;
border: 1px solid #000;
}
/*This is the end of the middle column*/

/*This is the beggining of the right column*/
#apDiv9 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 414px;
top: 31px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv10 {
position:absolute;
width:150px;
height:45px;
z-index:2;
top: 91px;
left: 416px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv11 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 417px;
top: 153px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv12 {
position:absolute;
width:150px;
height:45px;
z-index:2;
left: 417px;
top: 216px;
background-color: #D6D6D6;
border: 1px solid #000;
}
#apDiv13 {
position:absolute;
width:150px;
height:233px;
z-index:3;
left: 50px;
top: 32px;
}
/*This is the end of the right column*/

-->
</style>
</head>

<body>

<div align="center"></div>
<div id="bodyDiv">
  <!-This is the begging of the left row-->
  <div id="apDiv1"></div>
  <div id="apDiv2"></div>
  <div id="apDiv3"></div>
  <div id="apDiv4"></div>
  <!-This is the end of the left row-->
  <!-This is the begging of the middle row-->
  <div id="apDiv5"></div>
  <div id="apDiv6"></div>
  <div id="apDiv7"></div>
  <div id="apDiv8"></div>
  <!-This is the end of the middle row-->
  <!-This is the begging of the right row-->
  <div id="apDiv9"></div>
  <div id="apDiv10"></div>
  <div id="apDiv11"></div>
  <div id="apDiv12"></div>
  <!-This is the end of the right row-->
</div>
</body>
</html>

 

[attachment deleted by admin]

haku Regular Member

haku

Posted
Posted

If your elements are a fixed height you can do this, however if they aren't, then you can't.

 

Lets say your buttons are a 150px by 50px. You can do the following:

 

HTML:

<div id="container">
  <a href="#">button 1</a>
  <a href="#">button 2</a>
  <a href="#">button 3</a>
  <a href="#">button 4</a>
  <a href="#">button 5</a>
  <a href="#">button 6</a>
  <a href="#">button 7</a>
  <a href="#">button 8</a>
  <a href="#">button 9</a>
  <a href="#">button 10</a>
  <a href="#">button 11</a>
  <a href="#">button 12</a>
</div>

CSS:

#container
{
  height:300px; 
  width:530px; 
  position:absolute;
  top:50%;
  margin-top:-150px;
  left:50%;
  margin-left:-265px;
  background-color:#999;
}

#container a
{
  float:left;
  display:block;
  height:50px;
  width:150px;
  background-color:blue;
  margin-left:20px;
  margin-top:20px;
}

paddyhaig Member

paddyhaig

Posted
  • Author
Posted

This could be just what I am looking for: I am trying to create what you see in the graphic, all the buttons can be 150px by 50px no problem, as long as the are 12 of them  and they are layed out in a 3 column 4 row grid and the div's are active links.

haku Regular Member

haku

Posted
Posted 
#container
{
  height:308px;
  width:536px;
  position:absolute;
  top:50%;
  margin-top:-150px;
  left:50%;
  margin-left:-265px;
  background-color:#999;
}

#container a
{
  float:left;
  display:block;
  height:50px;
  width:150px;
  background-color:blue;
  margin-left:20px;
  margin-top:20px;
  text-align:center;
  line-height:50px;
  border:solid black 1px;
}

paddyhaig Member

paddyhaig

Posted
  • Author
Posted

I thought you were my savior. ;-)

It kinda looks a little funky. Please see included graphic:

The are two rather distinct large containers and four columns instead of three with four rows.

I am trying to figure this out as I can see it's certainly heading in the right direction.

Why are the two distinct containers? Thanks for the help, you are rocking so far. 

boxes.jpg

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.