Can you explain how can I make both facebook icons on same line?
This is simple code but I'm not good at css
<i><h1 align="center">Lorem Ipsum</h1></i>
<p>
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw' width="95px" heigh="85px">
</p>
<i><h3 align="center">Lorem</h3></i>
<p style="text-align: right;margin-right: 25px; font-size: 21px;margin-top:-15px;">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRcJVzb8HeSBBgdqKTmAhtBwG0EeMuO660TwErH9HaXPf76JFp5fw" width="95px" heigh="85px">
</p>
And this is the demo
Correct demo - https://jsfiddle.net/vjt4vxmL/2/
Your structure is rather odd, but you can just decrease the height of the iframe to horizontally line up the buttons with the image:
<iframe height="36"...
https://jsfiddle.net/vjt4vxmL/3/
Add a class to your first image. This code should put the buttons right next to each other just replace the word class in the code with whatever class you assign.
.class {
position: relative;
top: 60px;
left: -100px;
}
To align both next to each other you can use:
img{float:left;}
with Google Drive you may embed videos in your website with the tag:
<**iframe src="https://drive.google.com**/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless></iframe>
on the Top Right there is a Gray Box. This takes you to the download / embedding GoogleDrive page. I'd like to stop that.
Anyone one knows how to hide it?
Or at least how to mask it with a customs CSS?
this is what I get by inspecting the element in the div:
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Thank you Thomas! Good Idea!
The following does the job for me.
The pop-out is not hidden (it hides itself after few seconds) but it stays inaccessible.
I think it is the least ugly solution.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
PS
The "opacity: 0" is a workaround for Mozilla
You can also masking the pop-out button with whatever image you like using above code. Make sure the size of the masking image is 48x48 pixel and transparent background. Here is the modified version of the code.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/1MfhMdv4mw_20UWENUSt1PzmU7IQVpCXf/preview" width="640" height="360" allow="fullscreen" frameborder="0" scrolling="no" seamless="">
</iframe>
<div style="width: 48px; height: 48px; position: absolute; right: 6px; top: 6px;">
<img src="https://i.ibb.co/bJNBHXp/guitar-1.png">
</div>
</div>
It should be like this. I hope it's working.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/0BxLbnVHP6GWpV2ZIZEc4SkNTOTQ/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
You can't prevent it from popping out as that's something Google implemented. You also can't change the button normally as it's Google's page and you can't modify it.
You can't "reach" into the page loaded by an iframe and modify it, unless you have cross-site scripting enabled on the child page (google's page), and Google would never allow that for security reasons. If that would be able I could serve people a Google Drive page but for example modify the download button to download malware.
The only solution would be to place a div over the iframe, on top of the button. But still, it's not really pretty and usually frowned upon. Google offers the service for free so they determine how people use it.
If you run the example below, look at the red box at the top right corner.
Something like:
.hidebtn {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: #FF0000;
position: absolute;
right: 50px;
top: 50px;
}
<div class="hidebtn">button</div>
<iframe src="https://www.example.com" frameborder="0" width="100%" height="500"></iframe>
For me the answer by u32i64/asd worked well to stop the icon being clickable. To get rid of the black bars too i changed the code to this:
<div class="responsive-container">
<iframe src="https://drive.google.com/file/d/1Fy4AwZZVF-DLAenTSxQl93icdXfef/preview" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
Make sure the http address ends with 'PREVIEW')
Important You have to add this to your 'additional CSS':
.responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.responsive-container iframe, .responsive-container object, .responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
A simple option is to avoid popups using sandbox parameter and allowing just options that need google drive to reproduce the video:
<iframe src="https://drive.goo..." sandbox="allow-same-origin allow-scripts"></iframe>
It doesn't hide the button, but it prevents the iframe to popup a new window so the button becomes useless.
Thanks s1h4d0, It worked for me, maybe in terms of programming it is not the best, but it works and I thank you.
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><div class="hidebtn"><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
If the above code doesn't work, add the inside the div and then add the image, do it like this:
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<div class="hidebtn"><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
I figured it out. Change the drive.google.com in the URL to googledrive.com and some other changes:
Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:
<body oncontextmenu="return false;">
<video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video>
</body>
The "body oncontectmenu" simply removes the ability to right-click anything on the screen, because without this you can right click the video and download the file. Of course the right click ability is removed from the whole page and people can still find the file by inspecting the page source.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
There is a more simple method of blocking the pop-out on googledrive video's and docs,
Wherever you are placing the html,inline frame or lightbox on your website page, insert a rectangular shape and place it over where you want to block the pop-out.
Next- click on the shape to get it's properties, there you should find a number of options
clear all the other options, unless you want to insert your own link or logo, make the the shape transparent, if you have the option of showing a border line I would advise keeping this to 1 setting until you have covered the position of the pop-out, once you have found the correct position, remove the border line and lock it in place. this works as I have used this method many times to block out links that appear on video's and documents, it is simple and does not require the use of any code. This method will only work if you have set the dimensions of your document or video, once you done all that test your video or document, you will find that the icon still appears but unable to click on it. you can use this method to stop the user gaining access to your information or a third party website which takes them away from your page. this method can also be used for preventing someone right clicking over your video or documents and photographs, if they try to copy it, a black box is all they will get. however,you may still get the info from elements/source code.
I tried the previous suggestions and they did not work because "Google Drive refused to connect".
I came up with a completely different approach to solve the original problem (to avoid "download / embedding GoogleDrive page"), which is very simple:
Create a Google Slides presentation, insert in a slide the video you have in Google Drive.
Select File - Publish to the web - Embed, and copy the code that is generated.
In Google Sites, select Embed - Embeded code, and paste it there.
This solution provides also more options that you control in Slides for the videos, such as automatic playing, select timing of the video, etc.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Mano Souza · RIO DE PEDRAS.hmtl
First off - this is my first question ever (I'm still a beginner) and I can't say how much I appreciate this site and all the help I've found on here. Hopefully every question I ask can help someone else too :)
I realize not many people use imagemaps any more but I have one and twitter bootstrap (version 3.0.0) is screwing up my coordinates - putting the links in the wrong places. I can make it work with the following code but then it wont resize to fit the screen. Any tips?
<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
max-width:none;
width:auto;
display: inline;
}
</style>
Here is a snippet of the actual imagemap code
<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
<Map id="map_ID" name="map">
<AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
<AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
<AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
I'd recommend, rather than an image map, make 3 divs that are links with the following HTML and accompanying CSS.
<div id="box_a">
<a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
<a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
<a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>
Use percentages to define the coordinates. Given that your X1 and X2 coordinates are the same for the links in your image map, the following example (with different %s to actually cover your image correctly) should work.
#box_a, #box_b, #box_c {
margin-left: 10%;
margin-top: 5%;
height: 15%;
width: 25%;
}
.box_link {
display: block;
height: 100%;
width: 100%;
}
You should check out this page to learn more about making div links. I would also suggest using NewMatGuide.png as a background-image and define the size of #img_ID.
I am trying to find out the rule on how to target a class inside cascaded ids and classes so that I will be able to style specific area of a page when I need to modify things. Specifically wordpress child themes.
I have search for a while and so far results are giving me specifics to a particular situation. I like something general that will help me read html and target specific classes to style.
For example in this HTML.
<div class="one-third">
<div id="nav_menu-4" class="widget widget_nav_menu">
<h1 class="title">
<cufon class="cufon cufon-canvas" alt="About " style="width: 72px; height: 24.05px;">
<canvas width="91" height="27" style="width: 91px; height: 27px; top: -2px; left: -1px;"></canvas>
<cufontext>About </cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="us" style="width: 27px; height: 24.05px;">
</h1>
<div class="menu-about-us-container">
</div>
</div>
I am trying to change font of H1 Title when it is within a side bar. I tried this but didn't work.
.one-third .title {
font-family: Impact;
}
What is the rule/formula to get specific selector to target specific classes.
Thanks
Try using a selector before the pseudo-class, see:
http://www.w3schools.com/css/css_pseudo_classes.asp
On CSS Syntax
you need to add h1 tag .one-third h1.title {font-family: Impact;}
I have a block of html that I want to act as a clickable link. In the block of code below, I would like to make the whole div into a link.
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
HTML5 permits surrounding the html in an anchor tag (I think). See below
<a href="goThere.html">
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
</a>
However, this seems wrong to me. How will software such as screen readers describe the link.
I also considered the following CSS trick. I altered the HTML to be
<div id="clickableLink">
<h3>Link Heading</h3>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</div>
and then used CSS to style the link to cover the whole of the div. See below:
#clickableLink {
position: relative;
width: 100px;
height: 200px;
z-index: 0;
}
h3 {
z-index: 0;
}
img {
z-index: 0;
}
a {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 200px;
z-index: 1;
}
This works perfectly in all browsers apart from IE. Does anyone else have any suggestions?
Your first approach is actually the best. To describe your link, you should use the a element's attributes such as title, alt and possibly any WAI-ARIA markup you wanted to employ. This is good industry practice anyway and allows you to wrap content in an a tag without worrying about accessibility.
The thing that will allow older browsers to render it properly (and to make sure it validates) is to use inherently inline elements inside an inline element. In other words, block level elements can not be placed inside inline ones (according to the HTML, not the values that CSS may give the element). You can then use CSS to make a span act like it is block level. So the markup could easily be:
<a href="goThere.html">
<span id="clickableLink">
<span class="headerthree">Link Heading</span>
<img src="linkPic.jpg" alt="Link alt text" width="65" height="65" />
</span>
</a>
If you declare that the A is block level, then you wouldn't even need the span. Problem here is that you lose the SEO of using Header elements. So...
The best thing is probably to leave it specced for HTML5 as you have it above, even though it seems wrong. To help SEO and screen readers, use a title tag to "describe" the anchor. The code will validate just fine. Then, make sure your A is display: block, and I think older browsers will render it ok, too.