I created a Bootstrap 4 script here:
http://jsfiddle.net/aftu6ehL/
How is it possible to alternate left/right alignment of the boxes. I.e. I want to switch each second box the left and right side..
Description - Image
Image - Description
Description - Image
Image - Description
Description - Image
Image - Description
nth-child(3n+1) somehow didn't seem to work.
You want to use 2n + 1 (every odd value)
.container {
width: 200px;
}
.image, .desc{
width: 50%;
height: 50px;
display: inline-block;
}
.image {
background: red;
float: left;
}
.desc {
background: blue;
float: right;
}
.container:nth-child(2n + 1) .image {
float:right;
}
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
<div class="container">
<div class="image">
Image
</div>
<div class="desc">
Description
</div>
</div>
Related
I am learning VUE for the first time and want to make a page. Here I want to set two different colors connect at left and right on one page in same hight,but what I get is different, unless I add content to the right
I try to the position is relative and float is left and right, it is not worked
And I don't want to use gradient color and use ::before or ::after
<template>
<div class="a">
<div class="b">
<div class="v1">
<img src="../assets/v.png"/>
</div>
<div class="v2">
<img src="../assets/v.png"/>
</div>
<div class="v3">
<img src="../assets/v.png"/>
</div>
<div class="v4">
<img src="../assets/v.png"/>
</div>
</div>
<div class="c">
<div class="v5">
<img src="../assets/v.png"/>
</div>
<div class="v6">
<img src="../assets/v.png"/>
</div>
</div>
</div>
</template>
<style>
.a{
margin: 0%;
/* background: linear-gradient(top, red ,red 50%,blue 50%,blue); */
}
.b{
float: left;
background-color: antiquewhite;
width: 30%;
height: 100%;
}
.c{
float: left;
background-color:red;
width: 70%;
height: 100%;
}
</style>
enter image description here
you must set a display for .main like this:
.main{
display : flex;
}
Using Bootstrap 4 I'm trying to achieve an overlay effect with .png image which is also masking a part of bottom area of first section.
The height of .png image is 130px and it also should remain unscaled on mobile devices.
I've tried to use ::after pseudoelements with content as background image on first section, but this gives me a unwanted bottom margin.
See my example here: https://codepen.io/michalwyrwa/pen/EGbxXb
Is there a better way to do it?
CSS:
body {
color: #ecf0f1;
}
.welcome .col {
background-color: #3498db;
height: 50vh;
}
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
margin: 0;
padding: 0;
}
.features .col {
background-color: #6ab04c;
height: 50vh;
}
HTML:
<section class="welcome">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Welcome text</p>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container-fluid">
<div class="row text-center">
<div class="col-12">
<p class="my-3">Features</p>
</div>
</div>
</div>
</section>
I didn't find the root cause of your problem but I have the solution for you.
.welcome::after {
content: url(https://files.tinypic.pl/i/00976/nb1abpgxj5x3.png);
display: block;
padding: 0;
margin-bottom: -6px;
}
A site I inherited uses a sprite for some design based images. The sprite is 28px tall. Recently it began that when the site is viewed in Chrome, the sprite does not display on the elements when the height of the container with a background is > 28px.
I was able to reproduce this using the below snippet.
It's especially odd that if i create a narrower image, I don't have this problem. The break point seems to be width: 16384px or 2^14.
.outer {
width: 1000px;
background-color: skyblue;
}
.bg {
background: url('https://i.imgur.com/DEV7k42.png');
}
<div class='outer'>
<div class='bg'>
<div style='height:28px'>
See this nice background?
</div>
</div>
</div>
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
No background here
</div>
</div>
</div>
This uses an image that is 16384px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/1vd6POs.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
this image is 13684px wide
</div>
</div>
</div>
This uses an image that is 16385px wide:
.outer {
width: 1000px;
background-color: blue;
}
.bg {
background: url('https://i.imgur.com/KV0uyia.png');
}
<div class='outer'>
<div class='bg'>
<div style='height: 29px;'>
This uses an image that is 16385px wide
</div>
</div>
</div>
Could this be a bug? I did a quick google search and could not find anything to indicate there is a hard limit on the dimensions of an image.
I simplified the structure and placed the bg image and color on the outer div. Seems to work:
.outer {
width: 1000px;
height: 28px;
background: url('https://i.imgur.com/DEV7k42.png');
background-color: skyblue;
}
<div class='outer'>
<div style='height:28px'>
See this nice background?
</div>
</div>
<div class='outer'>
<div style='height: 29px;'>
No background here
</div>
</div>
Im using Bootstrap in my application. I am trying to make it so my whole left side is #fff, while rest is #f9f9f9.
This is what I have so far.
HTML:
<div class="container">
<section class="content">
<div class="col-xs-8">
// Left side
</div>
<div class="col-xs-4">
// Right side side-bar
</div>
</section>
</div>
CSS:
. container {
width: 1200px !important;
}
PS: I don't want/need responsive design.
Image below is a example for what I want to achieve.
Here is a link that hast the same design.
Please try the following code:
HTML
<div class="container">
<section class="content">
<div class="col-xs-8 left-side">
// Left side
</div>
<div class="col-xs-4 side-bar">
// Right side side-bar
</div>
</section>
</div>
CSS
.container{
margin: 0;
padding: 0;
width: 100%
}
.content{
height: 100%;
width: 100%;
}
.left-side{
background-color: #fff;
min-height: 100%;
}
.side-bar{
background-color: #f9f9f9;
min-height: 100%;
}
.no-margin{
margin: 0;
padding: 0
}
This would be a way to achieve what you want to do.
.leftside {
background: #fff;
}
.rightside {
background: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-8 leftside">
// Left side
</div>
<div class="col-xs-4 rightside">
// Right side side-bar
</div>
</div>
</div>
I have a three div block inside main div which is head,content and footer.
I have facing few problems which are:
(1) images not fiting inside div
means i am try to find code for this situation:
<div style="height:10%">
<img src="abc.jpg" height="100%">
</div>
and
(2) I have a div which height is 80%,in this div i put three div their height is 20%, 60%, 20%.the div whose height is 60% has no data i write it for margin.(means first div 20% height has a data then 60% height for space then another div who has a data), so how to achive it?
(if possible please suggest without using margin-up or bottom
HTML code:
<div class="homebackground" style="height:100%; width:100%; background-image:url(../../stylesheets/images/Logo_with_Blu_bg.png); background-size:98% 88%">
<div class="bodyhead">
<img src="../../stylesheets/images/user_male.png"/>
</div>
<div style="height:80%">
<div style="width:100%">
<div class="mainbodyup" align="right">
<img src="../../stylesheets/images/phone.png"/>
</div>
<div class="mainbodyup"> </div>
<div class="mainbodyup">
<img src="../../stylesheets/images/groupchat.png"/>
</div>
</div>
<div style="height:60%; clear:both;" class="a">
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
<div class="mainbodymid"></div>
</div>
<div style="width:100%">
<div class="mainbodybot" align="right">
<img src="../../stylesheets/images/recent.png"/>
</div>
<div class="mainbodybot"> </div>
<div class="mainbodybot">
<img src="../../stylesheets/images/search.png"/>
</div>
</div>
</div>
<div style="height:10%;">
</div>
</div>
CSS:
.bodyhead
{
height:10%;
}
.bodyhead img
{
width: 10%;
}
.mainbodyup
{
height:20%;
width:33%;
float:left;
}
.mainbodyup img
{
width: 20%;
}
.mainbodymid
{
width:33%; float:left; padding:0px;
}
.mainbodybot
{
height:20%;
width:33%;
float:left;
}
.mainbodybot img
{
width: 20%;
}
.a:before
{
display: table;
content: " ";
}
.a:after
{
clear:both;
display: table;
content: " ";
}
If you want to fit the entire image in the div . try using
style="background:url('image-url') no-repeat; background-size: 100%;"
for the div which contains the Image . Rather using the image object .
style="background:url('image-url') no-repeat; background-size: contain;"
Use this code.
add one css to your existing stysheet
html, body{
height: 100%;
}