I'm a newbie in HTML and on my page, I have the problem that my two sections aren't continuous:
.privitanie{
position: absolute;
background: url("../images/pozadie.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
top: 0;
z-index: 0;
}
.uvod{
position: relative;
z-index: 0;
height: 100%;
}
<section class="privitanie" id="privitanie">...</section>
<section class="uvod" id="uvod">...</section>
Absolutely-positioned elements are outside the document flow. Other elements end up layered above or below, depending on their position in the markup. Make both relative, or give .uvod a top margin equal to the height of .privitanie.
Here's an easy solution that does not require changing too much of your code:
.uvod{
position: relative;
margin-top: 50%;
z-index: 0;
height: 100%;
}
Change margin-top to whatever you prefer.
Related
I have exactly the problem from this question but I can't comment (as I have less than 50rep).
It has to do with getting a better performance out of blurring a full screen image through GPU acceleration but not having the sides "leaking".
If you don't mind adding an additional div, you can add a wrapper and apply the transformation to it.
I checked in Chrome Dev Tools and indeed Chrome rendered the wrapper #bg into a separate layer, although this kind of optimizations are very browser specific.
I would recommend reading https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
I would give you another suggestion however, instead using a big image and blur it, you can use the same image at a very low resolution (say 10x10 px) and make it full-screen. Almost the same result, but with far lesser bytes to load.
html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background: red;
position: relative;
width: 100%;
min-height: 100%;
}
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
transform: translate3d(0,0,0);
}
#bg > div {
background-image:url('http://lorempixel.com/1920/1920/');
background-size: cover;
position: absolute;
left: -60px;
top: -60px;
right: -60px;
bottom: -60px;
filter: blur(60px);
}
<div id="bg">
<div></div>
</div>
I have 3 divs inside my div#all (simple html). Left - Main - Right.
Left & Right have just a background image (their content won't change).
Main div will have all my text etc.
Option 1: I need to have the left/right divs to expand their height (so my image background gets repeated) to reach the height that my divMain may have.
Option 2: I can do position:fixed my Left/Right divs as well so they stay in place when I scroll. My issue on this plan is that I cannot position/float my right div at the desired place.
Any working option is ok with me.
css code:
body{
margin: 0 auto;
padding: 0;
width: 100%;
background-color: #fff;
overflow-y: auto; overflow-x: auto;
}
#all{
position: absolute;
top: 0; left: 50%;
height: 100%; width: 1366px;
margin-left: -683px;
}
#temp-left{
position: absolute;
top: 0; left: 0;
height: 100%; width: 183px;
background: url(image/bg-lft.jpg) repeat;
}
#temp-right{
position: absolute;
top: 0; right: 0;
height: 100%; width: 183px;
background: url(image/bg-rgt.jpg) repeat;
}
#main{
position: absolute;
top: 0px; left: 50%;
height: 100%; width: 960px;
padding: 10px;
margin-left: -500px;
text-align: justify;
}
If I properly understand your question i suggest you to use jquery
You can try this out.
$(document).ready(function() {
// Check if body height or width is higher than window height and width:)
if (($("body").height() > $(window).height())||($("body").width() > $(window).width())) {
$('body').css('background-image', 'url(image/bg-lft.jpg) repeat;');
}
else
$('body').css('background-image', 'url(image/bg-lft.jpg) no-repeat;');
});
I wish to achieve the following effect, regardless browser (re)size:
The images are set to be flexible, so, each of them as a max-width declared as:
100%.
http://jsfiddle.net/rgdrqbg4/
The css:
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 22.508038585209%;
}
Can someone please point some directions, or name some common used techniques to overlay two images while keep them absolute centered, regardless the viewport width?
A common technique is to set top and left to 50% and set margin-top and margin-left negative half of the height and width of your image.
Try this:
.play-video {
position: absolute;
top: 50%;
left: 50%;
margin-top: -90px;
margin-left: -97px;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/1/
UPDATE
You can also set top, left, right, and bottom to 0 and set margin to auto for it to auto calculate the margin needed to center the image.
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/5/
This will only work if the image inside is smaller than the image that is wrapping it.
UPDATE
You are setting width for .home-video. At some point in the viewport, the container has more width than the image so the black box is centering accoring to the container, not to the parent image. To make the .home-video container have the same width as its larger image you can use this:
I added a width of 30% to the black box so it can shrink with the larger image too.
.home-video{
display: inline-block;
}
.play-video {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 30%;
margin: auto;
}
And remove the width you set before.
Working JSFiddle sample: Working JSFiddle sample: http://jsfiddle.net/rgdrqbg4/9/
img {
max-width: 100% !important;
vertical-align: middle;
}
.home-video {
position: relative;
width: 57.291666666667%;
}
.video-placeholder {
position: relative;
left: 0;
top:0;
}
.play-video {
position: absolute;
left: 32.545454545455%;
top: 25.508038585209%;
width: 34%;
height: 40%;
}
<div class="home-video">
<img class="video-placeholder" src="http://lorempixel.com/570/320/" alt="video"/>
<img class="play-video" src="http://lorempixel.com/194/180/cat/" alt="play this video"/>
</div>
Do you mean like this? You were on the right track.
.play-video {
position: absolute;
top:20%;
height:inherit;
left:28%;
width:40%;
margin:0 auto;
}
http://jsfiddle.net/rgdrqbg4/7/
This is the website I am modifying: sb460training.org
Here is the code snippet:
#apdiv1 {
position: absolute;
width: 2815px;
height: 276px;
z-index: 1;
top: 1px;
left: 0px;
background-color: #000;
}
#apdiv2 {
position: absolute;
width: 3150px;
height: 115px;
z-index: 2;
left: 0px;
top: 230px;
}
#apdiv3 {
position: absolute;
width: 221px;
height: 411px;
z-index: 3;
left: 0px;
top: 259px;
background-color: #FFF;
}
#apdiv4{
position: absolute;
width: 2853px;
height: 115px;
z-index: 4;
left: 219px;
top: 401px;
}
Do you know what the width dimensions should be so I can get rid of the annoyingly extra space that shows up to the right of the web page?
Thanks
Like the other answers, I agree that your CSS should change the fixed widths to 100%.
However, in your HTML you have img elements with explicit widths, to substitute background colours. For example, in the "apDiv2" DIV element, you have an in-line image containing white, "SB460_Pic/Secondary title2.jpg". This image is set to 2128px wide, causing the page to extend horizontally.
I would recommend removing the images that are being used to pad the right of each DIV, and instead set background colours in CSS.
UPDATE
Quick and dirty example:
http://pastebin.com/4PmZN1r4
change all your container widths to 100%.
give your html a width:100%; margin:0;
give your body a fixed width:1200px or so.
set your body with a margin: 0 auto if you want it centered.
I've heard the same similar issue.
all you need to do is try working with margin set to 0 and auto.
in most cases, try eliminating the use of 'position absolute' and work more with margin, padding and position relative.
here is my site
http://iadprint.com/about
i am trying to make the menu tag and the colright div to have a height of 100% and stick to the footer div pushing down to the bottom. but no matter what i try nothing works. i have tried validating the html but only 3 errors exist which arent that important to fix. what ami doing wrong?
You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.
I'm a fan of fixed layouts for this sort of scenario where you want a footer to always appear at the bottom of the window:
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 130px;
}
nav
{
width: 960px;
margin: 0 auto;
}
article
{
top: 130px;
bottom: 120px;
left: 0;
width: 100%;
position: fixed;
overflow: auto;
}
footer
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
}