I have a comment icon that I want to display the number of comments and the word "Comments" next to it.
But the word "Comments" should be displayed under the number and not next to it.
Similar to this
So far the text is being displayed next to each other.
DEMO https://jsfiddle.net/halnex/d5sft5pt/9/
HTML
<div class="post-meta-alt">
<div class="social-share-top">
<span class="social-share-top-text">Share</span>
<a class="btn btn-social-icon btn-facebook">
<span class="fa fa-facebook"></span>
</a>
<a class="btn btn-social-icon btn-twitter">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-google">
<span class="fa fa-google"></span>
</a>
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-pinterest"></span>
</a>
</div>
<div class="comments-top">
<a class="btn btn-social-icon btn-pinterest">
<span class="fa fa-comment"></span>
</a>
<p>78</p>
<p>Comments</p>
</div>
<div class="author-top">
author name
</div>
</div>
CSS
.post-meta-alt {
border-top: 1px solid #e0e0e0;
border-bottom: 1px solid #e0e0e0;
padding: 20px 0;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
}
.post-meta-alt span.social-share-top-text {
text-transform: uppercase;
margin-right: 10px;
}
.post-meta-alt .comments-top,
.post-meta-alt .author-top {
display: inline-flex;
margin-left: 20px;
}
PS: Is this the correct way of doing it with Bootstrap? Using Flexbox or is there a better conventional way of achieving this?
You need to wrap the paragraphs in a div:
<div class="coment">
<p>78</p>
<p>Comments</p>
</div>
And add style to organize them
.coment p {
margin: 3px;
line-height: 1;
}
See jsfiddle
Related
I have some circular icons with border in my website, but when I hover the mouse over the icon, I can see the pointer (and get into the link) from outside the icon.
I've tried the solution offered here, but it didn't help. Does anybody have a suggestion?
HTML code:
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<div class="margin-icons">
<a class="btn btn-outline-light btn-social mx-1" target="_blank" href="mailto:example#example.com">
<i class="far fa-envelope" style="color: black;
width: 50px; height: 50px;
border: 2px solid black;
border-radius: 50%;
padding: 6px;" />
</a>
</div>
<script src="https://use.fontawesome.com/releases/v5.12.1/js/all.js" crossorigin="anonymous"></script>
<div class="margin-icons">
<a class="btn btn-outline-light btn-social mx-1" target="_blank">
<i class="far fa-envelope" style="color: black;
width: 50px; height: 50px;
border: 2px solid black;
border-radius: 50%;
padding: 6px;" />
</a>
</div>
So you don't want the pointer to come then just remove href in the 'a' tag.
But Why do you the three icons?
I have created a fixed footer for my website:
HTML
<div class="card footerBF">
<div class="card-body space-around">
<button
type="button"
class="buttonBF"
routerLink="/myRouter"
>
<i class="fa fa-lock fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button" class="buttonBF" routerLink="myRoute">
<i class="fa fa-plus fa-lg"></i>
</button>
<button
type="button"
class="buttonBF"
routerLink="myRouter"
>
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
CSS
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
}
.buttonBF {
background-color: white;
color: grey;
display: inline-block;
border: none;
cursor: pointer;
}
The problem is that when I scroll, my footer moves, even though is supposed to be fixed. I attach one picture to show this effect:
There are Bootstrap UI elements for the a fixed bottom navbar, each with props to do this... check out Fixed bottom
<nav class="navbar fixed-bottom">
// Buttons
</nav>
However, if you want your current code from the question to work as intended. I'd just set the footer with display: flex, give it a height and justify-content and align-items center.
body {
background: black;
height: 2000px;
}
.footerBF {
background-color: white;
text-align: center;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
font-size: 1em;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #f1f1f1;
}
button {
background-color: white;
border: none;
cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<body>
<div class="card footerBF">
<div class="card-body">
<button type="button">
<i class="fa fa-lock fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-globe fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-plus fa-lg"></i>
</button>
<button type="button">
<i class="fa fa-home fa-lg"></i>
</button>
</div>
</div>
</body>
I am creating a horizontal navigation with an icon and text for each navigation item. I am running into an issue with items that contain two lines of text vs one.
I have tried modifying the padding and height of the div that extends higher than the others, but to no avail. How can I modify this to achieve a consistent height across all navigation items regardless of lines of text?
View the fiddle: Here
<div id="dashboard">
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
<a class="actions" href="#"">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
.actions:first-child div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.actions:last-child div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions > div {
display: block;
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 0;
margin: 0 -6px 20px 0;
width: 12.5%;
text-align: center;
display: inline-block;
}
.actions > div:hover {
background-color: #f2f2f2;
}
.actions > div i {
width: 1em;
font-size: 2em;
}
A flexbox solution might look something like this:
#dashboard {
display: flex;
}
div:first-child>.actions>div {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
div:last-child>.actions>div {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.actions>div {
background-color: #fafafa;
color: #223a5c;
border: 1px solid #d6d8db;
padding: 15px 15px;
text-align: center;
}
.actions>div:hover {
background-color: #f2f2f2;
}
.actions>div i {
width: 1em;
font-size: 2em;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div id="dashboard">
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-users"></i> <br />Employees
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-pencil-ruler"></i> <br />Check Stats
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-table"></i> <br />Generate Census
</div>
</a>
</div>
<div>
<a class="actions" href="#">
<div>
<i class="fas fa-paper-plane"></i> <br />Send Forms
</div>
</a>
</div>
<div>
<a href="#" class="actions" data-toggle="modal" data-target="#deleteClientModal">
<div>
<i class="fas fa-trash-alt"></i> <br />Delete
</div>
</a>
</div>
</div>
I'm having a hell of a time trying to get a background color to show on a div. I have tried specifying width, height, overflow, etc. with no luck. The code is below. I can get inner div background to change, but not the containing div.
The div in question is header-top-container. Any help is greatly appreciated.
.header-top-container {
background: #F0F0F0;
overflow: hidden;
}
.header-top-container>.main-container {
padding-top: 0;
padding-bottom: 0;
display: flex;
}
.main-container {
position: relative;
max-width: 1260px;
margin: 0 auto;
padding: 15px;
}
body .header-top-container .external-store-tab {
width: 360px;
}
body .header-top-container .external-store-tab,
body .header-top-container .account-cart-wrapper {
position: relative;
width: 70%;
}
<div class="header-top-container">
<div class="main-container header-main-container">
<div class="external-store-tab">
<div class="tab-item">
<a href="https://www.example.org">
<img src="https://www.example.org/logo-foundation.png" class="tab-logo">
</a>
</div>
<div class="tab-item active">
<a href="http://store.example.org/">
<img src="https://www.example.org/logo-store.png" class="tab-logo">
</a>
</div>
</div>
<div class="account-cart-wrapper">
<a href="http://www.example.org/contact/" class="account-link hide-mb">
<span class="label" style="color:#008CA8;">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span class="bar-text" tyle="font-family: 'Open Sans',sans-serif;">Contact</span>
</span>
</a>
<a href="tel:800.222.5870" class="account-link">
<span class="label" style="color:#008CA8;">
<i class="fa fa-phone fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">800.222.5870</span>
</span>
</a>
<a href="https://store.example.org/customer/account/login/" class="skip-link skip-account account-link sign-in-bar">
<span class="label">
<i class="fa fa-user fa-lg" aria-hidden="true"></i>
<span class="bar-text" style="font-family: 'Open Sans',sans-serif;">Sign in</span>
</span>
</a>
<a href="https://store.example.org/checkout/cart/" class="skip-link skip-account account-link">
<span class="label">
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
</div>
Add to class "header-top-container", property "position:inherit" class, like following:
.header-top-container {
background: #F0F0F0;
overflow:hidden;
position: inherit;
}
Your #custom-layer1 has a background that matches the page. Your header-container-top is changing color, but is being 'painted' over so to speak by the background of #custom-layer1.
I am creating a gallery website my goal is the show option button on bottom of the picture when use hover over it.
Here is an example of what I want on pixabay
<div class="image-thumbnail col-lg-2 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#">
<img class="img-responsive" src="http://placehold.it/400x300" alt="">
</a>
<div class="image-options">
<div class="btn-group" role="group">
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-up"></i>
</button>
<button type="button" class="btn btn-sm ">
<i class="fa fa-thumbs-down"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-facebook"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-google-plus"></i>
</button>
<button type="button" class="btn btn-sm">
<i class="fa fa-twitter"></i>
</button>
</div>
</div>
</div>
CSS
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
div.image-thumbnail div.image-options:hover {
display: inline;
}
Any ideas ?
EDIT:
It turns out that
div.image-thumbnail div.image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
Don't work at all as the image-options are still visible even with display:none
You can't hover element with display: none, it's not visible. Instead you should define :hover rule on .image-thumbnail element:
.image-thumbnail {
position: relative;
}
.image-thumbnail .image-options {
position: absolute;
z-index: 2000;
margin-top: -55px;
margin-left: 1px;
display: none;
}
.image-thumbnail:hover .image-options {
display: inline;
}
As stated in my comment.
div.image-thumbnail div.image-options:hover {
display: inline;
}
This is saying when we hover over div.image-options display it... This isn't possible. (As you have it set to display: none) plus this is not the element you want to set the hover on.
What you mean to say is
div.image-thumbnail:hover div.image-options {
display: inline;
}
When we hover over div.image-thumbnail then show div.image-options.