I can't see the icon until i hover over it.
This is for a shopify website
I'm using this code to call
"<div class="icon-button twitter">
<i class="fab fa-twitter"></i><span></span>
<a href="https://twitter.com" </a>
</div>"
This is the main code that I'm using.
So, everything works, but instead of the icon displaying on my website before i hover over it, there is nothing there. It's blank. When i move my mouse over it it does it effect.
html {
font-size: 2.5em;
}
body {
background-color: #fff;
padding: 25px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button .fa-instagram {
color: #FD1D1D;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
That seems to be because icon colors are the same as button backgrounds:
.icon-button {
background-color: white;
...
}
.icon-button i {
color: white;
...
}
I've changed the background color of buttons to gray as a demonstration:
html {
font-size: 2.5em;
}
body {
background-color: #000;
padding: 25px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: gray;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button .fa-instagram {
color: #FD1D1D;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
body {
padding: 10px;
}
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.pinterest {
display: none;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/fontawesome.min.css" rel="stylesheet" />
<div class="icon-button twitter">
<i class="fab fa-twitter"></i><span></span>
</div>
Edit
Upon further investigation, I notice that there is no CSS definition for .fa-twitter in your code. I've changed the element's class to "icon-twitter".
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<style>
html {
font-size: 2.5em;
}
body {
background-color: #fff;
padding: 25px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button .fa-instagram {
color: #FD1D1D;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
</style>
<div class="icon-button twitter">
<i class="fab icon-twitter"></i><span></span>
</div>
I got it. Just for others I changed .icon-twitter to .fa-twitter and .icon-button .icon-twitter to .icon-button .fa-twitter. Thank you , i could not have done it without your help - This is my first ever try at CSS lol.
Thank you all again.
Related
I'm trying to change the colors of my menu bar, making them black just like it shows up in here with the 3 horizontal black bars at the top right in the figure below. However, I don't know what to look for in my CSS. What field controls it?
Edit: adding my code here to facilitate
/*
* .scss template
*/
nav {
background-color: #f5f5f5;
ul a {
color: $textgray;
img {
height: 64px;
}
}
ul li {
list-style-type: none;
}
i.right {
float: right;
margin-left: -5px;
}
.navlogo img {
height: 64px;
padding: 5px;
}
.navlogo:hover {
background-color: rgba(0, 0, 0, 0.0);
}
}
#toc-sidebar {
#media screen and (min-width: 992px) {
position: absolute;
top: 85px;
right: 23px;
width: 22%;
}
#media screen and (max-width: 992px) {
display: none;
}
&.fix-scroll {
position: fixed;
top: 7px;
}
padding: 3px;
a {
color: #666
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
ul {
li {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
margin-bottom: 0px;
.selected {
font-weight: bold;
}
.H1 {
margin-left: 0px;
}
.H2 {
margin-left: 10px;
}
.H3 {
margin-left: 20px;
}
}
}
.content {
background-color: dark;
padding-bottom: 64px;
margin-bottom: 64px;
ul {
margin-left: 1.2rem;
li {
list-style-type: disc;
}
}
dl {
margin-left:10px;
}
}
.dropdown-content li > a, .dropdown-content li > span {
color: $textgray;
}
h3 {
code {
font-size: 2.5rem;
}
}
#media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
.material-icons {
font-size: inherit;
}
}
footer.page-footer {
margin: 0;
background-color: #f5f5f5;
}
.row {
a {
color: blue;
}
}
code {
font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, monospace;
font-size: 13px;
color: #333;
background: #efefef;
border: 1px solid #c7c7c7;
border-radius: 2px;
padding: 0px 1px;
}
pre {
color:#efefef;
background: #333;
padding:8px 15px;
border-radius: 3px;
border:1px solid #c7c7c7;
overflow: auto;
overflow-y: hidden;
code {
color:#efefef;
background: #333;
text-shadow: 0px 1px 0px #000;
margin: 0px;
padding: 0px;
border: none;
}
}
.center-image {
margin: 0 auto;
display: block;
}
table {
line-height: 1.0rem;
}
table.border {
thead {
border-bottom: none;
}
tbody {
border: 1px solid black;
}
}
html {
font-size: 90%;
}
body {
background: #ffffff;
color: $textgray;
line-height: 1.6;
}
.bread {
padding-top: 48px;
margin: 48px;
ul {
margin-left: 1.2rem;
li {
list-style-type: disc;
}
}
dl {
margin-left:10px;
}
}
img.flip {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
.transition,.play {
-webkit-transition: .5s;
-moz-transition: .5s;
transition: .5s;
-webkit-transition-timing-function: cubic-bezier(.4,0,.5,1);
-moz-transition-timing-function: cubic-bezier(.4,0,.5,1);
transition-timing-function: cubic-bezier(.4,0,.5,1);
}
.nodec a {
font-weight:normal;
text-decoration:none;
color:#444;
}
.topborder {
border-top-style: solid;
border-color: $textgray;
border-width: 2px;
}
.bottomborder {
border-bottom-style: solid;
border-color: $textgray;
border-width: 2px;
}
.button-collapse {
color: #textgray;
}
.compact td {
padding: 5px;
}
.panel-info {
border: 1px solid black;
.panel-heading {
background-color: $textgray;
color: white;
h3 {
font-size: 2rem;
margin-top: 0px;
}
}
.panel-body {
padding-left: 1em;
.row {
margin-bottom: 5px;
}
ul {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2rem;
}
}
}
thanks in advance
You can add this to your CSS and append the class of your navbar and alter the below code to make it dark.
<style>
/* Modify the background color */
.navbar-custom {
background-color: dark;
}
/* Modify text color */
.navbar-custom .navbar-text {
color: white;
}
</style>
This is a basic hamburger-menu:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
<p>A menu icon:</p>
<div></div>
<div></div>
<div></div>
From: https://www.w3schools.com/howto/howto_css_menu_icon.asp
Just change the background-color to your color
(I'm not sure whether this answers your question - I'm sorry if not)
I am trying to stylize the input type number. In this way: https://ant.design/components/input-number/ (first input). But without using the ant design framework. Where there are inner-spin, outer-spin I am trying add white background, gray lines and change the inner-spin color, outer-spin. Change the background color I can, but I can not spinns any more. I can not see them.
I can use the bootstrap-react framework, but I do not see such a number input
Code here: https://stackblitz.com/edit/react-cojnud
input[type=number] {
line-height: 27px;
box-sizing: border-box;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
-webkit-font-feature-settings: 'tnum';
font-feature-settings: 'tnum';
position: relative;
width: 100%;
height: 32px;
padding: 4px 11px;
color: rgba(0,0,0,0.65);
font-size: 14px;
line-height: 32px;
background-image: none;
-webkit-transition: all .3s;
transition: all .3s;
display: inline-block;
width: 90px;
margin: 0;
padding: 0;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
input[type=number].mod::-webkit-inner-spin-button {
width: 30px;
height: 30px;
position: relative;
display: block;
overflow: hidden;
color: rgba(0,0,0,0.45);
font-weight: bold;
line-height: 0;
text-align: center;
-webkit-transition: all .1s linear;
transition: all .1s linear;
background-color: #fff;
}
input[type=number]::-webkit-inner-spin-button:hover {
color: blue;
}
input[type=number]:hover {
border-color: #40a9ff;
border-right-width: 1px !important;
}
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background-color: white;
color: black;
}
Hy there,
try to remove -webkit-appearance: none;
And you will see the spinners again!
You won't be able to modify it across browsers. Better to use it following manner:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
.number-wrapper {
position: relative;
width: 300px;
height: 30px;
}
.number-wrapper input {
width: 100%;
height: 30px;
box-sizing: border-box;
padding-right: 18px;
text-align: right;
}
.number-wrapper .rocker {
position: absolute;
background: #FFF;
border: 1px solid lightblue;
right: 0;
padding: 2px 4px;
color: #ccc;
transition: all ease-in 100ms;
height: 50%;
box-sizing: border-box;
line-height: 12px;
cursor: pointer;
visibility: hidden;
}
.number-wrapper:hover .rocker {
visibility: visible;
transition: all ease-in 300ms;
}
.number-wrapper .rocker.up {
top: 0;
}
.number-wrapper .rocker.down {
bottom: 0;
transform: rotate(180deg);
border-bottom: none;
}
.number-wrapper .rocker:hover,
.number-wrapper .rocker:focus {
box-shadow: 0 0 4px lightblue;
}
.number-wrapper .rocker:active {
transform: scale(0.4);
}
.number-wrapper .rocker.down:active {
transform: rotate(180deg) scale(0.4);
}
<div class="number-wrapper"><span class="rocker up">^</span><span class="rocker down">^</span><input class="mod" type="text" /></div>
Try This
jQuery('<div class="quantity-nav"><div class="quantity-button quantity-up">⮙</div><div class="quantity-button quantity-down">⮛</div></div>').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
.quantity {
position: relative;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
input[type=number]
{
-moz-appearance: textfield;
border-radius: 5%;
}
.quantity input {
width: 45px;
height: 35px;
line-height: 1.65;
float: left;
display: block;
padding: 0;
margin: 0;
padding-left: 20px;
border: 1px solid #eee;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 40px;
}
.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #eee;
width: 20px;
text-align: center;
color: #333;
font-size: 13px;
font-family: "Trebuchet MS", Helvetica, sans-serif !important;
line-height: 1.7;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
position: absolute;
height: 46%;
top: 0;
margin-top: 0px;
border-bottom: 1px solid #eee;
}
.quantity-button.quantity-down {
position: absolute;
bottom: 4px;
height: 46%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity">
<input type="number" min="1" step="1" value="1">
</div>
See Code Link
Im coding a blog and trying to make "Read More" button at the bottom of article. When i use hover to make button green, it works only if user points his mouse at left or right of button. When im pointing mouse at center of text nothing is working.
<div class="readmore"><p>Read more</p></div>
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
I expect button to backgroundcolor darkgreen and color white when im pointing mouse at center of text.
ALL CSS CODE:
body
{
background-color: white;
width: 100%;
margin: auto;
font-family: 'Open Sans', sans-serif;
background-color: palegreen;
}
.mateleafs
{
color: forestgreen;
font-size: 21px;
font-family: 'Merienda', cursive;
}
.header
{
background-color: white;
text-align: center;
padding-top: 1px;
padding-bottom: 3px;
border-bottom: green 2px solid;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
ul
{
word-spacing: 100px;
}
li
{
list-style-type: none;
display: inline-block;
font-size: 15px;
}
a
{
text-decoration: none;
color: black;
padding-top: 35px;
padding-bottom: 22px;
padding-left: 25px;
padding-right: 25px;
}
.home a
{
color: green;
}
.mateleafs a
{
color: green;
}
.home a:hover
{
background-color: yellow;
}
.history a:hover
{
background-color: dodgerblue;
}
.health a:hover
{
background-color: limegreen;
}
.energy a:hover
{
background-color: red;
}
.other a:hover
{
background-color: gray;
}
.mateleafs:hover
{
transform: rotate(-1deg);
}
.grid-content-container
{
display: grid;
margin-left: 50px;
margin-top: 230px;
margin-right: 50px;
grid-template-columns: 450px 450px 450px;
grid-column-gap: 30px;
grid-row-gap: 30px;
grid-auto-rows: 690px;
text-align: center;
}
.grid-content-container a
{
color: black;
}
article
{
background-color: navajowhite;
font-size: 15px;
color: darkgreen;
text-align: center;
}
main
{
background-color: white;
}
.footer
{
border-top: 2px solid green;
background-color: white;
padding: 10px;
margin-top: 60px;
text-align: center;
}
img:hover
{
opacity: 0.7;
transition: 0.45s ease-out;
}
.grid-content-container h2:hover
{
color: green;
transition: 0.45s ease-out;
}
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 25px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.24s ease-out;
color: white;
}
.date
{
font-size: 12px;
color: seagreen;
}
i
{
margin-right: 2px;
}
Your CSS and HTML work fine (as tested below). I assume you have some p tag styling that is overwriting the readmore style.
.readmore
{
color: darkgreen;
border: 1px solid green;
margin-left: 177px;
margin-right: 177px;
font-size: 13px;
margin-top: 30px;
}
.readmore:hover
{
background-color: darkgreen;
transition: 0.18s linear;
color: white;
}
<div class="readmore"><p>Read more</p></div>
.readmore
{
display: block;
width: 200px;
padding: 12px;
text-align: center;
}
.readmore:hover
{
background-color: gray;
transition: 0.7s;
color: black;
border-radius: 9px;
}
<div class="readmore"><p>Read more</p></div>
I have this problem going on:
This is the format in which the relationship heirarchy parent-child is maintained.
<div class="ContainerTitle">SYLLABUS:
<div class="DownloadThis"></div>
<div class="ViewThis"></div>
<div class="showHint"></div>
</div>
I wanted the property of inline-block for .DownloadThis and .ViewThis so I defined them as inline-block.
I have defined .ContainerTitle as block
However, the property of .ContainerTitle over there in the screenshot can be clearly observed as inline-block
What is happening? Why is my child container overriding the definition of its parent?(or is this really happening?? or something else?)
What I want to do:
Make .ContainerTitle a display:block so that the next <div>Sixth (6th) Semester</div> containers will go to the next line... instead of sticking to the previous container awkwardly!
I want the whole .ContainerTitle to behave as a block and then all the divs inside it to behave as inline-block
I want to get a result like this:
Below is my snippet. Please look at it and tell me what needs to be done :)
.ContainerTitle {
display: block;
/* WHY IS THIS^ NOT WORKING?????*/
background: #fff;
float: left;
padding: 15px;
padding-left: 15px;
border: solid 1px #000;
font-size: Large;
color: #000;
text-align: left;
cursor: pointer;
transition: all .1s ease-out;
}
.DownloadThis,
.ViewThis {
display: inline-block;
padding: 20px;
padding-bottom: 10px;
border: solid 1px #fff;
width: 40px;
}
.showHint {
margin-top: 20px;
background: #f1f1f1;
transition: all .9 ease-out;
}
.ContainerTitle:hover .showHint:after {
content: '*Hint: Hint Text';
transition: all .9 ease-out;
}
.ViewThis:hover + .showHint:after {
content: '*Hint: View Online';
transition: all .9 ease-out;
}
.DownloadThis:hover ~ .showHint:after {
content: '*Hint: Download This';
transition: all .9 ease-out;
}
.DownloadThis {
background: #1D9C73;
color: #fff;
}
.ViewThis {
background: #7D529E;
color: #fff;
}
.DownloadThis:hover,
.ViewThis:hover {
border: solid 1px #000;
background: #fff;
}
.DownloadThis:hover {
color: #1D9C73;
}
.ViewThis:hover {
color: #7D529E;
}
.ContainerTitle:before,
.DownloadThis:before,
.ViewThis:before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left: 6px;
padding-right: 8px;
font-size: 32px;
}
.ContainerTitle:before {
content: '\f0f6';
font-size: 24px;
}
.DownloadThis:before {
content: '\f019';
}
.ViewThis:before {
content: '\f06e';
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="ContainerTitle">TESTING:
<div class="DownloadThis"></div>
<div class="ViewThis"></div>
<div class="showHint"></div>
</div>
<div style="background: #4399CD; padding: 30px; color: #fff;display:inline-block;padding-left: 15px; ">
Sixth (6th) Semester
</div>
.ContainerTitle {
display: block;
/* WHY IS THIS^ NOT WORKING?????*/
background: #fff;
float: left;
padding: 15px;
padding-left: 15px;
border: solid 1px #000;
font-size: Large;
color: #000;
text-align: left;
cursor: pointer;
transition: all .1s ease-out;
}
.DownloadThis,
.ViewThis {
display: inline-block;
padding: 20px;
padding-bottom: 10px;
border: solid 1px #fff;
width: 40px;
}
.showHint {
margin-top: 20px;
background: #f1f1f1;
transition: all .9 ease-out;
}
.ContainerTitle:hover .showHint:after {
content: '*Hint: Hint Text';
transition: all .9 ease-out;
}
.ViewThis:hover + .showHint:after {
content: '*Hint: View Online';
transition: all .9 ease-out;
}
.DownloadThis:hover ~ .showHint:after {
content: '*Hint: Download This';
transition: all .9 ease-out;
}
.DownloadThis {
background: #1D9C73;
color: #fff;
}
.ViewThis {
background: #7D529E;
color: #fff;
}
.DownloadThis:hover,
.ViewThis:hover {
border: solid 1px #000;
background: #fff;
}
.DownloadThis:hover {
color: #1D9C73;
}
.ViewThis:hover {
color: #7D529E;
}
.ContainerTitle:before,
.DownloadThis:before,
.ViewThis:before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
padding-left: 6px;
padding-right: 8px;
font-size: 32px;
}
.ContainerTitle:before {
content: '\f0f6';
font-size: 24px;
}
.DownloadThis:before {
content: '\f019';
}
.ViewThis:before {
content: '\f06e';
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
<div class="ContainerTitle">TESTING:
<div class="DownloadThis"></div>
<div class="ViewThis"></div>
<div class="showHint"></div>
</div>
<div style="background: #4399CD; padding: 30px; color: #fff;display:inline-block;padding-left: 15px; clear:both; float:left">
Sixth (6th) Semester
</div>
Try the following css in your div(<div>Sixth (6th) Semester</div>):
clear:both;
float:left;
i create this slick slider.
Someone could help me to fix the responsive breadcrumbs?
slick-content-slider slick-initialized slick-slider take a strange height ...
What i want to create is that every div remain on the same line .
Thank You in advance !
$('.slick-content-slider').slick({
slidesToShow: 4,
slidesToScroll: 4,
arrows: true
});
.slick-content-slider {
margin: 0 2.5%;
width: 95%;
}
.content-slide {
background: #333;
color: #fff;
height: 100px;
line-height: 100px;
margin: 0 10px 0 0;
text-align: center;
width: 150px;
}
#charset "UTF-8";
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-loading .slick-list { background: #fff url("./ajax-loader.gif") center center no-repeat; }
.slick-list.dragging { cursor: pointer; cursor: hand; }
.slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slick-track { position: relative; left: 0; top: 0; display: block; }
.slick-track:before, .slick-track:after { content: ""; display: table; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { float: left; height: 100%; min-height: 1px; display: none; }
[dir="rtl"] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
/* Icons */
#font-face { font-family: "slick"; src: url("./fonts/slick.eot"); src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); font-weight: normal; font-style: normal; }
/* Arrows */
.slick-prev, .slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { outline: none; background: transparent; color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev { left: -25px; }
[dir="rtl"] .slick-prev { left: auto; right: -25px; }
.slick-prev:before { content: "←"; }
[dir="rtl"] .slick-prev:before { content: "→"; }
.slick-next { right: -25px; }
[dir="rtl"] .slick-next { left: -25px; right: auto; }
.slick-next:before { content: "→"; }
[dir="rtl"] .slick-next:before { content: "←"; }
/* Dots */
.slick-slider { margin-bottom: 30px; }
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%; }
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus { outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; }
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "•"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before { color: black; opacity: 0.75; }
/*# sourceMappingURL=slick.css.map */
<body>
<div class="slick-content-slider">
<div class="content-slide">slide 1</div>
<div class="content-slide">slide 2</div>
<div class="content-slide">slide 3</div>
<div class="content-slide">slide 4</div>
<div class="content-slide">slide 5</div>
<div class="content-slide">slide 6</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.min.js'></script>
<script src="js/index.js"></script>
</body>
I think I've solved, i add this at class ".slick-content-slider" :
.slick-content-slider {
overflow: hidden;
white-space: nowrap;
height:250px;
}