I want to get an embedded map effect like this one: http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177 except I need to do it with an iframe not JS like in the example. My sections have a max width but the map's container is set to overflow:visible to allow the iframe to show through.
I have tried the following CSS on the map div and the iframe itself too:
display:block;
margin:auto;
text-align: center;
and they didn't work. Please help... thank you.
My HTML:
<div class="section">
<h2>Where we are </h2>
<div class="map">
<iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=3-4+High+Street+Hitchin+SG5+1BH&aq=&sll=51.48931,-0.08819&sspn=0.868785,2.113495&ie=UTF8&hq=&hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&t=m&ll=51.947915,-0.278864&spn=0.013226,0.051842&z=14&iwloc=A&output=embed"></iframe>
</div>
</div>
My CSS:
div.section {
width: 80%;
max-width: 600px;
margin: 0 auto 40px;
}
div.map {
margin: auto;
width: 100%;
height: 25rem;
}
I also have the following script going on, to set the iframe width depending on screen width (the default 605 width is there because iframes must have a set width in the HTML AFAIK:
if($(window).width() < 1100) {
$('iframe').attr("width", $(window).width());
}
else {
$('iframe').attr("width", "1100");
}
Fiddle here: http://jsfiddle.net/Ykx2w/
Ok, now I am confused. I would suggest to be more specific and clearly indicate what you are trying to achieve. Following the link you posted, I do not see any map, hence you may be talking either about id="main-slider" (which fills all available space, but not centered horizontally) or section id="main" (centered horizontally, but has static width). Which one do you need?
Also I updated my last sample to work under IE browser and auto fill all available horizontal space (resize the window): http://jsfiddle.net/Ykx2w/3/. If that's not what you need - try to describe better your need.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments