I have the following issue..
I'm trying to place an image in my header. However, every time I try to view the website from a handheld device (eg. mobile phone) the image that I've placed is overlapping with my logo...
<style>
#babypic{
position: absolute;
max-width: 200px;
height: auto;
left: 0;
top: 111px;
}
</style>
<div id="babypic">
<img src={{ 'baby2.png' | asset_url }}>
</div>
The following screenshots might help you to understand my issue better:
As you can see in the first pic, the baby is in perfect position. However, when I'm trying to reduce the window or access the site from mobile phone the baby overlaps with the logo as shown in the second picture.
you should resize the baby pics or increase the header height and change the style #babypic{
position: absolute;
max-width: 200px;
height: auto;
left: 0;
bottom: 0px;
}
in case the baby picture is on bottom.
Related
Tried different method to customise(hide YouTube title,logo etc). But still not working. My goal was to hide the title top bar primarily. So looking for some guidance if this is possible at the current time?
*Tried css method,iframe viewport method and some other
Well, there is a solution since youtube deprecated the parameter showinfo, you can use html and css.
First, you have to put the youtube iframe in a div:
<div class="frame-container">
<iframe></iframe>
</div>
Next, you must increase the size of the frame so that it is outside the browser window, and then align it in the centre, since youtube only tries to centre the video and keeps its logos on the sides, this trick should work.
.frame-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
width: 300%; /* enlarge beyond browser width */
left: -100%; /* center */
}
.frame-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and finally, to prevent everything from stretching because of the size, you put it inside a wrapper.
<div class="wrapper">
<div class="frame-container">
<iframe></iframe>
</div>
</div>
.wrapper {
overflow: hidden;
max-width: 100%;
}
EDIT 1: In case you want to disable suggested video and just allow pause, you have to replace the url with:
In that case, you have to replace the youtube url with:
https://www.youtube.com/embed/VIDEOID?playlist=VIDEOID&loop=1
When the video is looped, the suggested videos will be disabled, and even with the controls disabled you can pause the video by clicking on the video.
I have set up a div with many images inside. They are all set to absolute, and they all have top and right set to percentages. All the images stay the same when the window is resized except for one.
Here is the fiddle: https://jsfiddle.net/a268w7ez/
Or, I've put in the key code below.
My html looks like this:
<div id="space">
<div id="map">
<img id="layer9" src="./assets/css/images/layer9.png">
<img id="layer8" src="./assets/css/images/layer8.png">
<img id="layer7" src="./assets/css/images/layer7.png">
<img id="layer6" src="./assets/css/images/layer6.png">
<img id="layer5" src="./assets/css/images/layer5.png">
<img id="layer4" src="./assets/css/images/layer4.png">
<img id="layer3" src="./assets/css/images/layer3.png">
<img id="layer2" src="./assets/css/images/layer2.png">
<img id="layer1" src="./assets/css/images/layer1.png">
<img id="cantonica" class="planet" src="./assets/css/images/dot.png">
</div>
</div>
And my CSS looks like this:
#map {
display: block;
position: relative;
top: 2%;
height: 76%;
width: 33%;
margin: auto;
z-index: 0;
}
#layer9 {
height: 100%;
margin: auto;
position: relative;
z-index: 1;
}
#layer8 {
height: 90.11553273427471%;
position: absolute;
top: 5.006418485237484%;
left: 3.465982028241335%;
z-index: 2;
}
// The #layer id's go on like this with different heights, tops, and
// lefts, all set in percentages.
.planet {
width: 10px;
}
#cantonica {
position: absolute;
top: 12.195121951219512%;
right: 14.120667522464696%;
z-index: 10;
}
It looks correct at first on my browser, the white dot image is in the right spot:
But when I resize the window, everything stays in the same spot except the white dot:
I am going to be adding MANY more dots (50+), so it's really important that I can resize the window and they all stay in the same spot.
Thanks for the help in advance.
Following your pattern, it looks like you want every lower layer to be a little bit bigger than the previous one. Because you've applied a height: 100%; to layer9, I'm assuming that that layer is going to be the full size of the container.
You can use the same CSS styling that you've used on all the other layers, but just make it the full size of its container:
#layer9 {
height: 100%;
position: absolute;
top: 0%;
left: 0%;
z-index: 1;
}
The problem was caused because you applied a relative position to layer9, which means it's going to shrink or grow in size if the height is a percentage (100%).
Updated JSFiddle
I'm working on an open source alternative to Plex and I'm trying to get the in-browser video player to take up as much of the window as possible during playback, but I'm running into some problems. The video player built in to Chrome does exactly what I am trying to do if you simply visit the URL for a video in it and so does the Netflix website. However, I've been unable to get this to play nicely on my site.
I've got the following code right now (JSF with PrimeFaces):
div.video-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
text-align: center;
}
.expanded-video {
padding: 0;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;">
<p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}"
width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" >
</video>
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
</p:panel>
</div>
The problem is that I can either get it to fill the window horizontally or vertically, but if I resize the window, then the video extends beyond the edge of the screen. For example:
the bottom is cut off:
same video, window resized (this behavior is right):
What chrome does if I visit the url for an mp4 file (fits perfectly, nothing cut off):
I know that I can receive window resize events with javascript and set the height and width like that, but I'm looking for a pure HTML+CSS solution to this problem that lets me keep the div at the top showing the title of the movie. (Project already has Twitter Bootstrap)
Edit
The dom looks like this once it's rendered by JSF:
<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content">
<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video">
</video>
</div></div>
</div>
It's also worth noting that we aren't trying to support Internet Explorer or Edge and that, while we'd like to support Safari, we're okay if we can't.
Changing the max-width and max-height to 'width' and 'height' sorted it for me.
You basically told the video that it can be any size as long as it's not over 100%;
.expanded-video {
padding: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}
Hmmm, might have understood incorrectly and am unable to test my solution as videos are blocked at work
You can also use this css trick to adjust ratio of video according to width;
.cover {
min-width: 100%; max-width: 100%; object-fit: cover;
}
Detailed Info Here
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I have a problem with precise positioning of three equal divs.
My humble knowledge of math reminds that 33+33+33=99%, and 1% is missed. Moreover, 33.33+33.33+33.33=99.99%, but browser compatibility does nothing with it.
<div id='products-choice-wrap'>
<div id='products-choice'>
<div id='choice1' class='three-bubbles'>
<img src='/products/image1.png' alt='' />
</div>
<div id='choice2' class='three-bubbles'>
<img src='/products/image2.png' alt='' />
</div>
<div id='choice3' class='three-bubbles'>
<img src='/products/image3.png' alt='' />
</div>
</div>
</div>
And CSS:
#products-choice-wrap
{ position: absolute; width: 100%; bottom: 0;
top: 100px; text-align: center; }
#products-choice
{ position: absolute; width: auto; left: 40px;
right: 40px; margin: 0px auto; top: 0; bottom: 0; height: auto;
max-width: 1080px; }
#products-choice div
{ position: absolute; top: 20px; height: auto;
overflow: auto; width: auto; padding-bottom: 200px; }
#products-choice #choice1.three-bubbles
{ left: 0; right: 66.7%; }
#products-choice #choice2.three-bubbles
{ left: 33.37%; right: 33.37%; }
#products-choice #choice3.three-bubbles
{ left: 66.7%; right: 0; }
In this construction three images are situated in the center of the page in a row. In case of small resolution they become smaller while #products-choice becomes narrow. The attribute max-width prevents images from overzooming.
Positioning should be very precise because of smooth lines connections between them (see links to examples below). The problem appears when comparing different resolutions in different browsers. It looks like in Chrome such positions as 33.37% to 66.7% provide excellent picture both on resolution 1280x*** (#products-choice is max-width: 1080px) and smaller 1024x*** (#products-choice width becomes 929px). Click here for image.
IE and Firefox show a 1-px-gap between images, which disppears and appears again after browser size changing. Click here for image.
What can I do to say Chrome, IE and Firefox exact width (which is actually 1/3)?
You can't achieve perfect 1/3 widths at all times with an elastic layout, so here's what I suggest:
Instead of using the position property to place your images, float:left them instead. This will ensure the three images are pressed up tight against one another, without the 1px gap appearing between them.
The downside: Sometimes you'll have a 1px gap to the right of the last image. You can sort of cover this up by assigning a background to the wrapper element, but in your case it seems like a better deal than having your images split apart.
.three-bubbles {
float:left;
width:33.33333%;
}
Demo: http://jsfiddle.net/qemUY/2
I left a lot of your CSS in which wasn't needed, because I don't know all of your requirements, but if you take this approach, your current code can be trimmed down considerably.
Simpler demo: http://jsfiddle.net/qemUY/4
Try to use
#products-choice-wrap {width: 99.99%;} or a lower value.
I had this issue before and I fixed it by setting the wrapper with {width:99.92%}.
I don't know why "99.92%", but I just tried some values on the inspector and that was the best fit.