I am trying to have some images inside a div. Only one image should be shown. I use:
<div id="slideshow" style="width:600px;height:400px;position:absolute;overflow:hidden;"></div>
<img src="img3.png" width="600px" height="400px" id="img3" style="position:absolute;left:0px;">
<img src="img2.png" width="600px" height="400px" id="img2" style="position:absolute;left:600px;">
<img src="img1.png" width="600px" height="400px" id="img1" style="position:absolute;left:1200px;">
</div>
But the images overflow from the div and are visible. How do I fix this?
Let's start by fixing your markup...
<style>
#slideshow{
width:600px;
height:400px;
position:absolute;
overflow:hidden;
}
#slideshow img{
width:600px;
height:400px;
float:left;
}
</style>
<div id="slideshow">
<img src="img3.png" id="img3">
<img src="img2.png" id="img2">
<img src="img1.png" id="img1">
</div>
So the reason why is because you defined position:absolute in both the parent and the children. You could have wrapped the image tags in a relatively positioned div. That would reset the absolute position to the top left of the relative positioned parent.
However, in this case, all you needed to do was float left. There was no reason to have absolute positioned children in the slideshow element.
Related
I've been trying to get a hyper link to be centered above a picture. I tried using a div class tag to center it, but they won't allow pixels.
HOMEPAGE <img src="1.jpg width="300" height="300" />
This is what it looks like after I run it:
I want the hyperlink to line up in the middle of the picture.
If you add a text-align: center to the container element you will get what you want:
<div style="text-align: center;">
HOMEPAGE<br />
<img src="https://dummyimage.com/150x100/s7e/ffe" width="300" height="300" />
</div>
A Container Approach with CSS
CSS:
.imagecontainer {
width:300px;
text-align:center;
}
HTML
<div class="imagecontainer">
<a href="link">
Some text
</a>
<img src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Domestic_goat_kid_in_capeweed.jpg" width=300/>
</div>
JSfiddle
Try using the element DIV, setting the width to 300 pixels just like your image and CSS to align the link to center:
<div>
<div style="width: 300px; text-align: center"> HOMEPAGE </div>
<div><img src="1.jpg width="300" height="300" /></div>
</div>
I think I am having an issue with my floats, they are not aligning correctly and I feel like it has to do with the way I have my boxes setup. I have tried changing the alignment with margin-left and right but am not getting the desired look, I would like all of it to lineup. Here is the html and css.
HTML
<div id="service1">
<center>
<h1>Savings <br />Strategies</h1>
<img src="images/eg1.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service2">
<center>
<h1>Vendor <br />Management</h1>
<img src="images/eg2.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
<div id="service3">
<center>
<h1>Environmental<br /> Stewardship</h1>
<img src="images/eg3.png" class="alignleft" height="150" width="200" alt="" />
</center>
</div>
CSS
#service1 {
float:left;
width:360px;
height:280px;
padding:15px;
}
#service2 {
margin-left:auto;
margin-right:auto;
width:360px;
height:280px;
padding:15px;
}
#service3 {
float:right;
width:360px;
height:280px;
padding 15px;
}
Thanks in Advance!
Why not try displaying each div as an inline-block. Remove all the floats and margins as well.
div { display: inline-block; }
You could set display to inline and remove all the margins:
http://jsfiddle.net/ABVJd/2/
Result: http://jsfiddle.net/ABVJd/2/embedded/result
Either that,, or you could remove all margins and floats and add inline-block, as suggested:
http://jsfiddle.net/ABVJd/3/
Result:http://jsfiddle.net/ABVJd/3/
I have the following markup:
<div class="photo" style="float: left; margin: 2px;">
<a href="#">
<img src="images/image.jpg" alt="My Image" height="240" width="240" />
</a>
</div>
How can I create a layer on top of the image where I can write some text? The layer should have transparency, be aligned to bottom and having a size of 240x60?
Thanks!
Why not make the image a background?
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg');
width:240px; height:240px; display:inline-block;">Your text here</a>
</div>
The display:inline-block allows you to apply width and height to an otherwise inline element, but here you might even want to just use display:block since it's the only child of the container.
EDIT: You can even put more containers in it, something like this:
<div class="photo" style="float:left; margin:2px">
<a href="#" style="background:url('images/image.jpg'); position:relative;
width:240px; height:240px; display:block;">
<span style="display:block;position:absolute;bottom:0;left:0;right:0;
background:white;background:rgba(255,255,255,0.25);">Your text here</span>
</a>
</div>
Text blocks over images. Website and demo as follows:
http://css-tricks.com/text-blocks-over-image/
I'll do it like with an image container like that :
Html
<div class="image-container">
<img src="path/to/image" />
<p class="caption">My text</p>
</div>
CSS
.image-container {
position:relative;
}
.caption {
width:100%;
background:rgba(0,0,0,0.5);
color:#ffffff;
position:absolute;
top:0;
}
See fiddle !
Markup
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.1: Caption Text Here</span>
</div>
<div class="figure-container">
<img src="http://ipadwallsdepot.com/detail/solid-color_00015061.jpg" width="250" height="250" />
<span class="figure-label">FIG 1.2: Another Caption Here</span>
</div>
Stylesheet
.figure-container
{
position: relative;
display: inline-block;
}
.figure-label
{
position: absolute;
bottom: 10px;
right: 10px;
color: White
}
I created a JSFiddle here http://jsfiddle.net/AbBKx/ showing how to absolutely position a child element (label) relative to a parent container.
My grid image gallery has four images on each line. The width:25% in the CSS makes the width responsive but I need the height to also be responsive. At the moment I have the height as 180px. Could I set it as a percentage to make it responsive like the width? I've tried but when I set it as a percentage it doesn't work. It only works if I move height:x% to line1 img/line2 img, but then the image becomes squashed.
<div class="line1">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
<img src="image3.jpg" alt="image3.jpg" />
<img src="image4.jpg" alt="image4.jpg" /></div>
<div class="line2">
<img src="image5.jpg" alt="image5.jpg" />
<img src="image6.jpg" alt="image6.jpg" />
<img src="image7.jpg" alt="image7.jpg" />
<img src="image8.jpg" alt="image8.jpg" /></div>
.line1{
overflow:hidden;
height:180px;
}
.line1 img{
width:25%;
}
.line2{
overflow:hidden;
height:180px;
}
.line2 img{
width:25%;
}
Set both .line1{ height: auto;} and .line1{ height: auto; this will keep it responsive.
Check the jsfiddle example.
<div id="div1">
<img id="img1" src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<div style="float:none;clear:both;"></div>
</div>
img { float:left; width:150px; height:100px; }
#div1 { overflow:hidden; width:200px; height:100px; }
I have 3 images and, as you can guess, the second one doesn't fit fully at the right. Instead of being drawn partially, it draws from the new line (but since overflow: hidden we don't see it).
So, how can I force the second image to be drawn to the right of the first image, instead of being drawn from the new line?
Try using img{display:inline} instead of float. Or you can embed them in ul and li and float them.
Done it like that:
<div id="div2">
<div id="div1">
<img id="img1" src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<div style="float:none;clear:both;"></div>
</div>
</div>
img{float:left;width:150px;height:100px; }
#div1{width:450px;height:100px;}
#div2{width:200px;height:100px;}