PDA

View Full Version : Help removing space between content div and menubar.


wheelstb
01-07-2013, 11:48 PM
Hello everybody, once again I am in need of some help.

I want to get rid of the large amount of space between the bottom of my menubar and the beginning of my content div. I've tried a few things but I'm a relative novice at Dreamweaver and web design so I'm not sure what to do.
The name of the div in question is contentdiv.

Here is a link to the image of the website


http://s8.postimage.org/88j4a1zb9/div_space_help.jpg

http://postimage.org/image/qo3l7gdfl/


When I look at the page in design view I can see a lot of space between the div And the menubar but, I can't remove it. I know I'm a novice but I see nothing in the code that would put the space in.


Thank you in advance for the help. I truly do appreciate it.


<!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">
.Menuandlogo {
text-align: center;
margin: 200px;
}
ul.centreit {
text-align: left;
display: inline-block;
margin-right: auto;
margin-left: auto;
}
#contentdiv {
margin-right: auto;
margin-left: auto;
width: 650px;
}


body {
background-image: url(../../images/bgmc.jpg);
background-repeat: no-repeat;
background-size:100% auto;
}
</style>
<script src="../../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position:relative;
width:700px;
height:383px;
z-index:1;
left: 380px;
top: 296px;
margin-right: auto;
margin-left: auto;
}
a {
font-size: 14px;
}
a:link {
color: #0080FF;
}
a:visited {
color: #0070C0;
}
a:hover {
color: #80FFFF;
}
a:active {
color: #F00;



</style>
</head>

<body>
<body class="MenuBarActive">
<div class="Menuandlogo">
<img src="../../../4kids/New logo/Jpeg_file_logo-01_ps02b_crop2-400px_wide-01.jpg" alt="Therapy 4 Kids" width="517" height="178" align="top" />
<br />
<ul id="MenuBar1" class="MenuBarHorizontal centreit">
<li><a href="../../Therapy 4 Kids Home-Pediatric Therapy index.html">Home</a></li>
<li><a href="#" class="MenuBarItemSubmenu">Our Services</a>
<ul>
<li><a href="../../Therapy 4 Kids Home-Pediatric Therapy physical therapy.html">Physical Therapy</a></li>
<li><a href="#">Occupational Therapy</a></li>
<li><a href="../../speach.html">Speech Therapy </a></li>
<li><a href="#">School Services</a></li>
<li><a href="#">Home Health</a></li>
</ul>
</li>
<li><a href="#">Resources</a></li>
<li><a href="#">Meet the Owners</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="content wrapper" id="contentdiv">
<p>At therapy for kids our goal is to provide pediatric therapeutic treatments designed to enrich the lives of children and their families. We believe that therapy is about more than simply reaching a goal. As therapist our job is to provide your child and family with the tools and knowledge necessary to ensure that your child’s journey through life is as successful as possible.</p>
<p> We understand that pediatric therapy can be very complex, no two children or families have the same needs and aspirations. Our complete package of pediatric services includes<a href="../../Therapy 4 Kids Home-Pediatric Therapy physical therapy.html" class="overlink"> physical therapy,</a> <a href="../../o">occupational therapy</a>, <a href="../../Therapy 4 Kids Home-Pediatric Therapy speech therapy.html">speech therapy</a> and school services. Because we offer a wide variety of services we will be able to meet all of your current needs and continue to help in the future as the needs of your family progress and evolve. What sets us apart from other healthcare providers is we provide therapeutic solutions that meet your family’s needs in the comfort of your own home.</p>
<p>If you’re visiting our website for the first time you may find yourself overwhelmed, unsure where to turn or what to do next. We are here to help. We have all the resources you need to get your child set up for their first visit.</p>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>

edbr
01-08-2013, 02:05 AM
margin: 200px; maybe?

Ricky55
01-08-2013, 02:40 AM
Nicely spotted mate.

Don't rely on dreamweavers design view too heavily just use a browser to get a more accurate picture of what's going on.

Also take all that CSS out and put it in its own file it will make it easier for you to work with.

wheelstb
01-08-2013, 02:48 AM
margin: 200px; maybe?

Thanks, I'll try that.


Nicely spotted mate.

Don't rely on dreamweavers design view too heavily just use a browser to get a more accurate picture of what's going on.

Also take all that CSS out and put it in its own file it will make it easier for you to work with.


Okay. what is the best way to go about doing this?

wheelstb
01-08-2013, 03:09 AM
margin: 200px; maybe?


I figured it out. Somehow for whatever reason there was a bottom margin on the div for the Logo.
Thanks for the help guys, I appreciate all the help available on this forum.

edbr
01-08-2013, 04:45 AM
margin: 200px; will do that
margin:10px 10px 10px 0px; top, right.bottom, left

Ricky55
01-08-2013, 06:33 AM
Okay. what is the best way to go about doing this?

Exactly as I said use a web browser to preview your pages, design view is terrible always has been, live view is fine but I still think you are better just previewing your pages in a good browser, such as Firefox, chrome or safari.

Regarding the CSS you need to copy it out of that file and create a new CSS file and paste it in. Then link to the CSS file from all your pages. That's the whole point of CSS.

If you need some help doing this come back to us.

wheelstb
01-08-2013, 09:09 PM
margin: 200px; will do that
margin:10px 10px 10px 0px; top, right.bottom, left


Okay, thanks for the info.


Regarding the CSS you need to copy it out of that file and create a new CSS file and paste it in. Then link to the CSS file from all your pages. That's the whole point of CSS.

That is specifically the part that I need help with. Thank you for clarifying that. I will give it a try and report back.

Again I would like to thank everyone for their gracious help