I need a little help. I’ve been re-working the skin on my b2evo blog and have got a little stuck, or at least I haven’t found quite the right search criteria to answer it for myself.
I’ve knocked up a Codepen simulation of the issue. What I’m trying to do is to make the header image scale down responsively as the browser viewport it reduced in size. Currently, as the viewport reduces, the image is cropped at either side, which is the result of the height of the <header> tag being set to 300px to match the image height. I’ve tried a number of ways to get round the fixed pixel setting, but that <header> tag just keeps collapsing in on itself.
The second question is how do I get the menu options to center? Again, things like having margin: auto auto; set on its container don’t seem to be doing the trick. for me.
It works if your content is above 960px. Max-width:960px; means it will filll the full width but stop at 960. Your margin:auto does center.
Your image probably needs to be reworked. If you want a 300px height constant than you need an extremely wide image to ensure all screen widths are fine.
The overall text content area is centering OK, but I’m trying to get the menu options (not hyperlinked here) to center within that. My guess is that I need a slightly different technique as it’s based on a list with display:inline; applied to it.
I’m happy enough with the image at the size it is for now, as I want it to be able to fill larger screens without losing too much image quality. The only reason the height property is set, is to prevent it collapsing in on itself - it stays full screen width, but gets cropped top and bottom.
I want it to retain its aspect ratio as the viewport reduces in size, so I’m expecting it to reduce in height, not stay at 300px. That height attribute is only there at the moment so that the image remains fully visible.
Am I any clearer on what I’m trying to get to? I think I missed slightly first time.
Correct. For centering inline elements, text-align:center needs to be set on the parent. That’s the easiest. So, for example, a text-align:center on the <ul> would do the trick.
What will this image be used for? Will content be over top? Is it its’ own separate section?
It is intended as the page header, though it will have some text sitting over the top of it; basically the site name/title (H1) and a separate line below it (H2) as a sub-title.
One option might be to embed the image within the HTML itself - inside the <header> tags, instead of the using the CSS background, then handle the title/sub-title within a <div> or <p>tag and position it over the image using CSS.
In a way I’m quite flexible as to how it happens; I just need to modify the PHP skin file to output the right html.
My aim is to get the html to a good state so I can start moving it towards being fully responsive and so that it will behave itself once I start introducing media queries. There’s a bit of a way to go on it yet, but I’m trying to get the basic structure and site layout right first.
I’ve had another look at this now and am unsure about embedding the image in the PHP file that’s generating the HTML. Not because I can’t do it, but because I’m thinking that I’d eventually like to offer the skin up for others to use. I’m expecting that most would likely want to insert their own image, but they may not wish to poke around in the PHP file. I’ll give it a little more thought though - I’m sure there’s a way round it.
The menu is done now, though it took a little more than text-align: center; to get it right though. There was a right margin I needed to remove from the last item in the list, and it found there was a float: left; on every list item is not noticed. Everything is now nicely centred.
