How to make a cover image have a border (or margin) around it on all 4 sides...?

Hi! I am struggling with a task I thought would be simple. But somehow I seem to be too stupid for that…:

If you look at this site… https://www.weingutwittmann.de …you see that there is a white border around the image on all four sides. I tried to mimic this look, but whatever I tried so far I didn’t get a border at the bottom of the cover image. To be more clear: the bottom border was there, but out of sight since it is pushed down by the upper border. I tried it with margins and with a white border on all sides, with Foundation 6 and Source, but each time the bottom border is not in view on page load. Of course I’m doing s.th. wrong, but don’t know what. All I want is a Background (Cover) picture filling the whole screen, having a white border around it (either done via margins or a white border). Even better would be a slideshow with swiping capabilities on touch devices.
In addition I would like to have content below all that (which would be different from my example).

Any ideas how I could achieve this?

Section Pro and Box I’d suggest.

1 Like

You can set the height by using a calculation that takes into account the margin size (x2). e.g. calc(100vh - 40px)

1 Like

The issue you will have with a normal border is that normal borders are a fixed value and your Hero page will need to be a proportional value, so if you set a container to be 100vh (hero) and add a 20px border it will push the 100vh down by 20px and you won’t see the bottom 20px border. So you could set the border to 2vh and then the page height to 100-2x2 = 96vh. The important thing in this solution is to make the border proportional to vh and the total should be 100vh. (Adjust the 2vh to whatever you want)

Alternatively you could set a 2vh margin top and bottom and let the underlying white page show as a “border”.

That’s pretty much what I did in this demo using Source -https://www.webdeersign.com/xdemo/ which required multiple vh calculations for the whole layout to adjust as one layout.

Now that Source Coder is released you could probably do it with less:)

There are probably other ways to achieve this layout, but it is much more challenging than most would image.

1 Like

Brilliant. That would work and the user can just paste that value into a Container height boxes without even needing to enter a Class name.

1 Like

as per @steveb SectionsPro will do this without any messing around regardless of the height, borders are never pushed out of the container at the bottom. (You also have the new version which will also work!)

1 Like

Thanks for all your replies, guys. You’re great! This is how far I’ve come until now:
https://www.wolf-websolutions.de/test/

The image and border is done solely with Sections Box, the buttons are placed with Sections Pro. Will also try to get there with Tavs ‘new version’, but maybe wait for the next update? @tav

2 Likes

I have never thought to put a border around a “hero” header, it looks brilliant. Will be doing that on a design soon.

1 Like

If you wanted to do something pure Source, that is a really nice trick. Works a treat.

3 Likes

No, no, no, no no; Just use the correct box sizing setting and not calc() !!!

The box sizing method is quite simple when set correctly to make margins go outside and borders go inside.

If you have a 100vh box and you want to see its borders then just set
box-sizing:border-box
almost all RW themes default to this because it is the “intuitive” layout behaviour for most people.

There is absolutely no reason in my mind to set something to deliberately have the borders outside the div so that they are forced off screen and then have to remediate this by reducing the div by the size of the borders using an inflexible calc statement. (Inflexible because is only works when prop to browser height and requires media queries to handle different sizes on mobile).

The browser rendering engine already has all this built in to it via the CSS specification of box-sizing. Let the browser do its job and handle rendering.

Here is a code pen - just remove the box-sizing line and replace it with a load of calcs if you want to but why would you? I thought everyone was obsessed with less code.

2 Likes

I’ll look at this in Source as yes it should work that way and that’s how I did/do intend for it to work.

I think there is zero issue though to using this as an alternative approach:

div{
	height:calc(100vh - 20px);
	background:red;
	margin: 10px
}

How does that work in real terms? With say Source? @habitualshaker

I am in process of moving house this week but I’ll look at it as soon as I get a chance.

1 Like
  1. What about if you want a different height for mobile (many do not want a 100% heigh banner on phones from experience) - you then need a media query.

  2. It does not work for anything other than browser height based things - what about videos and other aspect ratio controlled things

  3. One line of css *{box-sizing:border-box} will always be better than individual calcs all over the place. I saw a debate about the merits of 10kB the other day.

  4. The browser does these rendering calculations in compiled C code - why would we want to replace them with a slower and less flexible alternative in interpreted text code.

  5. The box-sizing model is the way to control the behaviour of margins and borders according to the CSS specification - why re-invent the wheel with something more complicated, less cross browser compatible and less flexible.

  6. Rightly or wrongly, almost everything else in RW works on box-sizing border box - this is how people expect it to behave and given that users are non coders then this is undoubtedly the preferred behaviour.

  7. There was a similar debate last week when a developer was wondering why people were having inconsistent behaviour with his stacks in different themes - turns out that it was border-box. It would be a shame if every stack had to introduce replicative code in order to overcome these issues to the detriment of most users.

  8. I am fitting a window this morning. Would anyone advocate that I buy one that is 40mm too tall, hire a disc cutter (Stihl of course :) ) and remove 40mm of my masonry so that it fits?

There are 8 reasons to kick things off.

Forgot the change in vh reported by iOS when browser chrome appears and disappears

  1. The calc would be added into the Source Container stacks where you can specify a height for each BP so would already be wrapped in the required media query.
  2. That’s a different scenario to what we are talking about in this thread.
  3. Yes. As I say Source should work this way (and will after I look at it). Border-box is set up to be used.
  4. OK
  5. See 3
  6. See 3
  7. See 3
  8. No. But the alternative CSS method described is non-destructive.

No, obviously not.

This is RW, so it’d be Black And decker at best, most likely Parkside though.

Also, if you haven’t accounted for a margin of some sort in your measurements then good luck getting it in the hole ;)

You have to think like a builder which is in may ways, is how many Weavers would provide a solution.

Choose a window that’s too small and fill the gap in with bog roll, marshmallow, whatever comes to mind and cover over with plastic offcuts from the last job or collected from those convenient fly tipped mounds of UPVC offcuts that are located 100 yrds down every country lane. Or in RW terms fill the gaps with large Icon downloads, extra fonts or those Jack picture frames.

Joking aside, great that there are now so many ways to skin this cat.

1 Like

Here is an article on box-sizing if anyone is interested. If you know nothing else about building websites then how the box mode works is one thing that it is worth understanding as it is so simple and so useful.

The issue of using calc with browser height on iOS devices is one that generated many support tickets from @Webdeersign w.r.t Impact and Target back in the day. Bear in mind, the way that iOS affects this has got worse not better since then.

1 Like