This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I am trying to implement tabs in our application. I've got a CSS problem where somehow I am adding padding or magin to the right of every tab-item
See my problem in here: JSFiddle
As you can see in the Fiddle, the first tab-item is currently active. However, there is some padding to the right of the item. Because of this padding/margin, the bottom border starts a few pixels too soon.
What am I doing wrong here?
.tabs2 {
border-bottom: 1px solid red;
}
.tabs2-wrap {
margin-bottom: -1px;
position: relative;
}
.tablist {
transform: translateX(0px);
border: 1px solid red;
border-bottom: none;
border-radius: 4px 4px 0 0;
width: max-content;
}
.tabs2-item {
padding: 0 20px;
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
border-left: 1px solid red;
/* ** Hacky solution ** */
/* margin-left: -4px; */
}
.tabs2-item:first-child {
border-left: none;
}
.tabs2-isActive {
border-bottom: 1px solid #fff;
color: #409eff;
}
<div class="tabs2">
<div class="tabs2-wrap">
<div class="tablist">
<div class="tabs2-item tabs2-isActive">Algemeen</div>
<div class="tabs2-item">Vertrouwelijk</div>
<div class="tabs2-item">Historie</div>
<div class="tabs2-item">Kaasboer</div>
</div>
</div>
</div>
you try with display flex:
But why does this problem occur?
Because the display inline-block considers empty characters and spaces as part of block;
.tabs2 {
border-bottom: 1px solid red;
}
.tabs2-wrap {
margin-bottom: -1px;
position: relative;
}
.tablist {
transform: translateX(0px);
border: 1px solid red;
border-bottom: none;
border-radius: 4px 4px 0 0;
width: max-content;
display:flex;
}
.tabs2-item {
padding: 0 20px;
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
border-left: 1px solid red;
/* ** Hacky solution ** */
/* margin-left: -4px; */
}
.tabs2-item:first-child {
border-left: none;
}
.tabs2-isActive {
border-bottom: 1px solid #fff;
color: #409eff;
}
<div class="tabs2">
<div class="tabs2-wrap">
<div class="tablist">
<div class="tabs2-item tabs2-isActive">Algemeen</div>
<div class="tabs2-item">Vertrouwelijk</div>
<div class="tabs2-item">Historie</div>
<div class="tabs2-item">Kaasboer</div>
</div>
</div>
</div>
and other solution: remove white-space from html without flex:
.tabs2 {
border-bottom: 1px solid red;
}
.tabs2-wrap {
margin-bottom: -1px;
position: relative;
}
.tablist {
transform: translateX(0px);
border: 1px solid red;
border-bottom: none;
border-radius: 4px 4px 0 0;
width: max-content;
display:flex;
}
.tabs2-item {
padding: 0 20px;
height: 40px;
line-height: 40px;
display: inline-block;
position: relative;
border-left: 1px solid red;
/* ** Hacky solution ** */
/* margin-left: -4px; */
}
.tabs2-item:first-child {
border-left: none;
}
.tabs2-isActive {
border-bottom: 1px solid #fff;
color: #409eff;
}
<div class="tabs2">
<div class="tabs2-wrap">
<div class="tablist">
<div class="tabs2-item tabs2-isActive">Algemeen</div><div class="tabs2-item">Vertrouwelijk</div><div class="tabs2-item">Historie</div><div class="tabs2-item">Kaasboer</div>
</div>
</div>
</div>
Looking at your CSS, you have the left and right padding on all tabs2-item elements set to 20px. Then the CSS under the first-child selector turns off the padding to the left of the first tabs2-item element (leaving the padding on the right).
Related
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 2 years ago.
I'm just starting out and I created this document in which I coded a 3x3 checkerboard (yes I know there's probably a better way to do it, but that's not the point).
Beneath it I created a heading element that somehow keeps showing up in the same line as the checkerboard even though it should actually be displayed as a block element and should therefore show up in the next line.
Now, I know that I could just use <br> in my html file, but I'd really like to know the reason for this behavior and how to change it more elegantly.
I assume that it has something to do with the float: left; in my CSS file but I'm not sure.
So please: how can I change my CSS code to have the heading show up in the next line as it normally should?
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
You have two issues:
in your css you have #butsection instead of #buttonsection
If an element can fit in the horizontal space next to the floated elements, it will. Unless you apply the clear property to that element in the same direction as the float. Then the element will move below the floated elements.
#checkerboard{
width: 300px;
height: 300px;
}
.checkone{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd){
background-color: #10e364;
}
.checkone:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
}
.checktwo{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd){
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even){
background-color: #e016ab;
border-top: none;
}
.checkthree{
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd){
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even){
background-color: #e016ab;
border-right:none;
border-left:none;
border-top:none;
}
/* now comes the important part*/
#buttonsection{
clear:both;
font-size: 15px;
}
#buthead{
font-size: 1.5em;
width: 100%;
display: block;
}
<div id="checkerboard">
<p>The checkerboard:</p>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
Just move <p>The checkerboard:</p> out of the #checkerboard div.
#checkerboard {
width: 300px;
height: 300px;
}
.checkone {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkone:nth-of-type(odd) {
background-color: #10e364;
}
.checkone:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
}
.checktwo {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checktwo:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
border-right: none;
border-left: none;
}
.checktwo:nth-of-type(even) {
background-color: #e016ab;
border-top: none;
}
.checkthree {
float: left;
width: 100px;
height: 100px;
border: 2px solid black;
box-sizing: border-box;
}
.checkthree:nth-of-type(odd) {
background-color: #10e364;
border-top: none;
}
.checkthree:nth-of-type(even) {
background-color: #e016ab;
border-right: none;
border-left: none;
border-top: none;
}
/* now comes the important part*/
#butsection {
font-size: 15px;
}
#buthead {
font-size: 1.5em;
width: 100%;
display: block;
}
<p>The checkerboard:</p>
<div id="checkerboard">
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checkone"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checktwo"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
<div class="checkthree"></div>
</div>
<section id="buttonsection">
<h2 id="buttonhead">Button em/rem test</h2>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/mdOJGRM
I have been trying hard without success to add a little triangle under my square to act as a pointer like this:
My code by itself works, but whenever I try to add css to make this triangle nothing will appear. I think it has to do with before-after functions, but I'm not really getting it. Anyone can help me with that?
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.com" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
edit: code of the triangle
<div class="triangle-down"></div>
<style>
.triangle-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid #555;
}
</style>
Generally in CSS triangles are made using borders, not before and after pseudo elements. To create a downward pointing triangle, you would create a top border of n number of pixels, and left and right borders of half that width and also transparent.
Example:
<div id="slider_outer1">
<div class="slider_segment"><img src="myurl.png" alt="Nature" style="width:100%;"></div>
<div id="slider_marker1"><div id='triangle-down'></div></div>
</div>
<style>
.container {width:400px;}
#slider_outer1 {width: 98%;border: 5px solid #8f89ff; position: relative;display: inline-block; border-radius: 5px;}
.slider_segment {width: 100%; float: left; display: inline;}
#slider_marker1 {
position: absolute;
border: 2px solid #574fff;
height: 30px;
width: 5%;
top: 120px;
left: 57.25%;
text-align: center;
Margin-left: -10%;
padding: 5px 0px;
background: #ffffff;
border-radius: 5px;
}
#triangle-down {
position: absolute;
top: 40px;
right: 50%;
transform: translateX(50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid blue;
}
div#slider_marker1:after {
content: "5";
font-size: 20px;
padding: 5px;
line-height: 30px;
font-family: sans-serif;
}
</style>
See my codepen here: https://codepen.io/anon/pen/bvXOab
You could add another div for the triangle like
<div id='triangle'></div>
Css For the triangle...
#triangle{
width: 0;
height: 0;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-top: 80px solid blue;
}
However I feel that your problem is not that it just isnt appearing its that the positioning is messed up so its 'hidden' behind the sliders
I think I understand what you're trying to make. This should add a triangle above the marker. This solution should allow you to also remove anything related to triangle-down as it only requires the slider_marker1 div
#slider_marker1::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: auto;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid green;
z-index: 100;
}
I'm trying to recreate this stylized line border behind my header (see: https://www.vox.com's yellow border behind 'Top Stories'). I understand that it's being created using :before but I can't seem to get my header span (projheader_name) to white out some of the border AND I'm getting two of the :before elements created for some reason. One gets inserted after div class="container" and the other after span="projheader_name".
#projheader {
margin-top: 40px;
padding-top: 20px;
}
#projheader .container {
background-color: white;
}
#projheader h3 {
margin-bottom: 10px;
}
.projheader_name {
background-color: white;
position: relative;
z-index: 3;
}
#projheader :before {
border-left: 4px solid #17A2B8;
border-right: 4px solid #17A2B8;
border-top: 4px solid #17A2B8;
content: " ";
height: 40px;
left: 6%;
position: absolute;
right: 6%;
top: 27%;
}
<section id="projheader">
<div class="container">
<span class="projheader_name">
<h3>Landing Page: Sense</h3>
</span>
</div>
</section>
h3 {
text-align: center;
border: 4px solid #17A2B8; border-bottom: 0;
}
h3 span {
position: relative;
top: -0.7em;
background: #fff;
display: inline-block;
padding: 0 0.7em;
}
<h3><span>LANDING PAGE</span></h3>
How can draw an up-down arrow with pure CSS?
This is what I get using HTML :
.up-down-arrow {
font-size: 50px;
color: #666;
padding: 0;
margin: 0;
display: inline-block;
}
<div class="up-down-arrow">↕</div>
But the line between the arrows is too short. Can I make it longer?
Ideally, this is what I am after:
Single element solution
You can achieve that with pseudo elements, CSS triangles and some positioning:
.arrow {
width: 2px;
height: 200px; /* <- adjust your height as you need it */
background: black;
margin: 10px;
position: relative;
}
.arrow::before,
.arrow::after {
content: '';
position: absolute;
left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.arrow::before {
top: 0;
border-bottom: 15px solid black;
}
.arrow::after {
bottom: 0;
border-top: 15px solid black;
}
<div class="arrow"></div>
Multiple elements solution
To achieve the actual arrow shape, you will need multiple elements. Here the pseudo elements are used to create white triangles, that cut out the black arrow heads:
.arrow {
width: 2px;
height: 200px; /* <- adjust your height as you need it */
background: black;
margin: 10px;
position: relative;
}
.up, .down, .arrow::before, .arrow::after {
position: absolute;
left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.up {
top: 0;
border-bottom: 15px solid black;
}
.down {
bottom: 0;
border-top: 15px solid black;
}
.arrow::before, .arrow::after {
content: '';
z-index: 2;
}
.arrow::before {
top: 11px;
border-bottom: 4px solid white;
}
.arrow::after {
bottom: 11px;
border-top: 4px solid white;
}
<div class="arrow">
<div class="up"></div>
<div class="line"></div>
<div class="down"></div>
</div>
Or another variant with a continuous line:
.line {
position: relative;
margin: -15px 0 -15px 9px;
width: 2px;
height: 180px;
background-color: black;
z-index: 5;
}
.up,
.down {
position: relative;
z-index: 3;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.up {
border-bottom: 15px solid black;
}
.down {
border-top: 15px solid black;
}
.down::before, .up::after {
position: absolute;
left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
z-index: 4;
}
.down::before {
bottom: 11px;
border-top: 4px solid white;
}
.up::after {
top: 11px;
border-bottom: 4px solid white;
}
<div class="arrow">
<div class="up"></div>
<div class="line"></div>
<div class="down"></div>
</div>
To make the up-down arrows with the line in between the same as your example, I would suggest using SVG. You can use it inline as shown in the following example :
.wrap{
position:relative;
height:70vh;
border-left:1px solid #000;
margin:10vh 50px;
padding:5vh 20px;
}
.arrow {
position:absolute;
left:-5px;
width: 9px;
height: auto;
}
.up{top:-9px;}
.down{bottom:-9px;}
<div class="wrap">
<svg class="arrow up" viewbox="0 0 7 10">
<path d="M3.5 0 L7 10 Q3.5 7 0 10z"/>
</svg>
<svg class="arrow down" viewbox="0 0 7 10">
<path d="M3.5 10 L7 0 Q3.5 3 0 0z"/>
</svg>
Whatever content you need here
</div>
The inline SVG arrows are made with a path element and using one quadratic curve (made with Q3.5 7 0 10 in the up arrow).
The line between the arrows is made with a border left on a container div it expands with the height of this container.
Both arrows are positioned absolutely.
Here is one more solution using arrow char code \027A4 for ::before and ::after content.
Size of these chars has bound to root font size rem and their modification rotate, top and left based on the content font-size.
.arrow {
position: relative;
width: 3px;
height: 150px;
margin: 20px;
background: tomato;
}
.arrow::before,
.arrow::after {
content: '\027A4';
position: absolute;
font-size: 1.5rem;
color: tomato;
}
.arrow::before {
top: -.9em;
left: -.5em;
transform: rotate(-90deg);
}
.arrow::after {
bottom: -.9em;
left: -.32em;
transform: rotate(90deg);
}
<div class="arrow"></div>
To keep it simple, change the height style in mid class to increase the length of line!
.up {
width: 0px;
height: 0px;
border-bottom: 10px solid black;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: none;
}
.mid {
margin-left:7px;
width: 2px;
height: 180px;
background-color:black;
}
.down{
width: 0px;
height: 0px;
border-top: 10px solid black;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: none;
}
<div class='up'></div>
<div class='mid'></div>
<div class='down'></div>
Hope it helps!
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}