Now I have my SVG issue solved (Thanks @ralphm) , I can get to the real problem.
I’ve put up a new Codepen for something I’m working on at the moment. The bulk of what I need is created, but I’m having two issues:
Whilst I’ve fixed the header in position at the top of the page, part of the remainder of it is hiding behind it. I’ve been trying to use the technique of creating a duplicate heading, and then hiding it using visibility: hidden;, just to hold the rest of the page below the header. Right now, that’s not working, and several attempts at re-structuring the code isn’t having the desired effect.
The image I’ve created is also sitting below the header, where it should be sitting to the right-hand end of it. I’ve tried using float: right;, but that hasn’t been too successful, which is why it’s currently commented out in the CSS.
It’s actually very close to what I’m looking to achieve, but everything I’ve tried to date has just ‘broken’ layout in a different way. What am I missing?
PS. It’s worth noting that I don’t want to fix the height of the header block, as I need it to be flexible to accommodate more/less content as it’s created. Eventually, this will be used with dynamically generated content - I’m just mocking up what I need for now.
I just got to work, and it’s a bit early. Haven’t had my morning soda ( ). I’m having trouble understanding your exact requirements. Could you do a sloppy photoshop job real fast, showcasing which elements you want where? Doesn’t have to be a good job, just so I can see.
Maybe I can do it here. If you compare with the Codepen, you can see the logo has been moved up and right to roughly its intended position.
You can also see that part of the top table has disappeared behind the header - it just needs to come down and be positioned so that all the table and the H3 header immediately above it is visible.
Well you don’t need #visible{} to be position:fixed since you alerady give the #fullwidth{} a position:fixed;. Then just add back in the floats. http://codepen.io/ryanreese09/pen/VLKYqX
I removed that visible element in the HTML since that was doing nothing.
The easiest would be to give it like 70px top padding (for users without JS - they have SOME padding. Play with the value), and then for users WITH Javascript…just add a padding-top to <body> equal to the height of the blue bar. Pretty simple Javascript.
I mean, technically you could duplicate the HTML and provide a non-fixed version of the blue bar…visibility:hidden; that. But that is duplicate content…
I don’t think you can do what you want with CSS only…perhaps I’m overlooking something obvious though.
I actually using a jquery sticky plugin which will take the static blue bar, and upon scrolling down, it will make it fixed. That way, if users have JS enabled, they will get the fixed header upon scroll down. Users without JS will get a standard regular header (non fixed.)
Well I’ve been travelling a little since I last looked at this and am now back in the UK - having recovered a little, I’ve been having another go. I’ve fixed few HTML errors I’d made which has cleaned things up a bit. The end result of which has ended up in another Codepen I forked off the original above.
As you can see, the main body of the content is still partially hidden by the fixed header. I’ve been having a look at where the missing content has gone in Firefox, and what I’m noticing is that the <header> is collapsing; it’s content (.leftfloat and .rightfloat) are not holding the header open. In fact the only height the header has is the 15px padding it’s been given top and bottom, with both the text and logo spilling outside its container.
Can anyone suggest why the <header> doesn’t seem to want to honour its role as container for its child elements?
Oh, I wouldn’t worry about the duplicate content inherent in this approach, it’s the basis for something in-house, so will never be subjected to validation out in public, or have to grab itself a page rank.
That’s all working fine now, and it even clued me into why only the 15px padding-top CSS was working, but not the padding-bottom. Now, onto the next challenge…
). I’m having trouble understanding your exact requirements. Could you do a sloppy photoshop job real fast, showcasing which elements you want where? Doesn’t have to be a good job, just so I can see.
.
(jk).
.