Trouble with CSS Positioning
Hello-
I am working with a built-in Dreamweaver CSS template (2
Column, Fixed, Header & Footer). I am trying to get the two
divs that are nested inside the container div to always be 100%
height of that container div... Just can't seem to get it right.
For example, I have a div named "Container". Then I have two
nested divs, one called "LeftSideBar" (set to float: Left), the
other named "MainContent" (no float). When I go to set the
positioning, I put the height of the interior divs to 100%, but
only the "MainContent" div is adjusting to the height of the
outside "Container" div. The "LeftSideBar" stays the same and does
not grow to fill 100% of the Container.
Below is the code for the three Divs mentioned above... Any
help would be much appreciated.
PS - Here is a link to the page...
Executive.html
Here is the CSS code for the three Divs:
Anyone? I would really appreciate the help!
Similar Messages
-
Hey guys, I am having trouble with some code. I have nested divs inside of a container dive for the body copy, but I am having trouble with the background of the container div going behind the nested divs. I only have this issue with the background when I go to float the nested divs.
Below is a copy of my html and a copy of my linked css style sheet.
<!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>Welcome to Optimus Lens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
<style type="text/css">
#sector {
background-repeat: no-repeat;
background-position: left;
width: 869px;
margin-top: -51px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#oag {
width: 574px;
margin-left: 23px;
float: left;
/* [disabled]position: relative; */
#small_col {
width: 279px;
margin-right: 23px;
float: right;
/* [disabled]position: static; */
</style>
</head>
<body onload="MM_preloadImages('images/home_over.jpg','images/our_mission_over.jpg','images/products_over.jpg','images/news_over.jpg','images/order_over.jpg','images/contact_over.jpg')">
<div id="CONTAINER">
<div id="header"><img src="images/header_top.png" width="916" height="39" />
<img src="images/header_logo.jpg" width="916" height="95" />
<img src="images/header_image.jpg" width="916" height="266" />
<img src="images/header_bar.jpg" width="916" height="9" />
</div>
<div id="menuContainer">
<!-- NAVIGATION -->
<ul>
<li>
<img src="images/fold_left_top.png" width="22" height="35" /><img src="images/menu_left.jpg" width="197" height="35" />
</li>
<li>
<div class="menu n1"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/home_over.jpg',1)"><img src="images/home_up.jpg" alt="home" name="home" width="66" height="35" border="0" id="home" /></a></div></li>
<li>
<div class="menu n2"><a href="mission.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our Mission','','images/our_mission_over.jpg',1)"><img src="images/our_mission_up.jpg" alt="Our Mission" name="Our Mission" width="124" height="35" border="0" id="Our Mission" /></a></div></li>
<li>
<div class="menu n3"><a href="products.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Products','','images/products_over.jpg',1)"><img src="images/products_up.jpg" alt="products" name="Products" width="98" height="35" border="0" id="Products" /></a></div></li>
<li>
<div class="menu n4"><a href="news.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','images/news_over.jpg',1)"><img src="images/news_up.jpg" alt="News" name="News" width="77" height="35" border="0" id="News" /></a></div></li>
<li>
<div class="menu n5"><a href="order.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Order','','images/order_over.jpg',1)"><img src="images/order_up.jpg" alt="Order" name="Order" width="77" height="35" border="0" id="Order" /></a></div></li>
<li>
<div class="menu n6"><a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/contact_over.jpg',1)"><img src="images/contact_up.jpg" alt="Contact" name="Contact" width="80" height="35" border="0" id="Contact" /></a></div></li>
<li>
<img src="images/menu_right.jpg" width="197" height="35" /><img src="images/fold_right_top.png" width="22" height="35" /> </li>
</ul>
</div>
<div id="header_bottom"><img src="images/fold_left_bottom.png" width="22" height="38" /><img src="images/header_bottom.jpg" width="916" height="38" /><img src="images/fold_right_bottom.png" width="22" height="38" />
</div>
<div id="bodycopy">
<div id="sector">
<img src="images/home/sector_top.png" width="869" height="341" alt="sector frames" />
</div>
<p> </p>
<div id="oag">
<img src="images/home/oag_join.png" width="574" height="281" alt="save with oag" />
<p> </p>
<img src="images/home/bottom.png" width="574" height="132" />
</div>
<div id="small_col">
<img src="images/home/optimize_small.png" width="279" height="132" />
<p> </p>
<img src="images/home/intuition_small.png" width="279" height="132" />
<p> </p>
<img src="images/home/intuition_small.png" width="279" height="132" />
</div>
</div>
<div id="footer"><img src="images/footer.png" width="916" height="52" />
</div>
</div>
</body>
</html>body {
margin: 0px;
background-image: url(images/background_fade_04.jpg);
background-repeat: repeat-x;
background-position: top;
background-color: #DCDCDC;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
#box1 {
background-image: url(images/bodycopybox_01.png);
background-repeat: no-repeat;
background-position: left;
height: 54px;
width: 869px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#box2 {
background-image: url(images/bodycopybox_02.png);
background-repeat: repeat-y;
background-position: left;
width: 869px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
.bodycopybox {
padding-right: 40px;
padding-left: 40px;
.bodycopyboxheader {
padding-right: 40px;
padding-left: 40px;
font-weight: bolder;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #21368b;
#box3 {
background-image: url(images/bodycopybox_04.png);
background-repeat: no-repeat;
background-position: left;
height: 31px;
width: 869px;
margin:0 auto;
#box4 {
background-image: url(images/bodycopybox_03.png);
background-repeat: no-repeat;
background-position: left;
height: 31px;
width: 869px;
margin:0 auto;
p {
margin: 0px;
#header_bottom {
width: 960px;
margin:0 auto;
#CONTAINER {
width: 100%;
margin:0 auto;
#header {
width: 916px;
margin:0 auto;
#menuContainer {
width: 960px;
margin:0 auto;
height: 35px;
#menuContainer ul{
list-style:none;
height:35px;
margin:0;
padding:0;
#menuContainer li{
float:left;
height:35px;
margin:0;
padding:0;
#menuContainer li a{
text-align:center;
float:none;
height:35px;
margin:0;
padding:0;
div.menu{position:relative;}
.n1{
width:66px;
float:left;
display:inline-block;
clear:both;
.n2{
width:124px;
float:left;
display:inline-block;
clear:both;
.n3{
width:98px;
float:left;
display:inline-block;
clear:both;
.n4{
width:77px;
float:left;
display:inline-block;
clear:both;
.n5{
width:77px;
float:left;
display:inline-block;
clear:both;
.n6 {
width:80px;
float:left;
display:inline-block;
clear:both;
#bodycopy {
background-color: #FFFFFF;
width: 916px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
#footer {
width: 916px;
margin:0 auto;
padding: 0px;Try this:
#CONTAINER {
width: 900px;
margin:0 auto;
background: #FFF;
overflow:hidden; /**float containment**/
/**There is no need for #sector division, you can delete it.**/
#oag {
width: 574px;
float: left;
margin-left: 25px;
#small_col {
width: 279px;
float: right;
margin-right: 25px;
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
Hello,
I am still having trouble with a web page that I was asked to
redesign. I decided to implement CSS into the page to change the
appearance and navigation, however, the javascript (inherited) that
was used on the page is having problems. I don't not know
javascript, therefore I really can't address that issure right now.
The page is centered in all of the browsers, along with the
header and the container for the tab menu. The issue is the other
containers that have side navigation or the content within the tab
menu container.
My concern is that the page is viewing correctly in IE6 and
Opera but not in Netscape and Firefox. When I preview the page in
the browsers, I get an error message in the status bar "done but
errors on page" (still views correctly in IE & Opera).
Hopefully, this all makes sense and everyone is not off
enjoying pre-4th July celebrations to respond. -Thanks!
css styleDid you post a link to your page?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Iwannaknow2" <[email protected]> wrote in
message
news:e8b5du$9q2$[email protected]..
> Hello,
>
> I am still having trouble with a web page that I was
asked to redesign. I
> decided to implement CSS into the page to change the
appearance and
> navigation,
> however, the javascript (inherited) that was used on the
page is having
> problems. I don't not know javascript, therefore I
really can't address
> that
> issure right now.
>
> The page is centered in all of the browsers, along with
the header and the
> container for the tab menu. The issue is the other
containers that have
> side
> navigation or the content within the tab menu container.
>
> My concern is that the page is viewing correctly in IE6
and Opera but not
> in
> Netscape and Firefox. When I preview the page in the
browsers, I get an
> error
> message in the status bar "done but errors on page"
(still views correctly
> in
> IE & Opera).
>
> Hopefully, this all makes sense and everyone is not off
enjoying pre-4th
> July
> celebrations to respond. -Thanks!
> [email protected]
> -
Help with CSS positioning of menu
Hello.
Am slowly making some progress following recent difficulties
with CSS.
At the moment things are finally looking the same on
different browsers EXCEPT the menu bar to the right of the movie:
http://www.notjustthenews.co.uk/page2_movies.html
Basically in Internet Explorer it's where I want it to be,
level with the top of the movie, but in Safari it drops down much
lower.
Is there anything I can do to stop this happening?
This is the CSS I'm using for the menu:
width: 300px;
height: 160px;
float: left;
margin-top: 40px;
margin-bottom: 0px;
margin-left: 85px;
display: block;
clear: none;There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
<header>logo and menu goes here </header>
<section>
<aside>left column content</aside>
<aside>right column content<aside>
</section>
<footer>footer goes here </footer>
</body>
Nancy O. -
nydogworks.net
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NYDogWorks Long Island Dog Training and Behavior</title>
<meta name="description" content="Serving all of Long Island, Nassau & Suffolk. NYDogWorks specializes in dog training, dog behavior, and puppy training.">
<meta name="keywords" content="dog training, long island dog training, dog trainer, long island dog obedience, puppy training classes">
<link href="css/mainstyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><!-- Beginning of compulsory code below -->
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.advanced.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
<link href="css/overlay-apple.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.tools.min.js"></script>
<style>
div.apple_overlay h2 {
margin:10px 0 -9px 0;
color:#222;
font-weight:bold;
font-size:14px;
div.black h2 {
color:#222;
#apple {
margin-top:10px;
float: left;
width: 250px;
padding-right: 10px;
#apple img {
background-color:#fff;
padding:2px;
border:1px solid #ccc;
margin:2px 5px;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
body {
margin-right: auto;
margin-left: auto;
</style>
<!--[if lt IE 7]>
<style>
div.apple_overlay {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
color:#fff;
/* default close button positioned on upper right corner */
div.apple_overlay div.close {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
</style>
<![endif]--><script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script><script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26177215-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/nydogworks-logo-hover.png','images/training-services-on. jpg','images/behavior-therapy-on.jpg','images/off-leash-training-on.jpg')">
<div id="wrapper"> <div id="header">
<div id="logoBox"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/nydogworks-logo-hover.png',1)"><img src="images/nydogworks-logo.png" alt="NY Dogworks" name="Image3" width="280" height="200" border="0" id="Image3" /></a></div>
<div id="slogan">Serving All of Long Island, Nassau & Suffolk Counties<br />
Also serving Manhattan, Brooklyn & Queens
</div><div id="emailBox">
<h2><img src="images/calltogetstarted.png" width="473" height="74" alt="Call to get started" /></h2>
</div><div id="mainNav"><!-- Beginning of compulsory code below -->
<ul class="dropdown dropdown-horizontal" id="nav" name="nav">
<li><a href="about-ny-dog-works.html">About Us</a></li>
<li><a href="long-island-dog-training-programs.html" class="dir">Training Programs</a>
<ul>
<li><a href="basic-obedience.html">In Home Dog Training</a></li>
<li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
<li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
<li><a href="off-leash-training.html">Off Leash Training</a></li>
<li><a href="puppy-training-program.html">Puppy Training</a></li>
</ul>
</li>
<li><a href="dog-trainer-testimonials.html" class="dir">Testimonials</a></li>
<li><a href="contact-long-island-dog-trainer.html" class="dir">Contact Us</a></li>
</ul>
<!-- / END --></div>
</div>
<div id="container">
<div id="imgholder"><a href="long-island-dog-training-programs.html"><img src="images/main-header.jpg" alt="private dog training long island new york" width="951" height="416" border="0" /></a>
<div id="program1"><a href="long-island-dog-training-programs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/training-services-on.jpg',1)"><img src="images/training-services.jpg" alt="dog training services" name="Image6" width="315" height="137" border="0" id="Image6" /></a></div>
<div id="program1"><a href="board-and-train-dog-program.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/boarding_training-on.jpg',1)"><img src="images/Boarding_training.jpg" alt="board and train dog program" name="Image5" width="315" height="137" border="0" id="Image5" /></a></div>
<div id="program1"><a href="dog-behavior-therapy.html" onmouseout="MM_swapImgRestore()" onmouseover=
"MM_swapImage('Image7','','images/Behavior_therapy2-on.jpg',1)"><img src="images/Behavior_therapy2.jpg" alt="behavior therapy" name="Image7" width="311" height="137" id="Image7" border="0" align="right" /></a></div>
</div>
<div id="pageContentNoside">
<div id="sideSub">
<h2>Dog Training Services<br />
</h2>
<ul id="subnav">
<li><a href="basic-obedience.html">Basic Obedience</a></li>
<li><a href="dog-behavior-therapy.html">Behavior Therapy</a></li>
<li><a href="board-and-train-dog-program.html">Board & Train Program</a></li>
<li><a href="off-leash-training.html">Off Leash Training</a></li>
<li><a href="puppy-training-program.html">Puppy Training</a></li>
</ul>
<br />
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F NYDogWorks%2F219268038151244%3Ffref%3Dts&width=248&height=558&show_faces=true& amp;colorscheme=light&stream=true&border_color=%23FFFFFF&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:248px; height:558px;" allowTransparency="true"></iframe>
<p><br />
</p>
<p> </p>
<p><img src="images/4449da18fc3aa2f249d17dc90ebd5531.jpg" width="145" height="136" /><br />
</p>
</div>
<div id="mainContentFeature1">
<h2>Welcome To NY Dogworks</h2>
<p><img src="images/dog-breaking-through.jpg" alt="new york dog trainer" width="136" height="170" class="h_img_float_right" />Our private one on one training lessons are done at your home by a Professional Certified Trainer and Behavior Expert. The lessons are tailored to fit what you would like done with your puppy or adult dog. <br />
<br />
We use a humane, positive and scientifically sound approach that makes it easy for you and your dog to succeed. Our instructions are broken down into simple steps so that everyone can take part in the training and be able to practice as a family. <br />
<br />
<span class="employeeName">Call Today for a Free Consultation!! </span></p>
<p>Do not have the time or patients to do the Training? Well then NY DogWorks has the answer.. We now do <a href="board-and-train-dog-program.html">Board and Train Programs</a> at our lovely facility in the home of Owner & Trainer Brian DeMartino. It is a 2 to 6 week program that is 100% guaranteed. Your dog will stay with us for no additional fee if we feel that he or she is not ready to graduate. This program can be for Puppy Training, Housebreaking, Socialization / Obedience & Manners / Behavior problems such as Aggression, Anxiety, or Fears / Advanced Off Leash Training / Personal Protection and much more..</p>
<p>We also <a href="board-and-train-dog-program.html">board dogs</a> at our facility if you are going away and want your family pet to be cared for 24/7 as if he or she was one of our own. Plenty of playtime, walks, individual attention, grooming if needed, comfortable sleeping areas with their own bed, and lots and lots of love.. </p>
<p>Let us help you have the relationship that you and your dog deserve.. <br />
<br />
<strong>We are now accepting</strong><br />
<img src="images/creditcards.jpg" width="228" height="43" alt="now accepting credit cards" /><br />
<br />
<br />
</p>
<p><br />
</p>
<p><br />
<br />
</div>
<div id="mainContentFeature2">
<form action="form.php" method="post" name="form2" id="form2"> <table width="279" border="0" cellpadding="2" cellspacing="2">
<tr>
<td width="273"><h2>Quick Contact</h2></td>
</tr>
<tr>
<td class="mainContent">Your Name</td>
</tr>
<tr>
<td><span class="style9">
<input name="forname" type="text" class="colorfieldssmall" id="forname" size="20" />
</span></td>
</tr>
<tr>
<td class="mainContent">Your Email Address* (required)</td>
</tr>
<tr>
<td><span class="style7 style9">
<input name="admail" type="text" class="colorfieldssmall" id="admail" size="25" />
</span></td>
</tr>
<tr>
<td class="mainContent">Phone Number</td>
</tr>
<tr>
<td><span class="style7 style9">
<input name="phone" type="text" class="colorfieldssmall" id="phone" />
</span></td>
</tr>
<tr>
<td><span class="mainContent">Type of Dog Training</span></td>
</tr>
<tr>
<td class="mainContent"><span class="style9">
<select name="need" class="colorfieldssmall" id="need">
<option value="select one">select one</option>
<option value="Basic Obedience">Basic Obedience</option>
<option value="Behavior Therapy">Behavior Therapy</option>
<option value="Board and Train">Board and Train</option>
<option value="Off Leash Training">Off Leash Training</option>
<option value="Puppy Training">Puppy Training</option>
</select>
</span></td>
</tr>
<tr>
<td><span class="mainContent">Comments</span></td>
</tr>
<tr>
<td><textarea name="comments" id="comments" cols="24" rows="8"></textarea></td>
</tr>
<tr>
<td><div align="left">
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</td>
</tr>
</table></form>
<h2><br />
We are available in the following areas:</h2>
<p>Long Island, Nassau county, Suffolk county, Manhattan, Brooklyn, Bronx, & Queens.</p>
<p>**We have pick up and drop off services for your pet for the boarding and boarding and training programs. <br />
</p>
<h2>Dog Training Testimonials<br />
</h2>
<p>Sending Otis to Brian for the board and train program was the best decision I ever made. After being told Otis could not be helped and that he should be put down, I was devastated. Otis has now been back from Brian's program for a few weeks and is extremely obedient and friendly. He is the same puppy we brought home a couple years ago, but calmer and without any aggression. We work on Otis' obedience daily as well as walk him and put him on the treadmill. Thanks to Brian, our dog is happy-go-lucky and more approachable. The list goes on and on of how Brian has helped the family, myself, and especially Otis. If you are having issues with your dog, especially behavior and aggression problems, my advice to you is to trust Brian. Your dog will be in good hands with a safe, reliable, responsible, dog lover that will treat your dog like his own.<br />
<span class="testimonalName"><strong><br />
Victoria Zilli<br />
</strong></span><span class="mainContent">Long Island, New York</span><br />
<br />
<a href="dog-trainer-testimonials.html">Read more dog training testimonals</a><br />
<br />
<br />
<br /></div>
<div id="breadCrumbs">
<p><a href="index.html">Home</a> > Welcome to NY DogWorks New York's Premier Dog Training Company<br />
<strong>Serving all of Long Island, Nassau & Suffolk County, Manhattan, Brooklyn & Queens</strong> <br />
</p>
</div>
</div>
<div id="footer">
<div id="footermenu">
<div id="footermenu1">
</div>
</div>
<div class="phoneNumber" id="copyright"> Copyright © 2014 NY DogWorks</div>
<div class="websiteDesign" id="sitedesigner">Long Island Website Design by <a href="http://www.wetribet.com" title="Wet Ribet" target="_blank" class="medlink">Wet Ribet</a> </div>
</div>
</div>
</div>
</body>
</html>The issue with that white space is explained by the use of relative positioning of your menu. Remember that relative positioning visually allows you to move an element, but that its "shadow" or "foot print" is retained in the document flow. So it still takes up space where it originally flowed in your content, and this causes the header image to position itself the way it does. Turn off the relative positioning of the menu to see what I mean. A simple solution is to set the #header to relative positioning, and then apply absolute positioning to the menu.
There are other issues with your code. Much of it can be simplified, and you should really stop using ID selectors from this point on, and predominantly use classes instead. The use of ID selectors ought to be limited as much as you can - they force you to write bloated convoluted code.
Try to write DryCSS (Don't Repeat Yourself).
Here is my somewhat cleaned up code. Notice I removed and simplified most of the css selectors. Some have no css properties at all anymore. And be careful that you cannot use re-use the same id selector in your html code: it will not validate. #program1 must become .program1
PS as always, please backup your files before applying these changes! Dreamweaver lacks a history/versioning feature!
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
body {
margin: 0 auto;
background-color: #203610;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 100%;
color: #333;
#wrapper {
background: url("../images/wrapbg.png") repeat-y scroll 0 0 rgba(0, 0, 0, 0);
margin: 0 auto;
width: 951px;
#header {
position: relative;
#mainNav {
background: url("../images/menubg.jpg") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
padding: 0 15px 0 25px;
position: absolute;
right: 0;
width: 510px;
.dropdown li { /* simplify .dropdown li !*/
float: left;
line-height: 2.2em;
.dropdown a { /* simplify ul.dropdown li a !*/
display: block;
font-weight: bold;
padding: 7px 12px;
#container {
background-color: #fff;
border-top: 6px solid #6f9f49;
#imgholder {
.program1 { /* you CANNOT have multiple id selectors sharing the same name! Use classes!!! */
float: left;
width: 315px;
rewrite this in your html:
<div class="pageContentNoside">
<div class="col-1-3 sideSub">
<div class="col-1-3 mainContentFeature1">
<div class="col-1-3 mainContentFeature2">
<div class="breadCrumbs">
</div>
.col-1-3 {
float: left;
width: 33.3333%;
padding: 25px 15px;
#sideSub {
#mainContentFeature1 {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
#mainContentFeature2 {
#footer {
clear: both;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 0.7em;
height: 45px; -
Hello. I've been struggling with how to position my footer so that it moves relative to the content that is added to the div tags before it in the template I'm working on. Here's what my code looks like:
<!DOCTYPE html>
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>NEW TEMPLATE</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
.wrapper {
background-color: #fffee8;
margin: auto;
padding: 5px;
height: auto;
width: 980px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
text-align: left;
color: #FFF;
position: relative;
overflow: visible;
.header {
margin: 0px;
padding: 0px;
height: auto;
width: 980px;
background-color: #424edd;
border: 0px solid #09C;
.logoarea {
background-color: #fffee8;
margin: 0px;
padding: 0px;
height: 160px;
width: 980px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
.navbar {
background-color: #fffee8;
height: 30px;
width: 980px;
margin: 1px;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
.subnavmenu {
background-color: #CCC;
height: 25px;
width: 980px;
border: thin solid #333;
font-family: "Felix Titling", "Engravers MT";
font-size: 10px;
font-style: normal;
line-height: normal;
color: #333;
text-decoration: blink;
.leftcontent {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: normal;
color: #FFF;
background-color: #55065F;
padding: 0px;
height: auto;
width: 500px;
margin-right: 0px;
margin-left: 0px;
border: medium outset #CCC;
.rightcontent {
background-color: #333;
padding: 0px;
height: auto;
width: 450px;
margin-right: 0px;
margin-left: 0px;
border: medium inset #fffee8;
float: right;
font-family: Arial, Helvetica, sans-serif;
color: #FFFee8;
font-size: 12px;
position: static;
.footer {
background-image: url(/Graphics/MORGAN%27S%20PIC.jpg);
background-repeat: repeat;
margin: 0px;
padding: 0px;
height: 165px;
width: auto;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
text-align: center;
color: #666;
position: relative;
left: 0px;
bottom: 0px;
#logo {
position:static;
left:-50px;
top:-200px;
width:272px;
height:176px;
z-index:1;
#apDiv4 {
position:absolute;
left:656px;
top:30px;
width:544px;
height:53px;
z-index:1;
background-color: #fffee8;
float: right;
-->
</style>
<script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
left:857px;
top:123px;
width:49px;
height:50px;
z-index:1021;
#apDiv3 {
position:absolute;
left:956px;
top:122px;
width:150px;
height:50px;
z-index:1022;
#apDiv5 {
position:absolute;
left:649px;
top:227px;
width:192px;
height:81px;
z-index:1021;
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body class="body" id="body" background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png">
<div id="apDiv4" >
<script>
(function() {
var cx = '004600001770955757780:ub1su5xae54';
var gcse = document.createElement('script'); gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
</script>
<gcse:search></gcse:search></div>
<div id="apDiv5"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMif flin-Juniata-Special-Needs-Center-Inc%2F129756770511336&send=false&layout=standard &width=450&show_faces=true&font&colorscheme=light&action=like&heig ht=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></div>
<div class="wrapper" id="wrapper"><div id="apDiv1" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogan.jpg" width="296" height="169" alt="Accept Support Empower Whatever It Takes"></div>
<div class="header" id="header">
<div class="logoarea" id="logoarea">
<div id="logo" onclick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><img src="/Graphics/LOGOS AND BANNER/Slogo Transparent BG.png" width="273" height="173" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
</div>
<div class="navbar" id="navbar">
<img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="59,4,149,24" href="/NAV BAR OPTIONS/ABOUT US/AboutUs.html" target="_blank" alt="About Us">
<area shape="rect" coords="157,3,255,23" href="/NAV BAR OPTIONS/CONTACT US/ContactUs.html" target="_blank">
<area shape="rect" coords="263,4,423,22" href="/NAV BAR OPTIONS/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_blank">
<area shape="rect" coords="429,3,578,22" href="/NAV BAR OPTIONS/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
<area shape="rect" coords="586,3,698,23" href="/NAV BAR OPTIONS/GET INVOLVED/GetInvolved.html" target="_blank">
<area shape="rect" coords="704,5,815,24" href="/NAV BAR OPTIONS/DONATE NOW/DonateNow.html" target="_blank">
<area shape="rect" coords="826,4,924,23" href="/NAV BAR OPTIONS/AFFILIATES/Affiliates.html" target="_blank">
</map>
</div>
<div class="subnavmenu" id="subnavmenu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">ADULTS</a>
<ul>
<li><a href="/SIDE BAR OPTIONS/ADULT REC/ADULT REC.html">ADULT REC</a></li>
<li><a href="/SIDE BAR OPTIONS/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">ADULT TRAINING FACILITIES</a></li>
<li><a href="/SIDE BAR OPTIONS/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">FAMILY LIVING</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
</ul>
</li>
<li><a href="#">YOUTH</a></li>
<UL>
<li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">AFTER SCHOOL PROGRAM</a></li>
<li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">AKTION CLUB</a></li>
<li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">CHALLENGER BASEBALL</a></li>
<li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">EARLY INTERVENTION</a></li>
<li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">SUMMER REC</a></li>
<li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-BALL</a></li>
<li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">TEEN CLUB</a></li>
<li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">TRAINING & TRANSITION</a></li>
</UL>
<li><a class="MenuBarItemSubmenu" href="#">EVENTS</a>
<ul>
<li><a href="/SUBNAVMENU/EVENTS/LipSync.html">LIP SYNC</a></li>
<li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">TOURING FRIENDS</a></li>
<li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">ANNUAL PICNIC</a></li>
</ul>
<li><a class="MenuBarItemSubmenu" href="#">OTHER</a>
<ul>
<li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">EDUCATION & THERAPY</a></li>
<li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">EQUIPMENT LOAN</a></li>
</ul>
</li>
<li><a href="#">EMPLOYEES</a></li>
<UL>
<li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">AGENCY WITH CHOICE</a></li>
<LI><A href="/NAVBAR/ABOUT US/AboutUs.html">MEET OUR STAFF</A></LI>
<LI><A href="/SUBNAVMENU/EMPLOYEE ACCESS/EmployeeAccess.html">EMPLOYEE ACCESS</A></LI>
</ul>
</ul>
</div>
</div>
<div class="rightcontent" id="rightcontent"><!-- TemplateBeginEditable name="editrightcontent" -->
<p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. </p>
<!-- TemplateEndEditable --></div>
<div class="leftcontent" id="leftcontent"><!-- TemplateBeginEditable name="editleftcontent" -->
<p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet. Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis, aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue nisl diam. </p>
<p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh accumsan velit illum. </p>
<!-- TemplateEndEditable --></div>
<div class="footer" id="footer">Contact Us | About Us | Disclaimer</div>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/Web Site Root Folder/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/Web Site Root Folder/SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>There's room for much improvement.
#1 About APDivs and why you don't need (or want) them in primary layouts:
http://www.apptools.com/examples/pagelayout101.php
#2 You're complicating matters with repetitive class and id names on every element. It's better if you don't do this.
#3 Your CSS code is overly verbose. Less is more.
#4 I don't understand why you're using HTML5 but not using HTML5 tags for your content. For such a simple layout, this is all you need.
<body>
<header>logo and menu goes here </header>
<section>
<aside>left column content</aside>
<aside>right column content<aside>
</section>
<footer>footer goes here </footer>
</body>
Nancy O. -
Just got DW CS3 and having a good time learning the new
features. About to pull my hair out regarding one issue though, and
I have definitely hit the wall, I pretty sure I tried every option,
but maybe I am missing something. Here is the page in question:
http://www.grpg.org/NewDesign
I cannot get the right and left hand columns to just stop
where the main container stops, i.e. the white section, before the
footer. As you can see on the right hand column, if I make the
height 100%, it goes past the footer, and if I make it a fixed
length, like on the left column, it does not extend all the way to
the bottom...I need them both to stretch with the main container,
i.e. the white part. I have tried all the positioning tags,
relative, absolute, etc. and none of them seem to give me what I
want. Please HELP!The best (i.e., non-javascript) method to make columns look
to be the same
height is to use a faux-column method. Google that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"SnakEyez02" <[email protected]> wrote in
message
news:g6snvo$6c8$[email protected]..
> Divs do not work like tables, so if you expand 2 divs
down next to each
> other
> they will keep their respective heights unlike tables
which expand. I
> would
> recommend taking a look at the source code of the
following example and
> read
> over the tutorial that accompanies it:
>
>
http://www.projectseven.com/tutorials/css/pvii_columns/col3fluid.htm
> Example
>
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm
>
> Project Seven also has some other good tutorials so I'll
just give you
> that
> link for a later time:
>
>
http://www.projectseven.com/tutorials/index.htm
>
> -
Trouble with CSS background scaling
Hi,
Please take a look at the following page I am working on at
the moment
http://www.dpweddingphotography.co.uk/test.html
I am trying to acheive the look of
http://tomwickyphotography.com/index2.php?v=v1
Is this possible in Dreamweaver using CSS/Java? When I reduce
my browsers window and make it really narrow, up pops the white
blank space at the bottom of the page which I am trying to avoid.
You can see on the other site that when it gets to a certain point
it stops scaling down. The same with it vertically also.
Now I know this other site is done in flash but can it be
done in dreamweaver and if so how please?
Thanks
Here's the code I am using for testing:Im not really sure I understand your question, but if you
were to make this
graphic (ContactSheet-001.jpg ) a background image and set it
to repeat,
would that not solve the issue?
"bensmithhull" <[email protected]> wrote in
message
news:gmvntr$icj$[email protected]..
> Hi,
>
> Please take a look at the following page I am working on
at the moment
>
http://www.dpweddingphotography.co.uk/test.html
>
> I am trying to acheive the look of
>
http://tomwickyphotography.com/index2.php?v=v1
>
> Is this possible in Dreamweaver using CSS/Java? When I
reduce my browsers
> window and make it really narrow, up pops the white
blank space at the
> bottom
> of the page which I am trying to avoid. You can see on
the other site that
> when
> it gets to a certain point it stops scaling down. The
same with it
> vertically
> also.
>
> Now I know this other site is done in flash but can it
be done in
> dreamweaver
> and if so how please?
>
> Thanks
>
> Here's the code I am using for testing:
>
>
>
> <html>
> <head>
> <title>BG</title>
> <style type="text/css">
> body {
> /* for IE; otherwise, BG isn't fully stretched */
> margin: 0px;
> }
>
> #bg {
> position: fixed;
> margin: 0px;
> border: 0px;
> padding: 0px;
> left: 0px;
> top: 0px;
> width: 100%;
> height: 100%;
> overflow: hidden;
> z-index: 0;
> }
>
> #bg img {
> width: 100%;
> }
>
>
> #body {
> position: absolute;
> left: 0%;
> top: 0%;
> width: 100%;
> height:100%;
> padding: 0;
> z-index: 10;
> }
>
> li {
> margin-bottom: 2em;
> }
> </style>
> <!--[if IE]>
> <style type="text/css">
> body {
> margin: 0px;
> overflow: hidden;
> }
>
> #body {
> padding: 1em;
> width: 100%;
> height:100%;
> overflow: auto;
> }
> </style>
> <![endif]-->
> </head>
>
> <body>
> <!-- img must be encased in div to keep proper image
aspect ratio -->
> <div id="bg"><img
src="images/ContactSheet-001.jpg"></div>
>
> <div id="body">Put the page's content
here.</div>
> </body>
> </html>
> -
I am having trouble with CSS. Displays right in DW but not in web browser
Hello,
I am having difficultiy getting my webpage to look the way it does in Dreamweaver in a browers (All 5 of them). My problems are with:
- Title Heading Content
- Sidebar
I have two lines in my heading with the name of the organization. I made two rules. Header H1 and a sub header. For some reason while previewing them in a browser there is a gap between the two words. But in DW there is not. I do not want the gaps. How can I fix it?
In a browser the side bar does not come all the way down. There is a small gap between it and the footer. Like the other problem this does not appear in DW only in the browers.
Any help would be appreciated! I am still learning CSS.
I believe these are the only two files you need to look at.
Thanks for the help!Also how can you see if your ISP offers the free web server space?
Contact your internet service provider (ISP). Often this is your telephone or cable broadband provider too. If not, there are many free or very low cost remote server hosts around. Do a Google search.
I did do the validator and it told me I was fine. I did not do a CSS one though.
Good. So we know it's not an HTML error. Get the FF Web Developer Toolbar. It permits you to edit CSS in your browser to see how changes effect the layout plus a lot of other cool stuff.
Sorry I'm still new to all of this.
Don't fret, Tim. We all started in the same place. You'll catch on soon enough.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb -
Report DW error with CSS position
To the Adobe staff
I use this forum cause I can't find where the F... to report an error!
There is an error in Dreamweaver CS4 french (canadian) version.
When you create a css style, the position tab, the fonction fixed has been translated and should not.
So right now, you read "fixe" instead of "fixed"You can report bugs here...
https://www.adobe.com/cfusion/mmform/index.cfm?name=wishform -
Trouble with css borders- won't show in browser
When I link my external style sheet, my borders work when I preview them in ie, but when I put my site (including the external style sheet) I cannot see the borders. My borders are around tables and inside tables and around images. In some docs, the css border will show if I attach it to the doc, but if I make the css an external style sheet, it won't work. Any suggestions?
Thank You!BossDJ is just asking for a link to your page. Do you have it uploaded anywhere? Even if it's not a good looking page, it might be the easiest way for you to get help.
From what you say, I would guess the problem might be the way you are linking to your external style sheet.
Try looking in the head of your document and copy the code for that into the forum post.
<link href="../css/contact.css" rel="stylesheet" type="text/css" media="all" />
That's an example of a link to a style sheet in one of my pages. It's the red part that might be going wrong for you.
Martin -
Having trouble with CSS Properties panel
copying all from a button (example). Many properties such as gradient don't always seem to be shown in the properties and therefor not carried across to the external (DW) page? What am I doing wrong? No problem modifying CSS but shouldn't it be there?
In fact if I don't put in a border to the button only the dimensions seem to be there?The .tif file format isn't generally recommended for web use; it's intended more for print. Historically, some browsers haven't supported the format, if I recall correctly, though many of them may do so now. (Just checked Firefox and Safari, and both seem to display the format just fine.)
It could be that Dreamweaver doesn't recognize the .tif format. (I'm a little lazy to test this theory at the moment, but it seems quite likely.) Here's one rather old thread on this topic: http://forums.adobe.com/thread/26977
Incidentally, this is straying from the topic of your original post and would have been better posted as a new discussion. -
Trouble with spacing of divs vertically
Hi all,
I am having trouble with CSS and vertically stacking my divs, In the following code there are a number of identical divs and I want them to stack one upon the other like in a list. At the moment I need to hit returns after each div to get below the one above and it puts way too much room in between each div doing this. I am at a loss how to do set the amount of spcae between them and also to make one go directly below the other.
Any and all help greatly appreciated
Thanks Rick
<bodystyle="margin:0; padding:0;">
<div class="logo">
<p><img src="images/spinlogonewsml.jpg" alt="Spin City Logo" border="0" style="position: absolute; top: 10px; left: 500px; /></p>
<p> </p>
<p> </p>
</div>
<div class=main">
<div class="imagebutton" id="left"><img src="images/img_16_n.png" width="40" height="40" alt="left button" /></div>
<div class="help">Rotate the Object or Panorama left one increment.</div>
<p> </p>
<div class="imagebutton" id="right"><img src="images/img_17_n.png" width="40" height="40" alt="Right Button" /></div>
<div class="help">Rotate the Object or Panorama right one increment.</div>
<p> </p>
<div class="imagebutton" id="Plus"><img src="images/img_18_n.png" width="40" height="40" alt="Plus Button" /></div>
<div class="help">Zoom into the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="minus"><img src="images/img_19_n.png" width="40" height="40" alt="Minus Button" /></div>
<div class="help">Zoom out of the image a step at a time.</div>
<p> </p>
<div class="imagebutton" id="AutoRotate"><img src="images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" /></div>
<div class="help">Starts or stops auto rotation of the Object or Panorama.</div>
<p> </p>
<div class="imagebutton" id="DefaultView"><img src="images/img_23_n.png" width="40" height="40" alt="Default Vew Button" /></div>
<div class="help">Resets the Object or Panorama to it's starting position.</div>
<p> </p>
<div class="imagebutton" id="RotateMode"><img src="images/img_25_n.png" width="40" height="40" alt="RotateMode" /></div>
<div class="help">
Sets the mouse interactive mode to 'Rotate' allows for rotating the Object when zoomed in, toggles with 'Move' button below.
</div>
<p> </p>
<div class="imagebutton" id="MoveMode"><img src="images/img_24_n.png" width="40" height="40" alt="Move Mode Button" /></div>
<div class="help">Sets the mouse interactive mode to 'Move' allows for dragging the Object when zoomed in, toggles with 'Rotate' button above.</div>
<p> </p>
<div class="imagebutton" id="SoundButton"><img src="images/img_28_n.png" width="40" height="40" alt="Sound Button" /></div>
<div class="help">Use this button to mute the sounds played by the interactive presentation.</div>
<p> </p>
</div>
</body>
</html>Way too many divisions. All you need is one main division or possibly two. The rest is easily contained inside <p> tags.
Copy and paste this into a new HTML document.
<!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>Vr help File</title>
<style type="text/css">
/**zero out browser default settings on everything**/
* {margin:0; padding:0; line-height: 100%; font-size: 100%;}
p {
line-height: 1em;
font-size: 16px;
margin-bottom: 12px; /**space between paragraphs**/
#logo {
float:right;
width: 35%;
margin-right: 150px /**adjust as req'd**/
</style>
</head>
<body>
<div id="logo">
<img src="http://www.spincityimaging.com/images/spinlogonewsml.jpg" width="74" height="53" class="logo" />
<!--end logo --></div>
<p><img src="http://www.spincityimaging.com/images/img_16_n.png" width="40" height="40" alt="left button" />Rotate the Object or Panorama left one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_17_n.png" width="40" height="40" alt="Right Button" />Rotate the Object or Panorama right one increment.</p>
<p><img src="http://www.spincityimaging.com/images/img_18_n.png" width="40" height="40" alt="Plus Button" />Zoom into the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_19_n.png" width="40" height="40" alt="Minus Button" />Zoom out of the image a step at a time.</p>
<p><img src="http://www.spincityimaging.com/images/img_20_n.png" width="40" height="40" alt="Auto Rotate Button" />Starts or stops auto rotation of the Object or Panorama.</p>
<p><img src="http://www.spincityimaging.com/images/img_23_n.png" width="40" height="40" alt="Default Vew Button" />Resets the Object or Panorama to it's starting position.</p>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
CSS Positioning or DW Problem?
I am having difficulty with CSS positioning after spending several hours reading and trial and error. I am beginning to think that Dreamweaver is broken, and thoughts of reloading are crossing my mind.
My desire is to have a background image "beneath" my page wrap div, essentially acting as a border surrounding it. I have assigned the position to this image "background" as relative, and therefore assigned the positioning of my page wrap div as absolute. The page wrap has been given a background color, and a line of text to enable me to "see" where I am in securing the proper placement. I would think that the background color of the page wrap div would "show" but it is not. (?)
I have positioned my palette, as we will call it, with margins, while attempting to place my page wrap using top, right, bottom and left through the CSS dialog box. Regardless of values used, the div remains in the bottom left hand corner of the browser window and refuses to budge.
#palette {
background: url(images/pallete.png) no-repeat;
width: 1200px;
height: 1400px;
margin: 100px auto;
position: relative;
#page wrap {
position: absolute;
background: #C06;
height: 1100px;
width: 960px;
top: 100px;
right: -120px;
It has gotten so that any changes I make to the CSS at this stage will not even trigger a Refresh of the CSS styles panel? What gives?
Thanks.I've never used "Live Code" before, and was able to place #page more to my liking, but it is a ballpark position so to speak, I can only approximate it's center within #palette. I begin to think I have success, until I go to browser view, where #page position seems to shift.
You are trying to use HTML like a word processor and that's the absolute (no pun intended) wrong approach!
An absolutely positioned element's location is calculated from the location of its nearest positioned ANCESTOR. An "ancestor" is a containing element, not an adjacent element (which would be a 'sibling'). Thus, if you want your absolutely positioned element to key off of the location of a relatively positioned element, it must be a child (or descendent) of that relatively positioned element. In other words, to make #page work relative to #palette, it must be inside #palette.
If there are alternatives to securing positioning other than my current method, I would be interested to learn about it. I am not aware of the drawbacks mentioned with employing this type of positioning, could you provide some detail please?
There is an excellent alternative without using positioning at all - it's called 'best practice'! The disadvantages of using absolute positioning for everything are:
1. Because absolutely positioned elements are removed from the flow of code on the page, they are immune to shifts in other non-positioned page elements due to browser viewport size changes, or text display size changes.
2. Since #1 is the case, and since text display size changes may cause the height of the container to change, if that container is absolutely positioned, its contained text may overlap other content on the screen. The more absolutely positioned text containers there are the worse this effect becomes, quickly producing an unusable, overlapping mess.
3. Absolutely positioned elements are located on the screen without regard for where the elements appear in the code, and as a result, it's quite possible to have two bits of text that only make semantic sense when taken as a unit separated by quite a bit of code, perhaps even other text bits. Thus, pages built with absolutely positioned text containers are usually not semantically sensible, meaning that they would not fare well when run through a screen assistive device.
4. Considering all of these things, pages that contain both centering elements and positioned elements frequently go wandering as viewport widths are changed.
The upshot is that the method most likely to be chosen by an inexperienced user because of its apparent simplicity is also the absolute worst possible approach to building the page.
Oh, by the way, the values for positioning below were obtained through "dragging" div=page into position. I would rather not use Live Code, but plug in concrete values in the future.
The word processing approach in action! The only way to achieve plugging in concrete values is to have a layout already planned on paper before you start.
Say more about how you want your page to look (I'm not sure what you mean exactly about centering #page "above" #palette, but if you mean "before" then consider this -
<style type="text/css">
h1, h2, h3, h4, h5, h6, p, address, blockquote, ul, ol, li {
margin: 0px;
padding: 0px;
html {
background: #3E4A9C url(images/Untitled-2.png) repeat;
body {
font: 1em Helvetica, Arial, sans-serif;
color: #000;
width:1200px;
margin:0 auto;
#palette {
background: url(images/map.png) no-repeat;
margin: 100px auto;
#page {
width: 960px;
margin:0 auto;
background-color: #03C;
</style>
</head>
<body>
<div id="page">This is my page </div><!--End of page-->
<div id="palette"></div><!--End of palette-->
</body>
(note that I have removed all positioning, as well as all heights - it's generall a bad idea to declare explicit heights on elements that contain text, again due to potential overflow problems) -
Trouble positioning ul 's with CSS
Hi guys!
I'm having some trouble with positioning two <ul> tags on a site for a client. Click here for the test site.
The unordered list for social networking icons at the top appear as they should, but the unordered list for the text links (about, news, links, contact) should be inline with them, just below them and over to the far right of the site. I've tried everything I can think of but to no avail
Then, in the grey strip/bar should be the main navigation of the site - the code for the buttons is there but i don't even see them on the test site!!
Would someone mind taking a look for me and letting me know their thoughts as to what I'm doing wrong please?
Thank you and I hope to hear from you,
SMTry changing the margin on this rule:
ul#topNav {
float: right;
font-family: Arial,Helvetica,sans-serif;
font-size: 11.5px;
font-weight: bold;
letter-spacing: 0.5pt;
list-style: none outside none;
margin: 73px 0 margin-top: 73px;
padding: 0;
text-transform: uppercase;
so there is no bottom margin.
You could also try giving the <ul> for your main nav a width and margin: 0 auto in line with other main centered elements.
You might then need to tweak the padding on the <ul>
Fingers crossed!
Martin
Maybe you are looking for
-
QM_Code group assignment to catalogue profile
Dear QM Consultants, I am trying to assign one code group to catalogue profile through OQN6 transaction. The case can be put as follows e.g. Catalogue profile : ABCD It contains 4 code groups (A, B, C and D) from catalogue 9. Each of these code g
-
How can I import photos from iPhoto into a power point presentation
I would like to take a group of photos from iphoto and import them into a power point(for mac) presentation- the PP for windows allows you to take a large number of pics and make a "photo album presentation" but can figure how to do it in Mac.
-
Getting setpagedevice error from xerox ps printer
cannot print any indesign (cs1, windows7) document on one of our printers...the xerox 245 pro ps. i only get an error page with error:typecheck and offending command: setpagedevice. is this a post script issue, a drive issue? i am not a techie so if
-
Xcel documents that onced opened will not and i get an error message
Xcel documents that once opened will not and i get an error message "the file may be read only or you may be trying to access a read only application. Or, the server the document is stored on may not be responding"
-
. This error message pops up in Photoshop when i just wanna create a new plain white template. I have downloaded agentransack to track down the temp files and for some reason it says nothing matches the temp files.I have a couple of drives including