I'm using the Google Charts API which renders charts using an <iframe>, however there's an large amount of white space on both the bottom and top parts which I'd like to remove. I've been attempting to do this in a variety of ways (explained below), but can't seem to get it to work out how I want it to;
My HTML markup
<div id="chart">
<div id="chart-contents">
<iframe name="Drawing_Frame_49918" id="Drawing_Frame_49918" width="690" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>
</div
The <iframe> is included via javascript, and so not actually part of my mark-up; but part of the DOM post-load.
My CSS Styling
#chart {
padding-top: 15px;
margin: auto;
width: 690px;
height: 155px;
overflow: hidden;
}
#chart-contents {
margin-top: -45px;
}
#chart-nav {
margin-top: 15px;
padding: 0px 15px;
}
The intent of this CSS is to restrict the height of the container element #chart to 155px (where the <iframe> height is 200px), and hide the overflow. Then #chart-contents is pushed up by 45px but because the overflow is hidden, it's still contained within the same 155px area, and thus the middle and x-axis of the chart is shown.
However, this doesn't seem to work, as while clipping off the bottom part of the <iframe> by setting a restricting height and overflow to hidden, attempts to #chart-contents up have all failed.
So far I've tried;
Use of negative top, padding-top and margin-top properties.
Positioning of absolute and relative in conjunction with top.
Using the clip property in conjunction with a relative position.
I'm starting to think that this is something that perhaps isn't possible without further elements or javascript?
Any suggestions and answers for how to rectify this in an efficient way (ideally sticking to just CSS properties for the already existing elements if possible) would be greatly appreciated!
If you feel like you need more information or some kind of visualization please just ask. I would jsFiddle this for you, but because of their AJAX policies and Google's API use of AJAX, it's rather difficult.
You could always place the previous element on top of your iframe so it looks like it's starting sooner than it actually is. This obviously works for an element coming after the iframe as well.
All you need to do to achieve this is to give the element position: relative.
Preview: http://jsfiddle.net/Wexcode/XyVGr/
Related
I'm pretty new to HTML and CSS, and I've looked for an answer to this for awhile but I can't seem to find anything. I have an iframe element that I'm trying to position , but whenever I change the left or right properties it doesn't actually move.
.things1 {
position: relative;
}
.afx-vid {
position: absolute;
left: 500px;
}
<div class="things1">
<iframe class="afx-vid" width="300" height="200" src="https://www.youtube.com/embed/rndV_5q8Tkc" frameborder="0" allowfullscreen></iframe>
</div>
I know this probably seems like a dumb question but some help would be appreciated :)
You code will actually move the iframe, but this is not a good way to do that. I recommend you use flex property to move your elements on your website.
flex is super easy and it will make your learning so much easier.
There are tons of youtube videos and websites that explain how flex works, so please watch them, it will help you. :)
Here is your fixed solution. Just replace your current css with this one :
.things1 {
width : 100%;
display: flex;
justify-content: center;
}
.afx-vid {
margin : 0px auto;
}
You always assign display : flex; to the parent of the element(s) that you want to move (in this case, you want to move .afx-vid, and his parent is .things1, so we give .things1 display : flex;).
justify-content : center; is one of the properties you can use when you declare display : flex;. What it basically does is align items on x-axis (in this case, he will align your iframe to the center of the page).
Let me know if it worked. :)
This actually should be a comment, but I want to demonstrate what I write by using code, so here it is:
What do you mean when you write "whenever I change the left or right properties it doesn't actually move"?
I changed the left setting of your code in the the snippet below to 200px(it's the only change I made), and the position of the iFrame is different than in you original snippet! (it's 200px left of the parent's left border, opposed to 500px in your snippet).
???
.things1 {
position: relative;
}
.afx-vid {
position: absolute;
left: 200px;
}
<div class="things1">
<iframe class="afx-vid" width="300" height="200" src="https://www.youtube.com/embed/rndV_5q8Tkc" frameborder="0" allowfullscreen></iframe>
</div>
I had the same problem if I understand you correctly. I had an iFrame and I gave it a style by giving it the class-attribute and in the CSS for that class I tried to give it:
position: absolute;
left : 200px;
right : 0px;
top : 0px;
bottom : 0px;
But the left and right positions had no effect. The IFrame did not "move" to where I wanted it.
For every other type of element using CSS this way seems to work but there is something about iFrame that makes it different.
Then I finally discovered a somewhat round-about way to make it position like I wanted by doing the following:
In the HTML for the IFrame-element give it:
width="100%"
height="100%"
Note above is HTML, not CSS
In the HTML wrap the IFrame element inside a DIV and give that div a style-class named for example 'iFrameWrapper'. Give that wrapper-class the attributes like these:
.iFrameWrapper
{
position : absolute;
left : 210px;
right : 0px ;
top : 0px;
bottom : 0px;
}
Now the iFrameWrapper -DIV AND the IFrame -element inside inside it position correctly.
The HTML looks something like this:
<div class="iFrameWrapper">
<iFrame width = 100%;
height = 100%;
src = "..."
></iframe>
</div>
SUMMARY:
Make the iFrame element have HTML attribute-values height="100%" width="100%" and wrap it inside an absolutely positioned DIV. Then position that wrapper-div with CSS anyway you want.
kinda new here
so I've been trying for the past 2hr to position an iframe and just couldnt get it right (or anywhere near that...)
my goal is to position an iframe of amazon just where "Hello, [name]" is written.
first I couldnt set an iframe because of their Same origin policy but I guess some pages aren't protected, like this one: http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending
positioning the iframe on my account information just seem impossible (tried margin-left, right, divs and everything)
my goal would be somewhat like this - http://i.stack.imgur.com/gQwyn.png
While I'm a little skeptical about what this is for, I'll provide an answer for it anyways.
So you can't exactly target the location of where your iframe's initial screen will show up at (as it will always default to the top left corner if I'm not mistaken) but you can move the iframe itself around.
Knowing that, it's possible to create an iframe effect over the iframe itself.
You'll have an iframe that will be large enough to capture the button at first glance (which 1260px wide and 300px high is good enough)
You will then move the iframe to position the button to where you would like it to show up in using an absolute position and the top and left style.
Then create a new div to contain that iframe and give it a width and height to what the button's size would be and then remove the ability to scroll with overflow: hidden; and remove the scrolling by stating it within the iframe tag scrolling="no".
You should then have the same results as below:
#my-div {
width: 128px;
height: 55px;
overflow: hidden;
position: relative;
}
#my-iframe {
position: absolute;
top: -42px;
left: -884px;
width: 1260px;
height: 300px;
}
<div id="my-div">
<iframe src="http://www.amazon.com/product-reviews/B0051QVF7A/ref=cm_cr_dp_see_all_top?ie=UTF8&showViewpoints=1&sortBy=bySubmissionDateDescending" id="my-iframe" scrolling="no"></iframe>
</div>
At cjshayward.com/index_new.html, there is a wrapper div around the body's content, about 1000 pixels wide, and it works as intended for the top 100 or so pixels in Chrome and Firefox. Next down the page is a jQuery UI set of tabs, containing a fixed-width accordion and something close to jQuery.load()ed plain old, simple HTML.
However, on the "Browse the Library" tab (but not "About the Author"), which is presently open and which contains the fixed-width accordion, below 100 or 150px down, the area under the tabs appears to have the same width as the window; it has the correct left margin, and horizontally scrolls an apparently equal distance to the right. Furthermore, the body background tile does not display; the whole width is white, as was specified for the wrapper div's interior.
How can I get the "Browse the Library" tab to display as intended (like the "About the Author" tab does)?
Thanks,
You're absolutely positioning way too much and that's ruining the flow of things. I'll go through a list of edits you can do to make this work.
/*
#accordion and #details will be floated, so we'll need to
clear #tabs. Add this property.
*/
#tabs {
overflow: hidden;
}
/*
Remove the absolute positioning from #accordion, along
with the top and left properties and do this instead.
*/
#accordion {
float: left;
width: 400px; /* This already exists */
margin: 0 10px 0 0;
}
/*
Remove the absolute positioning from #details, along
with the top and left properties and do this instead.
*/
#details {
float: left;
width: 580px;
}
This will get you a lot closer. You should also try to avoid using height on these elements. Let the content dictate the height.
Here is what i ended up with making those edits: http://i.imgur.com/niizuoR.png
Okay lets make a step by step solution (watch for the edits).
Background
Your background is set in the body. So the body needs to be extended to fill the whole page.
I would recommend this way but there are others.
body,html{
height:100%;
}
Normally the body would fit its contents but with position:absolute this mechanism doesnt work anymore.
Also remove background: #fff css (normalize.css) from the html.
html {
background: #fff;
color: #000;
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Also your background scrolls with your content. Set background-atachment: fixed to change this.
Wrapper
Same counts dor your wrapper which holds the white background.
Set its height to 100% too.
div#main {
height: 100%;
}
The reason why your content is bigger than your wrapper is that
<div id="details" style="width: 713px; height: 0px;">
this div holding the content has a fixed size set. Removing that size make it fit the wrapper.
The width seems to be set per javascript in the load event, so I cant help you with that. Provide your .js code and may i can help you with that too.
As stated in the comments, your layout issues are based in your use of absolute positioning rather than flow layout:
I went through your site and quickly switch everything so it was positioned statically (width floats, not absolute values) and this cleared up the issue. There were some other issues as well. You probably need to look over how you are setting up your HTML from the top level on.
I would start out again and concentrate on using floats for your layout, rather than absolute positioning.
For a basic example on doing so, here is a super simply page: http://cdpn.io/kmCFy
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
I am having a CSS class with the following code. I am trying to put a DIV at a distance of 140px from the top of webpage and to put it in the middle (equal distance from left and right). It is displaying correctly in Firefox and Google Chrome but not displaying correctly in Internet Explorer 8. Can anyone tell me what is the problem with this code? Also can anyone give me some link with browser compatibility guide?
div.main
{
padding: 0px;
width: 980px;
/*height:1350px;*/
/*border: 1px solid red;*/
margin: 0 auto; /*helps in getting the DIV to be in middle i.e. equal distance from left and right*/
overflow: hidden;
margin-top:140px;
}
I find QuirksMode most helpful for browser compatibility info, plus it has some other great info.
The problem, however, depends on more than just the CSS. In order to answer your question, we'll need to see some HTML and the rest of the CSS you've got. And a description of what's incorrect with IE's rendering. Without seeing that, my first suggestion is to make sure you're using a strict DOCTYPE.
Note that centering the DIV will only center it in the containing block (probably BODY), which, wichout an explicit width, will only be as wide as the content and not the full width of the window.
margin-top:140px; is "the problem". To reach your aim use:
padding-top instead of margin-top;
if you cann't - make a wrapper div and apply padding-top to it;
or apply position: relative/absolute; top: 140px; to the div. It is suitable
sometimes.