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>
Related
I'm trying to copy a navbar design. This is the design I want:
And this is the navbar I'm getting:
And this is the figma link of the design: Link
I'm using flexbox and justify-content: space-between. But I'm getting extra spaces that i do not want. Other differences like icons doesn't matter i just need the basic copy of the ui and get rid of those spaces.
This is my code at the moment:
React Navbar.js:
const Navbar = () => {
return (
<nav className={styles.navbar}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navLinks}>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
SCSS:
.navbar {
width: 100vw;
background: $white;
display: flex;
justify-content: space-between;
align-items: center;
color: $base-text-color;
font-size: $text-md;
line-height: 11px;
}
.navLinks {
display: flex;
justify-content: center;
align-items: center;
border-right: $gray-border;
text-align: center;
}
.logoWrapper {
border-right: $gray-border;
}
.logo {
width: 46px;
height: 46px;
margin: 17px 44px 17px 40px;
}
.navItemWrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 18px 20px;
}
.navItem {
text-decoration: none;
color: $base-text-color;
margin-top: 10px;
}
.searchBarWrapper {
border-right: $gray-border;
// width: 367px;
}
.searchBar {
border: none;
font-size: $text-lg;
font-weight: 300;
padding: 30px;
}
.profileOwner {
display: flex;
justify-content: space-between;
align-items: center;
}
.navAvatar {
width: 42px;
height: 42px;
border-radius: 50%;
margin: 15px;
}
.navProfileName {
display: inline-block;
padding: 10px;
}
.navProfileNameSpan {
font-weight: 300;
}
.navProfileViewCount {
font-weight: 300;
padding: 10px;
}
.navSubmenu {
text-align: center;
border-right: $gray-border;
border-left: $gray-border;
margin-right: 40px;
padding: 18px 23px;
}
.navSubmenuTitle {
margin-top: 21px;
}
Just put the logo div and the Feed , Network div in one container and give some margin-left , you should be good to go.
const Navbar = () => {
return (
<div className={styles.navLinks}>
<div className={styles.logoWrapper}>
<img
src={require("../../img/logo.png")}
className={styles.logo}
alt="logo"
/>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-rss fa-2x"></i>
<a href="#" className={styles.navItem}>
FEED
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-user-friends fa-2x"></i>
<a href="#" className={styles.navItem}>
NETWORK
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="fas fa-suitcase fa-2x"></i>
<a href="#" className={styles.navItem}>
JOBS
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-comment-alt fa-2x"></i>
<a href="#" className={styles.navItem}>
CHAT
</a>
</div>
<div className={styles.navItemWrapper}>
<i className="far fa-bell fa-2x"></i>
<a href="#" className={styles.navItem}>
NOTICES
</a>
</div>
</div>
<div className={styles.searchBarWrapper}>
<i className="fas fa-search fa-2x" style={{ color: "#0275B1" }}></i>
<input type="text" placeholder="Search" className={styles.searchBar} />
</div>
<div className={styles.profileOwner}>
<div className={styles.navAvatarWrapper}>
<img
src="https://unsplash.it/20/20"
alt="avatar"
className={styles.navAvatar}
/>
</div>
<div>
<div>
<h3 className={styles.navProfileName}>User Name</h3>
<span className={styles.navProfileNameSpan}>YOU</span>
</div>
<div>
<p className={styles.navProfileViewCount}>
367 views today<strong>+32</strong>
</p>
</div>
</div>
</div>
<div className={styles.navSubmenu}>
<i className="fas fa-ellipsis-h fa-lg"></i>
<h4 className={styles.navSubmenuTitle}>OTHER</h4>
</div>
</nav>
);
};
I am noob at css. Can someone show me how to properly align this text and icons from above and below?
I don't know how to go about it...
I have example of my code:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<style>
button {
border-radius: 4px;
text-align: center;
padding: 5px 10px;
}
button::before {
display: block;
}
</style>
<button class="fas fa-undo" onclick="onUndo()" style="margin-left: 5px; margin-bottom: 2px;">Undo</button>
<button class="fas fa-redo" onclick="onRedo()" style="margin-left: 5px; margin-bottom: 2px;">Redo</button>
<button class="fas fa-table" id="btnCreateTable" style="margin-left: 5px; margin-bottom: 2px;">Add table</button>
<button class="fas fa-edit" id="btnRenameTable" style="margin-left: 5px; margin-bottom: 2px;">Rename table</button>
<button class="fas fa-trash-alt" id="btnDeleteTable" style="margin-left: 5px;margin-bottom: 2px;">Delete table</button>
<button class="fas fa-plus" id="btnAddRow" style="margin-left: 5px; margin-bottom: 2px;">Add row</button>
<button class="fas fa-pen-square" id="btnEditRow" style="margin-left: 5px; margin-bottom: 2px;">Edit row</button>
<button class="fas fa-minus" id="btnDeleteRow" style="margin-left: 5px; margin-bottom: 2px;">Delete row</button>
<button class="fas fa-sitemap" id="btnInfo" style="margin-left: 5px;">Connection info</button>
but this looks really strange on that compiler. The real look is here:
As you can see this is not center of button. Can someone help?
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 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
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.