I'm trying to embed a Power BI report to my website in Wordpress using the HTML tool. Since when using the embedding version of the report of Power Bi, a button to share the report appears (and it really can't in this case), I found a solution here on how to "cut" the HTML element so that the down part wouldn't appear. I'm saying this just to explain why maybe the code down can look more complicated than needed. My problem now is that I'm trying to center this element on the page, but I don't know why I can't make it work in all PCs, since in mine it appears centered but in others that I tried it didn't.
This is the code that I have until now
<div id="content">
<div class="row-fluid">
<div class="aligncenter">
<div style="height:500px;width:400px">
<iframe width="600" height="400" src="LinkOfReport" frameborder="0" style="position: absolute; clip:rect(0px,1000px,344px,0px);
; zoom:162%;allowFullScreen=" true=""></iframe>
</div>
</div>
</div></div>
I don't understand much of HTML or CSS so if someone could explain me what I'm doing wrong I would appreciate it a lot!
I managed to understand what was happening. Basically, I copied part of the code from the question I mentioned in the post, since I needed to crop the HTML element. I understood that a part of it was forcing the element to start more to the left (the part of <div style="height:500px;width:400px">) and another one to keep the element fixed in the same place, independently of the size of the window (position: absolute)
I also changed the type of clip I was using, since from what I read, clip property is exclusive to absolutely positioned elements. So now I'm using clip-path property.
Summing up, this is my final code:
<div class="row-fluid">
<div class="aligncenter">
<iframe width="600" height="400" src="https://app.powerbi.com/view?r=eyJrIjoiYjE4ZDExNGQtNjgwYS00OTUwLTkzYjYtNjM1YjNjMGJkMjU4IiwidCI6ImU0YmQ2OWZmLWU2ZjctNGMyZS1iMjQ3LTQxYjU0YmEyNDkwZSIsImMiOjh9&pageName=ReportSection" frameborder="0" style="clip-path: inset(0 0 38px 0); zoom:162%"> </iframe>
</div>
</div>
Hope these explanations help anyone that is trying to start in HTML and CSS
Related
I'm a bit 'OCD' sometimes so this is really bugging me.
http://music.george-b.co.uk is the site I am working on.
I have two divs. Both contain some text (Formatted the same apart from colour) and an iframe. The problem is the second divs text appears higher above the iframe than the other div. The code for the two divs is this:
Div 1 (Normal spacing)
<div class="omot">
<h1>One Mic One Take</h1>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/287376712&color=00cc11&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Div 2 (Incorrect spacing)
<div class="xprtd">
<h5>XPORTED</h5>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/295617923&color=ff0000&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe>
</div>
Although one text is h1 and the other h5 they are formatted identically with css (apart form colour). I really would like the spacing to be the same. If someone could help me fix this minor but really annoying issue I would be very grateful.
Thanks
The second block of text (h5) has different margin values than the first one (h1). The h1 has margin before and after of 0.67em while the h5 has margin before and after of 1.67em. You can examine this by inspecting the elements through browser dev tools.
One solution is to manually add css rules so that the margins are the same. Or change the h5 to a h1 or vice-versa.
We need to check your CSS too, the issue maybe there. Nevertheless, you should try using margin-top:<<a negative value here>> ex: margin-top:-15px;
Try that and feedback
I have to transform a given webdesign into an template for an CMS.
While I was doing this, I realized, that the design did screw up in Firefox:
I'm not really deep into webdesign, but I was able to narrow it down to a div (.inside) which contains two further divs (.titel and .logo) and a <figure> that contains an <img>.
In Chrome (Version 33) and IE (Version 10) the image is rendered under the two divs (As it was intended by the designer) - in Firefox, the image is inserted right in line with the other two elements.
See the difference:
https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png
I prepared a jsfiddle:
http://jsfiddle.net/5zu32/embedded/result/
rough code:
<div class="inside">
<div class="titel"></div>
<div class="logo"></div>
<div class="main_image block">
<figure class="image_container">
<img src="foo" alt="img test" height="323" width="853">
</figure>
</div>
</div>
I tried to remove the "block" class (which only removes the overflow:hidden) but that screws up the original design. (It does not do that so clearly in the demo.)
(Picture of horses is a random internet image that happens to have the same size as my used image)
I hope somebody could help me? How can I fix this?
By the way: I'm new to the site, if I did anything wrong, please tell me :)
Try using
.main_image {
clear: both;
...
}
This will clear the float: left you used earlier.
BY adding a clear: both; to your main_image class you can clear out the problem with the display.
DEMO
Make a frame by changing the start of the cut.
I want to insert a html code but make an indentation so that it appears only part of the picture.
I use the code below but I want to change the start point of the cropping frame. When I use this code it starts the cut in point 0.0 and would like to start at a different point.
Code:
<div style="width:430px; height:300px; overflow:hidden;">
<iframe width="530" height="400" frameborder="0" scrolling="no" src="https://skydrive.live.com/embed?cid…
</div>
I don't know if I understand you correctly, but it seems that you only want to show a part on an image, right? Maybe the CSS-property "clip" can help you.
I've recently added a facebook like button to my site and it's causing a horizontal scrollbar to appear when it's not needed. It doesn't appear in Chrome but is there in Firefox and IE.
I've checked the created code in Firebug and can't see what's going wrong.
Here's a link to the site so you can see: http://www.swiftfurniture.com/
As you can see, on Firefox and IE (possibly other browsers too), there's a horizontal scrollbar when it isn't needed. It's definitely the Facebook like button causing it, because when I comment that out, they disappear.
I've added a fixed width div around the button with overflow: hidden applied, but it seems to ignore that.
I know there's plenty of other questions similar to this, but with using PrestaShop I don't really want to mess around with the core code too much just to get a Facebook Like button working (if at all possible). I was hoping for a solution to keep all the code contained to the "social module" I've created... i.e - just one file rather than messing around with header files etc of PrestaShop.
I've looked into your problem a bit with Firebug and can share some observations that might be helpful.
There is code that is being injected into your <div id="fb-root"></div> and within that is an iframe with an inline style width of 575px.
That is what is causing the scrollbars.
You can add to the "fb-like" attribute data-width="100px"
The mark-up Facebook inserts into your page is liable to change so you want to use a solution that is not dependent on it.
You can resolve this issue by placing the fb-root div as the first child of your body element
<body>
<div id="fb-root"></div>
The script tag and fb-like div can remain in their original place.
Ref: Facebook documentation and bug report
I had the same issue... there is a width in the code (I think the default is 450). If you change that to something like 150, I think you'll be in good shape. Of course, it depends on the preferences you select on the facebook plugin.
Good Luck, hope that helps.
There is a DIV just after
<div id="fb-root" class=" fb_reset">
<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">
Remove position absolute from this and that horizontal scroll will disappear
after that it will show some content saying
Given URL is not permitted by the application configuration.
so either just remove this DIV or apply
display:none; to get this working perfectly
See this screenshot
having Problem see there is a horizontal scroll
having solution see there is no horizontal scroll but unwanted
content in circle.
applying display none; to this div or by removing this div
completely from the code, will lead you to the solution
None of the answers here worked for me so I tried it myself. I found a solution:
Put following CSS in your site head:
#fb-like-wrapper iframe {
width:100px!important
}
Put following HTML where you want to show your like button:
<div id="fb-like-wrapper">
<div id="fb-root"></div>
<div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite"
data-layout="button_count" data-action="like"
data-show-faces="false" data-share="false"></div
</div>
There you go :)
Add this to your css
.fb-like{height:20px}
Add attributes data-width and data-height to
<div class="fb-like" data-width="124px" data-height="20px"></div>
This also prevents the vertical scrollbar from appearing if it is not needed.
For a veeery long time I've had this problem but always I managed to avoid it somehow (by removing elements or changing order) and now here it is again and I have no idea how to get rid of it. First, it appeared in my admin panel, but only few users acces that so it's not big problem (nobody uses IE6), but now this problem is appearing on my index page of portal and I must get rid of it because 15% of portal visitors are IE6 visitors.
Here's LINK to test version of portal:
If you open this page in IE6 you can see that second news (titled: Test one) doesn't have any text, only image. Well, if you make mouseover on that image you will see that there is some text. This problem occurs only when I enter paragraf whose height isn't bigger that image's height. If I enter same image but with some more text this show/hide problem disappears. I hope someone knows why is this happening because this problem has been torturing me for few years but I never figured out what is the main cause of this problem and how to avoid it.
Any help is welcome!
Ile
EDIT:
Here is solution for this problem:
http://www.positioniseverything.net/explorer/peekaboo.html
Well, It's easiest to make copy paste from page where it's detailed explained:
HTML code:
<!--********** Start of demo ***********-->
<div id="floatholder">
<div id="float">
<br />
<span> Float
<br /><br />
test link
</span>
</div>
This is bare text. Test link
<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
Test link</div>
This is bare text. Test link
<div id="clear">Clearing div</div> <!--******* Note: a cleared <br> will not prevent bug *******-->
<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. Test link</div>
</div>
<!--********** End of demo ***********-->
And here is screenshoot from IE6
Fixes:
The fixes:
Finally, this bug will be triggered
even if div#float preceeds
div#floatholder, provided that this
external float actually touches the
clearing div within div#floatholder!
There are three ways we know to
prevent this bug.
Keep the clearing div from touching the float, or avoid using a
background on div#floatholder. Not
exactly ideal.
Give both div#floatholder and div#float 'position: relative'. Be
sure to fully test this method.
Give div#floatholder hasLayout (now the preferred method)
We suggest using a conditional comment
to feed a hasLayout fix to IE6 and
below only. Further details helpful to
this method may be found in the Zoom
Fix page.
Thanks to Simon Willison for the
timely screenshot.
This bug is called Peekaboo, and here is detail explanation of everything:
http://www.positioniseverything.net/explorer/peekaboo.html
Although, I have to admit that for me it worked when I set all these 3 steps. After first two it didn't work, but after I added display: inline to floating div it worked.
Can you please post (the bare minimum example) the code here, so that we can reference it long after your server's copy goes away (... just like now)? Otherwise, this question will serve no one as a reference or learning tool.