Well the code is
.all-card{
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child{
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border:white solid;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
}
.left-panel-child:hover{
border-left:white solid;
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
My problem is that the left border that appears after`: hover' moves the text away from itself
I ve tried position:absolute with relative
add a transparent border to the initial element
.all-card{
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child{
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border:white solid;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
border-left:transparent solid;
}
.left-panel-child:hover{
border-left:white solid;
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
is causing by the white border when mouse is on the div because you're turning the div's border to white which is the same color as the background one means that the border will look like is pushing somehow but not just remove border-left:white solid; or change the color to see the difference
.all-card {
width: 100%;
height: 100%;
background-color: red;
}
.left-panel-child {
display: flex;
box-sizing: border-box;
justify-content: flex-start;
align-items: center;
height: 70px;
width: 100%;
margin-top: 1px;
background-color: darkblue;
border: solid white;
color: white;
cursor: pointer;
border-width: 0.1px 0 0 0;
}
.left-panel-child:hover {
/*border-left:white solid;*/
}
<div class="all-card">
<div class="left-panel">
<div class="left-panel-child"><span>hello</span></div>
</div>
</div>
Related
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
I'm trying to make a button show a slightly transparent background on hover, and it works fine if the element containing the button has a white background.
When the container element has a not-white background, the transparent background on the button ends up showing the background of the container.
I've searched around and tried making another element with a white background and the same width and height of the button, and then absolute position it. Then I give it and z-index of -1 to stay behind the text on the button.
Basically, I would like to make the hover look like in Example 2, but when it's inside the green container.
EDIT: I was able to make it work by using another container for the button, giving it a width and height of auto and a white background, as show in Example 5. However, I would like to know if there is a better solution, since mine would require to use an extra wrapper for every other button on a non-white container.
In the snippet below:
Example 1: when hovering, the color of the container ends up showing up.
Example 2: correct color on hovering.
Example 3: here I've tried using another element with a white background and positioning it behind the button. But it has the same problem as Example 1.
Example 4: here I've tried using z-index, but the hover effect doesn't show up at all.
Example 5: it works, but I'm not sure if that's the best way of doing it.
.container {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
background: #3FAF6C;
}
.containerWhite {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
border: 1px solid black;
}
.btn_test {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
/*z-index: 10;*/
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test2 {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
/*z-index: 10;*/
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test3 {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
z-index: 10;
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn_test2:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn_test3:hover {
background-color: rgba(105, 220, 172, .22);
z-index: 15;
}
.btn_background {
position: absolute;
background: #FFF;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
border-radius: 8px;
z-index: -1;
}
.btn_test::before {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
border-radius: 8px;
left: 0px;
top: 0px;
background-color: #FFF;
}
.btn_test4 {
white-space: nowrap;
border: none;
width: auto;
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test4:hover {
background-color: rgba(105, 220, 172, .22);
}
.btn-white-background {
width: auto;
height: auto;
border: 1px solid black;
border-radius: 8px;
background: #FFF;
}
<div class="container">
<button class="btn_test" type="button">Example 1</button>
</div>
<div class="containerWhite">
<button class="btn_test" type="button">Example 2</button>
</div>
<div class="container">
<button class="btn_test2" type="button">Example 3
<div class="btn_background"></div>
</button>
</div>
<div class="container">
<button class="btn_test3" type="button">Example 4
<div class="btn_background"></div>
</button>
</div>
<div class="container">
<div class="btn-white-background">
<button class="btn_test4" type="button">Example 5
</button>
</div>
</div>
By your description, it seems that you actually do not want a slightly transparent background but just a light green one. (partially transparent by definition means that you can see partially through it)
So why not just use the color you want ?
In your case, it is rgb(222, 247, 237)
.container {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
background: #3FAF6C;
}
.containerWhite {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 80px;
border: 1px solid black;
}
.btn_test {
position: relative;
white-space: nowrap;
border: 1px solid black;
width: auto;
margin-left: 8px;
/*z-index: 10;*/
padding: 12px 16px;
border-radius: 8px;
background: #FFF;
}
.btn_test:hover {
background-color: rgb(222, 247, 237);
}
<div class="container">
<button class="btn_test" type="button">Example 1</button>
</div>
<div class="containerWhite">
<button class="btn_test" type="button">Example 2</button>
</div>
I am trying to create a very simple webpage to learn a bit about CSS as I am awful with it.
I am trying to add a navigation bar to my page. The two elements that are not working as expected are the text-align: center (in .Item) and vertical-align: bottom. If I add or remove these lines nothing happens.
Could anyone tell me why these two parts don't seem to be working as expected? Thanks in advance.
My JSX is as follows:
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
About
</ul>
<ul className={classes.Item}>
Shop
</ul>
</div>
</div>
</React.Fragment>
My CSS is as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
}
.Item {
text-align:center;
margin:10px;
display: inline;
border: 2px solid black;
}
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 100%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
vertical-align: bottom;
display: flex;
align-items: center;
justify-content: center;
}
.Nav ul{
margin: 0px;
padding: 0px;
}
.Nav li{
display: inline-block;
margin: 0 10px;
padding: 0px;
border: 1px solid red;
text-align: center;
}
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<ul className={classes.Item}>
<li> About</li>
</ul>
<ul className={classes.Item}>
<li> Shop</li>
</ul>
</div>
</div>
</React.Fragment>
After reading all of your suggestions I was able to do it as follows:
.Logo {
width: 100vw;
background-color: white;
border-bottom: 1px solid black;
height: 15vh;
}
.Bar {
width: 100vw;
background-color: white;
border-bottom: 1px solid #81d8d0;
height: 5vh;
}
.Nav {
width: 50%;
height: 100%;
margin: auto;
border: 1px solid red;
text-align: center;
}
.Item {
position: relative;
text-align: center;
margin: 0px 50px;
display: inline;
border: 2px solid black;
top: calc(100% - 30px);
}
And
<React.Fragment>
<div className ={classes.Logo}></div>
<div className = {classes.Bar}>
<div className ={classes.Nav}>
<div className={classes.Item}>About</div>
<div className={classes.Item}>Shop</div>
</div>
</div>
</React.Fragment>
I would like to know if there is a way to do these borders only using CSS in a way that they follow this shape:
I am trying to use CSS pseudo-elements ::after and ::before but I can't feel a kind of gap between divs. Any suggestion?
You can use pseudoelements to created rounded fragments and "clipped" borders.
.flex {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.flex > * {
height: 50px;
position: relative;
display: flex;
align-items: center;
}
.flex > *:before {
content: "";
position: absolute;
display: inline-block;
top: 10px;
bottom: 0px;
left: -90px;
width: 90px;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-bottom-right-radius: 10px;
}
.flex > *:after {
content: "";
position: absolute;
display: inline-block;
top: -2px;
height: 10px;
left: 0px;
width: 10px;
border-left: 2px solid red;
border-top: 2px solid red;
border-top-left-radius: 10px;
}
.flex > .one {
width: 100px;
}
.flex > .two {
width: 200px;
}
.flex > .three {
width: 300px;
}
.flex > .four {
width: 400px;
}
.degrees {
/* circle styles */
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid red;
/* styles for centering */
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
}
<div class="flex">
<div class="one">
<div class="degrees">1°</div>
</div>
<div class="two">
<div class="degrees">2°</div>
</div>
<div class="three">
<div class="degrees">3°</div>
</div>
<div class="four">
<div class="degrees">4°</div>
</div>
</div>
These are styles. Therefore in tag style="-moz-border-radius:5px;"
input[type=email] {
-moz-border-radius: 5px;
border-radius: 5px;
border: solid 1.4px black;
padding: 5px;
padding: 7px 7px 7px 7px;
max-width: 300px;
width: 80%;
}
Im copying this Gensis Theme for CSS practice: http://my.studiopress.com/themes/daily-dish/#demo-full
I am now having an issue, since one of the black boxes exceeds its parent-Box.
The attribute causing this is the following code
.heading{
padding-left: 2em;
however I want this padding. How do I make the black background stop at the end of the parent box(id='right_1') and maintain the left padding?
*You have to scroll to the right when you run the snippet to see the issue
*{
margin: 0 auto;
}
body{
margin: 0 auto;
background-image: url('background.png');
}
.heading{
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
}
header{
padding: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
#wrapper{
border: 1px solid lightgrey;
padding-left: 40px;
padding-right: 40px;
margin: auto;
width: 960px;
height: 2000px;
background: white;
}
main{
display: flex;
border: 1px solid red;
}
.blackbox{
}
#left {
width: 100%;
display: flex;
height: 1000px;
border: 1px solid black;
}
#left_1{
display: flex;
width: 100%;
}
#right {
margin-left: 5%;
width: 30%;
display: flex;
border: 1px solid black;
}
#right_1{
width: 100%;
}
<main>
<section id='left'>
<section id='left_1'>
<h2 class='heading'>Featured Dish</h2>
</section>
</section>
<aside id='right'>
<aside id='right_1'>
<h2 class='heading'>About the Author</h2>
</aside>
</aside>
</main>
</div>
You can add box-sizing:border-box to the .heading element.
This way the width and height properties include the padding.
CSS would be:
.heading {
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
box-sizing: border-box; // Add box-sizing: border-box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Hope this helps :)
You can solve this issue making box-sizing: border-box;
Try below CSS
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
JSFIDDLE DEMO
Read more about box-sizing