Jump to content

How to have background color


newcoder1010
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...