How to have background color

[newcoder1010]

Hi,

 

html:

< body role = "document" class="html not-front logged-in no-sidebars page-node page-node- page-node-16 node-type-webform toolbar toolbar-drawer">
............
<div class = "Very-Top2">

...

</div>

............

</body>

CSS:

  .Very-Top2 {
	margin-top: 115px;   right: 0;left:0;background-color:white; 
 }
 .html {background:red;}

When I go to my page, I expected page to be with red background and very-top2 class should be white background. But I only see red background. How can I have white background for the very-top2 region?

 

Thanks.

[Ingolme]

That depends on what is inside the element. If it's empty, there will be no white background. If all the elements inside it are floated or with absolute position then there won't be a white background either.

[rainwater]

does this help at all? http://www.w3schools.com/css/tryit.asp?filename=trycss_background-color_elements

or maybe do a search on the w3schools for the background code you are looking for.

[newcoder1010]

This is my page. If you could inspect in chrome and help me with the css, please. http://godrupal.info/xpressauto/?q=node/16

 

Background concept I thought is easy. I applied many times. This time I am just not getting it.

[dsonesuk]

Its NOT all elements, its elements within 'Very-Top2' that are floated (section elements using bootstrap 'col-**-**') where its direct parent can't distinguish the area occupied by floated elements so the height becomes 0.

 

A fix would be to apply overflow: hidden; to the floated sections direct parent.

<div class="region region-main-verytop2">
...
</div>

[newcoder1010]

Thanks.

[Ingolme]

It looks like you're using bootstrap. If you're using the col-* classes they need to be wrapped in an element with a row class because the col-* classes add a float property to the element and floated elements aren't taken into account when determining the height of their parent. That results in the parent having no height, so the background color is not visible.

 

The other thing I noticed on your page is that both Very-Top2 and the elements that follow it have a white background, so you won't notice anything until you change the background color of one of the other elements so that there's something to contrast it to.

[dsonesuk]

Belay that instruction to use row class it will cause more problems, because you are using full width design, you will have to remove guttering of padding and margins either use my suggestion or use class clearfix.

[Ingolme]

Bootstrap in general is a bad idea, but if you're using it you might as well use it as they intended it to be used. That means you must have a parent "container" or "fluid-container", inside that you need a "row" and inside the row you use "col-*" classes.

 

The row applies a negative margin which is equal to the padding provided by the container.

[dsonesuk]

Bootstrap in general is a bad idea, but if you're using it you might as well use it as they intended it to be used. That means you must have a parent "container" or "fluid-container", inside that you need a "row" and inside the row you use "col-*" classes.

 

The row applies a negative margin which is equal to the padding provided by the container.

Unfortunately you don't realize that 'fluid-container' or should I say 'container-fluid' does not exist in the sites version used, it was removed then reinstated in later version, so again DO NOT USE 'row' class.

[newcoder1010]

Thank you so much.

[Ingolme]

Unfortunately you don't realize that 'fluid-container' or should I say 'container-fluid' does not exist in the sites version used, it was removed then reinstated in later version, so again DO NOT USE 'row' class.

I didn't memorize the class name for it but it doesn't really matter, I would certainly check the reference if I were actually using bootstrap.

 

I don't see why you insist on doing things the opposite way the bootstrap documentation says.

[dsonesuk]

That is the way for that version without screwing up the design and having scrollbars, if the op wants to update then fine, but with sites current version you were allowed use a none styled container so it filled the screen by default for mobile, using this method he would not need to worry about upgrading as the result would be the same, and you are the one going on about doing IT WRONG for current bootstrap version NOT ME!

[Ingolme]

http://getbootstrap.com/css/#grid

The current version of bootstrap has the container > row > col hierarchy. That's not me, that's how bootstrap 3 works.

[dsonesuk]

Yeeees but! not! for! a! full! screen! fluid! container!, only for fixed, won't work for the op current bootstrap version it is currently using, BECAUSE CONTAINER-FLUID DOES NOT EXIST using row in his version causes scrollbars to appear. For someone who stated he is anti bootstrap you seem to bo going all out to be pro bootstrap all of a sudden.

[Ingolme]

I don't need to be ignorant of something to dislike it, I've had to work with bootstrap for clients before. It would be foolish to dislike something without knowing what it is first. I also am familiar with HTML 3.2 and have the skills to build a site with it if it was necessary, that does not mean I like it.

 

I did not check what version of bootstrap he was using, that's quite an old version, I did not expect any sites to still be using that today.

[dsonesuk]

Then you should learn to read the posting here, before ranting on how you should use row class in bootstrap when it is plainly mentioned in post 10, 12, 13, 15 that the version the op is using does not support 'container-fluid', and therefore using 'row' class on its own in this scenario is totally wrong resulting in horizontal scrollbars. The op version at the time allowed users to use custom block elements using there default styling to fit full width, only with version 3.1.0 was 'container-fluid' reinstated.

[Ingolme]

Since he's loading from a CDN is would take very little effort to update Bootstrap to a more functional version.

[dsonesuk]

But! he has NOT! And covered in Post #13, you really should read the posts, it would save all this repeating of the same solution you seem to provide, and enable you fully understand why your solutions would not be advisable under certain circumstances such as in this case bootstrap version.