I've tried for some hours and this is getting on my nerves. I'm working with bootstrap and the spin.js library. I'm trying to put a color layer over an img tag, but this simply doesn't works.
The code which I'm working on is this
The CSS code
.container-fluid {
position: relative;
padding: 0;
margin: 0;
}
.header{
position: relative;
max-height: 920px;
height: 100%;
}
.header_layer{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: darkgrey;
z-index: 100;
}
.img_header{
position: relative;
top: 0px;
left: 0px;
width: 100%;
z-index: 99;
}
The HTML code:
<div class="container-fluid">
<div class="header col-md-12">
<div class="header_layer"></div>
<img src="http://placehold.it/350x150" class="img-responsive img_header">
</div>
</div>
However, thanks a lot.
As you give position:relative, and top/left : 0 so the elements do not overlap I guess you need position:absolute
Related
I am currently developing a website where the user should be able to scroll horizontally through a landscape with clickable info points on it.
The webite is required to be fully responsive and to ensure this I want to put my landscape image and the info points in a container with the exact equal size of the image.
HTML:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24%; left: 7.5%;"></div>
<div class="point" style="top: 29%; left: 17.7%;"></div>
<div class="point" style="top: 77%; left: 39%;"></div>
<div class="point" style="top: 26%; left: 68%;"></div>
<div class="point" style="top: 70%; left: 80%;"></div>
</div>
</div>
CSS:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
My CSS works completetly fine until you resize the height of the browser window, then the info points move to wrong places.. however when you refresh the resized website it is working properly again.
Try it: Fiddle (resize the output and then click "run" again.)
In my real project I am setting the container's width to the image's width using javascript but I would love to have a clean CSS solution.
I know there are similar questions around but none of the suggested solutions works out for me.
Thank you in advance!
use vw insted of %
Adjust the code below:
<div id="container-main">
<div id="landscape">
<img class="background" src="image.jpg" />
<div class="point" style="top: 24vw; left: 7.5vw;"></div>
<div class="point" style="top: 29vw; left: 17.7vw;"></div>
<div class="point" style="top: 77vw; left: 39vw;"></div>
<div class="point" style="top: 26vw; left: 68vw;"></div>
<div class="point" style="top: 70vw; left: 80vw;"></div>
</div>
</div>
<style>
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
height: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
</style>
.....................Another solution.........................................................
change css:
html {
height: 100%;
}
body {
height: 100%;
min-width: 100%;
margin: 0;
padding: 0;
}
#container-main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: hidden;
}
#landscape {
position: relative;
display: inline-block;
width: 100%;
}
#landscape > img.background {
height: 100%;
display: block;
}
.point {
position: absolute;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
background-color: white;
border-radius: 5px;
cursor: pointer;
}
NB: See the responsive coding standard of this site:
First off, never use position:fixed; on css unless you want the div or container to stay at the same place even when you scroll.
Second, i would recommend to use jquery to make a fluid layout. What a fluid layout does is, it keeps the content of the page in the same place even when you resize the website. If you dont want to waste time on writing a long script file, i would personally recommend you to use Dreamweaver. Dreamweaver updated their scripts to give the users easy way to make a fluid layout just by clicking some buttons. It will auto generate the script file and css for you. And if you're a manual coder like myself, than simply use dreamweaver to generate a fluid layout and start coding manually.
Hope this helps :)
I need to create a div-element, which has 100% width and height for the visible part of the screen. Below this there should be another div-element with variable height, which can only be seen, if the user scrolls down. It is like a one-page website...
JSFiddle: http://jsfiddle.net/sopk6vx3/
#main {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
display: none;
opacity: 0.8;
width: 100%;
height: 100%;
background-color: #000;
position: fixed;
top: 0;
left: 0;
}
#overlay section {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
background-color: #FFF;
width: 94%;
height: 90%;
border-radius: 5px;
margin: 2% 3%;
}
<div id="main">
<header>Navigation</header>
<footer>Footer of main-element</footer>
</div>
<div id="tour">
Here is some tour-information about the product
</div>
<div id="overlay">
<section>Main Content</section>
</div>
Via click on a navigation element the #overlay will be fade in to show the content.
So how do I do the correct CSS for the #main and #tour element? As in the fiddle it doesn't work.
And could the overlay-css been optimized?
My HTML:
<div id="why">
<div class="gallery clearfix">
<img src="images/why-bg.png" class="background-why">
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
</div>
</div>
MY CSS:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
}
I want the .background-why to come over the .gallery. But it stay under the .gallery with my code. I think this image will help you to understand what I am expecting
Use the z-index property for your .background-why class.
Your css should look like this:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index: 1;
}
Z-index is your answer. Set the z-index of the top element higher than your background ones
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
z-index:1;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:2;
}
Use z-index:
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:1
}
Depending on your needs:
1) If you wish that .background-why to be permanently over the .gallery-inner (that whole area is .gallery-inner) - jsfiddle.net/bw6ecbuy/1/
2) If you want the .background-why to come over the .gallery-inner on hover than: jsfiddle.net/a8yszLsf/2/
Leave a comment if I got this wrong.
I want to add text over an image using css. I am using bootstrap. I have not to use background image.
<div id="myCarousal" class="carousal slide">
<div class="carousal-inner">
<div class="item active">
<img src="img/cr1.jpg">
<div class="container active">
<div class="carousal-caption">
<h1> Quiz </h1>
<p> Want to be part of it..</p>
<p> Sign Up Today</p>
</div>
</div>
</div>
</div>
</div>
The CSS is as follows..
.carousel-caption{
z-index:10;
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.carousel-inner > .item > img{
position: relative;
top: 50px;
/*left: 0;*/
min-width: 100%;
height: auto;
}
.carousel-inner > .item{
height: 500px;
}
Please help me to fix it.
Try adding z-indexes for each element. Just in case, we're adding a z-index for everything inside .carousel-caption just to avoid any chance you have some z-index somewhere
.carousel-inner .item img{
position: relative;
top: 50px;
/*left: 0;*/
min-width: 100%;
height: auto;
z-index:0;
}
.carousel-caption{
z-index:1;
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.carousel-caption *{
z-index:1000;
position: relative;
}
I'm trying to create full-window layout with scrollable content pane and floating panel on the left. I've started with css tables and was rather happy with the outcome in Chrome and IE11. The problem is: it totally does not work at all in Firefox. What did I miss?
I've structured the page like this:
<div class="column-container">
<div class="column" style="width: 200px;">1st column</div>
<div class="column" style="position: relative; overflow: auto;">
<div style="position: absolute; top: 0px; width: 100%;">
... (lot's of rows)
</div>
</div>
</div>
And used styles:
body {
position: absolute;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
.column-container {
display: table;
width: 100%;
height: 100%;
}
.column {
display: table-cell;
height: 100%;
}
Here's fiddle with a bit more colors: http://jsfiddle.net/GWsLJ/3/
I could not figure out what was going on with your code in firefox. I was able to get this fiddle to work. I ended up simplifying your HTML and moving all styling over to CSS. It works in all major browsers.
The HTML:
<div class="column-container">
<div class="sidebar">lol</div>
<div class="absolute-div">
<!--content-->
</div>
</div>
The CSS:
* {
margin:0;
padding:0;
}
body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: yellow;
margin: 0px;
}
.column-container {
display: table;
height: 100%;
width: 100%;
background-color: black;
}
.sidebar {
display: table-cell;
height: 100%;
background-color: blue;
position: fixed;
top:0;
left:0;
width: 200px;
}
.absolute-div {
display: table-cell;
position:absolute;
top:0;
left:200px;
background-color: gray;
width: 100%;
}
I didn't find the reason why Firefox does not let me do proper scrolling using css tables. The answer of zsaat14 was working good apart from width of content pane - couldn't get that working without javascript (resizing window / jquery ui's resizable on panel).
What did work for me was absolute positioning of panel and content (as in zsaat14's answer) - fiddle. Also I was setting .absolute-div's left to the width of sidebar.
body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
.column-container {
height: 100%;
width: 100%;
}
.sidebar {
height: 100%;
position: absolute;
top:0;
left:0;
bottom: 0;
width: 200px;
}
.absolute-div{
position:absolute;
top:0;
left:200px;
right: 0px;
bottom: 0px;
overflow: auto;
}