I am working on developing a simple webpage for my small business and am running into a small issue. I have a page called "Find Us" that visitors can go to and view two embedded iframes from Google Maps, one is the map view and one is the street view. I created a row and column class in my CSS file so that I can have them set side by side. This is working, but my question is how do I get the iframes to be centered inside of their respective row divs? I've tried setting text-align:center in the row and column to no avail, and when I inspect the page in Firefox it appears that the iframe is actually inside a couple of divs that are created at runtime that are inside the column div I created (which is why I assume the text-align:center change in column had no effect). I've tried quite a bit and am a bit of a novice at HTML and CSS so any help would be greatly appreciated. Here is the relevant code that I've got:
HTML:
<!-- Page Content -->
<div class="row">
<div class="column">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d820.109972365762!2d-82.9747956!3d34.6940833!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8858f48d9c0b5b95%3A0x9025d413ee9c3690!2sComputers%20Plus!5e0!3m2!1sen!2sus!4v1600897132491!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;display:block;float:left;" allowfullscreen="" aria-hidden="false" tabindex="0" class="card"></iframe>
</div>
<div class="column">
<iframe src="https://www.google.com/maps/embed?pb=!4v1600897261750!6m8!1m7!1s3ZaVoRt_4ZAZOf7ojip-rQ!2m2!1d34.69359001695453!2d-82.97439599257413!3f329.63553875594886!4f-3.155410164097759!5f1.6853925263716625" width="600" height="450" frameborder="0" style="border:0;display:block;float:left;" allowfullscreen="" aria-hidden="false" tabindex="0" class="card"></iframe>
</div>
</div>
CSS:
.column {
text-align: center;
float: left;
width: 50%;
padding: 10px;
}
.row::after {
content: "";
clear: both;
display: table;
text-align: center;
}
.card {
box-shadow: 5px 5px 10px 5px rgba(0,0,0,0.2), 6px 6px 20px 5px rgba(0,0,0,0.19);
background-color: white;
margin-left: auto;
}
The code for the iframes is unchanged from what Google Maps provided. Any and all help would be greatly appreciated.
You can fix this by removing float:left from the style attribute of the <iframe> elements, which is currently preventing them from being centered.
Related
I have the below HTML code:
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d109782.8671228349!2d76.62734023564995!3d30.69830520749905!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390fee906da6f81f%3A0x512998f16ce508d8!2sSahibzada+Ajit+Singh+Nagar%2C+Punjab!5e0!3m2!1sen!2sin!4v1449838222081"
width="100%" height="150" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Now i have the following CSS:
body {
color: #fff;
}
.google-maps {
margin: 1em 0;
background: #000;
padding: .5em;
}
I have gone through the HTML and the CSS thoroughly , but i can't figure out whats 'causing the extra padding at the bottom in spite of the even padding i have given I.E.
padding: .5em;
can somebody explain why am i getting this uneven padding ?
FIDDLE HERE
iframe has display:inline; by default, it acts like a letter. For example, when you have a letter there is some spaces below the letter. However, you can use the below solutions:
1- vertical-align:bottom; Jsfiddle
2- display:block; Jsfiddle
or ..
Here is the image which is shown the extra space(2px).
Jsfiddle
The issue isn't technically with the padding; there is a small space after the iframe that is picking up the background: #000; style.
There is a similar issue located here: Unwanted Padding in IE Image Rendering in div Tag
I modified your fiddle and added a display: block; to the iframe, ran the fiddle, and all was well with the output (i.e. no more uneven padding). Here is that fiddle.
I am working on iframes, and I need to show only a particular portion of the page.
I want to display only this part of the blog.
http://s17.postimg.org/ickav5d33/pic.png
This is the actual page of the blog.
This is my code:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>
Here is a Fiddle
How can I achieve this?
It seems like you just need to tweak your inline CSS a bit. For example:
<div style="border: 1px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; width: 675px;">
<iframe scrolling="no" src="http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html" style="border: 0px none; margin-left: 13px; height: 954px; margin-top: -422px; width: 660px;">
</iframe>
</div>
This appears to match the picture you provided.
I changed the margin-left, margin-top, and width of the iframe. I also changed the div's max-width to a simple width with a different value.
I figured the values for all these using Firebug. I highly recommend familiarizing yourself with browser developer tools such as that (all modern browsers include some kind of "developer tools" these days) that let you play with these things "live" until you find the tweaked CSS you like.
JSFiddle: http://jsfiddle.net/cnmteg76/2/
You can scroll to any portion of a page with a link if the element has an id attrib. IE http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#boxB links to boxB scroll position any yes that can be used in as an iframe URL.
div id=post-body-2265336028782673534 is the closest element with an ID attrib. Unfortunately there are 10 br elements under this position and not html element with an ID closer. http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#post-body-2265336028782673534
If you can change the source page, place an id attrib in the font tag element (ID="linkanchor"). Link to the page, using the iframe, with a hash tag link ... http://teamiwatefsu.blogspot.com/2014/09/jsfiddle-demo-div-display-inline-block.html#linkanchor
I am building a website that uses Google's Mapping API Embed V1.0, and the coordinates that I specified are showing correctly, however, the point is not in the center of the mapping view.
Photo of Problem:
iFrame Code:
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3599,-71.0655&zoom=18&maptype=satellite"></iframe>
CSS:
.sectionMap{
/*
width: 300px;
height: 300px;
*/
display: block;
position: relative;
left: 50%;
margin-left: -150px;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
Here is a sample page from the web app:
<section id="williamMonroeTrotterHouse" data-role="page" data-theme="a">
<header data-role="header" data-position="fixed" data-id="appHeader">Back
<h1>William Monroe Trotter House</h1>
</header>
<div data-role="content">
<p><span class="sectionTitle">Location: </span>97 Sawyer Ave., Dorchester</p>
<p><span class="sectionTitle">Description: </span>Home of African-American journalist and Harvard graduate William Monroe Trotter. Trotter publisher The Guardian, and meetings of African-American activists, W. E. B. Du Bois among them, took place at this house.</p>
<img src="Landmark_Photos/WIlliam_Monroe_Trotter_House.jpg" class="sectionPhoto">
<br>
<iframe class="sectionMap" width="300" height="300" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAGJVo8xnxXbEICl5IuDAbmWIBsE0cFKVQ&q=42.3127,-71.0624&zoom=18&maptype=satellite"></iframe>
</div>
</section>
Any ideas why this is not centering?
PS: I don't believe this is a duplicate post, as Google recently updated the mapping api and the answers to previous questions do not work.
A fiddle having exactly you code works fine in my Safari version (5.1.7). Wich version are you having problems with? The only reason I could imagine is the "tricky" centering with position and margin. I'd try margin:0 auto; for centering, without the position relative, top & margin. Or go the old way: display:inline-block inside a div with text-align:center. IMHO this last one is the most cross-browser.
.sectionMapWrapper{
width:100%;
text-align:center;
}
.sectionMap{
display: inline-block;
border-style: solid;
border-width: 2px;
box-shadow: 1px 1px 5px 3px #ccc;
}
EDIT:
If it didn't solve the problem check if you have some kind of library (or your own function) that could make your iframe "display: none".
If it have no layout (display:none) when the content is loaded it's size is 0x0 for the iframe script, and the center is at ... 0/x , 0/x. Keep display block until content is loaded, then you can hide it with display:none.
Under a similar situation I worked around this placing the iframe inside a 0x0 sized div with overflow hidden (at style attribute). When sure of iframe content is loaded fire a function that set the iframe display to none and delete the wrapper div style attribute. (or similar, depending of the additional behaviour you need). Hope it helps.
I'm using an iFrame on the following website for the Online Booking system as shown below:
http://www.marandy.com/one2onev2
The iFrame should only display a scroll bar on the y-axis. In Firefox, IE and Safari this is working as expected, however in Google Chrome this is still showing both scroll bars (y & x).
Here is the code:-
HTML
<div id="main-online-booking">
<iframe id="main-online-frame" class="booking-dimensions" src="http://www.marandy.com/one2oneob/login-guest.php" frameborder="0"></iframe>
<div id="main-online-user">
<img alt="One 2 One Account" id="img-onlinebooking-acc" src="images/account.png" />
<img alt="One 2 One Guest" id="img-onlinebooking-guest" src="images/guest.png" />
</div>
</div>
CSS
#main-online-booking {
height: 488px;
border-bottom: 6px #939393 solid;
border-left: 6px #939393 solid;
border-right: 6px #939393 solid;
z-index: 4;
background-color: #fff;
}
#main-online-frame {
overflow-x: hidden;
frameBorder: 0;
height: 488px;
}
The overflow-x: hidden property appears to only not be working in Google Chrome on iFrames, any suggestions?
Add in Your iframe scrolling="no" and increase height #main-online-frame.......
On page inside your iframe (http://www.marandy.com/one2oneob/login-guest.php), add this html {overflow-x: hidden; overflow-y: auto;}.
And check initial height of page inside iframe. Make sure that initial height fits in height of iframe.
I ran into this same issue where Chrome was not applying overflow-x:hidden correctly, but all other browsers were. It wasn't an iFrame, but rather a div. I struggled with this for about 4 weeks and finally found that if I simply apply position:relative to that same div, it will work properly. Hopefully this is helpful to someone.
For some reason my web page is not display correctly in Firefox version 14.0.1. It is displayed correctly in IE9, Safari, chrome. A friend of mine also said he experienced the same as me.
In Firefox if I zoom out or in the layout changes. But then the YouTube video begins to smear and pixelate. I asked a friend to check Firefox on their computer and the same thing happens.
http://wwww.streetstyles4all.co.uk/images/screen_shot.jpg
The screen shot from top left shows how the page loads. Top right shows after I zoom in or out, and bottom left is after I scroll up and down.
HTML:
The HTML for the section in question is:
<div id="homewallcontainer">
<div id="homesidenavcontainer">
<script type="text/javascript" src="http://forms.aweber.com/form/23/850302323.js"></script>
</div>
<div id="newsletterblurb">
<p>
Learn everything you need to get yourself going in the world of street dance, tips, facts, what to wear, music, videos and more. Just fill in the form above - simple!
</p>
</div>
<div id="contentcontainerhome2">
<h1>Street Styles 4 All is the place to be for street dance! With classes, DVD's that are sold worlwide, dancers for hire, streetwear...find out why you should choose Street Styles 4 All:
</h1>
<div id="homess4atrailer">
<iframe width="466" height="302" src="http://www.youtube.com/embed/QyhgZ6I_DHo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
The CSS is:
#homewallcontainer {
background: url("images/wall.png") repeat scroll 0 0 transparent;
height: 542px;
margin-top: -1px;
width: 960px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#homesidenavcontainer {
float: left;
margin-left: 41px;
margin-top: 110px;
width: 253px;
}
#contentcontainerhome2 {
float: right;
margin-right: 17px;
margin-top: 46px;
width: 528px;
}
#homess4atrailer {
margin-left: 56px;
padding: 38px 0 10px;
}
First: Your question/problem is extremely unclear. You don't have resizing issues, you just have a messed up website that's "looks correct" when you resize, right ? Is that what you want to say ?
You problem is: The site is build by amateurs. There are a lot of layout issues, but there's a simply solution:
Remove the position:relative; of #indexwrapper in ss4a4.css, around line 250+ !
The reason for the fault in Firefox seems to be the use of the HEIGHT attribute. It was applied to 2 divs, and after removing the HEIGHT and POSITION:RELATIVE attributes, replacing with FLOATS, MARGINS and PADDING to create the layout of all the divs and nested divs in the section in question corrected the firefox issue.
That section of the site was carelessly written!