I have a wordpress page, and I would like to add a bottom border to the post, according to the post category.
If post has only 1 category, then I use:
.category-daily {
border-bottom: red solid 3px;
}
But there are posts who have 2 categories, and therefore 2 classes, for example: category-weekly and category-daily
What can I do to add a red bottom border for daily category and after that add a yellow bottom border for weekly category
Elements cannot have two borders..but you can fake it with a pseudo-element.
body {
text-align: center;
}
div {
height: 100px;
width: 150px;
display: inline-block;
box-shadow: inset 0 0 1px 0 black;
/* for demo purposes only */
padding-bottom: 6px;
position: relative;
}
.category-daily:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: red solid 3px;
}
.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-bottom: yellow solid 3px;
}
.category-daily.category-weekly:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
border-top: red solid 3px;
border-bottom: yellow solid 3px;
}
<div class="category-daily"></div>
<div class="category-weekly"></div>
<div class="category-daily category-weekly"></div>
There is no possibility to define more than one border bottom.
If you wish to achive such visual result you have to add an extra element for each category you're applying.
For example with div element for each category:
html
<div class="post">
<div class="daily"></div>
<div class="weekly"></div>
</div>
css
.post .daily{
background:red;
height:1px;
width:100%;
}
.post .weekly{
background:yellow;
height:1px;
width:100%;
}
Or even better: a hr for each category
html
<div class="post">
<hr class="daily"/>
<hr class="weekly" />
</div>
css
.post .daily{
background-color:red;
color:red;
border:0;
height:1px;
}
.post .weekly{
background-color:yellow;
color:yellow;
border:0;
height:1px;
}
One option is to use box-shadow for the other border, like this:
.daily {
border-bottom: 3px solid red;
}
.weekly {
box-shadow: 0 3px 0 yellow;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="daily">This is daily</div>
<div class="daily">This is daily</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
<div class="daily weekly">This is daily and weekly</div>
<div class="weekly">This is weekly</div>
<div class="daily">This is daily</div>
</body>
</html>
You can't have two border-bottoms, but if you're comfortable with jquery, this may work for you:
$('.category-daily.category-weekly').wrap('<div class="bbottom"></div>');
div{
width: 60px;
height: 60px;
}
.category-daily.category-weekly {
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-daily{
border: 1px solid black;
border-bottom: 9px solid red;
}
.category-weekly {
border: 1px solid black;
border-bottom: 9px solid yellow;
}
.bbottom{
padding-bottom: 9px;
border-bottom: 9px solid yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class='category-daily category-weekly'>
</div>
<br>
<div class='category-daily'>
</div>
<br>
<div class='category-weekly'>
</div>
This wraps a div with both classes with another div which contains the secondary border-bottom.
Related
Here's what I have so far:
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
/*
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}*/
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>
I'm wondering - is it possible to style the active tab differently so that it points downward at the bottom center, like I have it in the following mockup?
I tried to implement the downward-facing triangle effect that's used in this article:
https://css-tricks.com/snippets/css/css-triangle/
adding it as an ::after to the active tab - so why didn't that have any effect?
.active::after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
}
Also tried something similar - what I found here: Center Triangle at Bottom of Div
All other ideas / suggestions are welcome!
You were missing the position on the after element.
I've added a position: relative; on the buck-knives-inner-nav-tab and some more positioning on the after:
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
.buck-knives-inner-nav {
display: flex;
border: 1px solid #707070;
}
.buck-knives-inner-nav-tab {
text-align: center;
padding: 10px;
width: 100px;
position: relative;
}
.buck-knives-inner-nav-tab:not(:last-child) {
border-right: 1px solid #707070;
}
.active {
background-color: #0B0E55;
color: #ffffff;
}
.buck-knives-inner-nav-tab.active:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0B0E55;
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
}
<div class="buck-knives-inner-nav">
<div class="buck-knives-inner-nav-tab active">
Hold Old is My Knife?
</div>
<div class="buck-knives-inner-nav-tab">
Knife Sharpening
</div>
<div class="buck-knives-inner-nav-tab">
Safety Tips
</div>
<div class="buck-knives-inner-nav-tab">
Knife Care
</div>
<div class="buck-knives-inner-nav-tab active">
Choosing the Right Knife
</div>
<div class="buck-knives-inner-nav-tab">
Buck's Forever Warranty
</div>
</div>
The webpage displays four arrows top, right, left and bottom; at the top left corner of the screen. I need to align them at the center of the page such that it fits to the page layout without scrolling appearing. Can anyone suggest what I need to do?
Please see the code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
<style>
#item_1 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
#item_2 {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #555;
margin-top: 50px;
}
#item_3 {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #555;
border-bottom: 25px solid transparent;
margin-top: 50px;
float:left;
}
#item_4 {
width: 0;
height: 0;
align : right;
border-top: 25px solid transparent;
border-left: 50px solid #555;
border-bottom: 25px solid transparent;
float:left;
margin-top: 50px;
}
</style>
</head>
<body>
<div style="float:left; width: 100%">
<div id="item_3"></div>
<div style="float:left">
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="item_4"></div>
</div>
<input type="submit" value="Logout" style="
background: black;
color: #fff;
border: 0px;
padding: 5px;
margin-top: 40px;
">
</body>
</html>
Better not using float, but use position:fixed; with top and left values.
https://www.w3schools.com/css/css_positioning.asp#:~:targetText=An%20element%20with%20position%3A%20fixed,would%20normally%20have%20been%20located.
You might try putting/grouping all of the 4 arrow divs in one single div and do styling on that. I have tried the following code:
CSS
.container
{
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
HTML
<div class="container">
<div style="float:left; width: 100%">
<div id="item_3" ></div>
<div style="float:left">
<div id="item_1"></div>
<div id="item_2"></div>
</div>
<div id="item_4"></div>
</div>
</div>
I am trying to create a webpage that displays a circle broken up into quadrants and allows the user to select one or more of the quadrants by clicking on them. After a user clicks a quadrant to select it, the quadrant would change color.
Below is a snippet of HTML that displays the upper two quadrants.
Using HTML, CSS, and/or JavaScript, how I can update my code to actually do this?
I've tried various solutions, but the closest I got was being able to select a single quadrant at a time and changing the background color of the enclosing square DIV, not the circular quadrant's color.
<div style="display:inline-block;
position:relative;
height:500px;
width:500px;">
<div style="position:absolute;
top:0;
left:0;">
F1
</div>
<div style="background:#CCC;
border:2px solid #000;
border-radius:500px 0 0 0;
color:#000;
height:500px;
width:500px;">
</div>
</div>
<div style="display:inline-block;
position:relative;
height:500px;
width:500px;">
<div style="position:absolute;
top:0;
right:0;">
F2
</div>
<div style="background:#CCC;
border:2px solid #000;
border-radius:0 500px 0 0;
color:#000;
height:500px;
width:500px;">
</div>
</div>
You can create a simple 2x2 grid using flex, grid, inline-block, etc and use border radius on the container instead of the elements.
Then you can easily add JS code to change background-color of element on click.
$('.box > div').click(function() {
$(this).toggleClass('select');
})
.box {
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
border: 1px solid;
display: flex;
flex-wrap: wrap;
}
.box>div {
height: 50%;
width: 50%;
border: 1px solid #000;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
justify-content: center;
align-items: center;
color: #fff;
}
.box>div.f1 {
border-left: 0;
border-top: 0;
background: blue;
}
.box>div.f2 {
border-right: 0;
border-top: 0;
background: red;
}
.box>div.f4 {
border-right: 0;
border-bottom: 0;
background: green;
}
.box>div.f3 {
border-left: 0;
border-bottom: 0;
background: orange;
}
.box>div.select {
background: #111;
}
.box>div:hover {
opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="f1">F1</div>
<div class="f2">F2</div>
<div class="f3">F3</div>
<div class="f4">F4</div>
</div>
How to get triangle layout of 'mission' section within the container only without using "polygon". I don't want it to flow outside the container.
You can make triangles using border property of css.
Check out this link for more shapes : https://css-tricks.com/examples/ShapesOfCSS/
.container {
position: relative;
}
.mission {
position: absolute;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 100px solid transparent;
border-top: 150px solid red;
border-bottom: 0px solid transparent;
}
.mission + div {
position: absolute;
}
.content {
position: absolute;
width: 350px;
height: 200px;
background: lightgrey;
padding-left: 100px;
}
<div class="container">
<div class="content">
Content
</div>
<div class="mission">
</div>
<div>
Mission
</div>
</div>
I am trying to display a few words inside of a CSS styled arrow. I have figured out how to create an arrow with CSS which works fine. however, when I place the arrow within <h2>, complete arrow is not being displayed.
The source code is as follows
HTML
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
STYLE
<style>
.arrow-right::after{
content: "";
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
}
</style>
The output is as follows
The arrow pointer is not being displayed completely. Am I using the elements wrongly? I will need the div / h2 height to be bigger later, but at least that is not my concern right now since the arrow itself is not being displayed as desired.
Edit:
Sorry for my bad drawing. This sample below is what I want but of course the arrow would be lots nicer I just used paints to give it a quick draw.
Is this what you're looking for?
http://jsfiddle.net/61tc5em9/2/
HTML
<div id="container">
<div id="arrow">text text text</div>
<div id="content">text text text text</div>
</div>
CSS
#container {
height: 75px;
background-color: black;
position: relative;
white-space: nowrap;
}
#arrow {
width: 30%;
background-color: red;
text-align: center;
font-size: 1.5em;
line-height: 75px;
}
#arrow::after {
content: "";
border-top: 37px solid transparent;
border-bottom: 38px solid transparent;
border-left: 50px solid red;
position: absolute;
left: 30%;
}
#content {
color: yellow;
font-size: 1.5em;
position: absolute;
left: 50%;
top: 25px;
}
Hope this helps. Let me know if you need any changes.
You need font-size:0; for the arrow.
.arrow-right::after {
content: "";
width: 0;
height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid green;
font-size: 0;
position: relative;
top: -8px;
}
span{
display: inline-block;
}
<div style="background-color: yellow;">
<h2><span style="background: green;">This is what I want</span><span class="arrow-right"></span><span style="margin-left: 50px;">is this what you want?</span></h2>
</div>
Recommendations for improving your code and make it more dynamic:
Use :after in the statement element itself (this way you will avoid
the extra code in html and you can position the arrow relative to the element).
Align it to the right using left: 100% (so it is always position to
the right regardless of the width of the arrow).
Use top: 50% and margin-top: -(height/2)px to center it vertically.
Just like this:
.wrapper {
padding: 2px 0;
background: yellow;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent; /*change the border width to set the desired hieght of the arrow*/
border-bottom: 15px solid transparent;
border-left: 15px solid green; /*change the border width to set the desired width of the arrow*/
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">This is what I want</span>
<span style="margin-left: 50px;">is this what you want?</span>
</h2>
</div>
Note that in this way you have a more semantic code because you don't have dummy element in your html and if you want more statement it will put the arrow behind automatically like this:
.wrapper {
padding: 2px 0;
background: yellow;
margin-bottom: 10px;
}
.statement {
position: relative;
background: green;
}
.statement:after {
content:"";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid green;
position: absolute;
left: 100%;
top: 50%;
margin-top: -15px; /*the element has height= 30px (border-top + border-bottom) to center it -height /2 */
}
h2{
margin: 0;
}
<div class="wrapper">
<h2>
<span class="statement">One statement</span>
<span style="margin-left: 50px;">Good</span>
<span class="statement">Two statement</span>
<span style="margin-left: 50px;">Great</span>
</h2>
</div>
<div class="wrapper">
<h2>
<span class="statement">Where is the arrow?</span>
<span style="margin-left: 50px;">Do not worry about it</span>
</h2>
</div>