I am trying to implement the following design in bootstrap3.
Does anyone know how to hover the container2 over the container1?
I can use the position:absolute way but I think there must be a better way to do it.
Thanks.
Try this:
.container-1 {
position: relative;
z-index: 0;
}
.container-2 {
position: relative;
z-index: 1;
top: -50px;
}
HTML:
<div class="container container-1">...</div>
<div class="container container-2">...</div>
You can use margin-top on the "container 2" to get this effect
.container-2 {
margin-top: -200px;
}
http://jsfiddle.net/mwo8jdeL/
http://i.stack.imgur.com/rxKfW.png
Index.html
[![<div class="container-fluid">
<div class="row one">
<div class="col-md-12">
</div>
</div>
<div class="row two">
<div class="col-md-12">
</div>
</div>
</div>][1]][1]
CSS File
.one{
background-color: red;
height: 400px;
}
.two{
background-color: green;
height: 400px;
margin-top: -100px;
margin-left: 15%;
margin-right: 15%;
}
Related
I've been using bootstrap framework recently. I'm new to this framework.
so I'm trying to position an image next to some text in landing page. I use grid system of the bootstrap and it work. but when I come to push the image using position: absolute, and left:somePX, it make horizontal scroll and get out of the body of the page. what should I do to prevent this scrolling. I just want to cut the image and position it as I want.
Note: I've applied so many templates using only CSS with out bootstrap and I never get across on same problem.
thank you
here is my html code:
/* landing */
/*this is the image style*/
.landing {
padding-bottom: 100px;
margin-right: 0;
}
.landing .right .image {
position: relative;
}
.landing .right .image .back img {
position: absolute;
left: 100px;
}
.landing .right .image .mockups {
position: absolute;
top: -100px;
left: 100px;
}
/*this is text style I don't think the problem is here but I put it*/
.landing .left {
padding-top: 80px;
padding-left: 80px;
}
.landing .left h1 {
line-height: 1.3;
margin-bottom: 20px;
}
.landing .left p {
font-size: 15px;
margin-bottom: 20px;
}
.landing .left button {}
<div class="landing row">
<div class="col-md-6 left">
<div class="container">
<h1>Next generation digital banking</h1>
<p>Take your financial life online. Your Easybank account<br> will be a one-stop-shop for spending, saving,<br> budgeting, investing, and much more.</p>
<button class="btn linear" type="button">Request Invite</button>
</div>
</div>
<div class="col-md-6 right">
<div class="image">
<div class="back">
<img class="back-image img-fluid" src="images\bg-intro-desktop.svg" alt="">
</div>
<div class="front">
<img class="img-fluid mockups" src="images\image-mockups.png" alt="">
</div>
</div>
</div>
</div>
you can simply add to your body:
<style>
body{
overflow-x: hidden;
}
</style>
I have created two side by side owl carousel scroll elements. Schema:
I want to achieve, that price item description is little bit over owl carousel item borders. Schema:
Can someone please help with this situation using css or jquery.
Edit:
I crated replica. There are two owl elements. I want price:before element to be seen:
$("#banner_section_right .slider").owlCarousel({});
$("#banner_section_left .slider").owlCarousel({});
#container {
width: 100%;
height: 200px;
background: blue;
position: relative;
float: left;
}
#banner_section_right {
width: 70%;
background: red;
float: left;
}
#banner_section_left {
width: 30%;
background: green;
float: left;
}
#banner_section_left .item {
width: 100%;
background: yellow;
}
#banner_section_left .item:before {
width: 1em;
background: yellow;
top: 0;
content: "";
position: absolute;
right: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<div id="container">
<div id="banner_section_right">
<div class="slider">
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
<div class="item">
<p>
Viens
</p>
</div>
<div class="item">
<p>
Divi
</p>
</div>
</div>
</div>
<div id="banner_section_left">
<div class="slider">
<div class="item">
<p>
$1 000 000
</p>
</div>
</div>
</div>
</div>
I have example your can learn from this might help you what you want to achieve.
html:
<div id="container">
<div class="green"></div>
<div class="red"></div>
<div class="box"></div>
</div>
CSS:
#container{
width: 100%;
height: 200px;
background: blue;
position: relative;
}
div.green{
background: green;
display: block;
height: 100px;
}
div.red{
background: red;
display: inlinblock;
height: 100px;
}
div.box{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
have a look at this css property transform: translateY(-50%); this can move object over other.
Working example : http://fiddlesalad.com/css/div-over-other-div
I want to have css style like in image. I could not find it in Bootstrap and can not remember what it is called in css style. Can anyone tell me how to style it?
Thanks.
<!DOCTYPE html>
<html>
<body>
<h1>The legend element</h1>
<form action="/action_page.php">
<fieldset style="height:200px;">
<legend>Personalia:</legend>
</fieldset>
</form>
</body>
</html>
This design can be achieved using tag in HTML.
To know more about the Legend tag, see the link below.
https://www.w3schools.com/tags/tag_legend.asp
Example of Legend Tag.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_legend
You can even do it with some Math+CSS.
body {
margin: 0px;
padding: 0px;
}
.outer {
margin: 20px;
height: 100px;
width: 300px;
border: 2px solid gray;
position: relative;
}
.block {
width: max-content;
height: 20px;
padding: 0 5px;
position: absolute;
top: -10px;
background: white;
}
.left {
left: 10px;
}
.right {
right: 10px;
}
.center {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<div class="block left">Left Title</div>
</div>
<div class="outer">
<div class="block center">Center Title</div>
</div>
<div class="outer">
<div class="block right">Right Title</div>
</div>
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>
I have seen examples of three columns (fixed fluid fixed). However, I need an example of a four column solution.
The two outer columns are fixed.
The two inner columns are fluid.
Fixed | Fluid | Fluid | Fixed
You can use calc.
.first, .last {
width: 300px;
}
.middle {
width: calc(50% - 300px);
}
You may want to apply vendor prefixes too.
HTML
<div id="framecontentLeft">
<div class="innertube">
<h1>Left Frame 1</h1>
</div>
</div>
<div id="framecontentRight">
<div class="innertube">
<h1>Right Frame 4</h1>
</div>
</div>
<div id="maincontent">
<div class="inner1">
<h1>Middle Frame 2</h1>
</div>
<div class="inner2">
<h1>Middle Frame 3</h1>
</div>
</div>
CSS
#framecontentLeft, #framecontentRight{
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: navy;
color: white;
}
#framecontentRight{
left: auto;
right: 0;
width: 150px;
background-color: navy;
color: white;
}
#maincontent{
position: fixed;
top: 0;
left: 200px;
right: 150px;
bottom: 0;
background: #fff;
overflow: hidden;
}
.inner1{
height: 100%;
background:red;
width:50%;
float:left;
}
.inner2{
background:green;
height: 100%;
width:50%;
float:right;
}
DEMO
I like flexbox better than calc, if you can use it. It’s more… flexible.
<div id="container">
<div class="fixed">
Fixed
</div>
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
<div class="fixed">
Fixed
</div>
</div>
#container {
display: flex;
}
.fixed {
width: 15em;
}
.fluid {
flex: 1;
}
Dabblet. This, of course, makes all columns the same height, and if you can assume that, doing it without flexbox is also no problem given one more container (noting that if the fluid elements won’t necessarily be taller than the fixed ones, then you should give the inner container a max-height):
<div id="container">
<div class="fixed left">
Fixed
</div>
<!-- Fluid container! No, you don’t have to call it this. -->
<div class="bottle">
<div class="fluid">
Fluid
</div>
<div class="fluid">
Fluid
</div>
</div>
<div class="fixed right">
Fixed
</div>
</div>
#container {
position: relative;
}
.fixed {
bottom: 0;
position: absolute;
top: 0;
width: 15em;
}
.fixed.left {
left: 0;
}
.fixed.left {
right: 0;
}
.bottle {
margin: 0 15em;
overflow: hidden;
}
.fluid {
float: left;
width: 50%;
}
And, of course, if .bottle overflows, you’ll need some kind of clearing ::after.