I have an image thumbnail with text that is on the right side of the image. I have a hyperlink on the image that pops up the full size image.
Now the hyper link only works on the bottom half the image, (underneath where the text is inline to the image).
Oddly enough, it seems to work fine on jsfiddle, but not on the website.
Is there anything that could be causing this problem? The JSFIDDLE below is exactly how it is on the website.
http://jsfiddle.net/EJvm2/1/
CSS:
.content {
width: 500px;
padding: 10px;
overflow: hidden;
}
.content img, .content h3 {
float: left;
border-style:solid;
border-width:5px;
}
.content img {
padding-right: 10px;
}
.content p {
padding: 40px 0 0 20px;
}
HTML:
<div class="content"> <a id="image1" href="images/site_images/acorn-award.jpg" title="image title.">
<img src="images/site_images/thumb.jpg" alt="" width="200" height="120" />
</a>
<p>This is some text explaining the image</p>
</div>
There is something elsewhere on the page that is overlaying part of the link. You can find out what it is by right-clicking on the part that doesn't work and selecting "Inspect element" or its equivalent in whichever browser you are using.
I don't see any reason for the following declaration:
.content img, .content h3 {
float: left;
}
Randomly (at least it makes no sense in the fiddle on the img element) floating elements almost always causes problems. In your case most likely the image size does not fit the containing element, thus causing overflow and overlapping issues. Remove the float (move it to the containing anchor) or at least clear it.
Related
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
So, I'm trying to align four images, two on top and two in the bottom. Together the four pieces form a map. To be even clearer: I sliced the picture of a map in four equal pieces, in PS, and now I want to put the pieces together in HTML code.
The code looks like this.
HTML:
<div id="container">
<img src="topleft.png" height="50%">
<img src="topright.png" height="50%">
<br style="clear:both"/>
<img src="bottomleft.png" height="50%">
<img src="bottomright.png" height="50%">
</div>
</body>
CSS:
img {
display:block;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
}
When I don't have the div around my images the size (height="50%") is correct and also the way they float: left to align with each other (except for where I used the br style="clear:both"/. But when I put them in a div the my size attribute doesn't work, and there is a line break after every picture, so they get stacked on top of each other.
Images are inline elements, just like text. Divs are block level elements that occupy the full width of the browser. You wrapped a block level element around an inline element. That is why your inlined images no longer work as you wish. Even floating won't fix the issue because the image is floated but the div occupies the full width.
One way to fix this is to set display:inline; or display:inline-block to your divs or you can float the divs.
you can try this one:
img {
display:inline;
float:left;
padding:0px;
margin: 0px;
position: relative;
}
#container {
border: 10px solid black;
height: 2000px;
width:1500px;
position: relative;
margin: 20px auto;
padding-top: 25px;
padding-right: 25px;
padding-bottom: 25px;
padding-left: 25px;
display:inline;
}
DEMO FIDDLE
But when I put them in a div the my size attribute doesn't work, and
there is a linebreak after every picture, so they get stacked on top
of eachother.
When you put the images in a div they become wrapped in a block element, which a div is by default. Block elements use all available width of their container. So the divs will stack vertically.
The HTML height attribute doesn't work as you expect because when a percentage value is used the height isn't calculated in relation to the image size.
From the height attribute definition in the spec:
Note that lengths expressed as percentages are based on the horizontal
or vertical space currently available, not on the natural size of the
image, object, or applet.
To achieve your layout quickly, efficiently and using a modern (CSS3) layout technique, try this:
HTML
<div id="container">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
<img src="http://i.imgur.com/60PVLis.png" alt="">
</div>
CSS
#container {
display: flex;
flex-wrap: wrap;
width: 250px;
height: 250px;
}
img { width: 125px; }
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
I have a problem with a website I am developing right now, and I've been scratching my head here for a while. Basically I have a responsive design, however I want the images to all be centered together (with the yellow image directly above where the magenta image is currently) and then the 'block' of images to center horizontally and vertically within available space. The code is currently hosted at http://dorreen.webfactional.com
The problem is that the images are misaligned - the top images are spread out and the bottom images are clustered together. I'm not sure exactly what I should post - Here's a JSfiddle (Except the fiddle sort of works how I want it to)
The code:
#textContent { width: 49%; }
#imgContent { width: 49%; }
.content {
float: left;
padding: 0% 0.5%;
}
.content > img { margin: 0.5% auto; }
<div class="content" id="imgContent">
<img src="http://placehold.it/240x240/ff0000/000000" />
<img src="http://placehold.it/240x240/ffff00/000000" />
<img src="http://placehold.it/240x240/00ff00/000000" />
<img src="http://placehold.it/240x240/ff00ff/000000" />
</div>
What you're seeing is the text-align: justify of the image container aligning all but the last line. To a zeroth approximation, text-align:left (or center, I guess) should help you.
I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.
Check out the JSFiddle: http://jsfiddle.net/RFzMv/
If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.
How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?
The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.
<div class="centered">
<a class="image-link" href="">
<img src="http://placekitten.com/100/100" width="100" height="100" />
</a>
<a class="image-link" href="">
<img src="http://placekitten.com/110/110" width="100" height="100" />
</a>
<a href="#photos" class="imageCount">
<span>some text</span>
</a>
</div>
The CSS looks like this:
.centered {
width: 500px;
height: 300px;
background-color: #EEE;
text-align: center;
}
a {
text-decoration: none;
outline: 1px dotted blue; /* optional to show content boxes */
}
.image-link {
display: inline-block;
vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
display: inline-block;
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
background-color: lightgray;
margin-left: 10px;
}
.imageCount span {
/* in case you need to style the text in a special way */
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/
How This Works
Basically you have three inline block child elements in div.centered, so text align works as you expect.
I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.
If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.
If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.
You can adjust the horizontal separation you a left margin on .imageCount.
If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.
This would let you keep your centered images while placing the link anywhere you want.
#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }
here is a fiddle:http://jsfiddle.net/RFzMv/39/
I styled an image with float:left, and predictably, the text of the header after it appears to the right of the image (if it helps, the context for this situation is a logo and title next to each other in the header of a website).
When I look at the header element (h1), it takes up space behind the image (overlapping). The text is still next to the image, but the background of the h1 element overlaps with the image.
<div id="header">
<img src="logo2.png" />
<h1>AlanHoRizon</h1>
<p>
...
#header img {
float: left;
}
Is this how floating is supposed to work? Is background synonymous to the padding in the css box model? What if I wanted the header element to begin completely after the image, including the background (which is what I expected float to do actually).
Doesn't actually affect the appearance of the header, as everything appears as it should, but I'm curious, as it would add to my understanding of html and css web design.
thanks.
HTML:
<div id="header">
<img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" />
<div>
<h1>AlanHoRizon</h1>
<h3>Site description</h3>
</div>
</div>
<div id="content">
<p>Lorem ipsum dolor ...</p>
</div>
CSS:
#header:after {
display: block;
clear: both;
content: ".";
visibility: hidden;
height: 0;
line-height: 0;
}
#logo {
float: left;
}
#header div {
float: left;
padding: .25em;
}
And here's the complete jsfiddle example
modify the css code to:
h1
{
float:left;
}
img
{
float:left;
}
This should work. The following will produce the heading on the left of the image.
Actually, I think I found an answer to my question. Simply put, it seems like this is just how floating behavior works. The content is pushed over, but the background and borders still go behind the float:
http://phrogz.net/CSS/understandingfloats.html#ascolumns
I'm not sure if padding is synonymous to background, but I did test the header elements "padding" simply by making the background color red, and the background indeed is behind the float. In terms of the css box model, I'm still not quite sure what's going on.