I am using Singularity Grid System version 1.1.2, my variables for the 12 column grid are $grids: 12, $gutters: 1/3. The grid layout is working fine. Now I want to give the top Headergroup, middle section and the footer background color that covers the full browser width. All the content are centered and spans 90% of the total width.
Creating full color bleeds is an unfortunately ugly task all around, but it's fairly easy to do. You're going to want to do something like the following:
<div class="full-stripe header">
<header class="container"></header>
</div>
<div class="full-stripe main">
<main class="container"></main>
</div>
<div class="full-stripe footer">
<footer class="container"></footer>
</div>
What you need to do is wrap each section of your site in a div that will stretch the whole width of your page, while keeping the contained content pieces within it sharing a similar class. Your CSS would then look something like the following:
.full-stripe {
width: 100%;
#include clearfix;
&.header {
background: red;
}
&.main {
background: green;
}
&.footer {
background: blue;
}
}
.container {
margin: 0 auto;
padding: 0;
max-width: 68.5em;
#include clearfix;
}
I've created a CodePen to demonstrate the point. The container has a little bit of extra styling to make it stand out and help visualize what's going on:
Code
Full
You may find the nested context mixin in toolkit useful. It finds the context of percentage containers so #include nested-context(90%, center) on your hgroup will make it full width.
Related
I wish to make my background full width, with a image or colour background filling the row. However, I would like the content to sit in the middle spanning the standard 12 cols dictated by neat.
Currently my structure is:
<div class="container">
<section id="section">
<div class="left-col">
<p>some text</p>
</div>
<div class="right-col">
<p>some text</p>
</div>
</section>
</div>
With the relevant sass being:
.container
+outer-container(100%)
background-color: #fff
padding: 40px 0
#lead-text
+span-columns(12)
.left-col
+span-columns(4)
.right-col
+span-columns(8)
This results in the container spanning the full width of the browser. But so does the inner section? I would like this to sit in the centre across the standard 12 cols?
Thanks in advance
Keeping your current HTML I would do the following in SCSS:
.container {
background-color: pink;
}
#section {
#include outer-container;
background-color: #fff;
}
div.left-col {
#include span-columns(4);
}
div.right-col {
#include span-columns(8);
}
This makes the section the element neat treats as the outer-container, leaving the .container element to do it's natural thing of spanning the full browser window width, allowing you to add a background.
If I get your question right you want to do a "break-out-of-parent"
HTML
<div class="container">
<div class="break-out">Content</div>
</div>
CSS
// use border-box to prevent padding from
// being added to width (alway do this)
html { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
// the container is aligned center with
// a maximum width of xxx (doesn't matter)
.container {
margin: 0 auto;
max-width: 960px;
}
// breaking out of the container
.break-out {
// set the width to full screen width
width: 100vw;
// use calc to pull content back to the center
margin-left: calc(50% - 50vw);
// to make the content re-align with the container
// use the reversed calc to set padding
padding-left: calc(50vw - 50%);
}
Can this be done? I've looked into susy, jeet, singularity etc. I'm using latest version of libsass. I might have a few more options if I switched to Ruby.
I love susy, but for my next project I need fixed gutters (set them in px).
Suggestions welcome!
If I wanted to use Susy (my favourite grid) with this approach, I’d set the gutter to 0 and manage the margins manually in my Sass, like this:
$susy: (columns: 4, gutters: 0, math: fluid, output: float, last-flow: to)
#import "susy/susy"
body
background-color: #fff
margin: 0
padding: 0
font-size: 100%
color: #000
.container
#include container()
.box
#include span(1)
&:last-child
#include last()
div
background-color: #ccc
margin: 0 10px // Will result in 20px margin
&:first-child
div
margin-left: 0 // Skip, if you want outer gutter
&:last-child
div
margin-right: 0 // Skip, if you want outer gutter
Now, with markup like …
<div class="container">
<div class="box">
<div>A</div>
</div>
<div class="box">
<div>B</div>
</div>
<div class="box">
<div>C</div>
</div>
<div class="box">
<div>D</div>
</div>
</div>
… you’ll get fluid columns with fixed gutter – which is not a gutter for Susy, but a “visible” gutter. Of course if you need breakpoint-dependend behaviour, it’s a little extra work, but IMHO acceptable.
And Susy aside: Bootstrap uses a fixed gutter width. Although I find it pretty cumbersome to rip the grid out of the Bootstrap bloat, if I only want a grid and nothing else.
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances.
I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.
So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?
(http://imageshack.us/a/img819/9515/3zt.gif)
(http://imageshack.us/a/img14/853/qp8.gif)
Research:
I notice my question was -1'd. I guess not providing my research was the fault? Here's some of the methods I tried to fix this issue:
Vertical alignment of elements in a div
How to vertically align an image inside div
How to vertically middle-align floating elements of unknown heights?
Wrap long HTML tables to next line
Edit #2
Another version, I think this is the cleanest I can think of
live view
edit view
Use a css table and vertical-align:middle for the wide screen view, then collapse the table for narrow viewports. The code is clean and it's completely independant of image heights.
================
Edit
As #user2748350 correctly pointed out, my original suggestion below didn't align images vertically on a wide screen if they were different heights.
Here's a variation which is an improvement using vertical-align: middle and inline images. The only requirement is that you set a line height larger than the tallest image:
live view
edit view
===============================================
Original
See if this helps you:
live view
edit view
HTML
<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>
CSS
.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}
#media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}
In the head of your page, you also want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for good display on mobile devices.
Hope this helps!
Here is quick solution
img {
max-height: 100%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have three div elements: one as a header, one as a footer, and a center content div. the div in the center needs to expand automatically with content, but I would like a min-height such that the bottom div always at least reaches the bottom of the window, but is not fixed there on longer pages.
For example:
<div id="a" style="height: 200px;">
<p>This div should always remain at the top of the page content and should scroll with it.</p>
</div>
<div id="b">
<p>This is the div in question. On longer pages, this div needs to behave normally (i.e. expand to fit the content and scroll with the entire page). On shorter pages, this div needs to expand beyond its content to a height such that div c will reach the bottom of the viewport, regardless of monitor resolution or window size.
</div>
<div id="c" style="height: 100px;">
<p>This div needs to remain at the bottom of the page's content, and scroll with it on longer pages, but on shorter pages, needs to reach the bottom of the browser window, regardless of monitor resolution or window size.</p>
</div>
Just look for my solution on jsfiddle, it is based on csslayout
html,
body {
margin: 0;
padding: 0;
height: 100%; /* needed for container min-height */
}
div#container {
position: relative; /* needed for footer positioning*/
height: auto !important; /* real browsers */
min-height: 100%; /* real browsers */
}
div#header {
padding: 1em;
background: #efe;
}
div#content {
/* padding:1em 1em 5em; *//* bottom padding for footer */
}
div#footer {
position: absolute;
width: 100%;
bottom: 0; /* stick to bottom */
background: #ddd;
}
<div id="container">
<div id="header">header</div>
<div id="content">
content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>content<br/>
</div>
<div id="footer">
footer
</div>
</div>
I found this courtesy of ryanfait.com. It's actually remarkably simple.
In order to float a footer to the bottom of the page when content is shorter than window-height, or at the bottom of the content when it is longer than window-height, utilize the following code:
Basic HTML structure:
<div id="content">
Place your content here.
<div id="push"></div>
</div>
<div id="footer">
Place your footer information here.
</footer>
Note: Nothing should be placed outside the '#content' and '#footer' divs unless it is absolutely positioned.
Note: Nothing should be placed inside the '#push' div as it will be hidden.
And the CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#content {
min-height: 100%;
height: auto !important; /*min-height hack*/
height: 100%; /*min-height hack*/
margin-bottom: -4em; /*Negates #push on longer pages*/
}
#footer, #push {
height: 4em;
}
To make headers or footers span the width of a page, you must absolutely position the header.
Note: If you add a page-width header, I found it necessary to add an extra wrapper div to #content. The outer div controls horizontal spacing while the inner div controls vertical spacing. I was required to do this because I found that 'min-height:' works only on the body of an element and adds padding to the height.
*Edit: missing semicolon
If #top and #bottom have fixed heights, you can use:
#top {
position: absolute;
top: 0;
height: 200px;
}
#bottom {
position: absolute;
bottom: 0;
height: 100px;
}
#central {
margin-top: 200px;
margin-bot: 100px;
}
update
If you want #central to stretch down, you could:
Fake it with a background on parent;
Use CSS3's (not widely supported, most likely) calc();
Or maybe use javascript to dynamically add min-height.
With calc():
#central {
min-height: calc(100% - 300px);
}
With jQuery it could be something like:
$(document).ready(function() {
var desiredHeight = $("body").height() - $("top").height() - $("bot").height();
$("#central").css("min-height", desiredHeight );
});
to get dynamic height based on browser window. Use vh instead of %
e.g: pass following height: 100vh; to the specific div
As mentioned elsewhere, the CSS function calc() can work nicely here. It is now mostly supported. You could use like:
.container
{
min-height: 70%;
min-height: -webkit-calc(100% - 300px);
min-height: -moz-calc(100% - 300px);
min-height: calc(100% - 300px);
}
No hack or js needed. Just apply the following rule to your root element:
min-height: 100%;
height: auto;
It will automatically choose the bigger one from the two as its height, which means if the content is longer than the browser, it will be the height of the content, otherwise, the height of the browser. This is standard css.
You propably have to write some JavaScript, because there is no way to estimate the height of all the users of the page.
It's hard to do this.
There is a min-height: css style, but it doesn't work in all browsers. You can use it, but the biggest problem is that you will need to set it to something like 90% or numbers like that (percents), but the top and bottom divs use fixed pixel sizes, and you won't be able to reconcile them.
var minHeight = $(window).height() -
$('#a').outerHeight(true) -
$('#c').outerHeight(true));
if($('#b').height() < minHeight) $('#b').height(minHeight);
I know a and c have fixed heights, but I rather measure them in case they change later.
Also, I am measuring the height of b (I don't want to make is smaller after all), but if there is an image in there that did not load the height can change, so watch out for things like that.
It may be safer to do:
$('#b').prepend('<div style="float: left; width: 1px; height: ' + minHeight + 'px;"> </div>');
Which simply adds an element into that div with the correct height - that effectively acts as min-height even for browsers that don't have it. (You may want to add the element into your markup, and then just control the height of it via javascript instead of also adding it that way, that way you can take it into account when designing the layout.)