on the site JN-Racing i´ve add a div on the left side but when I resize the Browser the div goes about the content. Thanks for all tipps
Try this:
#bg_right {
background-image: url("images/bg_rechts.jpg");
background-repeat: no-repeat;
float: right;
height: 935px;
position: relative;
width: 258px;
z-index: -1;
}
#bg_left {
background-image: url("images/bg_links.jpg");
background-repeat: no-repeat;
float: left;
height: 935px;
position: relative;
width: 258px;
z-index: -1;
}
#wrapper {
height: 0;
margin: auto;
text-align: left;
width: 1024px;
}
body {
height: 100%;
margin: auto;
width: 1540px;
}
If you limit the width of the body, it shall work like a charm! (:
Related
I have quite simply code and i've spent a day for solving problem, but still no progress :/ I want to display iframe with background-image. Snippet code is not showing background-image, so You can see live demo here: http://lukdan2.47.pl/index2.php
.parrent {
width: 100%;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: relative;
max-width: 427px;
}
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
}
iframe {
border: none;
width: 100%;
height: 100%;
margin: 0;
}
<div class="parrent">
<div class="child">
<iframe src="http://sshtest.co.pl/" id="iphone-x-portrait"></iframe>
</div>
</div>
As You can see iframe has too much height. I can add
.child {
margin: 0 auto;
position: relative;
width: 73%;
padding-top: 37%;
height: 550px;
padding-bottom: 37%;
}
and it works fine.
But, for screen lower than 460px parent div is getting smaller so static height for child is not working correctly.
I've tried to change parent div to display flex and table (and change child div also) but nothing found that will solve my problem.
Help, please.
Ok, i've found solution.
.iframe-container {
padding-top: 56.25%;
position: relative;
background-image: url('http://lukdan2.47.pl/images/black-iphone-frame.png');
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
}
.iframe-container iframe {
border: 0;
height: 62%;
left: 40%;
position: absolute;
top: 0;
width: 20%;
margin: 0 auto;
padding-top: 11%;
padding-bottom: 0%;
}
<div class="iframe-container">
<iframe src="http://sshtest.co.pl/"></iframe>
</div>
I'm trying to position the logo to the center of the header div with half of the logo overflowing to the bottom div. I have the following but I can't figure out how to dynamically set it to be centered. Because relying on top and left values seems like it's going to be inconsistent.
.header {
position: relative;
height: 200px;
background-color: #000;
&:after {
z-index: 2;
content: ' ';
position: absolute;
left: 27%;
top: 60%;
width: 200px;
height: 200px;
background-image: url('images/logo.png');
}
}
You can use left: 50% with negative margin-left (half of logo width).
.header {
background-color: #000;
position: relative;
height: 200px;
}
.header:after {
margin-left: -100px;
position: absolute;
background: #f00;
bottom: -100px;
height: 200px;
width: 200px;
content: ' ';
z-index: 2;
left: 50%;
}
<div class="header"></div>
May I suggest flexbox?
Centering logic will be handled for you, then you just need to make sure the background image is positioned correctly.
.header {
background-color: #000;
height: 200px;
position: relative;
&:after {
content: '';
height: 100%;
display: flex;
background: url('http://i.imgur.com/9My4X1v.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}
https://jsfiddle.net/JackHasaKeyboard/9azLwx22/10/
I have the current html structure
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve this:
The img tag is the blue container.
The magenta is the release_cover tag.
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container.
So far i did:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%.
Suggestions?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ )
Using a combination of absolute position along with top, while also not allowing a height greater than 300px it will compute correctly:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/
You could position overlay_controllers using top instead of margin-top property:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}
I have a horizontally and vertically centred image on a page. I would like it so when the user scrolls down, the content below it actually comes up, as if the top content is fixed. Like this effect here... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/
Only problem is for that effect they use the background-attachment: fixed property. I cannot use this as I need the image to be content (it will actually be changed to HTML5 video).
My code is here... http://jsfiddle.net/5jphd/1/
HTML
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg">
<div class="text">Scroll down</div>
</div>
<div class="wrap">
Here is some content
</div>
CSS
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: absolute;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
}
Is this possible to do with this markup? So when you scroll down the content will rise up and overlap the image.
Ok i have done it, this is what I wanted to achieve. I simply made the video and scroll text position:fixed, and made the main body content position:relative - http://jsfiddle.net/5jphd/4/
html, body {height: 100%}
body {
padding: 0;
margin:0;
font-family: sans-serif;
}
.image {
position: relative;
left: 0px;
height: 100%;
background-position: 50% 50%;
background-size: cover;
background-attachment: scroll;
text-align: center;
}
img {
max-width: 90%;
max-height: 70%;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
}
.text {
position: fixed;
bottom: 20px;
left:50%;
margin-left: -44px;
}
.wrap {
background-color: lightblue;
text-align: center;
padding: 100px;
font-size: 30px;
min-height: 1000px;
position:relative;
}
JSFiddle
I think this is what you're essentially asking for. Keep aspect ratios in mind, this is what an hd vieo would probably look like on a 320x480 or so.
#bg {
position:absolute;
position:fixed;
top:0;
width:100%;
height:100%;
margin:auto;
overflow:hidden;
z-index:-1;
}
#bg img { max-width:100%; }
I'm having a bit of trouble with a div, my website has one wrapper sized height: 100%; this wrapper contains various divs like a header, slider and a content div. The only problem is the content div gets pushed out of the wrapper div for some mysterious reason.
html {
overflow-y: scroll;
height: 100%;
position: relative;
}
a {
outline: none;
}
img {
width: 100%;
border: none;
-moz-border-radius: 20px;
border-radius: 20px;
}
body {
width: 100%;
height: 100%;
background-color: yellow;
margin: 0px 0px 0px 0px;
}
.wrapper {
width: 87%;
height: 100%;
background-color: red;
margin: 0 auto;
}
.header {
width: 100%;
height: 150px;
background-color: green;
float: left;
overflow: hidden;
}
.logo {
width: 7%;
height: 114px;
margin: 18px 0% 18px 3%;
float: left;
background-image: url("..//img/logo.png");
background-size: 100%;
background-repeat: no-repeat;
}
.slogan {
width: 30%;
height: 100px;
background: orange;
margin: 25px 13% 25px 13%;
float: left;
}
.nav {
width: 31%;
height: 150px;
background-color: purple;
float: left;
margin: 0% 3% 0% 0%;
}
.search {
width: 100%;
height: 50%;
background: blue;
float: left;
}
.menu {
width: 100%;
height: 50%;
float: left;
background: grey;
}
.slider-container {
width: 100%;
height: 100%;
background-color: white;
}
.main-content {
width: 100%;
height: 100px;
background-color: pink;
float: left;
}
.column {
width: 31%;
height: auto;
background-color: orange;
float: left
}
/* SLIDER */
.caption {
width: 500px;
background-image: url("..//img/caption-bg.png");
background-size: 100%;
position: absolute;
z-index: 99;
overflow: hidden;
margin-top: 7%;
margin-left: 5%;
-moz-border-radius: 20px;
border-radius: 20px;
}
.caption-text {
max-width: 460px;
overflow: hidden;
margin: 20px;
}
.wrapper .slider-container #slideshow {
float: left;
position: relative;
width: 100%;
}
.wrapper .slider-container #slideshow > div {
position: absolute;
}
You can see a live demo at http://k2stuc.nl/test/
I don't understand your question 100%. But I saw an issue, the navigation behind the slideshow is because your slides, .wrapper .slider-container #slideshow > div has set to position:absolute.
Try setting .slider-container height to a fixed height. Otherwise slides will be above the content.
you are floating things that should not be floated
i.e .header, .main-content,#slideshow - none of these need floats - body should not have height:100%;
give .slide-container a fixed height in pixels not a percentage.. doing the above will fix your problem
Setting height: 100% on the <body> sets its height to 100% of the viewport.
Now, the viewport is as high as the browser window's inner-height; and that changes when you resize the browser itself.
Any direct child of the <body>, set to height: 100% then inherits the viewport's height.
That's part of how a lot of the 'parallax' websites do their thing.
I think the problem comes from the fact the slider div has height:100%