I HAD two divs on a page - an image and some text. Image is set to 100% width, so text stacks underneath it. No positions were set.
Then I added a title on top of my image, giving the container div a position of relative and the image and title a position of absolute.
This has caused my text that was below the image to disappear behind it. WHY?!?! I'm new to CSS and can't figure these alignments out.
CSS:
.fullwidthimage {
width: 100%;
position: relative;
float: left;
}
.imageoverlay {
left: 0;
text-align: center;
position: absolute;
z-index: 100;
top: 50px;
width: 100%;
}
.imageundertext {
position: absolute;
}
jsfiddle here: https://jsfiddle.net/4ksbz4c2/
thanks.
Use "z-index" in your css.
If the image is fixed, I would set it as a background-image instead.
https://jsfiddle.net/4ksbz4c2/1/
.fullwidthimage {
height:100vh;
width:100vw;
position:fixed;
top:0;
left:0;
z-index:-1;
text-align:center;
}
.fullwidthimage img {
z-index:-1;
position:fixed;
top:0;
left:0;
}
.fullwidthimage h1 {
z-index:1;
}
Related
My first slide on this page, Promotion slide wasn't responsive...I added
max-width: 100%; height: auto
to the css. It works But now it adds too much space below the image when viewing on mobile device. It also makes the title disappear. How do I make this image responsive, but get rid of the space below?
http://new.921thefrog.com/index.php/test-promo-slider/
Here is the rest of the code
.promo_slider_wrapper { margin:10px 0; position:relative; }
.promo_slider { height:235px; overflow:hidden; position:relative; }
.promo_slider img {margin:0; padding:0; max-width: 100%; height: auto }
promo_slider .panel {
overflow:hidden;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
In order to center the image you can apply this on the img elements:
img {
position:absolute;
width: 100%;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
But still you will need some js if H > W because in that case the height should be 100% and the width auto
// EDIT
I just took a look at the page source code
<div class="promo_slider auto_advance" style=" height:418px;">
the height should be set to auto, not 418px
I am working on a website using Nivo Slider here: Website Demo
The problem is, the slider section won't do 100% height following the browser's height. How can I do that?
I have been inspecting and found this css code:
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
left:0;
margin-top:100px;
}
According to my CSS knowledge, we can change the height:auto; to height:100% to make the slider 100% height. Alas, it does not work!
What am I missing here?
UPDATE
I found that the image of the sliders is taking over the size, which is written here:
.nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
max-width: none;
max-height: 100%; // I ADDED THIS TO MAKE 100% HEIGHT AND IT WORKS!!!
}
nevertheless, the image is being stretched now, how can I make the image cut, instead of stretched?
Look at the following class. You have assigned 900px height.
.nivoSlider:after {
content: '';
background: transparent url(../../images/parallax_slider/pattern.png) repeat top left;
position: absolute;
height: 900px;
left: 0;
top: 0;
width: 100%;
z-index: 5;
}
The structure of my html is
<body>
<div class="divHead"></div>
<div class="divBody"></div>
</body>
What I want to do is give a fixed height to the divHeader, let's say 100px, and let the divBody expand to the end of the page exactly, without scroll bars for the browser.
So, if the user's window is 1000px, the body will be 900px and etc...
If i set the divBody height to 100%, it will take the 100% of the body, which means will create a scroll bar in the page.
Thanks in advance,
You could use absolute positioning: FIDDLE: http://jsfiddle.net/Z4vNN/2/
.divHead {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: red;
}
.divBody {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
background-color: green;
overflow: auto;
}
.divBody {
height: calc(100% - 100px);
}
#crush is certainly right, but if absolute positioning messes up other page elements you can avoid it by just having the elements displayed as blocks : http://jsfiddle.net/kF5wQ/
#header {
height:100px;
width:100%;
background:red;
display:block;
}
#container {
height:100%;
width:100%;
background:blue;
display:block;
overflow:visible;
}
I have unordered list of thumbnail images to display horizontally across bottom of page. I want a few of the images to be visible while the others are scrolled horizontally in/out upon scrollbar use.
However I can't get my images to line up in one continuous line - they break up at the 100% width mark.
This may be an issue with my css rather than with jscrollpane.
Demonstration here: http://www.air.desensdesigns.com/temp.html
CSS:
#thumbnails{
position:fixed;
top:86%;
left:0px;
height:125px;
width:100%;
background:rgba(0,0,0,.6);
}
#thumbnails ul{
position:relative;
top:5px;
}
#thumbnails li{
list-style:none;
float:left;
margin:5px;
padding:0px;
height:100px;
width:133px;
border:2px solid #333;
}
JS:
$(function() {
$thumbnails.jScrollPane({});
});
Add a width to ul:
#thumbnails ul {
position: relative;
top: 5px;
width: 5000px;
}
UPDATE
Try add this:
.jspHorizontalBar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 52px;
background: red;
}
My Test:
I have a div which is 145px X 145px. I have an img inside this dive. The img could be of any size (longest side being 130px). I would like the image to be centered vertically in the div. Everything that I have tried works in most browsers, but not IE7. I need something that will work in IE7.
here's a cross-browser solution:
<div class="img-container"><img src="picture.png" class="cropped"/></div>
div.img-container {
width: 390px;
height: 211px;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
img.cropped {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can replace the image by a background on the div like this :
<div style="background:url(myimage.jpg) no-repeat center center"></div>
Not sure about IE7 but for IE9 and rest of the modern browsers following works.
.picturecontainer{
width:800px;
height:800px;
border:solid 1px;
display:table-cell;
vertical-align:middle;
}
.horizontalcenter{
display:block;
margin-left:auto;
margin-right:auto;
vertical-align:middle;
}
To use it
<div class="picturecontainer"><img src="" class="horizontalcenter"/></div>
This places images at dead centre.
Not sure what you have tried so far but the vertical-align CSS property should work if the images are displayed as inline elements.
Some info on vertical-align: http://www.w3schools.com/css/pr_pos_vertical-align.asp
If you have to account for all image heights, that is pretty much the only way without using JavaScript.
If the images are not inline elements and you only had to accommodate images of a consistent height, you could do something like this:
img {
margin-top: -50px; /* This number should be half the height of your image */
position: absolute;
top: 50%;
}
Otherwise the only way I can think to accomodate images of varying height would be to do something similar with your CSS but set the negative margin to half of the image's height with JS.
Using the line-height property solved the problem for me.
Reference: vertical-align image in div
HTML:
<div class="img_thumb">
<a class="images_class" href="large.jpg" rel="images"><img src="http://www.minfo.pt/fotos/_cache/produtos/0/068.M.976010002__thumbnail_50_50_true_sharpen_1_1.JPG" title="img_title" alt="img_alt" /></a>
</div>
CSS:
.img_thumb {
float: left;
height: 120px;
margin-bottom: 5px;
margin-left: 9px;
position: relative;
width: 147px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 3px;
line-height:120px;
text-align:center;
}
.img_thumb img {
vertical-align: middle;
}
I created a little jQuery code to do this without having to use nasty tables:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
imagepos = function () {
$('img').each(function () {
imgheight = Math.round($(this).height() / 2);
imgwidth = Math.round($(this).width() / 2);
$(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
});
}
$(window).load(imagepos);
</script>
And you also need a little bit of css:
div
{
position:relative;
}
img
{
display:block;
margin:auto;
max-width:100%;
position:absolute;
top:50%;
left:50%;
opacity:0;
}