Need help with layout (Urgent)

Mumrik · 07-10-2012, 01:12 PM

Hello I got a problem creating a layout in dreamweaver. Here is what I'm trying to achieve.

Sorry for the crappy sketch, well to my understanding one would create this by first creating a div tag container that is 100% in width and set to relative...(Because if it's absolute for some reason it takes up more than 100% of the width in the browser). Then I set the height to some random number that previews well in my browser since 100% won't work...

This div tag I'd put the background image on AND BANNER. Like there would be 4 images. The 3 buttons and the background. Now I need to put 3 buttons or ap div tags within the div tag. Here it's getting messy. They just won't align as I want them to. The button in the middle has to be a bit bigger than the others. I have managed to make the big button be in the middle by setting it to relative and auto values on margin or whatever. (I'm very uninformed)

But I can't get the two others buttons to look good beside the big one. It looks decent in the program but it's all messed up when I preview it in the browser. I wonder if someone could show by example how one would put together this to my knowledge very simple layout. Like just paste the code and I could have a look. I'd really appreciate it!

SB65 · 07-10-2012, 01:48 PM

Easiest if you post your code, or a link to your page, I think.
As a general rule you shouldn't need to set your position to relative or absolute for this layout.

coothead · 07-10-2012, 01:54 PM

Hi there Mumrik,

and a warm welcome to these forums.

Here is an example, for you to try...

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">

<title></title>

<style>
#button-container {
    padding:20px 0;
    text-align:center;
    background-color:#f0f0f0;
 }
#big,.small {
    width:140px;
    height:140px;
    border:2px solid #666;
    border-radius:72px;
    margin:0 40px; /* adjust this value to suit */
    font-family:arial,sans-serif;
    font-size:24px;
    font-style:oblique;
    background-color:#fff;
    box-shadow:6px 6px 12px #999;
    outline:none;
 }
.small {
    width:106px;
    height:106px;
    border-radius:55px;
 }
</style>

</head>
<body>

<div id="button-container">
 <input class="small" type="button" value="Button">
 <input id="big" type="button" value="Button">
 <input class="small" type="button" value="Button">
</div>

</body>
</html>

coothead

Mumrik · 07-10-2012, 01:59 PM

Ok here is the source code:

Code:

<!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>Index</title>
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="Dodo">
  <div id="apDiv1"></div>
</div>
</body>
</html>

And here is the stylesheet:

Code:

.Dodo {
	height: 800px;
	background-color: #666;
}

#apDiv1 {
	position:relative;
	width:400px;
	height:400px;
	z-index:1;
	margin: auto;
	background-color: #999999;
	top: 300px;
}

Now how would I place two buttons on the side of the big one that is in the middle? And make them line up perfectly?

Quote:

Here is an example, for you to try...

Well the thing is that I'd like to use ap div elements for the buttons...well I'd like custom images that is why. Plus the layout is quite different well...maybe you could just show me how to add two more ap div elements in the code I provided since the layout is fixed in that one. I'm not lazy it's just that I need to see things visually otherwise it's like chinese to me you see. xD Or anyone could tell me how to add two more ap div elements and line them up?

EDIT: Or maybe it's not good to use ap div elements for buttons? they seem to be very hard to line up correctly...

Mumrik · 07-10-2012, 02:45 PM

Nvm I think I managed to fix it, what do you think of this? Is this how one would do it?

Code:

<!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>Index</title>
<link href="Stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>

<body>
<div class="Dodo">
  <div class="Dodo2">
    <div id="apDiv1"></div>
    <div id="apDiv3"></div>
    <div id="apDiv2"></div>
  </div>
</div>
</body>
</html>

Stylesheet

Code:

.Dodo {
	height: 800px;
	background-color: #666;
	width: 100%;
}
.Dodo2  {
	height: 500px;
	position: relative;
	background-color: #369;
	top: 250px;
}

#apDiv1 {
	position:absolute;
	width:33.33%;
	height:500px;
	z-index:1;
	background-color: #CC0033;
}

#apDiv3 {
	position:absolute;
	width:33.33%;
	height:500px;
	z-index:2;
	left: 33.33%;
	background-color: #66CC66;
}

#apDiv2 {
	position:absolute;
	width:33.33%;
	height:500px;
	z-index:3;
	left: 66.66%;
	background-color: #669933;
}