Extending a bootstrap container background to the edge of the page - html

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:
I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?
One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.
I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.
Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.

I'm not sure if this is the 'best' solution, but it is a solution nonetheless.
Create a pseudo element for each coloured box (:before)
Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
Set top and bottom values to 0 so it's always the correct height
Set background colour to match box
Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
Finally, you'll need a page container set to overflow: hidden.
HTML
<div id="page">
<div class="container">
...
</div>
</div>
CSS
#page {
overflow: hidden;
}
.box-left:before,
.box-right:before {
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.box-left:before {
left: -999em;
background: orange;
}
.box-right:before {
right: -999em;
background: lightblue;
}
DEMO

Related

Add image to the bottom of a adjustable height section

I am trying to created a CSS design on my web app. I am going for a banner that is flapping in the wind. I want the banner to expand/scroll its height so all text will be displayed on the banner but regardless of how tall the banner is, I want to add a ripped section of the banner at the bottom of it. The banner will be the same width in all cases.
Something like the example below (forgive the horrible Paint screenshot):
I can't seem to wrap my brain around how to accomplish this. Any of you smart people have any ideas?
First, I think it'd be helpful if you could provide an example of what you have so far. For example, what's your HTML & CSS for the adjustable-height divs, just without the image at the bottom? Easier to add onto that.
I believe the best way would be to add an image element at the bottom of your adjustable element (assuming it's a <div>). Position it as absolute, and set it relative to the bottom of its parent container. You may have to fiddle with it a bit to get it to work. Don't forget to also set the position of the parent to relative.
If you'd like to see the shoddiest example ever, go here: https://jsfiddle.net/c2ptfv8o/
Good further reading on position: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Give the container element "position:relative" (to create a new positioning context) and some bottom padding (to make space for the image). Then you can either use a background image set to be at the bottom of the container and not repeat vertically or absolutely position an image to the bottom.
You can use pseudo-elements for this. This way you don't require extra markup for each element.
.myDiv {
position: relative;
}
.myDiv::after {
content: url(image.jpg);
display: block;
position: absolute;
left: 0;
top: 100%; /* will be placed immediately where the div ends */
width: 100%;
}
Based on the height of the 'banner curls', set a margin-bottom on .myDiv.
Or directly, without absolute, as long as you don't have paddings:
.myDiv::after {
content: url(image.jpg);
display: block;
width: 100%;
}

Getting an image to display outside of the Twitter Bootstrap 4 container whilst text displays inside the container

My title is not as descriptive or accurate as I believe it could be because I am not certain of how to phrase the issue more succinctly at this point. I will apologise up front for this mangling.
What i'm trying to do is show some text which would ideally be constrained by Bootstrap's container element. This text would run left-aligned within the standard Bootstrap container.
What i need occupying the remainder of the screen (to the right of this text) is an image which would appear to break out of the container element and utilise the entire rest of the viewport within the Bootstrap row.
I'm not sure if this might somehow be a job for Bootstrap's offset- or pull- or push- classes. What it seems i need is a hybrid container that would constrain content in the first four columns on the left of a larger (xl) screen and then allow content in the remaining eight columns to break out and behave like content within a container-fluid element.
I've attempted to streamline a JsFiddle of this here:
https://jsfiddle.net/tcq0aj3r/
AFAIK, the best way to approach it is using a pseudo class. It adjusts along with the container and columns and therefore works responsively.
Demo: http://www.codeply.com/go/XVVG24waWi
.right {
z-index: 0;
color: #fff;
}
.right:before {
background-image:url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=");
background-repeat: no-repeat;
content: '';
display: block;
position: absolute;
z-index: -1;
width: 999em;
/* allow for bootstrap column padding */
top: -15px;
left: 0;
bottom: -15px;
}
Demo
Also see:
Get Two Columns with different background colours that extend to screen edge

Position HTML element relative to bottom of parent element using CSS?

I have several stacked HTML <section>s with background images. Within each <section>, I have a panel with content inside.
JSFiddle: http://jsfiddle.net/victorhooi/zRFzb/1/
JSFiddle Full-screen output: http://jsfiddle.net/victorhooi/zRFzb/1/embedded/result/
Ideally, I would like the main title (#proclaim) and the panels (.contentbox) to be a set pixel distance from the bottom of each background image.
However, I can't seem to achieve this.
I did try the position: relative; with an inner position: absolute; trick, combined with a value for bottom and that didn't seem to work at all - it actually sent all the boxes to the top of the page.
Currently, I'm using a mish-mash of positioning to try to get everything to fit.
However, when you change the browser window size or the resolution, the panels and text move everywhere.
Is there a way to affix the main heading, and the panels to a set distance from the bottom of their respective background images?
works just fine
section {
position: relative;
}
.contentbox, #proclaim {
bottom: 10px; // your value
position: absolute;
}

Rows of flexible and fixed div's within full-size window

I'm writing a mobile/desktop chat application that is supposed to utilize the entire screen. The bottom <div> shown in yellow can be fixed-height if it needs to be.
presently it's Absolutely positioned to the bottom of the window.
My problem: the top <div>, in cyan, doesn't fit to the rest of the window, regardless of whether I use padding, margin, border, etc. Presently it appears to allow the content to wrap, but that's only because the bottom overwrites the scroll bar.
My only solution so far is to have a final <div> or <br> that pads the end of the scrollable div, but that doesn't make the div smaller, or make the scroll bars properly align.
Here is my source code so far in Fiddle.
Can you edit your CSS and set the DIV with the chat text a class like .break-word and then in CSS declare it with word-wrap:
.break-word {
word-wrap: break-word;
}
Unsure on the covering of scrollbars. You should post your code for others to view and might be able to pick something out.
This style code basically sums up what I'm doing to compensate for my issue. (Instead of, say, using HTML tables.) This may not be the best solution.
#topPart {
position: absolute;
width: 100%;
top: 0;
bottom: 40px; /* or however high the bottom is */
}
#bottomPart {
position: absolute;
width: 100%;
bottom: 0;
height: 40px; /* same as above */
}

Confused over DIV Z-index, plus logic of visible/hidden DIVs

I've spent all morning trying to write what I thought was a simple bit of code.
Two long columns of content, only column 1 is visible
On click of a link, column 1 is hidden and column 2 becomes visible
Both are in exactly the same position, however both have different and varying lengths
I decided to use the target pseudo-class to switch between the columns, setting the visibility of one to show.
This seems to work, but I don't fully understand what I've done. Plus, content below these columns seems to be placed beneath them on the z-axis rather than below them on the y-axis.
My two (related) issues:
I'm not sure exactly what the logic is of what I've created, I could do with a plain english explanation.
I don't understand why the DIV underneath the two columns and container is not appearing below them on the y-axis.
Here's my CSS:
#container
{
background-color: red;
position: relative;
}
#schools-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 600px; /* Delete the height, let the content define the height */
background-color: purple;
position: absolute;
top: 0;
left: 0;
}
#boards-list
{
width: 400px; /* Set the width of the visible portion of content here */
height: 700px; /* Delete the height, let the content define the height */
background-color: green;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
#container:target #schools-list
{
visibility: hidden;
}
#container:target #boards-list
{
visibility: visible;
}
Here's my HTML:
<div id="container">
<div id="boards-list">
Boards List<br>
Switch to Schools List
Here's some content
</div>
<div id="schools-list">
Schools List<br>
Switch to Boards List
Here's some other content
</div>
</div>
<div>Why is this beneath everything?</div>
Absolute positioning removes an item from the flow of the page. This is what is causing your bottom div to appear underneath.
Visibility removes the element from sight but the element will still take up space.
My suggestion is to use display rather than visibility.
Toggle your elements between display:block and display:none and remove the absolute positioning and you should be able to achieve the functionality you desire.
Both #borad-list and #school-list is taken out of normal page flow by position: absolute, that's why your container height should be 0px as there is nothing that takes any space vertically.
I could explain it better but now writing with my phone so... i'll try just to give you starting point.
By positioning the containers using position:absolute, you're removing them from the normal flow of the page. In other words, your other content acts like those containers aren't even there, and those containers magically appear in front of the content.
Instead, what you'll likely want to do is remove the position, top, and left of the containers, and use display:block to show and display:none to hide the containers. You can also remove the height from the containers and allow the content to decide on its own how much room is needed.