I have a span inside a h1 and I would like to center it vertically in the h1 background.
h1 {
background-color: green;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
<h1>Title <span>i</span></h1>
Just add vertical-align:middle; to it's styles:
h1 {
background-color: green;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
vertical-align:middle;
}
<h1>Title <span>i</span></h1>
If that isn't central enough (it can be based on you font size), you can use flex for true centering - the following also centres the i in the circle:
h1 {
background-color: green;
/*add this*/
display:flex;
width:100%;
}
span {
font-size: 8.5px;
color: #fff;
width: 15px;
height: 15px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
/*use this for vertical centering*/
align-self:center;
/*use this to center the i*/
display: inline-flex;
justify-content:center;
align-items:center;
}
<h1>Title <span>i</span></h1>
h1 {
background-color: green;
position:relative;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 10px;
height: 15px;
padding-left: 5px;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
position:absolute;
top:50%;
transform:translate(0,-50%);
}
<h1>Title <span>i</span></h1>
You have to use equal height and width property with border-radius to get proper circle and remove padding-left
You can use flex for it and update css as i posted below
h1 {
background-color: green;
vertical-align: middle;
}
span {
font-size: 8.5px;
color: #fff;
display: inline-block;
width: 15px;
height: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #fff;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
vertical-align: middle;
}
<h1>Title <span>i</span></h1>
Related
I have a div block with an image, a heading and a paragraph. I want to change the background-color and the text color of that div when i hover on it but only the background-color changes, the color tag is simply ignored. How can I fix this?
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
color: #24252a;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
NOTE: I am still very new to programming with css, and I am doing this for a school project.
PS: some of the names are written in german, as it is my native language.
Have a great rest of your day!
Lucien
.Div_Systemingenieur {
width: 18%;
padding: 20px;
border: 1px;
border-color: white;
border-radius: 25px;
float: left;
margin-left: 70px;
margin-top: 70px;
background-color: white;
transition: 0.5s;
background-color: white;
color: #24252a;
}
.Systemingenieur_Text {
text-align: center;
border: 1px;
border-color: white;
border-style: solid;
border-radius: 25px;
padding-bottom: 10%;
}
.Heading_Systemingenieur {
margin-bottom: 20px;
margin-left: 15px;
margin-top: 10px;
}
.Div_Systemingenieur:hover {
background-color: #24252a;
color: white;
}
I am running always to same issues with top navigation bar and footer. I always have problem to place them on the correct position.
Top nav : the logo should be on top left and rest align to right
Footer: is in the middle of the page even though I followed a recommendation and created main container for all divs on my page.
CSS & image attached to the question
html,body {
margin:0;
padding:0;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}
header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}
.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}
.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}
.topnav a.active {
color: #4CAF50;
}
.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}
section {
margin-left: 25%;
margin-right: 12%;
position: absolute;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}
#footer{
position:absolute;
bottom:0;
width:100%;
height:60px;
color: #696969;
}
footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}
.socialnets{
text-align:center;
padding: 10px 10px;
}
.newsletter{
text-align:right;
padding: 10px 10px;
}
setting 100% height on body inherits from viewport essentially. thats why the footer is fixed at the bottom of the pixel value for your viewport and if you scroll, it doesn't 'stick'.
I'm guessing this is what you want?..
I have no idea what structure your html is so this is just going off your css.
I would advise looking at flexbox and checking out the sticky footer method using flex.
https://codepen.io/devatrox/pen/wztlx
html,body {
margin:0;
padding:0;
min-height:100vh;
height:100%;
color: #696969;
}
#mainContainer{
min-height:100%;
position:relative;
}
header{
background-color:#F8F8F8;
height: 120px;
border-bottom: 1px solid #CDCDCD;
display: flex;
}
.topnav {
margin-left: 12%;
margin-right: 12%;
margin-top: 5%;
position: absolute;
align-items: flex-start;
float: right;
}
.topnav a {
float: right;
display: block;
color: #343434;
padding: 10px 10px;
text-decoration: none;
font-size: 20px;
}
.topnav a.active {
color: #4CAF50;
}
.sidebar {
margin-left: 12%;
padding: 0;
width: 12%;
position: absolute;
overflow: auto;
background-color: red;
height: calc(100% - 121px);
}
.sidebar a {
display: block;
color: #696969;
padding: 15px;
text-decoration: none;
border-bottom: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}
section {
margin-left: 25%;
margin-right: 12%;
display: inline-block;
border-bottom: 1px solid #F8F8F8;
}
#footer{
position:relative;
bottom:0;
width:100%;
height:60px;
color: #696969;
background-color:blue;
}
footer {
display: flex;
position: absolute;
bottom: 60px;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #F8F8F8;
}
.rights{
text-align:left;
padding: 10px 10px;
}
.socialnets{
text-align:center;
padding: 10px 10px;
}
.newsletter{
text-align:right;
padding: 10px 10px;
}
<div id="mainContainer"><header><div class="topnav">top</div></header><div class="sidebar">side</div><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section>
<div id="footer">FOOTER</footer>
How change text when I push cursor in button? If I push cursor in button with price, will show text: "Add to basket".
This is Code:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="price">$50</div>
<div class="info">Add to basket</div>
How solve this problem?
You can use a wrapper div to catch the over, I think is more maintainable if you change the html in the future:
body {
font-family: 'Roboto', sans-serif;
}
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
width: 20%;
margin: 20px auto;
cursor: pointer;
}
.wrapper:hover .info {
display: block;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<div class="wrapper">
<div class="price">$50</div>
<div class="info">Add to basket</div>
</div>
you can use :active to show text when mouse is clicking down on the price like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:active + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
if you are trying to show the text on :hover like the title of the question says the unser :hover like so:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info {
display: none;
}
.price:hover + .info {
display: block;
}
<div class="price">$50</div>
<div class="info">Add to basket</div>
Update 3:
.price {
font-size: 1em;
border-radius: 50px;
background-color: #f00;
text-align: center;
color: #fff;
padding: 5px;
width: 10%;
margin: 20px auto;
}
.price:hover {
background-color: #fff;
border: 1px solid #bfbfbf;
color: #f00;
cursor: pointer;
}
.info,
.price:hover .amount {
display: none;
}
.price:hover .info {
display: block;
}
<div class="price">
<div class="amount">$50</div>
<div class="info">Add to basket</div>
</div>
I have been trying to add an arrow to the div with class .b, but is not working and I cannot figure out why. Does anyone has any idea?
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
}
#nextgoal.b :after {
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;"><div class="a">AA</div><div class="b">Next Goal</div></div>
your selector is not correct and content:''; is missing to effectively generate your pseudo element, try this:
#nextgoal .b:after {
content: '';
#nextgoal {
width: 100%;
text-align: center;
}
#nextgoal .a {
border: 1px solid #42aacc;
height: 54px;
width: 54px;
border-radius: 50%;
background-color: #fff;
color: #42aacc;
font-weight: bold;
padding: 8px 10px 10px 12px;
font-size: 30px;
display: inline-block;
position: relative;
float: left;
z-index: 1000;
}
#nextgoal .b {
margin-left: -18px;
margin-top: 6px;
height: 49px;
background-color: #42aacc;
display: inline-block;
padding: 10px 7px 3px 27px;
color: white;
position: relative;
display: inline-block;
float: left;
z-index: 10;
overflow: visible;
}
#nextgoal .b:after {
content: '';
background: #42aacc;
bottom: 100%;
color: #42aacc;
display: block;
padding: 2px;
pointer-events: none;
position: absolute;
border: dotted 1px #42aacc;
font-size: 11px;
border-radius: 5px;
}
<div id="nextgoal" style="margin-top:1em;">
<div class="a">AA</div>
<div class="b">Next Goal</div>
</div>
it is obviously not an arrow but a dot that shows because border is here ...
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>