It looks like you want two rows of images. One row of three and one row of 2. Are the rows supposed to be of equal width? Are the images supposed to touch one another or is there space between them?
CSS is not psychic. It styles the HTML on the page. Different HTML requires different CSS. CSS needs to be customized to fit the HTML. HTML structure first, CSS second. Not the other way around. That is why we seek common patterns in the HTML that can be replicated on different pages … so the same CSS can be used on different pages. If you change the HTML, you must change the CSS to fit it. Not the other way around.
I am only playing with the images to try and understand them before deciding what I want to do, but basically I would like to see how to handle multiple images iside by side, say 2 rows of 3 and 2 rows of 2.
My understanding was that wrapping the image in a div and giving the div width.100% was all that was needed, but it appears that only works sometimes and for single images.
Yes, of course it did. The important thing is that you understand the reason it fixed the problem so you can apply it again when needed instead of being perplexed. Perplexed is not a comfortable state of mind. Table-cells used as columns are routinely assigned {vertical-align:top}.
The rows of images…
Think about the total width of three images in a row. That total width of the container is 100%… therefore, each image can be no wider than 1/3 of 100%… or 33.3%. Two images would be no wider than 50% each. It’s useful to be able to visualize the images as fractions of a whole row, then style accordingly.
Does this help you understand the concept of widths?
If practical, I like to put a row of images in table-cells and let the table do the math for me. but floats and inline-blocks can work just as well. Depends on the context.
Perhaps @SamA74 will be able to provide some practical guidance for you.
If you want the the images centered in their row, then set the img-container to text-align:center; and do not float the images (the float overrides display:inline anyway). The images will center within the available space.
Delete the padding around the images. Use margins instead.
img-container is a block that does not need width:100%.
See what that does. (I’m not looking into the media queries).
.row {
display: inline; /* DELETE Me. .row is a block by default. Definitely not inline. */
}
Most of the following styles seem to be unnecessary unless you know otherwise.
.row .img-container {
border: 0 none; /* There is no border to negate */
border-radius: 0; /* The container is invisible */
margin: 0 auto; /* The container is a block with no width. */
padding-top: 0; /* There is no padding to negate */
text-align: center;
}
If the Cobbler’s Cove image is a significant part of the content, then it would normally be a foreground image (if I understand the question correctly). Let’s see the context before deciding.
What I want to do is to add a box below the images like the blue one in the attachment. Should I use Gimp and somhow add it to the image before uploading it, or (preferable) is there a way of adding it through css?
Do you want to add this “title-caption” box below all of these images or just the new Cobbler’s Cove image? (I understand that the first two rows of image were experiments.)
At the moment I only want to know if it can be done with css, and if so how. The images are just tests, and so is the text,
I am just looking for answers before I pose the questions…
Assume that want to add “title captions” below each of the suitcases and that the captions are all different, and that I want them to look like the one in the Cobbler’s Cove attachment.
EDIT
border-bottom:50px solid blue; ??? and the text?
GOT IT!!! Have a look
how about the text?
and it gets too deep as the image’s wirdth shrinks…
I am going to belabor one important point that keeps creeping into the conversation. Nothing can be done with CSS without HTML. You seem to ignore the importance (basic need) for HTML. All the CSS in the books cannot do anything without HTML to act on. </rant>
In other words, with the proper HTML, the box can be added with CSS. The text can be added with the proper HTML tags and styled with CSS. It’s a hand-in-glove togetherness thing.
That’s what I was gathering. It means that the image HTML and CSS will have to change.
A border is solid. Can’t put text in it. You can position text over it absolutely, but you need a relative container and an image is not a container.
(Sorry, but my code from the previous thread with the div around each image is looking better and better as your wishes flower.)
Did you hear the part about needing a relative container? Different structure.
I would opt for a different structure entirely. No positioned elements. Yes, the text can remain centered within the box (not border) beneath the image, but the height of the text box cannot be guaranteed.
yes, I will have a gooood look at the earlier thread.
meanwhile I have been playing with Gimp and it seems that maybe creating the whole thing as an image will be the easiest way of getting the total image with border and caption to work
Both sliders “rotate”, but neither slider scales down at narrow widths. They appear to behave identically to me. You are saying that one behaves differently?
On line 46 of NewIndex.html, I changed {width:600px} to {max-width:600px} and it seems to shrink at narrow widths. See if that works for you.
.single-item {
background: white none repeat scroll 0 0;
margin: 20px auto;
max-width: 600px;
text-align: center;
}
Worse the arrows on both sides are invisible because they are white like the background. I found the code in the script slick-theme.csss and changed all to black but it made no difference!
In any case this scss is not one of the stylesheets in the html. Can’t figure our what it is and why the extension is .scss
