Those styles exist(ed?) on the current stylesheet, newhtl1.css, and they affect all pages that use that stylesheet. It’s not unique to the discontinued HTML page.
Please point me to a location (URL) where something is poorly affected by changing those margins.
Removing “overflow:hidden” from #content-inner is based on the pages that I saw and the belief that nothing needs to float within that middle column. Again, point me to a URL where that causes problems.
Until this moment, I would have asserted that there is nothing within the center column that requires action by a media query; however, if you want #box4 to abut #box1, just negate the brown bottom border on #box1 at narrow widths via a media query.
I may have crow for dinner, but I hope not
The images that you have chosen for the “wow” pix are very attractive. That additional 10px of height (brought about by deleting the margins on #box1) makes a noticable positive difference to me.
I hope I did not suggest that anything was affected. It was not! Everything looks fine. There was only a minor change in large2 which I have corrected alrready
The only problem with the page is the way the page does not work below 330px, especially the map that overflows at 330px even if it is only 300px wide.
I have to leave this for the morning, but from your explanation and thr last image, I wonder why the left border has disappeared, if all is as it should be
I deleted the MQ below but it made no difference. The map, the text, and everything else gets cut on the right, overflows and stops being responsive from around 340px, whether that piece of code is there or not.
I don’t have these problems in, say, http://pintotours.net/Asia/Indonesia/transport.html where the page responds all the way to the very minimum, even though the code for img-container is the same in both stylesheets.
I asked because I am not aware of any way that other images might be adversely affected. Just like with the “Pau’ls code and buttons” issue, I am asking you to enlighten me. Please clairfy what I am missing… what I do not see or appreciate?
Thank you, that is PROGRESS!
I am attempting to do this in a “teaching” manner instead of a “do-it-for-me-quick-fix” manner. Explaining stuff takes a little longer. Thank you for your patience.
I think you are saying that the page stops being “fluid”. In other words, nothing changed. Good, that is progress, too.
That page uses a different layout that I have not examined and we have not talked about and. I do not know about the code on that style of page. My objective is to make the most common page work properly. If I’ve explained it adequately, and you have understood the methodology, then you should be able to expand the concepts to other pages if you have the patience and desire, I suppose.
Please do not bounce between pages. Pick one and let’s stick with it.
The code that you are deleting is “junk code”… unnecessary code that has crept in over time. Starting with a clean slate is the best way to add only that which is needed.
First and foremost, as I said earlier (taken out of context),
I have not seen anything in the center column that NEEDs media queries to control the layout.
If you have code controlling something within the center column, you most probably do not need it and it should be moved outside of a media query and commented out for evaluation purposes or deleted altogether.
this morning’s questions are about code choices
The appropriate choice of code sometimes depends on the target audience of users.
Who is your target audience of users? Are they most likely to be using modern devices and browsers newer than IE8? (You appear to be coding for most devices in use today, not the oldest. I just want to be sure you agree with that.)
You are probably familiar with the standard CSS Box Model. (If not, speak up) Are you familiar with CSS3’s {box-sizing:border-box} property? It allows padding and borders to be included in the width value of a box. It simplifies code. In the case of the map image containers, we would only need to add one box instead of two. I recommend using it.
Please pick one of the newer looking pages (preferably in a test environment) that uses the newhtl.css or newhtl1.css and we can continue onward.
Will you be around this weekend? If yes, let me know what hours you keep and I will try to match them (and your time zone). Keeps the messages short and easier to follow.
Please ignore the “other images” issue
OK, lets stick yo the Japanesa pages based on newhtl.css
In fact, if you delete at MQ1020 the following #box1 at leatst, gets screwed up
.img-container img{
width:100%;
}
Yes, modern browsers including IE8
Hi. the problem here is that I must get on and try to make the most of what I have with minor modifications. If I had to start all over again, I would just give up.
At the moment I am quite happy with the pages and I have tried them on small devices and other than the map’s right border all looks good. If there is a quick and easy way of solving that, I would be grateful if you could point me in the right direction. If it is complicated I will just leave it as it is
.map a {
display:block;
padding:0 4%; /* minimum white space beside image. these right and left paddings are a guess. change to suit. */
outline:1px dotted red; /* TEST Outline around anchor. To Be Deleted. */
background-color:rgba(255,0,0,.075); /* TEST BGColor within anchor. To Be Deleted. */
}
.map .img-container {
max-width:292px; /* border (2x2px=4px) + padding (2x2px=4px) + max-width (292px) = total width (300px) */
border:2px solid blue;
background-color:#fff; /* color of the 2px padded space */
padding:2px;
margin:0 auto;
}
Unless I have made a blunder (which is always possible), the “wow” image and the image map should display as expected.
I copied the Kyoto page and the css across to the Desktop along with the images to test the changes to the css in Notepad++
So far, I only amended the code you gave me in your last post and the map now stretches all the way across taking 100% of the space availble even though the image is only 300px wide.
Are you suggesting that I used a larger image?
If I add a max-width:300px it affects the other image in #box1
