This is the page: http://aszx.altervista.org/aatest/
As you can see from the source code, the #news, #news-1 and #news-2 have this rule:
background: #F2F2F2;
Could you tell me why the background doesn't change and it's still white ?
I have noticed that the background change when I resize the browser's window.
It's because the floats are causing the div to not be of any height. You need to add a clearfix class to the elements you're trying to set the background to.
<div class="col-md-10 center-block clearfix" id="news">
This will cause the #news div to clear itself, thus making its height encompass the contained div elements. Do the same for your other containing elements as well.
Related
http://www.clickityclick.me/HarcourtV3/index.html
I have applied a background colour to my footer which will not display correctly.
At the smaller screen sizes (<992px) the background colour displays as expected. At the larger sizes it does not display, except for in the padding portion at the top of the div.
I have tried:
setting the footer element as having a background colour (footer {background-color:...})
setting the containing div as having a background colour (#fatFooter {background-color:...})
applying a background colour class to the containing div (.grnBG {background-color:...})
using !important in all cases above
Any suggestions at this stage welcome.
Adding overflow: hidden to both your footer and the #fatFooter div will solve the issue. Simply add this CSS to your stylesheet:
footer, #fatFooter {
overflow: hidden;
}
You need to add clearfix to #fatFooter like this :)
<div id="fatFooter" class="VerPad0015 clearfix">
<div class="col-md-3 col-sm-6 clearfix">
(just after the <div id="#fatFooter">
This adds FLOAT:LEFT.
remove it and everything will be fine
This is kind of trivial, but I have a frequent problem with divs and images that are separated by spaces when they ought to nest flush against each other.
Below is some code I'm wrestling with right now. As you can see, the second div (class Shadow2) contains an image, followed by a div containing text. The class Black gives the caption a black background. Thus, visitors should see nothing but an image above a black box with white text. Instead, the default background color of Shadow2 can be seen between the img and the caption div.
<div class="Cool R P Max300">
<div class="Shadow2">
<img src="">
<div class="Caption Black">Text</div>
</div>
</div>
I added styles setting all images' border and padding to 0 and setting div.Caption's top margin to 0, but it doesn't change anything.
I could fix the problem by applying relative position to the image and lowering it a few pixels, but that seems like a pointless fix for what must be a common bug. Can anyone tell me what's going on here? Thanks.
There is probably some white-space causing this line break. Simply setting the image to display: block; solves the issue.
Also, don't forget to close your img tag (<img src="" alt="" />), but that's not related to the white space.
See it here: http://jsfiddle.net/fkfF7/
The other, hackish solution, is to put font-size: 0; on the parent div. Of course, you'd have to specify the font size for you caption div then.
Here's that one: http://jsfiddle.net/fkfF7/1/
I'm using Kube CSS framework to create a demo site at www.dreametry.nl/ddfleurs . It was going well until I came across a problem with the main content background color. On the desktop the white background grows with the content, but not on a mobile device. The problems is the white background stops half way the content.
I tried using several styles, the only changes was with
.content { min-height: 650px; }
But then the background height is too much on mobiles.
Including height: 60%; to the previous code doesn't work.
This can be solved in two ways.
by giving
overflow: hidden
to class="unit-75 content"
or by clearing the div
<div class="unit-75 content" >
<!--All you HTML-->
<div style="clear: both"></div>
</div>
You can use overflow:hidden on the wrapper element (body tag, a particular div etc) to force it to adapt to the height of elements contained IF your layout uses floats.
I'm writing down a website using HTML and CSS3 and I have encountered some problems putting div's into each other and using the absolute position. When I add the position:absolute, I can set the div's background color and manipulate the objects within it, but it's been removed from the DOM, which creates some other difficulties for me (like not knowing how to set a footer). My question is how to make so, that all the elements inside my #content div are aligned properly, the height is set automatically and the background-color is the same for all of them?
UPDATE:
fiddle
add a div with clear class upper than footer and style clear: both;
...
<div class="clear"></div>
<div id="footer">
</div>
...
jsFiddle Demo
I want to have a inside of another that will serve as a background to the container and sit behind all of the other elements inside of the container. The HTML would be something like so:
<div id='container'>
<div>Blah</div>
<input type='text'/>
<input type='submit'/>
<div id='background'>
<img.../>
Some Text Maybe?
</div>
</div>
My failed CSS:
#background{
float:left;
z-index:-999;
background-color:black;
height:'+o.height+'px;
width:'+o.width+'px;
}
The 0.variables are from a jQuery plugin I'm making this for - basically the div should be the same height and width that the parent is.
Where I currently stand: My background sits below the sibling elements (along the y-axis not the z). When I play around with the position property, it either places the element behind the parent or it has no effect.
What I ultimately am trying to do is create a jQuery plugin that adds an animated background to a specified element. I'm not even sure if what I'm trying to do with the CSS is possible.
Try putting the background as the container's first child, then using position: absolute;. Mess around with the z-index until it works.
Also, you may need to specify a "more negative" z-index on the <body>, otherwise your background element will end up behind the body (and thus invisible).