I've created a simple image fader using the technique in the answer from How to make HTML/CSS slideshow background fade?
However this solution requires the images to be of a fixed size. Once I add dynamic width (width=100%), the images overlay the text.
http://jsfiddle.net/2kkHH/340/
.fadein {
position:relative;
width:100%;
}
Any suggestions how to have width=100% and at the same time avoid the images overlaying the text?
You can set the text to be positioned:
http://jsfiddle.net/jonigiuro/2kkHH/346/
p {
position: absolute;
}
Also, text should always be contained in some tag (p, span, etc..)
You have to give a fixed height and width to the container div. Unless that is done, how will your images be 100%? I mean 100% of what? The parent of images is div and hence 100% of that div.
See this updated fiddle: http://jsfiddle.net/2kkHH/350/
If you make your div 100%, then 100% of what? In this case it will take 100% of your page.
Set the position of .fadein img also relative.
.fadein img {
position:relative;
left:0;
top:0;
}
You can insert these two lines of code
$('.fadein img:gt(0)').hide();
var h = $('.fadein :first-child').height(); // line to add 1
$('.fadein').height(h); // line to add 2
and everything will start working - http://jsfiddle.net/5Ugkr/
The reason is that container div does not deduce its height from its absolute positioned img children, so you must set the height 'manually'.
Related
I can't make the header image's height bigger. I found some CSS that made the container height bigger. But every time I change the photo out, it is still the original height: 75px;.
.container {
width:100%;
height:200px;
float:left;
margin-top:2px;
}
thml
html
What am I doing wrong?
From the screenshot i did not see any image element. If you want the image to to follow have a fixed height, you can set a height to the image itself, but if you want the image to follow the container's height, then u need to give a height to the direct container of the image, at the same time give a height to the image, 100% if you want the image to follow the height of the container.
From the code you provided. your .container has a height of 200px. If the image is inside this container, and you wish to make the image exactly 200px as the .container, then you need to add .container img{height:100%} to the image.
Try this CSS rule:
header {
min-height: 50% !important;
}
There should be something below the image that is blocking your height.
Make sure to check from the inspect element
I'm trying to create one of those little fade effects that Google uses at the end of text instead of an ellipsis or simply cutting the text off with overflow:hidden.
I do this by creating a :before element, that I position over the right hand side.
Here's the mixin I use:
.OverflowFadeRight(#color)
{
position:relative;
&:before {
content:"";
height:100%;
position:absolute;
top:0;
right:0;
width:4.8rem;
.GradientLTR(transparent; #color);
}
}
This code works, but what I would like to do is set the width to the same as height so it's always proportional, which is 100% the height of the parent.
I've seen techiques which set height based on width, but can it be done this way round?
You need to use object-fit: contain to achieve this result.
Turns out that creating a square with height:100% using pseudo elements may not be possible.
The way to create a 'responsive square' is to use the img tag.
It allows to set the height and it will proportionally auto-adjust its width.
The alternative to that is to use percentage off the width.
Here's a demo using either one.
<!-- Empty image 1x1 pixels as gif base64 data -->
<div class="OverflowFadeRight2">Real square with img
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</div>
here is the file : http://studioteknik.ca/stackoverflow_question/test1.html i need to see only one background image at the time, let's say the second. It's 400 pixel from the top, but i need it image to be crop top 400 height. HOW TO DO THAT ?
In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.
<div class="sprite1"></div>
CSS:
.sprite1 {
height:400px;
width:400px;
background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
background-position:0 -400px;
}
I use a pseudo element (before/after) to generate the box size I want for the sprite and add the background-image to that.
That way you can set the 'normal' element to position: relative and the :after to position: absolute;.
Then position the after as you want it in relation to the main container and the size of the after element prevents any more of the image sprite 'bleeding out'.
I documented that technique more fully here: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
Yes - that's a good answer. Generally, you position a sprite exactly the way you would position a normal image, but set the height and width so that they only cover one portion of it. The background position is the only thing that changes. If I had a 40 pixel high sprite and wanted to display it has 2 20px high images, the code would be this:
.sprite1{ height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position: 0 0;
}
.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}
In Microsoft's homepage (http://www.microsoft.com/en-us/default.aspx) you see the white background stretch all the way to the bottom and the sides in grey?
How do you that in an HTML/CSS? I mean, I've been trying but the DIV won't go all the way down...
Help?
Well, their page has enough content to force the page to scroll. Like this
If you don't have enough content, you can set the height of the div to 100%. The important thing to note here is that it will be 100% of its parent's height. That's why you have to set the html and body heights to 100% as well. DEMO
html, body {
height: 100%;
}
#contentDiv {
height:100%;
}
HTML
<body>
<div id="contentDiv">my content here</div>
</body>
You must make sure that the body and html file has 100% height aswell, cause 100% is what it gets from the current height of the parent element
so if you set, and html's parent is the window(document) that's why you get a full height
html,body{
height:100%;
width:100%;
background:gray;
}
div{
height:100%;
width:100%;
background:red;
}
you will get a red page
Set the height to %100 and sometimes setting the parent element to position:relative will set things straight. Post your html and css and we could help you better.
I'm trying to make a div fill up the page, but it seems to be only as long as the content I put in it. This is my css code:
.myDiv
{
height: 30%;
}
What can I do to make it be that height whether the div is empty or has some content? (The content won't extend past the height I set here).
You are using percentages so the height of the div depends directly on its parent. Make sure the parent has a height. If the direct parent is the body then:
body{
height:100%;
}
If you know the exact height you want you for the div you should be using pixels like height:300px;
You could do something like this. (I know you didn't ask about jQuery... but it is another option)
var height = $(document).height();
$('#myDiv').css('height', height);
http://jsfiddle.net/jasongennaro/pNHzE/1/