I have a problem with images in horizontal scrolling, namely I don´t see the images correctly, my code is following jsfiddle.net/y8gy6oar/.
I can´t unterstand how to fix it, I hope someone can help me.
Set the width for your article tags to the size of the images.
Of course, this only works if you know the size of your images ahead of time, and they are all the same size.
div.horizontal .table article {
width: 569px;
height: 320px;
display: table-cell;
background: #e3e3e3;
vertical-align: middle;
text-align: center;
}
What is happening in your CSS is the articles are set at 200px so the images are cut off.
Related
I have here a code in Dabblet: http://dabblet.com/gist/5705036
I wanted to have these segment to stick at their position even if the browser is re-sized without using absolute positioning. Like for example, The main content container breaks a new line when the browser is re-sized [I use CSS Floats in most of my containers].
Is there something wrong with my coding?
Do floats proper for layouts ? or I need to use anything else?..
I just can't fix it by myself and by doing a lot of research , still, haven't got a good idea to use it as a way to fix this. [Also, I use HTML5 tags such as: section, article, nav, etc.. ]
Just remove the float:left; from maincontent id and apply a display:table-cell;. Your issue will be resolved.
Here is the code.
#maincontent {
border: 1px solid #BBBBBB;
border-radius: 5px 5px 5px 5px;
display: table-cell;
margin-top: 15px;
min-height: 400px;
padding: 2px 6px;
width: 700px;
}
Hope this helps.
First of all You should always clear parent element if You use floats inside the parent element. Your right element go down because You don't have minimal width of container, ther is sample of code:
#contentWrapper {
width: 1000px;
overflow: hidden; /*scroll / auto it's depends on You */
}
I noticed that in your code you had a space in <div id="contentWrapper "> which stopped your CSS for that element from appearing. Also, you needed 2 more pixels of width on your #contentWrapper.
#contentWrapper {
width: 992px;
}
Removing the space and changing the width of #contentWrapper worked for me. I had a quick look at the maths but haven't worked out why it needs to be 992px. Anyone?
So, in answer to your question, I'd say floats are fine and your approach is good, there were just those two minor errors.
Here's the page: http://www.thresholds.org.uk/museums-collections-poets/kettles-yard/
It looks great in Chrome even when you resize the browser, everything looks great. However, in Firefox, columns overlap one another and images don't resize.
The main grid classes are .c-1 (the smaller width column) and .c-2 (the width of two .c-1 columns). Whats going on in my code to cause this problem?
For quick reference, I'm using CSS3 box-sizing: border-box for my grid, here's the code for my .c-1 and .c-2 classes:
.c-1 {
width: 288px;
float: left;
margin-left: 28px;
display: block;
}
.c-2 {
width: 604px;
float: left;
margin-left: 28px;
display: block;
}
.c-1:first-child, .c-2:first-child, .c-1:nth-child(4n+1) { margin-left: 0; }
I'm also using the following code for responsive images:
img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 1.875em;
}
EDIT Ok I've seemed to have fixed the responsive images for most sections now. A classname of .active was missing a width value but I've still got a crazy problem with the Blog section. Even though the same layout has been used on that page (.c-1 and .c-2 inline together) this section seems to overlap one another...odd!
Ok well it seems Firefox doesn't like calculating widths of elements when these elements don't have a width specified, which explains why responsive images were not working. An image set to max-width must have a container with a set width otherwise images won't scale.
I thought browsers defaulted elements to 100% width, if a width hasn't been specified in the CSS?
Anyways, all fixed now. Put widths on your wrappers people!
So classical css problem, vertical aligning, but this time a bit more complicated, please take a look at this fiddle: http://jsfiddle.net/uH4Rn/2/
It is pretty obvious that i want image to be aligned exactly at the middle and as you can see it doesn't work i think problem is with these two lines:
top:-25%;
margin-top:-100px;
By the way i don't care about IE that much below 9 version and i would like to avoid javascript or jquery.
Since the previous answer didnt seem to give you the right result, here is another that definatly works. Unless i totally dont understand your question.
This solution will center any image in the given container:
.container{
width: 300px;
border: 1px solid black;
height: 300px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Fiddle: http://jsfiddle.net/uH4Rn/2/
Live demo: http://jsfiddle.net/9Y7Cm/1/
I want the text to be placed at the 50% of the image height - so just in the middle of the box.
I was searching a lot on SO and google - there are a lot of questions like this, but each other is about another problem... I was tried the solutions given by people but none of them worked so thats why I'm asking you here for any solution!
Just set vertical-align: middle on the img.
http://jsfiddle.net/9Y7Cm/2/
replace the following with these:
#column-content {
display: table-cell;
border: 1px solid red;
padding: 10px;
}
img{
vertical-align:middle;
}
it's the image you want to center.
Say, I got this code:
<figure>
<img src="bunnyrabbit.jpg" width="200" height="150" alt="An image of a bunny rabbit." />
<figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
If I don't use any CSS the figcaption will expand the width of the figure element beyond 200px. How can I prevent this?
I know I can force the text inside the figcaption to wrap by specifying the width of the figure element (<figure style="width:200px;">) but I don't really want to use this for each and every image.
Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.
figure { display: table; }
figcaption { display: table-caption; caption-side: bottom ; }
Adding display: table; sets the stage.
Adding display: table-caption; alone placed the caption on top of
the image, The caption-side property specifies the placement of
the table caption at the bottom, top is default.
This will place the figcaption side by side with the img:
figure {
display: table;
}
img, figcaption {
display: table-cell;
vertical-align: bottom;
}
figcaption {
padding-left: 4px;
}
Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:
figure {
display: table;
width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
display: table-row;
}
Another solution: Use Intrinsic width
Just set width: min-content; on the figure element
DEMO (Except for IE)
figure {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
<figure>
<img src=" http://placehold.it/200x150" width="200" height="150" alt="An image of a bunny rabbit." />
<figcaption>Bunny rabits are cuddly and fluffy creatures with big ears. They eat carrots.</figcaption>
</figure>
NB: Browser Support is OK, except for IE, however they are considering implementing this
Unfortunately, setting the width of the figure instead of using max-width: 100% means that it won't shrink on narrow (mobile) devices. That is, the images will not be responsive. I resorted to inserting <br /> to break up long captions, but I didn't like it. But this obscure CSS feature seems to work for me:
figcaption {
display: run-in;
width: 150px
}
This keeps the image responsive, even though the caption isn't. You can pick your own caption width. I also added margin: auto;
text-align: center; to center the caption on a mobile device.
This was really bothering me, because I wanted to find an answer to accommodate an upgrade to HTML5 that would successfully replace my original setup of displaying images and captions- a table with two rows (or one if no caption was available).
My solution might not work for everyone, but so far, it seems to do just fine in the major browsers (O, FF, IE, S, C), as well as being responsive on mobile devices:
figure {
border: 0px solid #000;
display: table;
width: 0;
}
The idea here is that figure is pushed into existence by the width of the img and so doesn't need any kind of direction.
figure img {
display: block;
}
This is used to rid ourselves of the useless, unsightly gap between the bottom of img and the bottom of figure.
figcaption {
text-align: left;
}
Now that figure has been pushed open just wide enough to let img in, figcaption text has only that limited amount of space in which to exist. text-align is not required for this solution to function.
This solution works as well as display: table-caption, but keeps figcaption contained in any border or background value that might need to be set.