i'm making "contact us" page , here have 3 different people contact.
the way designing page such:
......................................................
name
left hand side = contact details, right hand side = picture.
next person
.....................................................
at moment, gave pictures class=profile , coded .css file:
.profile { float = right } however seems have done pushed image right, want it, text bunched , wrapping underneath.
i want pictures same size (width = 700px, height - 440px) have coded html , want height define size of each "section".
how go
a) keeping text left , not wrapping underneath , b) stopping bunching up?
my initial idea put load of line breaks in feel there has neater way in .css?
edit: https://jsfiddle.net/kaish/c9kaxllh/
hi all, link jsfiddle showing html , .css coding.
since posting this, client want google map of office instead of profile picture have amended images same issue still holds. want map on right , contact details on left , each 3 clients want split invisible "sections".
you want this
<style> .parent { width:100%; } .left { float:left; width:50%; box-sizing:border-box; padding:5px; border:#ccc solid 1px; min-height:200px; } .right { float:left; width:50%; box-sizing:border-box; padding:5px; border:#ccc solid 1px; min-height:200px; } </style> <div class="parent"> <div class="left"> details </div> <div class="right"> image </div> <div> <!--parent ends-->now if take codes inside boxes
<style> .parent { width:100%; } .left { float:left; width:50%; box-sizing:border-box; padding:5px; border:#ccc solid 1px; min-height:200px; } .right { float:left; width:50%; box-sizing:border-box; padding:5px; border:#ccc solid 1px; min-height:200px; } </style> <div class="parent"> <div class="left"> <h3>form 1</h3> <form action="form" method="get"> <input name="" type="text" /><br /> <textarea name="" cols="" rows=""></textarea> </form> <hr style="border-top:#ccc solid 1px; width:100%" /> <h3>form 2</h3> <form action="form" method="get"> <input name="" type="text" /><br /> <textarea name="" cols="" rows=""></textarea> </form> <hr style="border-top:#ccc solid 1px; width:100%" /> <h3> form 3</h3> <form action="form" method="get"> <input name="" type="text" /><br /> <textarea name="" cols="" rows=""></textarea> </form> </div> <div class="right"> <!--your code starts--> <div class="contact_location"> <h3>employee #1</h3> <div class="map"><script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script> <div style="overflow:hidden;height:440px;"> <div id="gmap_canvas" style="height:440px;"></div> <div> <small><a href="http://embedgooglemaps.com">embed google maps </a></small> </div> <div> <small><a href="http://freedirectorysubmissionsites.com/">link directories</a></small></div> <style type="text/css">#gmap_canvas img{max-width:none!important;background:none!important} </style> </div> <script type='text/javascript'>function init_map(){var myoptions = {zoom:17,center:new google.maps.latlng(50.402068577896536,-4.185562806082097),maptypeid: google.maps.maptypeid.roadmap};map = new google.maps.map(document.getelementbyid('gmap_canvas'), myoptions);marker = new google.maps.marker({map: map,position: new google.maps.latlng(50.402068577896536,-4.185562806082097)});infowindow = new google.maps.infowindow({content:'<strong>st beaudeux news</strong><br>628 wolseley rd<br>'});google.maps.event.addlistener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.adddomlistener(window, 'load', init_map);</script> </div> <p> <b> address </b></p> <!-- code ends--> </div> <div> <!--parent ends-->
Comments
Post a Comment