I want to show an arrow over an image. This arrow should be centered every time.
How can I do it?
Here is my code in jsfiddle:
CSS:
.t1_img {
background-image:url('http://www.4freephotos.com/medium/batch/Branch-of-acacia-with-flowers777.jpg');
position: relative;
background-size: cover;
background-position: center center;
overflow: hidden;
border-radius: 10px 0 0 0;
height: 200px;
}
.t1_arrow {
position: absolute;
bottom: 0;
width: 60px;
border-left: 40px solid #cfcfcf;
border-right: 40px solid #cfcfcf;
border-top: 20px solid transparent;
}
.t1_content {
background-color: #cfcfcf;
height: 150px;
padding-top: 20px;
margin-bottom: 40px;
}
HTML:
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
<div class="col-md-3">
<div class="t1_img">
<div class="t1_arrow"></div>
</div>
<div class="t1_content">
Textinhalt
</div>
</div>
</div>
</div>
You know the width of the arrow so if you put it left:50%; and margin-left:-30px; because its width is 60px it is centered everytime.
So add this
.t1_arrow {left:50%;margin-left:-30px;}
Your fiddle edited
You could use the following line:
left: calc((100% - 60px)/2);
Where 60 px refers to the width of the arrow. This method is not supported by all browsers, unfortunately. For safety, add the following three lines to the .t1_arrow class:
.t1-arrow {
left: 45%;
left: calc((100%-60px)/2);
left: -webkit-calc((100%-60px)/2);
}
Or you could use jquery to set the height after pageload:
$(function() {
$(".t1-arrow").each( function() {
var w = $(this).parent(0).width();
$(this).css('left',(w-60)/2 + 'px');
});
});
If you only want it centred horizontally, add the following to your Arrow's CSS;
left: 0; right: 0;
margin: auto;
Updated Fiddle. https://jsfiddle.net/86e0gg99/12/
Here you can see a picture of the solution, i'm looking for.
https://db.tt/1UFk3baW
Related
I am creating a data table grid in react, currently I am able to render my dummy data with my code. But the problem is that the header row is overlapped by the first data row, which is very annoying
This is the markup I have :
<div class='Table_table'>
<div class='Table_table-header'>
<div style="height:30px;">
<div class='table_fixed-cols'>
</div>
<div class='Table_x-scroll header'>
<div class='table_row'>
<div class="table_cell"> Name </div>
<div class="table_cell"> Age </div>
<div class="table_cell"> Location </div>
</div>
</div>
</div>
</div>
<div class='table-container'>
<div class="table_fixed-cols">
<div class="table_row even"><div>
<div class="table_row even"><div>
<div class="table_row even"><div>
</div>
<div class="table_x-scroll">
<div class="table_row even">Dana</div>
<div class="table_row ">57</div>
<div class="table_row even">San Francisco</div>
</div>
</div>
</div>
</div>
The CSS I have:
.Table__table{
position: relative;
overflow-y: hidden;
}
.table__cell{
border-right: 1px solid black !important;
padding: 3px 5px !important;
position: absolute;
}
.table__row{
display: flex !important;
position: absolute!important;
margin-top: 1%;
left: 0 !important;
/* overflow: auto!important; */
}
.table_fixed-cols{
top:0 !important;
left: 0 !important;
z-index: 100 !important;
overflow: hidden !important;
position: absolute !important;
}
.table_x-scroll{
overflow:hidden;
position: absolute;
top: 0;
right: 0;
z-index: 0;
}
The thing is that I see my first data row completely overlapped with the header row ( class='Table_table-header' ).
Have been spending hours on trying to fix this issue now..
Any help would be much appreciated !
change css for container switch between position: absolute, position: relative
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
I want to make my div2 to centre align and div3 to be at right.
I tried doing that with text align: center for main div and making float right to div3 but it is making it center align by considering main div's remaining part. I have given display: inline-flex to main div
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
Please try with this code:
<div style="height: 40px;width:120px;background-color: yellow;align-items: center; position:relative;">
<div style="height: 20px;width:40px;background-color: red; overflow:auto; margin:0 auto">
Hello
</div>
<div style="height: 20px;position:absolute; right:0px; top:0px; width:20px;background-color: red;">
</div>
</div>
.main {
display: block;
position: relative;
width:100%;
text-align: center;
border: 1px solid red;
}
.main .div1 {
display: inline-block;
border: 1px solid;
}
.main .div2 {
float: right;
border: 1px solid;
display: inline-block;
}
<div class="main">
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
</div>
Divs are block level elements, so you can use a margin of auto on the left and right to place it in the middle.
.center {
margin: 0 auto;
}
.right {
float: right;
}
In the HTML you will need to adjust the ordering of the divs. Put div 3 before div 2 so that when you float it, they appear on the same line:
<div class="outer">
<div class="right"></div>
<div class="center"></div>
</div>
https://jsfiddle.net/dcqpw12u/1/
You can use position:relative for the main, and position:absolute to the other div, and it also centers it vertically
.main {
text-align: center;
background-color: red;
height: 50px;
position: relative;
}
.div2 {
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.div3 {
background-color: green;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
<div class="main">
<div class="div2">SOME DIV 2</div>
<div class="div3">SOME DIV 3</div>
</div>
Add style="margin: auto;" to your div2 element. And
style="margin-left: auto;" to your div3 element.
<div style="height: 40px;width:120px;background-color: yellow;align-items: center;">
<div style="margin:auto; height: 20px;width:20px;background-color: red;">
Hello
</div>
<div style="margin-left:auto; height: 20px;float: right;width:20px;background-color: red;">
</div>
</div>
.contentmain{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: left;
background:red;
}
.contentCenter{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 30%;
float: left;
background:yellow;
}
.contentRight{
background: white none repeat scroll 0 0;
color: black;
height: auto;
width: 35%;
float: right;
background:red;
}
<div class="contentmain">
Main<br/>
Content<br/>
</div>
<div class="contentCenter">
Center<br/>
Content<br/>
</div>
<div class="contentRight">
Right<br/>
Content<br/>
</div>
This might be fulfill your requirement.
<!DOCTYPE html>
<head>
<style>
.div0 {
text-align: center;
border-style: solid;
border-width: 5px;
height: 50px;
border-color: red;
position: relative ;
}
.div1 {
border-style: solid;
border-width: 4px;
right: 0%;
height: 40px;
width:40px;
border-color: green;
position: absolute;
}
.div2 {
left: 50%;
right:50%;
width:40px;
position: absolute;
border-style: solid;
height: 40px;
border-width: 4px;
border-color: green;
}
</style>
</head>
<body>
<div class="div0">
<div class="div1"><p>div1</p></div>
<div class="div2"><p>div2</p></div>
</div>
</body>
</html>
basically you can achieve this by using the position property and the right and left properties of CSS which you can refer to more on
Position and right property left property could be found on the site.
what i've done in my answer is set the main div as position relative and the other sub divs(div2 and div3) as absoulute
To get one div to the right most corner you set the right property to 0%
and to center a div i used 50% on both right and left properties.
I want the square like below for all screensize
But when i resize the window in smaller screen size it is looking like below:
Please help me to solve this problem.I tried in many ways but couldnot solve the problem.Related codes are given below :
Html:
<div class="price-area">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-6">
<div class="square">
<fieldset class="price-border">
<legend>Standard</legend>
<p class="one" >Leaflet • Poster</p>
<p>Banner • Bill Board • Support 24/7</p>
</fieldset>
</div>
</div>
<div class="col-xs-12 col-sm-6">
</div>
</div>
<div class="col-xs-12"></div>
</div>
</div>
</div>
CSS:
.square {
position: relative;
}
.price-border {
margin-bottom: 25px;
}
.price-border legend {
width: auto;
margin-bottom: 2px;
margin-left: 42%;
}
.price-border p.one {
text-align: center;
margin-top: 20px 20px 10px auto;
}
.price-border p:last-child {
text-align: center;
margin-bottom: 50px;
margin-right: 20px;
}
.price-border:after {
height: 0px;
width: 0px;
border: 39px solid #000;
position: absolute;
top: 34%;
left: 93.5%;
content: "";
display: block;
z-index: ;
transform: rotate(45deg);
}
Change .price-border:after style
/* CHANGES */
.price-border:after {
left: auto;
right: -36px;
}
Basically you only want to move your element to the right for number of pixels and how your element has static width you can just set right attribute.
More generic solution would be doing it with transform. For your case, code bellow.
.price-border:after {
left: 100%;
transform: translateX(-55%) rotate(45deg);
}
I have a div with position: fixed, which contains two other divs inside: one with content and second which must always be positioned on the bottom of the main div.
Here is an example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
The problem is that footer starts to move with other content when user scrolls content of the main block, despite of position:absolute of the footer block.
Is there any way to stick footer to the bottom of the main fixed block without changing html structure?
And what if main div contains many children and only last of them is the footer which we need to stick to bottom? Example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
Since the absolutely positioned element is inside .scroller and you don't want it to move when scrolling, the scrollable container should be .content instead to .scroller.
.content {
height: 100px;
overflow: auto;
}
Moreover, you should remove bottom: 0 from the fixed wrapper so that its height is given by its content, that is, 100px.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.content {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
In case you want multiple .content elements and don't want to scroll each one separately, you can wrap them all in a .scroller-inner container, and set the styles above to it.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
}
.scroller-inner {
height: 100px;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}
<div class="scroller">
<div class="scroller-inner">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Alternatively, if you know the height of the header, you can make the footer a fixed element, and use margins to correct its position. This is kinda hacky, though.
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px; /* val1 */
top: 0; /* val2 */
overflow: auto;
}
.footer {
position: fixed;
white-space: nowrap;
top: 100px; /* val1 + val2 */
line-height: 20px; /* val3 */
font-size: 16px; /* val4 */
margin-top: -18px; /* val3/2 + val4/2 */
}
<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>