Well I have a few problems right now. Im using divs to build my webpage, it was all working fine n dandy until I added my content section.

View at http://www.arborpronw.com/design/layout.php

Mouse over the navigation/menus. It goes under the content area, how do I fix that?!

Also: How do I add padding around the div boxes so the text isn't right by where the box starts?

I have:
#content {
width: 747px;
height: 515px;
padding: 25;
background: #FFF;
position: relative;
left: 15px;
top: 5px;
}

but that doesnt work.

So yeah, please help.

This worked for me.

Adding a z-index:

#nav {
width: 750px;
height: 33px;
padding: 0;
background: #f2f8f1;
position: relative;
left: 15px;
z-index:2;
}

#content {
width: 747px;
height: 515px;
padding: 25;
background: #FFF;
position: relative;
left: 15px;
top: 5px;
z-index:1;
}

try padding: 25px? if you copied your code verbatim then i think thats it. as far as i know, 25 without a unit does nothing.

Originally Posted by mmecca

try padding: 25px? if you copied your code verbatim then i think thats it. as far as i know, 25 without a unit does nothing.

I tried that, but it throws the content box way out of line.

You may have to adjust the content width to get it to appear..i'm still tinkering with the code.

Thank you!! I got that fixed, but now for some reason one of the dropdown menu navigations is appearing smaller than the others. In firefox its "Arbor Services"

You can see that the drop down menu doesnt align with that one, but it does with all the rest, and they all pull the same size vars. Whats wrong with that and how do I fix it?

I guess not everyone is seeing the error...
This is what I see in both Firefox and Opera:

http://www.arborpronw.com/design/whatswrong.png

That must be a MAC error, dude. I looked at it in both FF and IE (Windows) and it's fine.

Originally Posted by ADAM Web Design

That must be a MAC error, dude. I looked at it in both FF and IE (Windows) and it's fine.

I cleared my cache/cookies/history and it works. Go figure.

One more question... I dont know how to lay this out in CSS:
http://www.arborpronw.com/design/how.png

I know how i'd do it as tables, but i want to avoid that. Any help? I dont quite have a grasp on the divs in terms of separating them vertically.

Originally Posted by BagelPirate

http://www.arborpronw.com/design/how.png

page not found.

Originally Posted by NateL

page not found.

Try now :x
Photoshop ****ed up when saving the .png, i fixed it.
http://www.arborpronw.com/design/how.png

To code that you can do something like this:

<div id="sidebar">
<div id="sideBox">
<div id="textBox">
<p>blah blah blah</p>

</div><!-- end textBox -->
</div><!-- end sideBox -->
<div class="sideBottom"></div>
</div><!-- end sidebar -->

Specify the top of the box image as a background of #sideBox, set to no-repeat.
Specify the bottom of the box image as a background of #sideBottom, also set to no-repeat.

Adjust sizes, padding and margins as necessary.

Originally Posted by LadynRed

To code that you can do something like this:

<div id="sidebar">
<div id="sideBox">
<div id="textBox">
<p>blah blah blah</p>

</div><!-- end textBox -->
</div><!-- end sideBox -->
<div class="sideBottom"></div>
</div><!-- end sidebar -->

Specify the top of the box image as a background of #sideBox, set to no-repeat.
Specify the bottom of the box image as a background of #sideBottom, also set to no-repeat.

Adjust sizes, padding and margins as necessary.

Thanks, this is pretty much what I came up with after hacking some code.
The site (design) is done now, www.arborpronw.com - Tell me what you think!

Get rid of the scrolling div. It looks horrible that I have to scroll down to scroll another content box. And I'm using 1440x900, so imagine if I had less height to work with, how much more annoying that would be.

You should also consider using an unordered list for your navigation. That way I can have CSS disabled, and see a text version of your navigation. This will also help you to rid of the javascript used for the image rollovers. This is because you can apply link classes to the unordered list through CSS. You'd be able to apply the a{} background and then a:hover{} background jS free!

You should also get rid of the inline stylesheet. Create a new stylesheet.css file, and then upload it to your website.

Link it in your header like so:

 <link type="text/css" href="stylesheet.css" rel="stylesheet" media="screen" />

For the jS that you need to keep, I'd recommend finding a way to replace it with regular CSS/HTML, but if you HAVE to keep it, you need to create a new file for the js. like "navi.js" and link it like so:

 <script src="navi.js" type="text/javascript"></script>

You also have a big problem here.

<LINK REL=StyleSheet HREF="cssindex.css" TYPE="text/css">
<!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>Arbor Pro Tree Experts</title>

The first thing that should appear there is your DOCTYPE.

This is what it should look like, and feel free to take this template here:

<!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 profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="distribution" content="global" />
<meta name="robots" content="follow, all" />
<meta name="language" content="en, sv" />
<meta name="author" content="Jordan Miskowicz" />
<meta name="keywords" content="jordan, atourworst, org, about, domain, 2006, 2007, games, holdfire, holdfire network " />
<meta name="description" content="The personal weblog of Jordan Miskowicz. Blog entries about her boyfriend, work, school and anything else. Also available are wordpress themes, livejournal layouts, and the itunes xhtml playlist creator." />
<link type="text/css" href="stylesheet.css" rel="stylesheet" media="screen" />
<script src="navi.js" type="text/javascript"></script>

If you're going to use XHTML 1.0 Transitional as your doctype, then you need to follow the rules and guidelines. Visit W3C to find out more information about it, if you're not fully aware of it.

http://validator.w3.org/check?verbos...orpronw.com%2F