PDA

View Full Version : Help with Divs (basic questions)



disgracedsaint
Aug 13th, 2009, 06:32 PM
Ok so I'm using a template to make a site and I'm fairly new to Dreamweaver and everything I've done so far has been in tables that expand.

I want to make the body of the template bigger and I understand that I need to go into the css file to change the div sizes, but it seems when I do that I can get anything else in the template to line up.
Here is the code for the page and i have attachted the css. I believe the maintext div is what i'm trying to make bigger. If someone could explain why when I change the the size in the css everything doesn't line up anymore. What else do I need to change?

<!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=iso-8859-1" />
<title>Home</title>
<meta name="keywords" content="keyword1, keyword2, keyword3, etc..." />
<meta name="description" content="Description of website here..." />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
.style9 {
font-size: 14px;
color: #99ccff;
font-weight: bold;
}
.style10 {
font-size: 14px;
color: #99ccff;
}
.style11 {
font-size: 12px;
color: #FFFFFF;
}
-->
</style></head>
<body>
<div id="main">
<div id="interior">
<div id="top">
<div id="logo"><a href="index.html"><img src="images/logo.gif" alt="Company Name" border="0" /></a></div>
<div id="slogan"><img src="images/slogan.gif" alt="Company Slogan" /></div>
</div>
<div class="clear">

</div>
<div id="mid">
<div id="left">
<div id="navbar">
<ul>
<li class="button1"><a href="index.html">Home</a></li>
<li class="button2"><a href="about.html">Introduction</a></li>
<li class="button3"><a href="services.html">Our Services</a></li>
<li class="button4"><a href="clients.html">Our Clients</a></li>
<li class="buttonlast"><a href="contact.html">Contact Us</a></li>
</ul>
<img src="images/flag.jpg" width="187" height="323" />
</div>
</div>
<div id="maintext">
<p>&nbsp;</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">Copyright &copy; 2009 American Debtworks, Inc. All rights reserved.<br />
<br />
</div>
</body>
</html>

noneforit
Aug 13th, 2009, 06:37 PM
You have what is called a wrapper in the form of the #main div. All other elements sit inside this. Currently it has a fixed width of 740px. Before touching any of the inner elements, you would need to expand this wrapper first by making it wider. You can then look at making the inner divs such as #maintext wider so they fill up to the wrapper in width.

You dont appear to have any absolutely positioned (a good thing imo) elements which means that as you expand the #main div, you may find some white space between elements so you would have to adjust these widths accordingly if they are fixed.

disgracedsaint
Aug 13th, 2009, 08:07 PM
My biggest problem seems to be trying to get the background to resize. And when i say background i really mean the blue with the white border. Ugh I can't even explain this well enough and I am getting very fustrated... Thanks for helping me move closer in the right direction at least.

Rowsdower!
Aug 13th, 2009, 08:09 PM
You'll probably get a better response if you publish the page and post a link. If you don't have hosting yet feel free to check out freehostia.com and grab a (free, of course) account to use for just this sort of debugging.

Other than that, a useful development tool is to use Firefox and an add-in called Firebug (and/or the web developer add-in). This makes debugging MUCH easier. Life will never be the same again!

disgracedsaint
Aug 13th, 2009, 08:25 PM
http://www.ezbuilderfinance.com/html/tests.html

ok here you can clearly see what i'm trying to accomplish.

heres the html the css is attached to the first post.

<!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=iso-8859-1" />
<title>Home</title>
<meta name="keywords" content="keyword1, keyword2, keyword3, etc..." />
<meta name="description" content="Description of website here..." />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE ]>
<link href="css/ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
.style9 {
font-size: 14px;
color: #99ccff;
font-weight: bold;
}
.style10 {
font-size: 14px;
color: #99ccff;
}
.style11 {
font-size: 12px;
color: #FFFFFF;
}
-->
</style></head>
<body>
<div id="main">
<div id="interior">
<div id="top">
<div id="logo"><a href="index.html"><img src="images/logo.gif" alt="Company Name" border="0" /></a></div>
<div id="slogan"><img src="images/slogan.gif" alt="Company Slogan" /></div>
</div>
<div class="clear">

</div>
<div id="mid">
<div id="left">
<div id="navbar">
<ul>
<li class="button1"><a href="index.html">Home</a></li>
<li class="button2"><a href="about.html">Introduction</a></li>
<li class="button3"><a href="services.html">Our Services</a></li>
<li class="button4"><a href="clients.html">Our Clients</a></li>
<li class="buttonlast"><a href="contact.html">Contact Us</a></li>
</ul>
<img src="images/flag.jpg" width="187" height="323" />
</div>
</div>
<div id="maintext">

<form method="post" action="http://www.emailmeform.com/fid.php?formid=388077" enctype="multipart/form-data" accept-charset="UTF-8"><table cellpadding="2" cellspacing="0" border="0" bgcolor="#244A6F"><tr><td><font face="Verdana" size="2" color="#ffffff"></font> <div style="" id="mainmsg"> </div></td></tr></table><br><table cellpadding="2" cellspacing="0" border="0" bgcolor="#244A6F"><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">First Name</font></td> <td><input type="text" name="FieldData0" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Last Name</font></td> <td><input type="text" name="FieldData1" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Address</font></td> <td><input type="text" name="FieldData2" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">City</font></td> <td><input type="text" name="FieldData3" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">State</font></td> <td><input type="text" name="FieldData4" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Zip</font></td> <td><input type="text" name="FieldData5" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Phone</font></td> <td><input type="text" name="FieldData6" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Best Time to call</font></td> <td><input type="text" name="FieldData7" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">Email</font></td> <td><input type="text" name="FieldData8" size="30"> </td></tr><tr valign="top"> <td nowrap><font face="Verdana" size="2" color="#ffffff">What questions can we answer for you today?</font></td> <td><textarea name="FieldData9" cols="60" rows="10"></textarea><br> </td></tr><tr> <td colspan="2"><table cellpadding=5 cellspacing=0 bgcolor="#244A6F" width="100%"><tr bgcolor="#99ccff"><td colspan="2"><font color="#FFFFFF" face="Verdana" size="2"><b>Image Verification</b></font></td></tr><tr><td style="padding: 2px;" width="10"><img src="http://www.emailmeform.com/turing.php" id="captcha"></td><td valign="top"><font color="#000000">Please enter the text from the image</font> <br><input type="text" name="Turing" value="" maxlength="100" size="10"> [ <a href="#" onclick=" document.getElementById('captcha').src = document.getElementById('captcha').src + '?' + (new Date()).getMilliseconds()">Refresh Image</a> ] [ <a href="http://www.emailmeform.com/?v=turing&pt=popup" onClick="window.open('http://www.emailmeform.com/?v=turing&pt=popup','_blank','width=400, height=300, left=' + (screen.width-450) + ', top=100');return false;">What's This?</a> ]</td></tr></table></td></tr><tr> <td> </td> <td align="middle"><input type="text" name="hida2" value="" maxlength="100" size="3" style="display : none;"><input type="submit" class="btn" value="Send email" name="Submit"> <input type="reset" class="btn" value=" Clear " name="Clear"></td></tr><tr><td colspan=2 align="center"><br></td></tr></table></form>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">Copyright &copy; 2009 American Debtworks, Inc. All rights reserved.<br />
<br />
</div>
</body>
</html>

Rowsdower!
Aug 13th, 2009, 08:44 PM
Ah, I see. Much of your page layour is image-based. This is called "faux columns."

Do as laurieballard suggested and widen #main to your desired width. Make #interior the same width as well and then start creating new, wider background images for these:

../images/bg-main-top-bottom.gif
../images/bg-interior.gif
../images/bg-main-top-bottom.gif

Then increase the width of #maintext according to your desired dimensions (currently set to 50, which it overflows and pushes the page to the right). Depending on your overall page width this width should be more like 500px or more. Get rid of the cols="60" in your textarea and use an appropriate CSS width value instead.

That should give you a good start, but the background images will make you pull your hair out even when things are going well because it just won't look right. I'd fix those first and show us the progress (with your new desired width so we don't have to guess).

noneforit
Aug 13th, 2009, 08:51 PM
Agree with Rowsdower!, need to change the background images to be wider and increase the width of the 2 elements he mentioned.

The table you are using for your form layout seems to be overlapping the rest of the content because the width is too much to squeeze inside the parent div.

disgracedsaint
Aug 13th, 2009, 09:04 PM
yea i'm pulling my hair our as we speak. I understand what your saying at least. Now lets just hope I edit everything correctly....:rolleyes: