I am building a website and I use bootstrap.
I have 2 columns in the left one I have some text with a pattern as background and in the right one I want a background-image covering the entire column.
For some reason my background image is not showing. I've tried some things but the image never covers the entire column
here's a codepen demo to demonstrate
Your issue is not related to the background image itself, it related to the height of the right column it's height is just 1px because Boostrap by default give each column min-height:1px; when it doesn't have any contents
So you have to give it some content or height of 426px like the left column
Now you have many options to fix this
Option 1
using jQuery:
function adjusting_height(){
var height = $('.has-content').css('height');
$('.has-image div').css('height',height);
}
$(document).ready(function(){
adjusting_height();
$(window).resize(function(){
adjusting_height();
})
});
HTML
<div class="container-full">
<div class="row">
<div class="has-content text-center col-md-6 nopadding">
<div class="block give-me-a-pattern-please-thanks">
<h2>title</h2>
<hr>
<p>Hello there, I am a paragraph text. It's nice to meet you! Unfortunately I am here only temporarily, but hey don't be sad! I am sure we'll meet again soon. Oh yeah before you move on don't forget the check me out on mobile devices I look awesome
there as well.</p>
</div>
</div>
<div class="has-image text-center col-md-6 nopadding">
<div style="background-image: url(http://s1.picswalls.com/wallpapers/2014/12/09/butterfly-wallpaper_093549561_256.jpeg);"></div>
</div>
CSS
.container-full{
margin: 0 5%;
background-color:rgba(0,0,0,1);
}
.block{
padding: 100px;
color: #666;
}
.block hr{
margin-top: 40px !important;
margin-bottom: 40px !important;
border-top: 3px solid aqua !important;
width: 15% !important;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.give-me-a-pattern-please-thanks{
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/new_year_background.png") !important;
background-size: cover;
}
See the new CODEPEN you should find it like
Note
you have a wrong selector in CSS you had used nopadding it should be .nopadding
option 2
it not good idea but it will solve it
You can add the same content to the column on the right but give it opacity:0;
Related
I created a simple webpage with bootstrap that include two containers :
First container :
A white column taking 7/12 of the first row
A black column taking 5/12 of the second row
Second container (under the first one)
A grey page
The first container takes all the page and if you scroll down to the second container, it also takes all the page height
HTML :
<div class="container-fluid h-100 nopadding">
<div class="row h-100 nopadding">
<div class="col-md-7 left nopadding">
left
</div>
<div class="col-md-5 right nopadding">
right
</div>
</div>
</div>
<div class="container-fluid h-100 padding">
<div class="row h-100">
<div class="col details nopadding">details</div>
</div>
</div>
CSS :
html,
body {
height: 100%;
}
.nopadding {
margin: 0 !important;
padding: 0 !important;
}
.left {
background: white;
color: black;
height: 100%;
}
.right {
background: black;
color: white;
height: 100%;
}
.details {
background: grey;
color: white;
height: 100%;
}
Here are screenshots of the page (when the page has place to display the black column, everything works. But when I resize the window, it goes under the grey container [I saw that using z-index]) :
I would like the black column to be right under the white one when I resize and the grey column to be under the black column when I resize.
Thanks!
First, you are overrating the power of h-100, then you mixed h-100 with css incorrectly, basically you set on container and row height with h-100 and then in css you defined .left and .right with height of 100% so... Since your containers cannot be higher then 100% and contents (.left and .right) are 100% your “.right” is hidden out of bounds of your row because .left already took all available space...
For a starter I’ve would recommend to use weather bootstrap classes or css, it’s pretty easy to have all that without defining your own css in bootstrap...
I was just about to answer someones question, when I stumbeled upon a weird behavior, which I cannot explain at the moment. So I have the HTML and CSS Code in the Snippet below. if you look at it on Full Screen, the bottom left blue div is below the red one. I tested this Code on jsfiddle, too, and it works as expected. The blue div is aligned with the red one.
Now, I do know, that this happens, because at Stackoverflow, the custom CSS gets applied BEFORE Bootstrap, while its the other way around on jsfiddle. So the styles are overwritten by each other, depending on which platform it runs.
I also know, that this is NOT the common approach to create a two column Layout. As mentioned, I found this behavior while trying to answer this question. In this case, the guy who asked the question was not able to change the HTML structure, so we had to deal with this.
What I don't know is, why there is a difference, since they both overwrite float: left; with float: left; I thought it doesn't matter where the css comes from, the behavior should be the same.
So here is the link to the fiddle: https://jsfiddle.net/we9jcd8c/
And here is the Stack Snippet
.blue {
border: 10px solid #fff;
background: blue;
height: 150px;
float: left;
}
.red {
border: 10px solid #fff;
background: red;
height: 300px;
float: right;
}
#media screen and (max-width: 768px) {
.red, .blue {
float: none;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="outer">
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 red">
</div>
<div class="col-lg-6 col-sm-12 col-md-6 blue">
</div>
</div>
To illustrate the difference, I added a picture:
As you said, the order of the style are the same.
But even in the blue block override float: left; by float: left; the red block has two different behavior : float: left; in bootstrap and float: right; according to the .red css class.
So on the fiddle snippet, the red block floats on the right allowing the bleu block to be in line and on stack overflow, the bleu tries to float left after the red block and is unable due to the 12 column being taken already.
This is classical mistake for somebody with no experience in CSS structure. The best way is to create 2 columns like:
here left boxes
here right boxes
If your content is dynamic, you must target box with problems and add after close this,
.clearfix { clear: both/left/right }.
But first way is the academic way to make columns in float based layout.
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
I want to make a table with space between columns, on a background, like this :
And when I resize my page the text should not exit from box
#banner {
background-color: red;
margin-top: 70px;
background-size: cover;
height: 455px;
margin-left: 35px;
margin-right: 35px;
overflow: hidden;
}
.r1c1 {
float: left;
overflow: hidden;
width: 90%;
}
.r2c1 {
float: left;
overflow: hidden;
}
<div id="banner">
<div class="r1c1">
<h2>Once you've experienced the pleasure and comfort of hydronic heating, there's no going back.</h2>
</div>
<div class="r2c1">
<img class="voucher1" src="voucher1.png">
</div>
</div>
If you actually want to use a table, I would suggest using the <table> element directly. If instead you're making something like the display in your attached image, I have a few suggestions:
try using margins to keep the table cells separated
try placing a container div around your text and controlling its size to create the appearance that the cells have spaces between them.
try using Twitter Bootstrap. It's open source and fantastic and very easy to use. It has presets for a ton of different elements. Making what you want would be as simple as:
<div class="col-lg-5 col-md-5" id="r1c1"><div>
<div class="col-lg-2 col-md-2" id="spacer"><div>
<div class="col-lg-5 col-md-5" id="r2c1"><div>
Without having to further define the col-lg and col-md classes, you've taken advantage of bootstraps grid system and created a scalable table. Hope that helps!
I have the following Markup:
<div class="jumbotron jumbotron-personal-user clearfix">
<div class="container">
<div class="row">
<div class="col-lg-1 col-centered">
<img src="img/avatar04.png" class="profile-avatar">
</div>
</div>
</div>
</div>
Where .jumbotron-personal-user has:
.jumbotron-personal-user{ margin: 0 -15px !important; background: url(../img/blur-background08.jpg) center center fixed no-repeat;}
but the jumbotron itself has no fixed width or height, only bootstrap's default styles:
.jumbotron {
padding: 30px;
margin-bottom: 30px;
font-size: 21px;
font-weight: 200;
line-height: 2.1428571435;
color: inherit;
background-color: #eeeeee;
}
This is a blurred background, so more or less, it would't look bad. How can I let the user know what should the ideal measurements of an image be so that he can choose/make one so that it ca fit?
Here's a picture of the interface of the profile:
There are lots of jquery plugins that can be use to crop images after uploading http://www.jqueryrain.com/demo/jquery-crop-image-plugin/ . OR you can create a script that determine whether the image's size can be used as cover and return a warning if the resolution/size is not good as photo. OR indicate the suggested image size at the upload window. You can also use CSS's background-size - I used it before for my project's cover photo.