Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

How to get form to the left of the map

Posted on 2016-09-12
3
74 Views
Last Modified: 2016-09-13
I'm trying to get the form to the left of the map, the way it looks here: http://www.consolidatedutilities.com/contact.

I've attached images of how this looks. Here is my HTML and CSS.

I also need to get rid of the view larger map, I used inspect element and it showed a link inside of some <small> tags but when I removed it from the browser it didn't seem to stick, and I can't find the same tags in my HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
	
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="keywords" content = "consolidated utilities, 
      consolidated utilities savannah ga, coastal water company llc, 
      coastal water company llc savannah ga, coastal water company, 
      coastal water company savannah ga, whitemarsh estates, 
      whitemarsh estates water company, whitemarsh estates water 
      company savannah ga, woodlawn, woodlawn water system, 
      golden isles water company, golden isles water company 
      savannah ga">
    <meta name="author" content="Consolidated Utilities, Inc.">
    <meta name="description" content="Contact information and directions for Consolidated Utilities, Inc.,
  Coastal Water & Sewage Company, LLC., Coastal Water Company and Whitemarsh Estates Water
  System.">
    
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->  
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/consolidated.css">   
    <title>Contact Us</title>
  </head>

  <body>
  
  
  
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href = "../" >Consolidated Utilities</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/policies/">Policies</a></li>
          <li><a href="/about/">About Us</a></li>
          <li><a href="/billing/">Billing</a></li>
          <li><a href="/affiliatedsystems/">Affiliated Sytems</a><li>
          <li><a href="/rates">Rates</a></li>
          <li><a href="/conservation/">Conservation Efforts</a></li>
          <li class="active"><a href="/contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

  <div class = "maxwidth">
    <div class="container">
      <div class="template"> 
      
      
    
        <img src = "../images/logo.jpg" height = "120" width = "196" id = "logo" alt="logo">
        <h1 id = "heading">Contact Us</h1><br/><br/><hr>
        <p><b>All emergencies must be called in.</b></p> 
        <p><b>Phone: </b><strong>(912) 233-3254</strong></p>
        <p><b>Fax: </b><strong>(912) 233-5654</strong></p>
        <p><address><strong>STREET ADDRESS:</strong> 119 W. Oglethorpe Ave. Savannah, GA 31401</address></p>
        <p><address><strong>MAILING ADDRESS:</strong> P.O. Box 9330 Savannah, GA 31412</address></p>
        <p> If you need directions there is an embeded map on this page. You can also visit this page from your smart phone for GPS directions.</p>
        <noscript>The embedded map will not display unless you enable JavaScript.</noscript>
        <iframe id="map" width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=119+W+Oglethorpe+Ave,+Savannah,+GA&amp;aq=0&amp;oq=119+W.+Ogle&amp;sll=32.038844,-81.200278&amp;sspn=0.369026,0.517044&amp;ie=UTF8&amp;hq=&amp;hnear=119+W+Oglethorpe+Ave,+Savannah,+Georgia+31401&amp;t=m&amp;z=14&amp;ll=32.077248,-81.094522&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=119+W+Oglethorpe+Ave,+Savannah,+GA&amp;aq=0&amp;oq=119+W.+Ogle&amp;sll=32.038844,-81.200278&amp;sspn=0.369026,0.517044&amp;ie=UTF8&amp;hq=&amp;hnear=119+W+Oglethorpe+Ave,+Savannah,+Georgia+31401&amp;t=m&amp;z=14&amp;ll=32.077248,-81.094522" style="color:#0000FF;text-align:left">View Larger Map</a></small></div>
        <form name="contact" class="text-left" id="contact" method="post" action="validate.php">
	      <fieldset>		
	      <legend>Contact Us</legend>		
	      <label class="blocklabel">		
		  <b>First Name:</b><input type="text" id="fname" name="fname" /><br/>		
	      </label>		
	      <label class="blocklabel">		
		    Last Name: <input type="text" id="lname" name="lname" /><br/>		
	      </label>		
	      <label class = "blocklabel">		
		    Email Address: <input type="text" id="email" name="email" /><br/>		
	      </label>		
	      <label class = "blocklabel">		
		    Mailing address: <input type="text" id="address" name="address">		
	      </label>		
	      <br><b>For what reason are you contacting us?</b><br/>			
	      <input type="radio" id="complaint" name="reason" value="Complaint" /> Complaint			
	      <input type="radio" id="inquiry" name="reason" value="Inquiry" /> Inquiry			
	      <input type="radio" id="comment" name="reason" value="Comment" /> Comment	
	      <input type="radio" id="comment" name="reason" value="Bill" /> Billing		
	      <input type="radio" id="other" name="reason" value="Other" /> Other	
	      </fieldset>
	      <fieldset>	
		    <legend>Enter your message below</legend>		
		    <textarea name="comments" cols="40" rows="5"></textarea><br/>	
	      </fieldset>		
	      <input type="submit" value="Submit" />	
        </form>
        
    
      </div>
    </div>
  </div>  
  <hr/>
  <p>Copyright &copy; 2011-2016, Consolidated Utilities, Inc.</p>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="js/analytics.js"></script>
  </body>
</html>

Open in new window


body {
  padding-top: 50px;
  background-color: #ccc;
}
.template {
  padding: 40px 15px;
  text-align: center;
}

#heading {
  margin-left:30%; 
  margin-right:30%; 
  text-align: center;
}

#logo {float: left;}

.blurImage       {opacity: 1.0;}
.blurImage:hover {opacity: 0.6;}

.panel-isles {
  border-color: #000000;
}

.panel-isles > .panel-heading {
  color: #000000;
  background-color: #ffff7f;
  border-color: #000000;
}

.panel-isles > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #000000;
}

.panel-isles > .panel-heading > .dropdown .caret {
  border-color: #b94a48 transparent;
}

.panel-isles > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ebccd1;
}


#gallery {
  background: rgba(0,0,0,0.85);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  text-align: center;
}

#gallery img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1024px;
  height: 766px;
  margin-top: -383px; /*Set this to half the height*/
  margin-left: -512px; /*Set this to half the width*/
}

/*index Desktop*/

#waterTower {
  float: right;
}


/*About Us Desktop*/

#pipes {
  float: right; 
  padding-left: 4px;
}
.lead {
  text-align: left; 
  padding-right = 20px;
}

/*Rates Desktop*/

#rates {
  margin-left:30%; 
  margin-right:30%; 
  border: 2px solid #000; 
  width: 40%; 
  padding: 10px;
}

form {
float: left;
}

.subdivision ul {
text-align: left;
}

#conserve {
  padding-bottom:5px;
}

#map {
  float: right;
}

.error {
  color: red;
}

#contact {
  float: left;
}

Open in new window


Screen-Shot-2016-09-12-at-7.02.10-AM.pngScreen-Shot-2016-09-12-at-7.02.13-AM.png
0
Comment
Question by:burnedfaceless
  • 2
3 Comments
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41794044
The reference page is clumsy in it's implementation. I would borrow from Bootstrap and do this
<div class="row">
   <div class="col-50">
      <!-- FORM HERE -->
   </div>
   <div class="col-50">
        <iframe .... > <!-- MAP HERE -->
   </div>
</div>

Open in new window

CSS
.row {
   margin-left: -15px
   margin-right: -15px;
}
.row:after {
  display: table;
  content: " ";
  clear: both;
}
.col-50 {
   width: 50%;
   float: left;
   padding-right: 15px;
   padding-left: 15px;
}

Open in new window

0
 

Author Closing Comment

by:burnedfaceless
ID: 41797028
Lol thanks.

Am going through the frontend course on Team Treehouse and am going to learn Bootstrap better.
0
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 41797310
You are welcome.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question