Position Absolute and Responsive Design

HTML & CSS
1

I am having a go with the new WordPress Twenty Fourteen Theme. It enables the addition of a wide header image as an option but this is separate from any content i.e. no site title or tag line. So I think I need to use position: absolute to get what I need.

I have squeezed a bit of content in using a hook and action (first time ever) and can sort of, kind of, get near to what I want.

Here’s the page: martcol.co.uk/bryan

You can see that the header image is an old building and the title is Bryan Ellis and then there’s his logo. I want to get those two elements to sit nicely together in the center, side by side. To add a border and a transparent background. After that, I want them to behave nicely on small and smaller devices. I can do the @media query thing OK but I haven’t started on that until I can get the behaviour I want on these particular elements. I guess I will have to find the break points to change the font size and then work out how to make the title and logo stack and center in the header on smaller devices.

I know the site is very ragged but the rest of it is smaller stuff and this one is a big thing for me. I want to crack this before moving on or I’ll spend a lot of time tarting things up and then still fail on this. If you think it can’t be done, just say it and I’ll take the coward’s way out and put the whole thing in the image.

Thanks for looking,

Martin

2

Let’s start with the logo.

Add this code to your local stylesheet. (This will replace the code on line 148.) The purpose is to remove the default vertical margins from the <h1> tag and reduce the separation between his names.


div.header-image-left h1 {
    line-height: 1.25;
    margin: 0;
}
3

Thank you @ronpat

I have added your suggestion and started to experiment with CSS display: table properties.

Getting a bit closer but I reckon moving on to the responsive bit will turn me inside out!

Thanks again

Martin

4

You further mentioned a border and a transparent background, but I am not sure where those items are desired. If you can describe their whereabouts more clearly, perhaps we can help.

5

@ronpat thanks again

I think I might have made a little more progress here and have uploaded my tinkering to my dev URL martocl.co.uk/bryan/

The border I am after will be on the whole element that contains the text and the logo.

Thanks

Martin

6

You can try something like this. Add this to your local stylesheet.


[color=blue].martin-header-image {
    border: 2px solid #000000;
    margin: 0 25%;
    padding:0;
}[/color]