I have styled the menu a little different, swapping the border for an inset shadow made setting li width by % simpler. I also made the drop-downs a darker green because when the menu folds to multi lines it gets confusing.
I see your mobile menu, I will consider something like this. For now my aim is to get a fully working improved version of the site live. Then I can take more time to refine it further. I may also hamburger the sidebar too, now I have it condensed to show/hide links.
Yes, I’m working on in now (not going out in this weather) and have fixed some of the issures myself. This one was still a mystery, but I fixed it by setting top: -6px to nudge the menu up over the gap.
Fixed already.
That works
I had tried removing the height setting, but it just went thin with the text below. The overflow fixed it, I would not have thought of that. Good point about centering the text, that will look better when the two overlap.
The poppy is scripted to only display at this time of year, around Armistice Day, except on the “Roll of Honour” page where it appears all year round, so this is a good time to test this.
I had also noticed the horizontal scroll and it was bugging me, I didn’t twig it was the poppy, as I thought I had it contained, but it is that bit of shadow creeping out.
Just tried fixing it by setting right so it is contained, but I still get the scroll bar. Don’t know why that is.
It was the menu, a few tweaks and I now have no horizontal scroll bars.
Just one side effect, since I made the tweaks, to top padding on the menu text does not work like before. I would like the text verically centred, not nearer the top like it is now. If I add the 5px top padding which centred it before, it offsets everything in the menu. Anoying that it worked well before.
Other than that (which I can live with for now) I think this page is now good enough to go live to the mobile gadget weilding public. I will not do that though until I have all the pages modified to work with the new CSS. I’m hoping it will not be too much work, since most of it is already done in the CSS, I will just need to add the extra links and ID’s here and there. Though there will be other elements to tackle on the other pages such as tables, forms and iframes.
Ok, I can see where you mean now and the gap is because your header image is an inline element and inline elements are placed on the baseline just like text (not the bottom of the element concerned) so that there is room for descenders under the text. If the image was on the same line as text then the image would align with the baseline of the text (not the bottom of a descender).
The solution is simply to set your image to display:block and the gap disappears as it is no longer an inline element and gets placed at the bottom without room for descenders. Setting the vertical-alignment of the image can also cure the gap but the safest method is to set the image to display:block. If you need inline images then set vertical-align:bottom for the image to kill the gap.
As a default I always set images to block in my reset styles as 99% of the time that is what I want. If I need them inline I can add a class when needed but most of the time block is what you really want anyway.
I did not know that. I did not even know the toppic was displaying as inline since I never set the display property for it. Block does the trick.
That does it.
Thanks for all your help. I don’t know how long I would have been banging my head against the wall trying to work these things out myself.
Now for the other pages…
There is another thing I could use some advice on. How do you make things, such as an iframe, maintain aspect ratio when scaling down?
I have it working for pictures by not defining a height. But with a iframe I have to define height and with to set the correct aspect ratio for a video for example. This is a page I’m working on with a video iframe.
On the map iframe on the Roll of Honour page I used vw for the max-height to keep some sort of aspect ratio, but with video it crops it. Also I understand that vw is not so well supported on older/poorer browsers.
I think the problem is something peculiar to the videos embedded from IWM. The third video linked on the page (Sherman M4 DD) is from Youtube and that scales OK, but the first two from IWM will not scale, the frame does, but the video size is fixed so gets cropped.
Yes, the problem is that although the code I suggested will resize the iframe it won’t actually resize the content in that iframe and the content will be clipped. It is impossible to alter the content in an iframe unless you own the server on which it is displayed because only changes in that particular page will affect the elements in that page.
If the video in the iframe was set to 100% (in that iframe page) then it would scale with the iframe container but it has been set at a fixed sized which you can see if you look directly at the content. I don’t believe there is a workaround for this other than to clip the video or hide it on small devices.
It’s been a while. I got distracted from this job with something else, back on it again. I now have the new responsive design and CSS on the main puplic site. I thought it was now good enough to go live. There are still improvements to make though, and one or two things I overlooked.
One of the main things to be addressed is the scaling of pictures embedded via the Panoramio API. This is done with JS, there is an iframe version of the API, but that does not allow you to choose a specific photo by ID, so no good to me.
A good example of a page using such a photo is this one, towards the end is a nice photo of the cemetery.
On a page using the API is this bit of script:-
<figure id="fig_photo" class="panpic"></figure>
<script type="text/javascript">
var picselect = { 'ids':[
{'photoId': 72780109, 'userId': 1212538}
] };
var photo_ex_options = {'width': 870, 'height': 385};
var photo_ex_widget = new panoramio.PhotoWidget('fig_photo', picselect, photo_ex_options);
photo_ex_widget.setPosition(0);
</script>
This puts the photo within the ‘figure’ tags at the given size, which of course does not scale. I’m guessing the solution is maybe with the JS rather than CSS in this case, but I’m not too good with JS.
Any ideas?
I just get a black line across the screen, but thanks for trying.
I wondered if there was something could be added to the script, so it gets the screen width, and alters the image width and height accordingly within the script.
Or maybe something like those videos,nesting divs.
It would be very easy to just link to the image in the normal way, () but I’m not sure Panoramio allow that. I think you have to go through the API to be legal. I may read up on that again, it may be OK if the picture is properly credited and linked to.
It will allow the image to get smaller or larger and maintain aspect ratio but the black overlay will be visible at the bottom on smaller window sizes (I have checked this by copying your code locally to get a working version).
I think any further enhancements would require some complicated js.
I had a go with this and managed to reduce the black at the bottom, using a div container like that used in the video examples. This had the side effect of cropping off the attribution block, but the API gives to option to hide it and display the attribution as a separate block from the photo. Only trouble with that is the attribution block is also fixed at a set width, so I have to have it short, on two lines even on a wide screen, so it does not go off the edge on narrow ones. Messy, but I will have to live with that for now.
There was one glimmer of hope when I discovered that the width, height options were optional, thinking that would give a 100% size picture, but it just defaults to a set size, 400x300 I think.
I think I will need two classes for the API. I did say that page was a good example, because it is a big wide photo, but it is not typical of my use of the API on the site. In all other cases the photos are smaller and floated right, rather than almost full width centre.
In cases like this page, it is small enough not to be a problem (see churchyard photo near the end).
So here is another example of a smaller photo floated right, the Lagoon photo near the end. I will probably try similar css here.
I think I have sussed the smaller photos, that was easier than I thought. A new class “pancont” to wrap around the div for the photo with a max-width set and media query to change from float right to none on narrow screens, I set the width in-line to allow control on a per picture basis rather than the whole class. I didn’t have to use any dirty trickery for it.
I still get the black letterbox effect, but it’s not such a big deal here with the picture not reducing that much in size from the wide screen.
