I am having some issues with a footer showing up across 2-column setup in Chrome and Mozilla. works ok in IE8.
I am writing asp with css includes to display the footer. css code for footer is this:
#siteInfo{
clear: both;
border-style: solid;
border-color: #cccccc;
border-width: 1px;
font-size: 75%;
color: #000000;
padding: 0px 10px 0px 0px;
margin-top: 5px;
float: left;
width: 100%;
}
I have tried the shorthand of border:1px solid #cccccc; as well with no effect.
while footer itsself is this:
<!-- PAGE FOOTER -->
<!-- DO NOT EDIT CODE BELOW! -->
<div id="siteInfo">
Materials provided are for <strong>Educational Use Only</strong>. Published articles are the Copyright of their respective publishers. All other material is Copyright ©2011 XXX. You're welcome to use any of my material for eductional or non-commercial use, provided it is in its original form, and I am recognized as its author. Please post links rather than posting copies of the files, so that your users get any updates which I post here. </p>
</div>
As of my experience the best way to fix a footer is using a master page which is in a tabular format using panels.
3 panels vertically place one below the other (a division might do as well)
{note div is faster than span} when browser tries to load but some attributes of div like align is not supported across various browsers like IE7, Safari.
So I advise you to use framesets like this:
<frameset rows="10%,80%,10%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
Inside frame_c.htm set the footer.
Related
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.
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 made some mini plugin which works with Youtube API.
But something wrong with my CSS: It destroys whole page structure.
Here is the main page where all works well (without problematic piece of CSS):
http://pikproduction.az/?lang=ru
and the page that I'm talking about (witH problematic piece of CSS):
http://pikproduction.az/?lang=ru&page=11
The same CSS working well on another page
http://tural.us/?page=utube
Can't figure out, what am I missing?
You are adding your "video" class to video wrapper and I don't know why but html tag too. It has width:228px; that causes problem. Also i'm not sure why are you using classes on your html tag(and there are like 20+). Solution for your problem is rename video class or delete it from html tag. Good solution is change your html tag to <html lang="ru" xmlns="http://www.w3.org/1999/xhtml">
the whole .video class from your tag should be removed on problematic page:
.video {
border: 1px solid transparent;
float: left;
font-size: 11px;
height: 150px;
margin: 0 25px 25px 0;
width: 228px;
}
I'm using this free Web Template - EliteCircle and have just incorporated it into a master page. The master page wraps the html in:
<form id="form1" runat="server">
//master page html
</form>
The template almost comes out fine except the entire page is surrounded by a think white border (default CSS behavior for form?) and the footer background is half white on the very bottom.
I wouldn't expect the form with id=form1 to change anything in the layout. There is nothing in the [CSS][2] with that id.
When I remove the form tags from the master page (just to check) the layout is perfect, no problems.
Any ideas?
(Using Visual Web Developer 2008 Express)
Thanks,
Greg
The CSS: http://www.styleshout.com/templates/preview/EliteCircle12/images/EliteCircle.css
Have you seen the
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
declaration in your CSS file? That might just explain the thick white border and other stuff you mention :)
Either change that declaration to form.myForm (and change all forms that need it), or re-cascade the form1 id or interior tags on your page to override those settings.
I agree with Konerak, but a word of advice, don't set properties to html elements in a generic way, instead, use classes...
Your css:
/* form elements */
form {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
The sugestted:
form.standard {
margin: 15px;
padding: 15px 5px;
border: 1px solid #EFEFEF;
background: #F8F8F8;
}
If you set the css to the form element, all forms in your page will receive does properties, but if you set does properties to a class, only form's with that class will receive then...
Btw: DocType may also interfere with the desired result...