I'd like to center a + inside a div. The problem is on ios it shows more in the bottom of the div and not in the middle. in chrome it is ok.
Any ideas to solve this?
Fiddle
.addplus {
border-radius: 50%;
background-color: blue;
width: 38px;
height: 38px;
margin: 5px;
color: #fff;
font-size: 38px;
float: left;
text-align: center;
line-height: 38px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
<div class='addplus'>
+
</div>
I don't have an Ios device near me right now so I can't be sure if it works, but try this:
Put the "+" in a span, then center the span in the div instead.
Something like this:
.addplus {
position: relative;
border-radius: 50%;
background-color: blue;
width: 38px;
height: 38px;
margin: 5px;
color: #fff;
font-size: 38px;
float: left;
text-align: center;
line-height: 38px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.plus {
position: absolute;
color: #fff;
font-size: 38px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="addplus">
<span class="plus">+</span>
</div>
Related
I have split my navigation bar and header into two separate react components. Although, my Logo lies in the navigation bar and I am trying to make it overlap the header component.
This is how it looks on my website
The logo is the circle on the top left and the header is the cream white colour
This is how my code looks:
This is my Header HTML (I named it main-container-three)
<div className="main-container-three">
<div className="admin-container">
<p className="admin-heading">The Oilixate Shop: Oil Spells</p>
</div>
This is my Header CSS
.main-container-three{
position: relative;
width: 1440px;
height: 770px;
left: 0px;
top: 78px;
background: #ECE8DF;
z-index: 1;
border-radius: 0px 0px 37px 37px;
}
This is my Navigation Bar HTML
<div className="nav-bar">
<div className="nav-logo"></div>
<p className="nav-home">Home</p>
<p className="nav-product">Products</p>
<p className="nav-checkout">Checkout</p>
<p className="nav-admin">Admin</p>
<input type={"text"} placeholder={'Search'} className="search-box"></input>
<button className="search-btn"></button>
<div className="shopping-cart">
{/* <div className="modal"></div> */}
</div>
<div className="numb-items">
<p className="one-item">1</p>
</div>
</div>
Now this is my Navigation Bar CSS
.nav-bar{
width: 100%;
height: 82px;
background: #2B4447;
float: left;
}
.nav-logo{
width: 80px;
height: 80px;
z-index: 2;
margin-top: 27px;
margin-left: 31px;
background: grey;
border-radius: 100%;
float: left;
}
.nav-home{
font-family: 'Inter';
margin-top: 40px;
margin-left: 324px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-home:hover{
color: #FFFFFF;
}
.nav-product{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-product:hover{
color: #FFFFFF;
}
.nav-checkout{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-checkout:hover{
color: #FFFFFF;
}
.nav-admin{
font-family: 'Inter';
margin-top: 40px;
margin-left: 71px;
font-weight: 300;
color: #DAEFDE;
font-size: 20px;
float: left;
}
.nav-admin:hover{
color: #FFFFFF;
}
.search-box{
width: 225px;
height: 43px;
margin-top: 29px;
margin-left: 91px;
padding-left: 1%;
background: #ECE8DF;
border: 1px solid #000000;
border-radius: 8px;
float: left;
}
::placeholder{
color: #000000;
}
.search-btn{
border-style: none;
width: 36px;
height: 35px;
margin-top: 35px;
margin-left: -41px;
background: #EBA182;
border-radius: 5px;
background-image: url("../src/assets/Search.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 21px 21px;
float: left;
}
.shopping-cart{
width: 35px;
height: 35px;
margin-top: 33px;
margin-left: 74px;
background: #ECE8DF;
background-image: url("../src/assets/Trolley.svg");
background-repeat: no-repeat;
background-position: 7px 10px;
background-size: 20px 20px;
border-radius: 6px;
float: left;
}
Difficult to provide solution without knowing how you are writing it. Trying to give a generalized suggestion here -
Use style={{zIndex: 2}} for navigation bar and style={{zIndex: 1}} for header component
Alternatively, you can use CSS and in that case replace zIndex with z-index
You may want to use position attribute (relative/absolute) for zIndex to work (https://www.w3schools.com/cssref/pr_pos_z-index.asp)
I'm trying to emulate this behavior using CSS:
And this is what I have to this moment:
.contenedor{
height: 30px;
margin-bottom: 10px;
}
.lineaRoja{
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
}
.centreado{
font-size: 30px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
How can I get that CSS behavior?
I would cut the upper and lower part via clip-path. No need to use extra elements or pseudoelements
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
clip-path: polygon(20% 33%, 20% 70%, 80% 70%, 80% 33%);
}
<h2>STREAMING</h2>
Here is another idea where you can consider line-height
h2 {
background: #f16c73;
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
line-height:0.45;
/*overflow:hidden; uncomment this if you want to hide the overflow */
}
<h2>STREAMING</h2>
Another one where you can adjust the background:
h2 {
color: #fff;
font: 2.4em Arial;
font-style: italic;
font-weight: 800;
text-align: center;
letter-spacing: 2px;
background:
linear-gradient(#f16c73,#f16c73) center
/100% 45% /* Adjust this value */
no-repeat;
}
<h2>STREAMING</h2>
I wouldn't use opacity, but simply white text and white background. The text can be vertically positioned by using postion: relative and a bottom setting to offset it to the optimal position.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
height: 24px;
border-radius: 5px;
text-align: center;
}
.centreado {
font-family: sans-serif;
font-style: oblique;
font-size: 50px;
color: white;
position: relative;
bottom: 8px;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">STREAMING</h2>
</div>
</div>
Another solution is to move the text via transform property of CSS.
.contenedor {
height: 30px;
}
.lineaRoja {
background-color: rgba(255, 0 ,0, 0.5);
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
.centreado {
font-size: 70px;
line-height: 70px;
color: white;
margin: 0;
padding: 0;
transform: translateY(-40%);
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
Change the text colour to transparent and set the font style to italic.
.centreado{
font-size: 60px;
color: transparent;
font-style: italic;
}
Move the div downwards.
.contenedor{
height: 30px;
margin-bottom: 10px;
transform: translateY(20px); /*Change this value according to your need */
}
html:
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
css:
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
position: relative;
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
}
.centreado {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 38px;
text-transform: uppercase;
font-style: italic;
margin: 0
}
JSfiddle: https://jsfiddle.net/hansfelix50/q0zxh9ku/
The secret here is overflow: hidden; on your red line, anything overflowing it gets cut off.
.contenedor {
height: 30px;
margin-bottom: 10px;
}
.lineaRoja {
background-color: red;
opacity: 0.5;
height: 20px;
border-radius: 5px;
text-align: center;
position: relative;
overflow: hidden;
}
.centreado {
font-size: 55px;
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin: 0;
color: #fff;
text-transform: uppercase;
}
<div class="contenedor">
<div class="lineaRoja">
<h2 class="centreado">Streaming</h2>
</div>
</div>
You can do this easily with css flexbox.
Steps:
Remove the opacity: 0.5; and text-align: center; from .lineaRoja
Add background-color: #f36167; to .lineaRoja
Add display: flex; align-items: center; justify content: center; to .lineaRoja
Style the h1 as necessary; I've used: letter-spacing: 2px; font-size: 55px; font-family: arial; font-style: italic; color: white;
Here is a simple example using:
body {
background-color: grey;
padding-top: 50px;
}
.lineaRoja {
background-color: #f36167;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.centreado {
letter-spacing: 2px;
font-size: 55px;
font-family: arial;
font-style: italic;
color: white;
}
<div class="lineaRoja">
<h1 class="centreado">STREAMING</h1>
</div>
I am currently trying to center favicons in this circular background so it can change color on hover. I am struggling a little bit to center it, though. I tried text-align: center but that was no use. Not very up to speed with CSS. What should I be doing instead?
https://codepen.io/teecp/pen/gOYRwbO
One way to solve this problem is to set fixed height and width on the parent element. Then set the icon's dimensions the same with a line height that measures its height.
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #7b68ee;
transition: 0.5s;
overflow-x: hidden;
padding-top: 60px;
white-space: nowrap;
}
.sidebar a {
position: relative;
left: 20%;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
width: 20%;
color: #ffffff;
display: block;
margin-bottom: 10px;
/* Added the properties below */
height: 50px;
width: 50px;
}
main .sidebar {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
padding: 16px;
margin-left: 85px;
transition: margin-left 0.5s;
}
.sidebar .fas:hover {
background: #ffffff1a;
border-radius: 90px;
}
.sidebar-bottom {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 4rem;
}
/* Added the block below */
.fa, .far, .fas {
font-family: "Font Awesome 5 Pro";
line-height: 50px!important;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://kit.fontawesome.com/b61e574d7a.js"></script>
<div class="sidebar">
<i class="fas fa-home"></i>
<i class="fas fa-chess-queen"></i>
<div id="main">
hello
</div>
Remove padding, add width, height and line-height.
.sidebar a {
position: relative;
left: 20%;
height: 50px;
width: 50px;
line-height: 55px;
text-decoration: none;
text-align: center;
font-size: 25px;
background: red;
border-radius: 90px;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
I am having the hardest time here...I have searched for a while now and can't quite figure out how to properly get my text to properly re-size in my parent container.
Here is the code:
html,
body,
box,
thumbnail_image,
overlay,
h1,
h3,
h6,
p,
body {
width: 100%;
padding-bottom: 25px;
font-size: 100%;
}
input {
font-family: "Roboto";
position: absolute;
top;
25.5px;
font-weight: 700;
font-size: 14px;
color: #fff;
background-color: transparent;
text-align: right;
border-width: 0;
width: 100%;
margin: 0 0 .1em 0;
}
.heart_button {
position: absolute;
top: 25.5px;
right: 55px;
}
.heart_button:hover,
.heart_button:active,
.heart_button:focus {
color: #dd0239;
}
.heart_background {
position: absolute;
top: 20px;
right: 20px;
background-color: #000000;
opacity: .1;
width: 65px;
height: 30px;
border-radius: 15px;
}
.box {
margin: 50px auto;
position: relative;
max-width: 90%;
height: 490px;
width: 700px;
background-color: #18a0ff;
box-shadow: 1px 15px 50px 2px;
}
.quote_image {
position: absolute;
opacity: .1;
top: 62px;
left: 51px;
}
.image_overlay {
background-color: #282a37;
width: 170px;
height: 490px;
position: absolute;
float: left;
}
.thumbnail_image {
position: absolute;
float: left;
opacity: .12;
display: inline-block;
}
.text_container {
left: 200px;
width: 400px;
height: 338px;
max-width: 90%;
word-wrap: break-word;
position: absolute;
}
h1 {
color: #fff;
text-transform: uppercase;
font-size: 3.7em;
font-family: Montserrat;
font-weight: 700;
line-height: 1.3;
text-align: left;
width: 100%;
word-wrap: break-word;
}
.author_name {
position: absolute;
left: 206px;
bottom: 0px;
}
h3 {
font-family: Open Sans;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 1em;
text-align: left;
color: #fff;
}
p {
font-family: "Roboto";
font-weight: 700;
font-size: 14px;
color: #fff;
text-align: center;
}
h6 {
font-family: Open Sans;
font-weight: light;
font-size: 1em;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
}
nav {
position: absolute;
left: 35px;
bottom: 28px;
}
html {
background: linear-gradient(209deg, #E5ECEF 40%, #BBC2C5 100%) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#footer {
clear: both;
}
#media screen and (max-width: 649px) {
.box {
width: 450px;
height: 350px;
max-width: 90%;
}
h1 {
font-size: 2em;
word-wrap: break-word;
}
.text_container {
width: 280px;
height: 236.6px;
max-width: 90%;
}
}
<body>
<div class="box">
<div class="heart_button">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457311522/little_heart_jle1j3.png">
</div>
<div class="heart_background">
</div>
<div class="image_overlay">
</div>
<div class="thumbnail_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457298445/Sheldon_Pic_l3cprk.jpg">
</div>
<div class="text_container">
<h1>Don't You think that if I were wrong, I'd know it?</h1>
</div>
<div class="author_name">
<h3> - Sheldon Cooper </h3>
</div>
<div class="quote_image">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457314397/quotations_image_wfwimc.png">
</div>
<nav>
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-left_moebxn.png">
<img src="http://res.cloudinary.com/dp32vpqfu/image/upload/v1457364436/arrow-right_oilpij.png">
</nav>
</div>
</body>
So again, my thought was that I could have the .box class be a parent container and then the .text_container that would be nested could 're-size the text in a responsive manner in smaller viewports. But it's not...and my hair is going grey.
Errggghhhh...
child with the position absolute can't change the size or its parent or vice versa. Alternatively you can use the float property and set it to "right". Also, you might want to use % instead of pixels if you're aiming for a responsive design.
I guess what you need is http://freqdec.github.io/slabText/
font-size cannot do resize accroding to the windows's width, unless you define different font-size accroding to the width with Media Queries
My goal is to hover on next_wrapper and nav_text_title_next appears.
Now both the image and the p tag nav_text_title_next appears, but unfortunately I can't see any of the text in p tag nav_text_title_next. I use the same code for other sections, and it works well but it's not working in this part. Can you help me figure out what goes wrong?
HTML:
<div class="next_wrapper" id="next_wrapper_title" style="position:absolute; left:1050px; top:300px; z-index:5;">
<a class="next_button" href="#blah" style="background:none;">
<p class="navigation_text_next" id="nav_text_title_next">
HI!
</p>
<img class="next_button" src="img/next-icon.gif" onmouseover="this.src='img/next-icon-stop2.gif'" onmouseout="this.src='img/next-icon.gif'">
</a>
</div>
Here is the CSS:
.next_wrapper {
position: absolute;
top: 0px;
left: 95px;
}
#nav_text_title_next {
display: none;
}
#next_wrapper_title:hover #nav_text_title_next {
display: block;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none;
}
.next_button {
width:75px;
background: none;
position: absolute;
}
your display is none delete that and you will see your text
also delete it on your image
then do something similar to this
in html
<p>bla</p>
in css
p {
opacity:0;
}
p:hover {
opacity:1;
}
You have hidden it from view that is why.
.navigation_text_next {
background: #000;
color: #FFF;
font-family: AvenirLTStd-Medium;
font-weight: normal;
font-style: normal;
font-size: 11px;
position: absolute;
width: 100px;
height: 55px;
top: 30px;
left: 67px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 45px;
padding-right: 5px;
text-align: left;
display: none; <-- remove this
}
You can remove display: none; as it parents is hiiden and not required.