Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Can't get block of text to align right - also can't get form buttons to align left

    Hello all,

    I'm hoping someone can help me. I'm working on a site and am having some troubles getting the layout of the contact page right. Before I go any further the link to the page is Wayne Barry's Tree Services - About Us And Contact Page

    Below is the CSS
    Code:
    html,
    body {
        margin:0;
        padding:0;
        color: #000;
        background: #fff;
    		font-family: helvetica, arial, sans-serif;
    		font-size: 12pt;
    }
    #wrapper {
        width:960px;
        margin:0 auto;
        background:#ffffff;
    		
    }
    #phoneBlock {
    		width: 725px;
    		height: 80px;
    		margin-top: 5px;
    		margin: 0 auto;
    		background: url('http://www.treecycle.com.au/dev/images/call_block.jpg') no-repeat;
    		visibility: visible;
    }
    
    #header {
    	  width: 725px;
    		height: 85px;
    	  margin: 0 auto;
    		margin-top: 0px;
    		margin-bottom: 5px;
    	  padding: 0px;
    		background: url('http://www.treecycle.com.au/dev/images/header.jpg') no-repeat;
    		visibility: visible;
    }
    
    #mobile_header	{
    								display:none;
    								}
    								
    #nav		{
    		width: 723px;
    		height: 35px;
    		background: #ffffff;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 0px;
    		padding: 0px;
    						 		 	 }
    
     	.tableNav {
    						 	  border: 0px;
    								border-spacing: 0px;
    								margin: auto;
    								padding: 0px;
    										}
    										
    	.tableNav tr {
    						 		padding: 0px;
    										}
    										
    	.tableNav td {
    							  background-image: url('http://www.treecycle.com.au/dev/images/navbutton_bg.gif');
    							 	height: 30px;
    								width: 75px;
    							 	padding: 0px;
    								font-size: 60%;
    								font-family: helvetica, arial, sans-serif;
    								text-align: center;
    								vertical-align: center;
    								color: black;
    								border: 0px;
    										}
    
    
    #content-2 {
        width:960px;
    		background: #ff0000 url('http://www.treecycle.com.au/dev/images/main_bg.gif') 0 0 repeat-y;
    		margin:0 auto;
    		clear: both;
    		min-height:300px;
    }
    
    #content-2-1 {
        border: 0px;
    		width: 940px;
    		margin: 0 10px;
    		min-height:300px;
    }
    
    #top_border{
    	width:946px;
    	margin:0 auto;
    	border-top:1px solid black;
    }
    
    #bottom_border{
    	width:946px;
    	margin:0 auto;
    	border-top:1px solid black;
    }
    
    #footer {
    		width:700px;
    		height:30px;
    		margin:0 auto;
    		margin-top:5px;
    	  clear:both;
        padding:0px;
    }
    
    
    #content-2-1 p {
    		padding:0px;
    }
    
    #nav		{
    		width: 723px;
    		height: 30px;
    		background: #ffffff;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 5px;
    		padding: 5px;
    }
    
     	.tableNav {
    						 	  border: 0px;
    								border-spacing: 5px;
    								margin: auto;
    								padding: 0px;
    										}
    										
    	.tableNav tr {
    						 		padding: 0px;
    										}
    										
    	.tableNav td {
    							  background-image: url(http://www.treecycle.com.au/dev/images/navbutton_bg.gif);
    							 	height: 30px;
    								width: 75px;
    							 	padding: 3px;
    								font-size: 70%;
    								font-family: helvetica, arial, sans-serif;
    								font-weight: normal;
    								text-align: center;
    								vertical-align: center;
    								color: black;
    								border: 0px;
    										}
    										
    	.tableFooter {
    						 	  border: 0px;
    								border-spacing: 5px;
    								margin: auto;
    								padding: 0px;
    								vertical-align:center;
    								background: #df4603;
    										}
    										
    	.tableFooter tr {
    							  padding:0px;
    								vertical-align:center;
    							 			}
    										
    	.tableFooter td {
    							 	height:20px;
    								padding:2px;
    								font-size:70%;
    								font-family:helvetica, arial, sans-serif;
    								text-align:center;
    								vertical-align:center;
    								color:black;
    								border:0px;
    										}
    										
    	.tableTrade {
    						 	  border: 0px;
    								border-spacing: 0px;
    								margin: auto;
    								padding: 0px;
    										}
    										
    	.tableTrade tr {
    							  padding:0px;
    								vertical-align:center;
    							 			}
    										
    	.tableTrade td {
    							 	height:20px;
    								padding:0px;
    								font-size:8pt;
    								font-family:helvetica, arial, sans-serif;
    								text-align:center;
    								vertical-align:center;
    								color:black;
    								border:0px;
    										}
    										
    	.tableContact {
    								border: 0px;
    								border-spacing: 0px;
    								padding: 5px;
    								background-color:#df4603;
    										}
    										
    	.tableContact tr {
    							  padding:0px;
    								vertical-align:center;
    							 			}
    										
    	.tableContact td {
    							 	height:20px;
    								width:140px;
    								padding:0px;
    								font-size:10pt;
    								font-family:helvetica, arial, sans-serif;
    								font-weight:bold;
    								vertical-align:top;
    								color:black;
    								border:0px;
    										}
    										
    	.tableContact input {
        						text-align:left;
    								align:left;
    										}
    		
    										
    .callLink					{
    								visibility:none;
    										}
    										
    .image_right				{padding: 3px; float: right;
    										}
    										
    .blackheading	{
    								color: black;
    								font-weight: bold;
    								font-size: 16pt;
    								font-family: helvetica, arial, sans-serif;
    								text-align: center;
    										}
    										
    p {
        	 					font-size: 11pt; 
        						font-family: helvetica, arial, sans-serif; text-align: justify; padding: 3px;
    										}
    										
    .ul {						font-size: 11pt; 
        						font-family: helvetica, arial, sans-serif; text-align: justify; padding: 3px; list-style-position: inside;
    										}
    										
    		A:link {text-decoration: none; color: black;}
    		A:visited {text-decoration: none; color: black;}
    		A:hover {text-decoration: none; color: gray;}
    		A:active {text-decoration: underline; color: white}	
    		
    /* Formatting for contact form */
    		label {
    								float: left;
    								width: 100px;
    								font-weight: bold;
    								text-align: left}	
    								
    		textarea{
    						 		float: left;
    						 		width: 350px;
    								height: 150px}	
    								
    		input, textarea{
    					 			float: left;
    					 			width: 180px;
    								margin-bottom: 5px}
    	
    								
    		#submitbutton{
    		margin-left: 140px;
    		margin-top: 5px;
    		width: 90px}
    		
    		#clearbutton{
    		margin-left: 15px;
    		margin-top: 5px;
    		width: 90px}
    And the HTML
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Wayne Barry's Tree Services - About Us And Contact Page</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="Wayne Barry's Tree Services is a family owned and run business servicing 
    Geelong, Bellarine Peninsula, the Surf Coast and all surrounding areas. Contact us today 
    to take care of all your tree felling &amp; tree maintenance, garden mulch and tower hire needs." />
    <meta name="keywords" content="contact" />
    <meta name="robots" content="index, follow" />
    	
    																				<link rel="stylesheet" type="text/css" href="http://www.treecycle.com.au/dev/css/styles.css" media="Screen" />
    																				<link rel="stylesheet" type="text/css" href="http://www.treecycle.com.au/dev/css/mobile.css" media="handheld" />
    																				<link media="only screen and (max-device-width: 480px)" href="http://www.treecycle.com.au/dev/css/mobile.css" type="text/css" rel="stylesheet" />
    	
    </head>
    <body>
    
    <div id="wrapper">
    	
    	<div id="phoneBlock"></div>
    	<div id="header"></div>
    	
    	<div id="nav">
    			 					<table class="tableNav"><tr>
    								<td class="tableNav"><a href="/dev/index.html">Home</a></td>
    								<td><a href="/dev/tree_lopping.html">Tree Services</a></td>
    								<td><a href="/dev/stump_grinding.html">Stump Grinding</a></td>
    								<td><a href="/dev/garden_mulch.html">Tree Mulch</a></td>
    								<td><a href="/dev/tower_hire.html">Tower Hire</a></td>
    								<td><a href="/dev/formgenerator/forms/contact.html">About/Contact Us</a></td>
    								<td><a href="/dev/gallery.html">Gallery</a></td>
    								</tr>
    								</table>
    	</div>
    	
    				<div id="content-2">
    						 <div id="top_border"></div>
    						 		 <div id="content-2-1">
    								 			<img src="http://www.treecycle.com.au/dev/images/mulch_truck.jpg" class="image_right" alt="Wayne Barry's Tree Services">
    										<span class="blackheading">Wayne Barry's Tree Services - About Us</span>
    			<p>Wayne Barry's Tree Services is a family owned and operated tree felling business located 
    			at Batesford, Geelong. We have over 28 years experience in tree felling, trimming and 
    			tree maintenance. Our qualified arborists have Red Card accreditation and we take great 
    			pride in the quality of our work. We aim to do all our work to the highest safety standards 
    			and with the least impact on the environment.
    			<br /><br />
    			We have both government and commercial customers as well as servicing suburban and rural 
    			clients.
    			<br /><br />
    			We cover the Greater Geelong, Bellarine Peninsula, Surf Coast, and all surrounding 
    			areas. No job is too big or too small so contact us for all your tree removal, tower hire and garden 
    			mulch needs!
    			</p>
    
    
    <form enctype='multipart/form-data' action='process.php' method='post'>
    									
    									 <table class="tableContact">
    									 <tr>
    									 <td><label for="user">Name:</label></td>
    									 <td><input type="text" name="Name" value="" /><br></td></tr>
    									 
    									 <tr>
    									 <td><label for="emailaddress">Email Address:</label></td>
    									 <td><input type="text" name="Emailaddress" value="" /><br></td></tr>
    									 
    									 <tr>
    									 <td><label for="enquiry">Enquiry:</label></td>
    									 <td><textarea name="Enquiry"></textarea><br></td></tr>
    									 	
    									 <tr>	
    									 <td></td><td><input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></td></tr>
    									 <tr><td></td><td><input type=reset value='Clear Form' id="clearbutton" /></td></tr>
    									 </table>
    
    									 </form>
    									 
    									 
    <span class="blackheading">Wayne Barry's Tree Services - Contact Us</span>
    <p>Wayne Barry's Tree Services<br />
    335 Ballarat Rd, Batesford,<br />
    Geelong, 3221<br />
    PO Box 5457, North Geelong, 3215
    <br /><br />
    Phone/Fax - (03) 5276 1669<br />
    Wayne - 0418 522 351<br />
    David - 0407 522 900<br />
    </p>
    
    								</div>
    						<div id="bottom_border"></div>
    				</div>
    	
    	<div id="footer">
    			 <table class="tableFooter" summary="Footer">
    			 <tr>
    			 <td><a href="/dev/index.html">Home</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/tree_lopping.html">Tree Services</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/stump_grinding.html">Stump Grinding</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/garden_mulch.html">Tree Mulch</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/tower_hire.html">Tower Hire</a></td>
    			 <td>|</td>
    			 
    			 <td><a href="/dev/formgenerator/forms/contact.html">About/Contact Us</a></td>
    			 <td>|</td>
    			 
    			 <td><a href="/dev/gallery.html">Gallery</a></td>
    			 </tr>
    			 </table>
    			 
    			 <table class="tableTrade">
    			 <tr>
    			 <td>Tree Cycle PTY LTD trading as Wayne Barry's Tree Services</td>
    			 </tr>
    			 </table>
    			 
    	 </div>
    	
    </div>
    
    </body>
    </html>
    My troubles are twofold, the first being that I'd like to have the contact info, phone numbers, address etc. sitting on the right side of the page below the image. I have tried simply creating two divs, a left and right, and having them set to 50% width and floated one left and one right. I put the two divs in the div "content-2-1" and put the text and form in the left div and then the image and contact heading and details in the right div. It sort of worked but the two divs messed up the bottom border (it disappeared) and also wiped out my shadow edges of "content-2" div. My understanding was that divs are transparent?

    I'd figured that the two divs would fit within the "content-2-1" div and would extend vertically only as far as the content in each of them. Anyway, that didn't happen.

    My next attempt was to simply create a div for just the contact heading and details and float it right. That didn't work at all, I'm thinking maybe it had to clear everything above it before it could move to the right.

    My second problem is that I'd like to align both the 'Submit' and 'Clear Form' buttons to the left of their table cells in the contact form. I've tried a pile of different ways in both the CSS file and also trying to align them from within the HTML in the table itself but with no luck. I thought it would have been pretty simple.

    I've read in the posting guidelines sticky for this forum and have seen that using tables for layouts is frowned upon, I know I'm using a table for my top nav, footer nav and the contact form - I hope I'm forgiven for that. I guess I should be looking at using purely CSS for those three items but right at the moment the pressure is on just to get the site finished for my friend.

    Any help is much appreciated.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,303
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Second problem first: Add a float to the clearbutton in CSS file http://www.treecycle.com.au/dev/css/styles.css
    Code:
    #clearbutton{
    	float:right;
    	margin-left: 15px;
    	margin-top: 5px;
    	width: 90px;
    }
    Next:
    You need three divs. At the end of your paragraph and the beginning of your form add this:
    Code:
    </p>
    </div>
    
    <div style=";margin-top:25px;margin-bottom:25px; float:left;">
    <form enctype='multipart/form-data' action='process.php' method='post'>
    It closes the top div and starts the second.
    Then at the end of the form and the beginning of the contact info insert this:
    Code:
    </form>
    
    </div>
    
    <div style="margin-top:15px;float:right;">
    <span class="blackheading">Wayne Barry's Tree Services - Contact Us</span>
    That makes your second and third divs and floats the contact info to the right.
    You might need to clean the info up a bit and change the margins to suit yourself. Add the style to the CSS file when finished.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    chocko638 (07-29-2014)

  • #3
    New Coder
    Join Date
    Jun 2004
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    sunfighter, thanks a lot for your reply.

    Your advice with the form buttons worked. I was trying to get them to align left so I just floated the clearbutton left instead of right and also reduced the left margin of the submit button, all good now.

    I also made your changes with the divs. The contact info moved right just like I wanted but I also still wanted both the form and the contact info within the "content-2-1" div so I've put the form div and the contact info div within the "content-2-1" div. That's worked except for some reason the bottom border still appears above the form and the edge shadow image doesn't continue down under the form and contact info either.

    Here's my HTML now
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Wayne Barry's Tree Services - About Us And Contact Page</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    <meta name="description" content="Wayne Barry's Tree Services is a family owned and run business servicing 
    Geelong, Bellarine Peninsula, the Surf Coast and all surrounding areas. Contact us today 
    to take care of all your tree felling &amp; tree maintenance, garden mulch and tower hire needs." />
    <meta name="keywords" content="contact" />
    <meta name="robots" content="index, follow" />
    	
    																				<link rel="stylesheet" type="text/css" href="http://www.treecycle.com.au/dev/css/styles.css" media="Screen" />
    																				<link rel="stylesheet" type="text/css" href="http://www.treecycle.com.au/dev/css/mobile.css" media="handheld" />
    																				<link media="only screen and (max-device-width: 480px)" href="http://www.treecycle.com.au/dev/css/mobile.css" type="text/css" rel="stylesheet" />
    	
    </head>
    <body>
    
    <div id="wrapper">
    	
    	<div id="phoneBlock"></div>
    	<div id="header"></div>
    	
    	<div id="nav">
    			 					<table class="tableNav"><tr>
    								<td class="tableNav"><a href="/dev/index.html">Home</a></td>
    								<td><a href="/dev/tree_lopping.html">Tree Services</a></td>
    								<td><a href="/dev/stump_grinding.html">Stump Grinding</a></td>
    								<td><a href="/dev/garden_mulch.html">Tree Mulch</a></td>
    								<td><a href="/dev/tower_hire.html">Tower Hire</a></td>
    								<td><a href="/dev/formgenerator/forms/contact.html">About/Contact Us</a></td>
    								<td><a href="/dev/gallery.html">Gallery</a></td>
    								</tr>
    								</table>
    	</div>
    	
    				<div id="content-2">
    						 <div id="top_border"></div>
    						 		 <div id="content-2-1">
    								 			<img src="http://www.treecycle.com.au/dev/images/mulch_truck.jpg" class="image_right" alt="Wayne Barry's Tree Services">
    										<span class="blackheading">Wayne Barry's Tree Services - About Us</span>
    			<p>Wayne Barry's Tree Services is a family owned and operated tree felling business located 
    			at Batesford, Geelong. We have over 28 years experience in tree felling, trimming and 
    			tree maintenance. Our qualified arborists have Red Card accreditation and we take great 
    			pride in the quality of our work. We aim to do all our work to the highest safety standards 
    			and with the least impact on the environment.
    			<br /><br />
    			We have both government and commercial customers as well as servicing suburban and rural 
    			clients.
    			<br /><br />
    			We cover the Greater Geelong, Bellarine Peninsula, Surf Coast, and all surrounding 
    			areas. No job is too big or too small so contact us for all your tree removal, tower hire and garden 
    			mulch needs!
    			</p>
    
    
    <div style=";margin-top:25px;margin-bottom:25px; float:left;">
    			
    <form enctype='multipart/form-data' action='process.php' method='post'>
    									
    									 <table class="tableContact">
    									 <tr>
    									 <td><label for="user">Name:</label></td>
    									 <td><input type="text" name="Name" value="" /><br></td></tr>
    									 
    									 <tr>
    									 <td><label for="emailaddress">Email Address:</label></td>
    									 <td><input type="text" name="Emailaddress" value="" /><br></td></tr>
    									 
    									 <tr>
    									 <td><label for="enquiry">Enquiry:</label></td>
    									 <td><textarea name="Enquiry"></textarea><br></td></tr>
    									 	
    									 <tr>	
    									 <td></td><td><input type="submit" name="submitbutton" id="submitbutton" value="Submit" /></td></tr>
    									 <tr><td></td><td><input type=reset value='Clear Form' id="clearbutton" /></td></tr>
    									 </table>
    
    									 </form>
    									 
    									 </div>
    
    									 <div style="margin-top:15px;float:right;">
    									 
    									 <span class="blackheading">Wayne Barry's Tree Services - Contact Us</span>
    									 <p>Wayne Barry's Tree Services<br />
    									 335 Ballarat Rd, Batesford,<br />
    									 Geelong, 3221<br />
    									 PO Box 5457, North Geelong, 3215
    									 <br /><br />
    									 Phone/Fax - (03) 5276 1669<br />
    									 Wayne - 0418 522 351<br />
    									 David - 0407 522 900<br />
    									 </p>
    
    								</div>
    								
    								</div>
    								
    						<div id="bottom_border"></div>
    				</div>
    	
    	<div id="footer">
    			 <table class="tableFooter" summary="Footer">
    			 <tr>
    			 <td><a href="/dev/index.html">Home</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/tree_lopping.html">Tree Services</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/stump_grinding.html">Stump Grinding</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/garden_mulch.html">Tree Mulch</a></td>
    			 <td>|</td>
    
    			 <td><a href="/dev/tower_hire.html">Tower Hire</a></td>
    			 <td>|</td>
    			 
    			 <td><a href="/dev/formgenerator/forms/contact.html">About/Contact Us</a></td>
    			 <td>|</td>
    			 
    			 <td><a href="/dev/gallery.html">Gallery</a></td>
    			 </tr>
    			 </table>
    			 
    			 <table class="tableTrade">
    			 <tr>
    			 <td>Tree Cycle PTY LTD trading as Wayne Barry's Tree Services</td>
    			 </tr>
    			 </table>
    			 
    	 </div>
    	
    </div>
    
    </body>
    </html>
    Thanks again.

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    23
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Just a quick update in case someone has a similar problem to what I had in this thread.

    I have my "content-2" div set to a minimum height of 300 pixels because on some pages I have text on the left and an image floated right and if there wasn't enough text to expand the div the image would overlap the bottom of the div.

    On my contact page I had to set an inline div minimum height of 650 pixels to expand the div enough vertically to fit everything in. Once I'd done that the bottom border appeared below the div like it should.

    It looks right now but I was under the assumption that a div would expand vertically automatically to hold the content (text and images, forms etc.) that was in it.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •