Hi
I am using the css of the page I just finished and cannot understand why the images are not responsive, and why the sidebar moves down with the main content…
http://pintotours.net/TEMP/FRONT/NewIndex.html
Help!
#main is a table-cell. Table-cells align at the baseline by default. It is usually advisable to set the vertical-align to top.
#main {
display: table-cell;
vertical-align: top; /* ADD Me */
width: 70%;
/* height: auto; /* DELETE Me. I'm don't belong here */
background-color: white;
}
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.
2 Likes
Hi ronpat
Thanks. That solved the sidebar problem.
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.
…one little step forward…
The images only start responding after @720
before then they do not and float:left into a new row when they need space.
I tried to get rid of the float:left with float:center, float:none, and replacing with text-align:center but nothing works.
What am I missing?
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).
Hi ronpat.
Success!!
This is what I got now and it works fine all the way
.row{
display:inline;
}
.row img{
display:inline;
max-width:30%;
height:auto;
}
.row .img-container{
margin:0 auto 0;
text-align:center;
border-radius:0;
border:0;
padding-top:0;
}
I want to add a box like this (Cobbler’s Cove) below the images. Is this a css job or do I have to import the whole thing as an image?
Looking at your code at this moment, I see:
.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.
Hi
I made the changes. It all looks good.
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…
OK. 
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.)
But will the text remain centered in place as the screen narrows, i…e. will it be responsive?
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.
Hi and thanks
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
1 Like
Hi ronpat
I hope you’e still around
I was feeling pretty smug having managed to get a rotator for my images, only to find that the rotator is not responsive!
http://pintotours.net/TEMP/FRONT/NewIndex.html
Help!
Hi
The strange thing is that the same code works in small screens in simpler pages like
What does this phrase mean?
Show me the HTML (and CSS) for the one that works, then let’s compare them.
Hi ronpat
You ahve the urls above in posts #16 and #17
the first is the skeleton of the new page.It is not responsive in a small mobile, as tested on one.
The second displays fully in the same mobile…
I need to get the one in the full page to be responsive.
I am basing the slider on http://kenwheeler.github.io/slick/
It should be simple, but with me around…
EDIT
The full page display well in a small tablet but not in small mobiles.
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;
}
EDIT:
On line 55 on NewIndex, I see the following which is missing from
http://pintotours.net/TEMP/FRONT/slide.html
.single-item img {
width: 100%;
}
Both pages need those same items.