I am doing my first React-Redux project and I am working on styling.
The issue I am having is with background colors.
If I set a background color on a div containing the main content of a page, the bottom of the page is left white.
My solution was to set a default background color in my reset file, on the body and html. This fixed the problem.
However, I want to have different background colors/images on different pages and if I have the body and html set to a default color that color will be the color below the div on any page.
Any help would be appreciated. This again is using React and Redux, I am brand new to this material and from my understanding , all the components will be nested under a parent element (body in my case) so changing that will affect every page. That said is there a way to make a div fill all the space between a header and eventually footer element?
If you are sure that your main content element needs to be 100% of the height of the page, you can use
height:100vh;
This will give the element a height which is equal to 100% of the view height. This is supported in all current browsers except opera mini.
Beware of margins or padding on parent elements as these could make your container overflow the page slightly - see how i have dealt with the margin on the body in this example
Related
on large screens my footer doesn't sit at the bottom of the page leaving a white "bar" along the bottom (color of the page background).
I'm aware of sticky footers etc but due to using absolute positioning on elements in the footer these techniques make the rest of the footer go awry. I have now added an empty div below the footer directly before and set its min height to 100% and background colour to match that of the footer (black) however it does not do anything - only a set height in pixels will do anything but i want it to be dynamic so it fills the space if it is there whether its 10px of space or 500px of space.
Has anyone got an for a work around?
If you don't want to do a sticky footer, make your body background color the same color as your footer, then set the background of your content area to white. This gives the appearance that the footer extends to the bottom of the page, no matter the size of the browser.
Yes, you don't use the 'absolute' style of footer positioning, it's a terrible solution.
Oddly enough, Twitter Bootstrap has the easiest example of how to implement a sticky footer - it's a technique that's been around for ages:
http://getbootstrap.com/examples/sticky-footer/
The method is simple. Put a wrapper div around all your code, except for the footer.
If you refer to the source of that link, you'll see a wrapper with an id of wrap.
If you then examine the css for the above:
http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Just copy the sticky footer styles section and adapt for your site. The key part of this is the footer height value matches the margin and padding values of the wrapper element.
I'm using Firebug to work on my CSS.
It shows the HTML, Body, and inner container all at 620px height. I assume my window is around 640px high.
Using firebug I can clearly see that all the elements end just short of the full height of the window, however the body bg-image appears to take up the whole window height, which is beyond the size of it's relative container.
How/Why is this?
Note: It is a Drupal site using normalize.css as a reset. When I talk about height there is no padding or margins on the content.
I've pushed to test, see here - http://mermaidriverpools.rickdonohoe.co.uk/
Ok, looking at your page, I'm as annoyed as you. But I think I have found why this is happening.
In this fiddle, you can see that the background properties (color, image...) extends all over the page IF it's specifically ON the body tag. It doesn't matter how big the body is (It's a 1x1 box in the fiddle).
It must be a browser behaviour. This doesn't change the actual size of the body. It will follow the normal rules (size is the same than content, a specific size if it's set or the same as the parent if inherit is set).
But in this other one (setting the background-color to an inner div with fixed dimensions) the background color doesn't extend all over the page.
Try to create a wrapper as a children of your body and place body styles on it.
<body>
<div class="all your body classes here">
</div>
</body>
if you use firefox browser you can press
ctrl+Shift+m
and paly withe resoltion you need
I have a fixed size layout where I center the content container.
I want the menu (home, about, contact, login), to span 100% of the screen.
Take a look at this jsfiddle: http://jsfiddle.net/Hxhc5/1/
The result I want is this:
I have tried a to make a 100% width container with the menus, where I would have a container inside to center the menu, but it did not work well, because then the layout is relative, changed with the window size.
Wrap an extra div arround the menu, give it the grey background, remove the extra padding, make the menu bg white:
http://jsfiddle.net/sg3s/Hxhc5/3/
This is problematic when we want to keep the space between the menu and the right col 'open' though.
The easiest way and probably the best is to have a mock image of which the middle is left 'open' and use it as a background. Since a png image of this type is insanely small it is better than more markup, css or a js solution, plus it has no quirks if used correctly:
http://jsfiddle.net/sg3s/Hxhc5/10/
You also showed your actual developement site; if you want to implement this for the menu you will have to make the menu fixed height (everthing else and its width can still be fluid) due to the type of opacity you use in the layer. The same background trick can be made to work with it.
Why not use a background image that spans the entire page instead?
Just add the content of the menu into another div, with width: 500px, margin: auto; and set the menu width to 100%. Here is updated jsFiddle : http://jsfiddle.net/Hxhc5/2/
I've mocked up a page using 960.gs that has has several elements fixed in a div under which the content of the of the page is to flow. The background of this div is a CSS gradient, and has a height of 100% (if the gradient is applied to to the actual body of the page it doesn't actually extend the whole width of the page). As the user scrolls up, the content is to be viewable behind an opaque menu.
http://resume.jamesfishwick.com/
The layout works as I want in FF and Chrome, but the content of the page scrolls over the fixed upper area in IE7.
I understand that a new stacking context is being created, but I've been unable to resolve this by fiddling with the z-index of the elements in question, or their parents. I know I can consolidate some of the extra divs used by the grid, but I've been unable to do so in a way that keeps the gradient and transparency effects.
How can I achieve this look in IE7?
You will need to give that scrolling div a z-index which is less than the z-index on the main header. To control the transparency for msie 7 just add the following css code to the end of your document say right before the </body> tag.
/* ie6 hack */
* html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
/* ie7 hack */
*+ html .gradientLayer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path_to_images/mygradient.png', sizingMethod='scale')); }
In IE7 an element is trapped by its positioned parent and cannot escape. One cannot interweave the children of positioned parents because ie7 and 6 incorrectly apply a z-index of zero to positioned elements when they should have applied auto.
There is no way to escape this other than not positioning the parent which my case is not possible because I want it fixed.
So I'll need to change the design and apply the gradient to another element and not the 100% high fixed element. That will allow the header to be separate form the content and then the content can go under the header.
Alright. This is the situation. I have created a website with a black banner at the top with a logo, its height is 100px and its background color is #000. Next I want a large "main_content" div to encompass the navigation along with any content within the page, so it would not include the footer. In this case there are several nested divs within the main_content area of the page and there is already a background color defined for them. The issue is that once I apply a background color to the div called "main_content" it only applies it to the navigation bar and then stops because it runs into the nested div that already has a color defined. I'm wondering if there is CSS rule I am missing here...
The only fix I have found is that I MUST define a height for the main_content div, is there a way around this? I don't want to have to define a height for the content area because I want it to just match the height of the content that fills it.
I think I found it, overflow:hidden, im not sure if this is the right solution but its the best I've got
What is most likely happening is that your other nested divs are inheriting the color from their parent main_content div, to fix this you should provide the color explicitly for your nested divs. Other thing you mentioned is that you want to apply height to main_content as per its content you can do so by giving it a height of 100% eg:
<style>
#main_content{height:100%;}
</style>