Preventing the background behind from peeling through

HTML & CSS
1

If I wanted to lower the buttons, preventing the background behind from peeling through.

How would I do that? https://jsfiddle.net/z2ncg6Lp/2/

2

It is unclear what you mean and that demo doesn’t compare to the screenshot you posted?

What do you mean lower? Do you mean position them lower? If so then that just means changing their position co ordinates.

To do that the buttons would need a solid background but I don’t think that’s what you meant. I think you are asking something else but haven’t phrased your question carefully enough for me to know what you want :slight_smile:

3

Scroll down on page 2. https://jsfiddle.net/8w10mpvq/1/

If I make them lower the purple comes through.

The whole thing should stay teal.

How would I prevent that or fix that?

4

The problem is that you are absolutely placing the button further down than the container. The container background doesn’t follow an absolute element.

You could put some padding bottom on the container to give you room to place it.

e.g.

.container{padding-bottom:50px;}

(Note that the min-height:100% on .container does not work because you can’t nest min-heights with percentages as they default to auto. If it did work then you would have a bigger vertical scroll as you would compound the padding and min-height:100% anyway. I have mentioned this a few times that you should be using the border-box model where you add padding to 100%.)

5

So, I will use that here if I am able to?

How much would need to be changed?

6

There are too many elements where you have width, borders and padding so adding the border-box model globally would cause too many issues now.

I would just add it to your main container elements to avoid the vertical scroll when none is needed.

,container1{
box-sizing:border-box;
}

etc…

1 Like
7

Is this a technique you use, and should I do this?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Would I still need to do this also?

,container1{
box-sizing:border-box;
}

or, one thing has nothing to do with the other?

8

Yes I use that technique as a base for everything except in a better format and only for the box-sizing.

I use this:

html,body{
margin:0;
padding:0;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

I don’t reset padding and margin globally either but will be more specific or on a cases by case basis.

No.

You know what the universal selector * means don’t you? it selects every element.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.