0

Hi,

I am trying to place two buttons underneath a grid I have created but they seem to overlap with the footer and I am not sure why.

Would appreciate it if someone could have a look at the html and relevant css and talk me through what is the best solution to have more control over their placement.

</head>
<body>
<div id="wrapper">
<div id="header">
		<div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
    <div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
    <div id="mainNav">
	      <ul>
	        <li><a href="index.htm">about us</a></li>
	        <li><a href="Product.htm">products</a></li>
	        <li><a href="order.htm">custom order</a></li>
	        <li><a href="contact.htm">contact us</a></li>
	        <li><a href="recipe.htm">recipes</a></li>
	      </ul>
</div>         
<img src="_images/header_bg.jpg" width="960" height="115" alt="header" /><img src="_images/indentifier.jpg" width="960" height="65" /></div>
<!--<div id="mainContent">-->
<div id="customOrder">	    
        <h1>Custom Order</h1>
        <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
  </div>	
    <div id="grid">
 
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
 
		<div class="box">
		</div>
	  <div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 
		<div class="alternate_color box">
		</div>
		<div class="box"></div>
		<div class="alternate_color box">
	        </div>
		<div class="box">
		</div>
	  <form action="" method="post" name="frmCartButtons" id="frmCartButtons">
	    <input type="submit" name="saveButton" id="saveButton" value="Save for Later" />
        <input type="submit" name="addButton" id="addButton" value="Add to Cart" />
      </form>
    </div>  
 	<div id="footer">
	<div id="footerLeft">
	  <p>&copy; 2010 Bliss No.5 Chocolate<br/> 
		info@Bliss5.com<br/>
		505-155-1234<br/>
	  </p></div>
<div id="footerMenu">
	<a href="">about us</a> | <a href="">products</a> | <a href="">custom orders</a> | <a href="">contact us</a> | <a href="">recipes</a>
   </div>
  </div>
</div>
</body>
</html>


#grid{
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
}

#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
	float: right;
}
4
Contributors
31
Replies
33
Views
6 Years
Discussion Span
Last Post by tobeeornot
0

Hey Toby,

You'll need to use a clear: both; either as its own element before the form, or on the footer. Floating an element removes it from the normal flow of the page, so that's what's causing it to overlap. If you need help figuring it out just let me know.

Regards
Arkinder

0

Hey Arkinder,

Thanks for the reply. I actually have a clear:both on the footer already. I have also tried putting it before the form within the #grid as well but no luck.

Sorry if I am being silly but I don't where I am going wrong.

0

Hi Arkinder,

This is all the css for the page, with the exception of the main nav code:

/* ~~ this is the Shopping Cart page styles ~~ */
#customOrder {
	float: left;
	width: 350px;

}

#customOrder p {
	color: #8DADAF;
	float: left;
	margin-left: 20px;
	padding-top: 0;
	text-align:left
}

#customOrder h1 {
	color: #8DADAF;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	margin-top: 20px;
	text-align: left;
}

#grid{
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
}

#grid #cartContent {
	
}


#grid #cartContent h3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #AD9F91;	
	padding-top: 5px;
}

#grid #cartContent h4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #5B3F24;	
	padding: 7px;
}
	
#grid #cartContent img {
	padding-left: 20px;
}

#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
}

/* ~~ this is the footer style ~~ */
#footer {
	background: #4d3821;
	clear: both;
	margin: 0px;
	padding: 0px;
}

#footer #footerLeft {
	float:left;
	width: 200px;/* ~~ this is width of the left-footer~~ */
}

#footer #footerLeft p {/* ~~ this targets the p inside the left-footer~~ */
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-size: 11px;
	line-height: 1em;/* ~~ indicates line height between lines. A number value is used as a m32ultiplier in the calculation of the value used for this property, which equals the specified number multiplied by the element's computed font size. The line height can also be the percent of the current font size (e.g 100%)~~ */
	padding-left: 20px;
	padding-top: 25px;/* ~~ 10px from top~~ */
	text-align: left;
	
	
}
#footer #footerMenu {
	float: right;
	padding: 25px 0px;	
}
0

The buttons are displaying at the top of the grid. Just to clarify; you're wanting them to be at the bottom and still inside of the grid, or on the bottom and below the grid? On all of my browsers the footer is displaying below the grid and not interacting with the form at all. So include what browsers you have tested in too.

Regards
Arkinder

Edited by Arkinder: n/a

0

Hi Arkinder,

I want the buttons on the bottom just outside the grid and just above the footer regions.

The browsers I have tested with are the latest versions of Opera, Firefox and Chrome.

Thanks for checking this out. It is really helpful to me to learn why elements react in the way they do.

Toby

0

Alright, there are several ways to do this. The most practical one is positioning the form absolutely, and using the top property to push it down. Changes will be green.

#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
	position: absolute;
	top: 100%;
}

This will cause the form to always be 100% from the top of the browser. However, this causes a problem when the browser is re-sized (and yes it's not far enough down). So we need to change where the top value is starting from. So instead of being 100% from the top of the browser, how about 100% from the top of #grid? To do this simply add position: relative; to #grid's CSS rule.

#grid{
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
	position: relative;
}

This works while the form is a child element of #grid; or you could say while #grid is the container/containing element of the form.

Regards
Arkinder

0

Hi Arkinder,

Once again, your time and patience are much appreciated. Strangely though, the solution you provided still doesn't have seemed to work. The buttons are pushing up to overlap with the grid.

0

No problem, could you post a screen shot? The one I attached shows what it's displaying in all major browsers for me. If that's not what you want, then I just misunderstood you.

Regards
Arkinder

Attachments Screen_shot_2011-08-09_at_11.32_.28_AM_.png 138 KB
0

Hi Arkinder,

That's very odd. I just tried it on Chrome, Opera and Firefox and the results were very different. The buttons were located on the bottom right corner of the page underneath the footer. Not sure you upload screen shots on this.

0

Okay, try using the same document that I am just to check for any errors that you may have.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<style type="text/css">
		
		/* ~~ this is the Shopping Cart page styles ~~ */
#customOrder {
	float: left;
	width: 350px;

}

#customOrder p {
	color: #8DADAF;
	float: left;
	margin-left: 20px;
	padding-top: 0;
	text-align:left
}

#customOrder h1 {
	color: #8DADAF;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	margin-top: 20px;
	text-align: left;
}

#grid{
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
	position: relative;
}

#grid #cartContent {
	
}


#grid #cartContent h3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #AD9F91;	
	padding-top: 5px;
}

#grid #cartContent h4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #5B3F24;	
	padding: 7px;
}
	
#grid #cartContent img {
	padding-left: 20px;
}

#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
	position: absolute;
	top: 100%;
}

/* ~~ this is the footer style ~~ */
#footer {
	background: #4d3821;
	clear: both;
	margin: 0px;
	padding: 0px;
}

#footer #footerLeft {
	float:left;
	width: 200px;/* ~~ this is width of the left-footer~~ */
}

#footer #footerLeft p {/* ~~ this targets the p inside the left-footer~~ */
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-size: 11px;
	line-height: 1em;/* ~~ indicates line height between lines. A number value is used as a m32ultiplier in the calculation of the value used for this property, which equals the specified number multiplied by the element's computed font size. The line height can also be the percent of the current font size (e.g 100%)~~ */
	padding-left: 20px;
	padding-top: 25px;/* ~~ 10px from top~~ */
	text-align: left;
	
	
}
#footer #footerMenu {
	float: right;
	padding: 25px 0px;	
}
		
		</style>	
	</head>
	
	<body>
	
	<div id="wrapper">
<div id="header">
		<div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
    <div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
    <div id="mainNav">
	      <ul>
	        <li><a href="index.htm">about us</a></li>
	        <li><a href="Product.htm">products</a></li>
	        <li><a href="order.htm">custom order</a></li>
	        <li><a href="contact.htm">contact us</a></li>
	        <li><a href="recipe.htm">recipes</a></li>
	      </ul>
</div>         
<img src="_images/header_bg.jpg" width="960" height="115" alt="header"><img src="_images/indentifier.jpg" width="960" height="65" alt=""></div>
<!--<div id="mainContent">-->
<div id="customOrder">	    
        <h1>Custom Order</h1>
        <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
  </div>	
    <div id="grid">
 
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
 
		<div class="box">
		</div>
	  <div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 
		<div class="alternate_color box">
		</div>
		<div class="box"></div>
		<div class="alternate_color box">
	        </div>
		<div class="box">
		</div>
	  <form action="" method="post" name="frmCartButtons" id="frmCartButtons">
	    <div><input type="submit" name="saveButton" id="saveButton" value="Save for Later">
        <input type="submit" name="addButton" id="addButton" value="Add to Cart"></div>
      </form>
    </div>
  
 	<div id="footer">
	<div id="footerLeft">
	  <p>&copy; 2010 Bliss No.5 Chocolate<br> 
		info@Bliss5.com<br>
		505-155-1234<br>
	  </p></div>
<div id="footerMenu">
	<a href="">about us</a> | <a href="">products</a> | <a href="">custom orders</a> | <a href="">contact us</a> | <a href="">recipes</a>
   </div>
  </div>
</div>
	
	</body>
	
</html>

Regards
Arkinder

0

Hi Arkinder,

This seems to be very odd to me. Basically, I dropped the code you used above into Dreamweaver and it looked ok, except the grid was out of place - but I figured this was owing to the fact that not all the css styling code was being referenced. I then dropped the html and css code used above into the relevant areas of my original page to see if there were any changes and it returned to the original problem of the buttons just overlapping the start of the footer.

I don't know what is best from here but I don't want to be wasting your time.

0

You aren't wasting my time at all. Post your original page. Something has to be different some where. :)

Regards
Arkinder

0

Hi Arkinder,

Here is full html and relevant CSS code for the page. You may notice that I have additional form on the page placed inside one of the grid boxes for a checkbox using a class element to apply the style. I don't want to confuse the situation but maybe I can kill two birds with one stone here, if that is ok? I am trying to place the same checkbox in the grid boxes above this one but the grid itself falls apart when I place same code from the form into the box code for the grid.

<!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>
<link href="_css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
		<div id="shoppingCart"><a href=".htm" title="shop">shop</a></div>
    <div id="joinButton"><a href="mailto:contact@bliss.com" title="join">join</a></div>
    <div id="mainNav">
	      <ul>
	        <li><a href="index.htm">about us</a></li>
	        <li><a href="Product.htm">products</a></li>
	        <li><a href="order.htm">custom order</a></li>
	        <li><a href="contact.htm">contact us</a></li>
	        <li><a href="recipe.htm">recipes</a></li>
	      </ul>
<!-- end #header --></div>         
<img src="_images/header_bg.jpg" width="960" height="115" alt="header" /><img src="_images/indentifier.jpg" width="960" height="65" /></div>
<!--<div id="mainContent">-->
<div id="customOrder">	    
        <h1>Custom Order</h1>
        <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
        <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
  <h1>Find Us</h1>
  <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
  <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut </p>
  <p>	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. U</p>
  </div>	
    <div id="grid">
 <!--This is box 1 row 1-->
	  <div class="box">
<!-- this puts the image into a division of its own and allows specific alignment changes to be made in css -->        
        <div id="cartContent"><h3>Caramel Truffle</h3>
          <p><img src="_images/caramel_truffle.gif" width="61" height="63" /></p>
            </div>
		</div>
		<div class="box alternate_color">
		</div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 <!--This is box 2 row 2-->
		<div class="alternate_color box">
		<div id="cartContent"><h4>Decadent Wafer</h4>
		 <p><img src="_images/decadent_wafer.gif" width="60" height="60" /></p>
			</div>
        </div>
		<div class="box">
		</div>
		<div class="alternate_color box">
		</div>
		<div class="box">
		</div>
 <!--This is box 3 row 3-->
		<div class="box">
        <div id="cartContent"><h3>Mocha Dream</h3>
          <p><img src="_images/mocha_dream.gif" width="61" height="65" /></p>
            </div>
		</div>
	  <div class="box alternate_color">
	  </div>
		<div class="box">
		</div>
		<div class="box alternate_color">
		</div>
 <!--This is box 4 row 4-->
		<div class="alternate_color box">
        <div id="cartContent"><h4>Cream Fantasy</h4>
		 <p><img src="_images/cream_fantasy.gif" width="61" height="61" /></p>
            <form action="" method="get" class="frmCartBoxes">
            <input name="submit" type="checkbox" value="submit" />
            select
          </form></div>
		</div>
		<div class="box"></div>
		<div class="alternate_color box">
	  </div>
		<div class="box">
		</div>
      
	  <form action="" method="post" name="frmCartButtons" id="frmCartButtons">
	   <div><input type="submit" name="saveButton" id="saveButton" value="Save for Later" />
        <input type="submit" name="addButton" id="addButton" value="Add to Cart" /></div>
      </form>
    </div>
<!-- end #mainContent --><!--</div>-->   
 	<div id="footer">
	<div id="footerLeft">
	  <p>&copy; 2010 Bliss No.5 Chocolate<br/> 
		info@Bliss5.com<br/>
		505-155-1234<br/>
	  </p></div>
<div id="footerMenu">
	<a href="">about us</a> | <a href="">products</a> | <a href="">custom orders</a> | <a href="">contact us</a> | <a href="">recipes</a>
</div>
<!-- end #footer --></div>
</div>
</body>
</html>
/* ~~ this is the Shopping Cart page styles ~~ */
#customOrder {
	float: left;
	width: 350px;
 
}
 
#customOrder p {
	color: #8DADAF;
	float: left;
	margin-left: 20px;
	padding-top: 0;
	text-align:left
}
 
#customOrder h1 {
	color: #8DADAF;
	font-family: "Times New Roman", Times, serif;
	font-size: 25px;
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	margin-top: 20px;
	text-align: left;
}
 
#grid {
	background: #ffffff;
	border: 1px solid #600;
	float: right;
	height: 520px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-right: 20px;
	width: 520px;
	position: relative;
}
 
#grid #cartContent {
 
}
 
 
#grid #cartContent h3 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #AD9F91;	
	padding-top: 5px;
}
 
#grid #cartContent h4 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #5B3F24;	
	padding: 7px;
}
 
#grid #cartContent img {
	padding-left: 20px;
}
 
#frmCartButtons {
	margin-top: 20px;
	height: 30px;
	width: 300px;
	margin-bottom: 20px;
	position: absolute;
	top: 100%;
}
 
/* ~~ this is the footer style ~~ */
#footer {
	background: #4d3821;
	clear: both;
	margin: 0px;
	padding: 0px;
}
 
#footer #footerLeft {
	float:left;
	width: 200px;/* ~~ this is width of the left-footer~~ */
}
 
#footer #footerLeft p {/* ~~ this targets the p inside the left-footer~~ */
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	font-size: 11px;
	line-height: 1em;/* ~~ indicates line height between lines. A number value is used as a m32ultiplier in the calculation of the value used for this property, which equals the specified number multiplied by the element's computed font size. The line height can also be the percent of the current font size (e.g 100%)~~ */
	padding-left: 20px;
	padding-top: 25px;/* ~~ 10px from top~~ */
	text-align: left;
 
 
}
#footer #footerMenu {
	float: right;
	padding: 25px 0px;	
}
1

The footer isn't being pushed anywhere, it's just not big enough to be seen. Give it a set height in px or em.

#footer {
    background: none repeat scroll 0 0 #4D3821;
    clear: both;
   height: 100px;
    margin: 0;
    padding: 0;
}

I'm not sure that I understand you. You want the check box next to the name, image, ?

Regards
Arkinder

Votes + Comments
Liking your replies...Keep it up.
0

Hi Arkinder,

Still having no luck with those silly buttons. I adjusted the footer height as you suggested but it doesn't seemed to have made a difference. I don't want to hassle you so if this is becoming a pain, please let me know.


With respect to checkboxes, I currently have one in the bottom left box underneath an image, which is fine and gives the effect I want. The problem is when I repeat the code in the box above to give the same effect the grid breaks up on the page.

Best regards,
Toby

0

No worries, if anything it's just annoying that you keep getting different results when it has to be something simple. lol

To post a screen shot, use the advanced editor and click on the paper clip icon. If I'm able to see what you're seeing that would make this a lot easier.

Regards
Arkinder

0

Thanks Arkinder.

Sorry it took a while to come back to you. For some reason the system did not identify that a new message had come through.

Anyways, here is the screenshot.

Edited by tobeeornot: n/a

Attachments screenshot.jpg 35.82 KB
0

No worries, for some reason I'm not receiving any e-mail notifications either. It's nice to see how everything is coming together. :)

Try increasing the height of the container with the white background.

Regards
Arkinder

0

Hey Arkinder,

Ok, I will give it a go and let you know.

In the meantime, do you see what I mean about the checkboxes?

I want them to be underneath the image as per the last box but when I put the same code in the relevant spots in the markup, the grid goes everywhere. Seems odd to me.

0

Sorry, I meant to mention that but forgot. :P

It sounds like the width is just exceeding the width of the grid. Make sure to give each box the 130px width and height, and then check to see if any margin and padding is pushing the content a little too much.

Regards
Arkinder

0

Hey Arkinder,

Finally managed to do it. I think the problem was that I didn't put the grid into a div of its own (and gave it a position: relative) and therefore couldn't align the "save" and "submit" buttons against the div and position them absolutely. Seemed to have done the trick.

Also managed to figure out the issue with the checkbox and it was a matter of placing the code for the form just outside the corresponding image div tag.

All I need to do now is place a numeric stepper in each box alongside the check box . Is that something you could help me with?

Edited by tobeeornot: n/a

Attachments screenshot1.jpg 40.11 KB
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.