newcoder1010 Posted March 4, 2016 Share Posted March 4, 2016 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 More sharing options...
Ingolme Posted March 4, 2016 Share Posted March 4, 2016 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 More sharing options...
rainwater Posted March 4, 2016 Share Posted March 4, 2016 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 More sharing options...
newcoder1010 Posted March 5, 2016 Author Share Posted March 5, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 5, 2016 Share Posted March 5, 2016 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 More sharing options...
newcoder1010 Posted March 5, 2016 Author Share Posted March 5, 2016 Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted March 5, 2016 Share Posted March 5, 2016 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 More sharing options...
dsonesuk Posted March 5, 2016 Share Posted March 5, 2016 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. Link to comment Share on other sites More sharing options...
Ingolme Posted March 5, 2016 Share Posted March 5, 2016 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 More sharing options...
dsonesuk Posted March 5, 2016 Share Posted March 5, 2016 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 More sharing options...
newcoder1010 Posted March 5, 2016 Author Share Posted March 5, 2016 Thank you so much. Link to comment Share on other sites More sharing options...
Ingolme Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
dsonesuk Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Ingolme Posted March 6, 2016 Share Posted March 6, 2016 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Ingolme Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
dsonesuk Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Ingolme Posted March 6, 2016 Share Posted March 6, 2016 Since he's loading from a CDN is would take very little effort to update Bootstrap to a more functional version. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 6, 2016 Share Posted March 6, 2016 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now