View Full Version : ap div question

06-12-2009, 03:20 PM
Hi all

Can you design a site using ap divs instead of divs?

The reason why i'm asking is at the moment i'm experimenting laying out a page and i'm finding it easier to use ap divs instead of normal divs

If i used this approach would i run into any problems at a later stage?


06-12-2009, 03:51 PM
Thats what I started with. Its easy because you can just draw and drag them. However, the code gets pretty sloppy if you have a large site. I have built an entire site using them with minimal problems, but now that Im getting into using divs + css, i find it much easier and cleaner.

From what Ive heard people with a lot of experience say, ap divs seem to be meant holding images, wheras divs are for normal content and also images (correct me if Im wrong).

06-12-2009, 03:51 PM
You can do it but it's not a good idea.

1. Basically everything will be positioned relative the the browser window so centering content is out.

2. If the content of one of the divs grows, then your divs will start overlapping.

3. If the size of a page element changes later (say the header gets a bit taller because of a new logo) you'll have to reposition every div.

I'm sure there are more but that should be enough.

06-12-2009, 03:53 PM
One more thing, since this is in a Dreamweaver forum, why don't you just start with one of DW's built-in CSS layouts and work from there?

06-12-2009, 04:38 PM
thanks for your replies chaps

The problem i'm having must be a simple one but i can't for the life of me figure out what i'm doing wrong

I'm trying to construct a basic layout so i can get to grips with how divs & css work together

what i've done is this...

i'm laying out a page for 1024 x 768 so my layout is 955 x 600

1. set the body tag to black
2. inserted a container div (800px wide x 525 px wide)
3 inserted a header div (800 px x 100 px)
4 inserted a main content div (800px x 400 px)
5. inserted a footer div (800 px x 25 px)

what i can't figure out how to do is to insert a nav bar into the main content div of say 100 px x 400 px using a div tag, i can draw one using an ap div, but can't figure out how to do it with insert div tag

here's the code of what i've been practising with, maybe someone can tell me what i'm not doing

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<div id="container">
<div id="header"></div>

<div id="maincontent"></div>
<div id="footer"></div>

and here's my stylesheet

@charset "utf-8";
body {
background-color: #000000;
margin: 0px;
text-align: center;
padding: 0px;
#container {
height: 525px;
width: 800px;
margin-right: auto;
margin-left: auto;
background-color: #FFFF00;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
#header {
background-color: #0000FF;
height: 100px;
width: 800px;
margin: 0px;
padding: 0px;
#maincontent {
height: 400px;
width: 800px;
background-color: #666666;
margin: 0px;
padding: 0px;
#footer {
background-color: #00FF00;
height: 25px;
width: 800px;
margin: 0px;
padding: 0px;

I can't click inside the maincontent div for some reason any ideas folks?


06-12-2009, 04:53 PM
use unordered list. because it's gona b vertical you can convert it to horizontal using css. step by step tuts here: http://css.maxdesign.com.au/listutorial/
scroll down to tutorial 4