Here is my initial HTML structure (I used Bootstrap framework)
<html>
<body>
<header>My header</div>
<div class="container-fluid">
<div class="row">
<div id="list" class="col-md-7"></div>
<div id="map" class="col-md-5"></div>
</div>
</div>
<footer>My Header</footer>
</body>
And the css :
#list
{
height : 2500px /* For the exemple */
}
#map
{
height : 500px
}
#map.affix {
position: fixed;
top: 70px;
right: 0;
}
Initially my position of div #map is relative.
I would like to set position of div #map to fixed when the div (#map) becomes visible on the screen until the bottom of div #list.
And finally, I would like to set my div to relative position again when my div #map reached the bottom of div #list.
For this scenario, I used the affix plugin of bootstrap :
$('#map').affix({
offset: { top: $('#map').offset().top }
});
BUT when my scroll reaches the div #map, it disappears from the screen (because position is fixed and the width of my div#map is liquid)
How to display the div #map with the fixed position on the top/right off the screen ans with my initially size (when it'is in position:relative) ?
Is someone a solution to this problem ? Thanks you for your help !
Here is my desired scenario :
Are you trying to do something like this?
http://jsfiddle.net/b43hj/3503/
<header>My Header</header>
<div class="container-fluid">
<div class="row">
<div id="list"></div>
<div id="theFixed">SOMETHING</div>
</div>
</div>
<footer>My Footer</footer>
#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;
}
#list {
height: 2500px;
width: 200px;
background: green;
}
$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});
Related
I have a problem with the displaying from two containers with css. The first container has a background image. The second container is text only.
The position of the second container is on the top the first container.
but by the displaying in small media queries, I would displaying the second container after the first container.
#back,
#back1 {
width: 100%;
height: 50px;
background-color: red;
}
<html>
<body>
<div id="back">
<div id="text">
Hello
</div>
</div>
<hr />
<div id="back1"></div>
<div id="text">
Hello
</div>
</body>
</html>
Put them both in a relatively positioned container and then add a media query to absolutely position the the text for larger screens:
#back {
width: 100%;
height: 50px;
background-color: red;
}
#container {
position: relative;
}
#media screen and (min-width: 768px) {
#text {
position: absolute;
top: 0;
}
}
<div id="container">
<div id="back"></div>
<div id="text">
Hello
</div>
</div>
I have 10 div, and every one of them has position absolute, width: 100px and height 100px. In this case, we will see only one div, as rest of div overlaps each other.
So i wanted to ask, if i can in pure CSS, select those div, and add every one, top property which should look like:
fist div : top:0
second div: top:100px
third div: top:200px
And so on...
I tried with for example with this formula, but without success:
:nth-child(n+x);
Thanks.
Yes you can do that..
e.g.
<div id="wrapper">
<div class="first-div">
<div class="second-div">
</div>
<style type="text/css">
/* for first div */
#wrapper > div:nth-child(1) {
top: 0px;
}
</style>
using jQuery, you can set top dynamically.
e.g.
jQuery('#wrapper > div').each(function(index){
jQuery(this).css('top', index * 100);
});
If you want to use Alpesh Panchal approach and still have variable height divs, you can just store the total height in a variable:
http://jsfiddle.net/4u9jLm95/2/
HTML:
<div id="wrapper">
<div class="first"> </div>
<div class="second"> </div>
<div class="third"> </div>
<div class="fourth"> </div>
</div>
CSS:
#wrapper div {
background-color: teal;
width: 100px;
position: absolute;
}
.first {
height: 100px;
}
.second {
height: 200px;
}
.third {
height: 50px;
}
.fourth {
height: 150px;
}
JS:
var total = 0;
$('#wrapper > div').each(function(index){
$(this).css('top', total);
total += $(this).height() + 100;
});
However, as others said, using position: absolute might not be the best option here.
On load I'd like to load the topsection div with a bg image and have it take up the entire screen, but then I have content below it which you can scroll down to. The div should size itself to the window screen only on load and not remain like that on scrolldown. I cannot give the div a position:absolute; either.
I'm banging my head on this one. I've tried a ton of different things
Here is my html:
<div id="topsection" class="row bgimage ">
<div id="logomain" class="mainlogo ">
<div class=" floorplanbuttoncontainer helvetical">
<ul>
<li>Residence A - Duplex</li>
<li>
Residence D - Simplex</li>
</ul>
</div><!-- end floorplanbuttoncontainer -->
</div><!-- end logomain -->
Here is my css for the background image:
.bgimage {
background: url(images/image.jpg) no-repeat center center fixed;
background-size: cover;
.mainlogo {
margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
background-image:url(images/picture.png);background-repeat:no-repeat;
background-position: center;
}
In order to set a div to take up the entire screen you need to set the height of the body and html element to 100%. You also have to remove the padding and margin from them. Then you create a wrapper class to encase your content and assign it your background-image. Then all ya' gotta do is create the content below your full screen image to scroll into!
Fiddle
Edit
If you run the snippet below and hit full page you can see how it works.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
background: red;
}
.full {
width: 100%;
}
.footerThing {
width: 100%;
height: 200px;
background: blue;
}
<div class="wrapper">
<div class="full">
asd
</div>
</div>
<div class="footerThing">
</div>
Modern browsers: a simple way is to use vh units to get the Viewport Height
Just to simplify: jsBin demo
<div id="home" class="container full">
<h1>HOME</h1>
</div>
<div id="about" class="container">
<h1>About us</h1>
<p>Content</p>
</div>
CSS:
.container { min-height:400px; }
.full { height:100vh; }
Crossbrowser: use % instead of vh and simply add html, body{height:100%;} jsBin demo
I saw there are many similar questions, but I can't find one solution working for me.
My page has this structure:
<body>
<div id="whole_page">
<div id="header"></div>
<div id="main">
<div id="img_container"></div>
<div id="img_container"></div>
<div id="img_container"></div>
</div>
</div>
</body>
My css is:
html,body{
height:100%; width:100%;
padding-top:50px;
}
#whole_page{
height:calc(100%-50px); width:100%;
}
#header{
position:fixed;
height:50px; // header
}
#image_container{
width:100%;
height:30%;
}
I want to set "main" 's height to 100% (window height) minus header height (50px).
Further, I want each div with id "image_container" to be 30% of the "main" div and large 100% of widonws width. So that I have approximately 3 of those div in the page, before needing to scroll.
The problem is that % seem to not work at all. As I didn't write them (tried with Chrome's dev tools).
Actually I am using bootstrap to fill content of header/main but as far as I know this shouldn't give problems with height.
Any clue?
Thanks in advance
Your key problem is that you did not change the height of #main. You also had a miss type between your CSS and HTML, in your CSS you referred to #image_container while in your HTML you used 'id="img_container"'. I change both CSS and HTML to '.img_container' and 'class="img_container"' respectively. I also noticed that you had twice the amount of space at the top than the size needed for your #header since 'padding-top: 50px;' was applied to html and body.
Here is the code:
<div id="whole_page">
<div id="header" style="background-color: yellow;"></div>
<div id="main">
<div class="img_container" style="background-color: red;"></div>
<div class="img_container" style="background-color: blue;"></div>
<div class="img_container" style="background-color: green;"></div>
</div>
</div>
and
html, body {
height:100%;
width:100%;
}
body {
margin: 0;
padding-top:50px;
}
#whole_page {
height: calc(100% - 50px);
width: 100%;
}
#header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
}
#main {
height: 100%;
}
.img_container {
width: 100%;
height: 30%;
}
PS - add color to some of the tags so I could see them. You can just delete the style attribute from the '#header' and '.img_container' tags.
EDIT - Here is a jsfiddle: http://jsfiddle.net/xiondark2008/DJJ2d/
EDIT2 - Just side thought, 'height: calc(100%-50px);' is an invalid property, at least in chrome, however 'height: calc(100% - 50px);' is a valid property, again, at least in chrome.
You can use box-sizing: border-box and padding..
http://jsfiddle.net/jVkL6/
I'm trying to make a harmonica effect by changing the height of divs when hovering over another one.
My HTML looks like this:
<html><body>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</body></html>
Every section has a height of 25%.
When hovering over section1, all the other divs should reduce in size while section1 expands. This is easily done with the following CSS:
.section1 {
height: 40%;
}
.section1:hover ~ div:not(section1) {
height: 20%;
}
The problem is that the ~ selector only selects sibling divs that are below the current div. So if I use the same code for section2, only section3 and section4 will be affected. Section1 will have it's original height of 25% because it's above the current div.
Can I solve this problem with just CSS?
Yes. Put a wrapper around your sections and reduce their height on hover on the wrapper. Then increase the height of the one section you are hovering.
DEMO
HTML becomes:
<div class='section-wrapper'>
<div class="section1"></div>
<div class="section2"></div>
<div class="section3"></div>
<div class="section4"></div>
</div>
Relevant CSS:
.section-wrapper {
height: 500px;
}
.section-wrapper div {
height: 25%;
outline: dotted 1px;
}
.section-wrapper:hover div {
height: 20%;
}
.section-wrapper div:hover {
height: 40%;
}
Try this
HTML
<html>
<body>
<div class="container">
<div class="section1">1</div>
<div class="section2">2</div>
<div class="section3">3</div>
<div class="section4">4</div>
</div>
</body>
</html>
CSS
.container:hover div {
height:20px;
}
.container .section1,.container .section1:hover,
.container .section2,.container .section2:hover,
.container .section3,.container .section3:hover,
.container .section4,.container .section4:hover{
height: 50px;
}
Simple Add a parent container to the sections
<div class="parent">
<div class="section1">section1</div>
<div class="section2">section2</div>
<div class="section3">section3</div>
<div class="section4">section4</div>
</div
And style them as
.parent div{height: 25%; border:solid 1px #f00}
.parent:hover div{height: 20%; }
.parent div:hover {height: 40%; }