I have created five feedback stars using HTML and CSS. Below is the image for the same.
As you can see that stars are way too close to each-other. I want to apply some space between the stars. I have used margin, padding everything. But nothing is working. Below is the code:
.ratings {
position: relative;
vertical-align: middle;
display: inline-block;
color: #b1b1b1;
overflow: hidden;
}
.full-stars {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
overflow: hidden;
color: #fde16d;
}
.empty-stars:before,
.full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
}
.empty-stars:before {
-webkit-text-stroke: 1px #848484;
}
.full-stars:before {
-webkit-text-stroke: 1px orange;
}
/* Firefox */
#-moz-document url-prefix() {
.full-stars {
color: #ECBE24;
}
}
<div class="ratings">
<div class="empty-stars"></div>
<div class="full-stars" style="width:70%"></div>
</div>
Below is the working fiddle:
https://jsfiddle.net/4qqspqxh/862/
Could you please help me to make some gap in between the stars?
Try this:
.empty-stars:before, .full-stars:before {
content: "\2605\2605\2605\2605";
font-size: 14pt;
letter-spacing: 4pt;
}
.empty-stars:before, .full-stars:before {
content:"\2605\2605\2605\2605";
font-size: 14pt;
}
Give spaces changes in content like this::
.empty-stars:before, .full-stars:before {
content:"\2605 \2605 \2605 \2605";
font-size: 14pt;
}
Related
I'm trying to set a :hover for a link inside a class. At first I tried
.link{
color: #e62739;
}
I saw past discusssion and try the solution proposed
.opener a.link:hover {
color: #e62739;
}
but it didn't work. Im'not sure to know where is my mistake.
.link{text-decoration:none; color:white;}
.opener a.link:hover {
color: #e62739;
}
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
div {font-family:'Varela Round';
}
.opener {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border: 1px white solid;
}
.benefits {
background-color: #07183d;
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
display: inline-block;
font-size: 16px;
width:300px;
}
a {
text-decoration: none;
}
#upbutton {
border: 1px dotted white;
}
<div class="row">
<div class="opener col" style="padding-left: 10px;padding-right: 10px;"><a class="link" href="www.google.com" name="1" onclick=" show('1');" style="color: white;font-size: 14px;">SOCIETES: 400</a>
<div class="benefits" id="b1" style="display: none; color: white; font-size: 14px;">Part SBF 120 : 120<br />
Part Filiales +100M€: 280
<div id="upbutton"><a onclick=" hide('1');">fermer</a></div>
</div>
</div>
The issue is the inline styling you've got on the link: color: white;.
This is taking priority over any styling you're adding in your CSS file. Removing that from the inline styling allows the hover color to work.
If you need the white color by default add it to the stylesheet rather than inline. For example:
.link {
color: white;
}
I am having same css properties, yet the button and input fields are different fields
.input-con {
position: relative;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
pen - https://codepen.io/digitalzoomstudio/pen/LOoVYK
How could I achieve same heights without forcing height property ?
You can use flex box , just add display:flex; on the parent (input-con)
.input-con {
position: relative;
display:flex;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
margin-right:2px;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
The reason you are seeing a discrepancy in the height is due - I think - to the font property, which includes shorthand for font-weight, font-size and font-family.
If you explicitly override this property for both input and button the height will match up.
.input-con {
position: relative;
}
.input-con>* {
line-height: 1;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
input,
button {
font: 400 15px Arial !important;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
updated as per comment
It will not work to declare font-weight, font-size and font-family separately, as this does not override the font shorthand completely.
The full shorthand is:
font: font-style font-variant font-weight font-size/line-height font-family;
Only if each of these properties is declared will the font property be overridden.
Note that font contains three separate properties for font-variant (ligatures, caps and numeric) - it seems that using font-variant is sufficient.
demo
.input-con {
position: relative;
}
.input-con>* {
/* override all properties of the 'font' shorthand */
font-style: normal;
font-variant: normal;
font-weight: 400;
font-size: 18px;
line-height: normal;
font-family: Arial, sans-serif;
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
</div>
You added line-height: 1; which makes difference
.input-con {
position: relative;
}
.input-con>* {
/*line-height: 1;*/
display: inline-block;
vertical-align: middle;
padding: 10px;
border: 0;
background-color: #ddd;
color: #444;
outline: 0;
cursor: pointer;
font-size: 15px;
box-sizing: border-box;
}
<div class="input-con">
<input type="text" />
<button>Search</button>
<input type="text" />
</div>
Just add display:flex like this
.input-con {
position: relative;
display:flex;
}
Learn more about flex
Yes indeed Flexbox is the way to go, but if you're curious as why you're getting this behavior CSS Tricks has a good article https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Try with this it may help
.input-con {
position: relative;
}
.input-con{
position:relative;
>*{
vertical-align:middle;
padding: 10px;
border:0;
background-color: #ddd;
color: #444;
outline:0;
cursor:pointer;
font-size: 15px;
}
}
I want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button>
<button class="mode">Normal</button>
<button class="mode selected">Hard</button>
</div>
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Add display: flex; to the parent container
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.
I have tried everything, but I cannot manage to make the button smaller in the width and height.
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 64px;
font: normal normal 700 1em/4em Arial, sans-serif;
overflow: hidden;
width: 200px;
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -4em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
If someone please can tell me a solution, I would be very grateful.
Change the CSS property of c--anim-btn class
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn,
.c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 24px; /* change height */
font: normal normal 700 1em/1.6em Arial, sans-serif;
overflow: hidden;
width: 100px; /* change width */
background-color: #3b5998;
}
.c-anim-btn {
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn {
margin-top: -1.6em;
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
you need to adjust line height and margin top after change height because of text seen. Comment out onn css please take a look .c--anim-btn and .c--anim-btn:hover
.c--anim-btn span {
color: white;
text-decoration: none;
text-align: center;
display: block;
}
.c--anim-btn, .c-anim-btn {
transition: 0.3s;
}
.c--anim-btn {
height: 128px;
font: normal normal 700 1em/8em Arial,sans-serif; /* 1em/8em means font-size/ line-height */
overflow: hidden;
width: 500px;
background-color: #3b5998;
}
.c-anim-btn{
margin-top: 0em;
}
.c--anim-btn:hover .c-anim-btn{
margin-top: -8em; /*Here you need to adjust after line-height change */
}
<!-- HINT: hover over button -->
<div class="c--anim-btn">
<span class="c-anim-btn">
First Text
</span>
<span>
Second Text
</span>
</div>
Am trying to do the same as the photo shows but I don't really know how to do that
So I should be able to have that line with any fontawesome icon in the middle.
Here my initial markup:
<h1>Welcome</h1>
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
}
h1:after {
content: '\f209';
font-family: FontAwesome;
display: block;
}
Here my fiddle
Hope you can help.
By giving your h1 a border-bottom and positioning your :after icon absolute in the center inside it. Also apply a white background to make sure the line gets interrupted.
h1 {
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
}
h1:after {
content: '\f209';
position: absolute;
font-family: FontAwesome;
background-color: #FFF;
display: block;
margin-left: 50px;
}
Update fiddle
Well... the accepted answer works fine, but it involves set widths, and will need to be rewritten to cater for longer text in the heading. The following works regardless of width of text (it does, however, involve a little bit more HTML):
https://jsfiddle.net/jx4dv11g/3/
h1 {
font-size: 25pt;
margin: 0 auto;
font-weight: 300;
padding-bottom: 10px;
border-bottom: 1px solid #000;
text-align: center;
display: inline-block;
}
.headericon {
display: inline-block;
position: absolute;
}
.headericon i {
display: block;
margin-top: -25%;
background: white;
transform: translate(-50%,0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1>Welcome to this page<br><span class="headericon"><i class="fa fa-hand-peace-o"></i></span></h1>
I'll suggest you to use following HTML structure for this:
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
Apply a class on h1 and use pseudo elements :before and :after to draw lines around icon.
This will allow you to have one time generic styling for all similar places in your web page. If you wants to use different icon in some other heading then all you need is just change the font awesome icon in that header.
body {
text-align: center;
margin: 0;
}
.styled-heading {
text-align: center;
font-size: 25pt;
display: inline-block;
margin: 0;
font-weight: 300;
position: relative;
overflow: hidden;
}
.styled-heading .fa {
display: block;
margin: 0 auto;
}
.styled-heading:before,
.styled-heading:after {
position: absolute;
background: black;
margin-left: 30px;
width: 999px;
height: 1px;
content: '';
bottom: 12px;
left: 50%;
}
.styled-heading:after {
margin-right: 30px;
margin-left: 0;
right: 50%;
left: auto;
}
.orange {
background: orange;
}
.green {
background: green;
}
.blue {
background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<h1 class="styled-heading">
Welcome to HTML and CSS
<span class="fa fa-hand-peace-o"></span>
</h1>
<div class="orange">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-home"></span>
</h1>
</div>
<div class="blue">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-globe"></span>
</h1>
</div>
<div class="green">
<h1 class="styled-heading">
Welcome To HTML and CSS.
<span class="fa fa-power-off"></span>
</h1>
</div>