I'm trying to get my home button in the header within a div but it is aligning under the div/header.
I have this code:
.home-button {
background: #333;
width: 59px;
height: 60px;
float: right;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
div.home-button i.fa {
display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class="home-button">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
but it is displaying with the icon below the div...
Any advice?
you need to change your line-height to 60px( same value has your height) if you want it vertically aligned
don't need to set other rules to i, because font-awesome.cssalready handles that
.home-button {
background: #333;
width: 59px;
height: 60px;
line-height:60px;
float:right;
text-align: center;
vertical-align: bottom;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="home-button">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
It's because you have set your line-height 180px. Text is than vertically aligned to this value instead of set height of 60px
.home-button {
margin-top: 50px;
background: #333;
width: 59px;
height: 60px;
float: right;
line-height: 60px;
text-align: center;
vertical-align: bottom;
}
div.home-button i.fa {
color: #ddd;
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>
<div class="home-button">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
Remove line-height from .home-button and add it to i tag like this:
.home-button {
background: #333;
width: 59px;
height: 60px;
float: right;
text-align: center;
}
.home-button i {
display: inline-block;
line-height: 60px;
color: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class="home-button">
<i class="fa fa-home" aria-hidden="true"></i>
</div>
Related
I am making a sidebar and am new to css. I created a div which represents a closed sidebar. It is supposed to only show the icons. Unfortunately the icons come in a misaligned manner inside the div based on their size. How do I fix this?
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
float: left;
margin-left: 9px;
margin-top: 5px;
margin-bottom: 10px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
The car icon is misaligned here. What's the solution?
You could try to align all the icons to the center so your .data-icon class could look like this:
.data-icon {
font-size: 45px;
color: black;
opacity: 0.5;
display: block;
width: 100%;
text-align: center;
}
Your div elements doesn't have set width and height in CSS - so the icons are strictly aligned inside them.
If you want to vertically center them and learn something new use flexbox:
.icons-only {
display: flex;
flex-direction: column;
align-items: center;
}
and
.data-icon {
...
margin-left:0
}
Your car icon is also a little bit bigger than house - you can a little change it size by add new class to it or use this:
.data-icon:nth-child(2) {
font-size: 40px;
}
This CSS code will take second (=2) element with class .data-icon and set different font size for it
The icons are inline elements so they will be left aligned by default. Add in that the icons are not that same size (this is normal), you get an uneven alignment.
To remedy this, add text-align: center to .icons-only.
Note: Given the layout in the example, it does not appear necessary to float .data-icon to the left.
.sidenav {
height: 492px;
width: 300px;
background-color: #db3d44;
}
.icons-only {
text-align: center;
}
.data-icon {
color: rgba( 0, 0, 0, 0.5 );
font-size: 45px;
}
.hamburger {
background-color: transparent;
border-color: transparent;
color: white;
margin-left: 10px;
margin-top: 4px;
font-size: 25px;
}
.hamburger:hover {
color: black;
}
.sidenav-closed {
width: 65px;
float: left;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="sidenav-closed sidenav">
<button class="hamburger data-disappear">☰</button>
<div class="icons-only">
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
<div class="data-icon">
<i class="fa fa-car"></i>
</div>
<div class="data-icon">
<i class="fa fa-home"></i>
</div>
</div>
</div>
I have been looking at suggestions on how to make two divs on the same line for the past hour, but they either do not work or only work for divs with text. I am making a navigation bar for my website that contains my site logo and icons that jump to sections of my website, but I cannot get them to be on the same line.
I just want the icons (in the blue container) to be shifted up and right next to my logo. If anybody could tell me specifically what I can do to fix this, it would be greatly appreciated.
Also, I am using Bootstrap 4 if that makes any difference in solving this problem.
My navigation bar currently:
What I want the navigation bar to look like:
My Navbar HTML:
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
My Navbar CSS (you can ignore the comments as they are just from me trying to fix this issue):
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
Flexbox - You literally can just change d-block to d-flex on id="topnav" and it will be just about right:
Change <div class="d-block d-xs-block d-md-none" id="topnav"> to <div class="d-flex d-md-none" id="topnav">
I also removed the d-xs-block which is not needed.
I believe you can remove the height: 120px from #topnav since the height would be driven by the items themselves and you'll probably want to remove margin-left: 60px; on #topnav-icons. I've made these changes in the snippet below.
#topnav {
/* TODO: change height back to 60px when done fixing*/
/* height: 120px; */
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
/* margin-left: 60px; */
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="d-flex d-md-none" id="topnav">
<div id="topnav-logo">
<img src="http://pluspng.com/img-png/bootstrap-logo-vector-png-bootstrap-logo-512.jpg" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
I'm not sure if it does what you want but adding float:left on your image might be the trick.
See this jsfiddle
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
And CSS
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
}
#topnav-icons {
margin-left: 60px;
width: calc(100vw - 60px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
}
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
float:left;
}
it should be like this :
#topnav {
/* TODO: change height back to 60px when done fixing*/
height: 120px;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
background: black;
/* TODO: change overflow back to hidden when done fixing*/
overflow: auto;
}
#topnav-icons {
width: calc(100% - 80px);
padding-top: 11px;
padding-bottom: 11px;
background: blue;
float: left;
}
#topnav-logo { float: left; }
#topnav-icons a {
/* float: left;
display: inline-block; */
color: var(--gray);
/* text-align: center; */
text-decoration: none;
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
position: relative;
}
#sidenav-icons a:hover, #topnav-icons a:hover, #contact a:hover {
color: var(--seafoam);
}
#logo-sidenav, #logo-topnav {
height: 60px;
width: 60px;
padding: 10px;
}
<div class="d-block d-xs-block d-md-none" id="topnav">
<div id="topnav-logo">
<img src="images/logo.png" id="logo-topnav">
</div>
<div class="text-center" id="topnav-icons">
<i class="fa fa-home" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fas fa-file-alt" aria-hidden="true"></i>
<i class="fas fa-book-open" aria-hidden="true"></i>
<i class="fas fa-address-book" aria-hidden="true"></i>
</div>
</div>
I want to raise quotation marks higher, but whenever i add padding or margin bottom nothing happens, it seems that parent does not contain the children. I have tried border solid, inline block, everything i know to use when margins collapse but nothing worked
blockquote {
float: right;
padding-right: 50px;
padding-top: 170px;
font-size: 22px;
color: #B08177;
overflow: hidden;
margin: 0 0;
border: solid;
box-sizing: border-box;
height: 209px;
}
.fa {
font-size: 5px;
}
.fa-quote-left {
padding-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<blockquote>
<i class="fa fa-quote-left" aria-hidden="true"></i> My Text!
<i class="fa fa-quote-right" aria-hidden="true"></i>
</blockquote>
blockquote {
float: right;
padding-right: 50px;
padding-top: 170px;
font-size: 22px;
color: #B08177;
overflow: hidden;
margin: 0 0;
border: solid;
box-sizing: border-box;
height: 209px;
}
.fa {
font-size: 5px;
}
.fa-quote-left {
bottom:12px;
position:relative;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<blockquote>
<i class="fa fa-quote-left" aria-hidden="true"></i> My Text!
<i class="fa fa-quote-right" aria-hidden="true"></i>
</blockquote>
My icons look like this:
I need to create like this one:
Here is my HTML:
<aside class="social">
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-facebook" aria-hidden="true"></i></span>
<span><i class="fa fa-pinterest" aria-hidden="true"></i></span>
</aside>
Here is my CSS:
aside.social a {
margin-left: 10px;
color: #fff;
font-size: 16px;
}
aside.social a span {
width: 25px;
display: inline-block;
height: 25px;
background-color: #aaa;
border-radius: 40%;
}
You don't need two separate elements, you can do that all on your a with an i.fa inside.
aside.social a {
color: #fff;
background: #aaa;
margin-left: 10px;
border-radius: 40%;
width: 25px;
height: 25px;
line-height: 25px; /* vertical alignment */
text-align: center;
font-size: 16px;
}
I would use inline-flex on that element, then you can use flex positioning to center. justify-content: center; align-items: center; will center horizontally and vertically. You can also change the border-radius to 50% for a true circle.
aside.social a {
margin-left: 10px;
color: #fff;
font-size: 16px;
text-decoration: none;
}
aside.social a span {
width: 25px;
height: 25px;
background-color: #aaa;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<aside class="social">
<span><i class="fa fa-instagram" aria-hidden="true"></i></span>
<span><i class="fa fa-facebook" aria-hidden="true"></i></span>
<span><i class="fa fa-pinterest" aria-hidden="true"></i></span>
</aside>
Try changing your code so it looks something like this
span {
display: block;
text-align: center;
line-height: 25px
}
And
a {
width: 25px;
height: 25px;
display: inline-block;
}
You can use flex:
aside.social a {
margin-left: 10px;
color: #fff;
font-size: 16px;
text-decoration: none;
}
aside.social a span {
display: inline-flex;
justify-content: center;
align-items: center;
width: 25px;
height: 25px;
background-color: #aaa;
border-radius: 40%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<aside class="social">
<a href="https://www.instagram.com/" class="inst">
<span>
<i class="fa fa-instagram" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.facebook.com" class="facb">
<span>
<i class="fa fa-facebook" aria-hidden="true"></i>
</span>
</a>
<a href="https://www.pinterest.com/" class="pint">
<span>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</span>
</a>
</aside>
add this in "aside.social a span", nothing else is required:
text-align:center;
padding-top:8px;
Try adding a position: absolute; to the css
Followed by margin-left: 20px, play with the pixels a little until you're satisfied :)
I want to create a button like this one :
but bigger, resizable and to function properly on bootstrap.
Here's what I've done so far:
I've tried with display: inline-block; on download-btn-icon and download-btn-text then I wanted to center the .fa using http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ but the .fa displays way out of download-btn.
This is the html:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
</div>
and this is the less:
.download-btn {
width: 100%;
height: 70px;
background-color: #000;
.download-btn-icon {
display: inline-block;
float: left;
width: 25%;
height: 100%;
border-right: 1px solid #fff;
.fa{
padding-top: 14px;
padding-left: 23px;
}
}
.download-btn-text {
display: inline-block;
width: 75%;
float: right;
padding-left: 15px;
}
}
I'm clueless I don't know how to align the divs properly, I need some advice.
You can use display: table-cell and vertical-align: middle to achieve this effect. This solves the alignment issue and forces both elements to have the same height.
h3, h5 {
margin: 0;
line-height: 1.5em;
}
.download-btn-icon,
.download-btn-text {
display: table-cell;
background: #222;
vertical-align: middle;
padding: 7.5px 15px;
color: #999;
}
.download-btn-icon {
border-right: 1px solid #444;
}
<div class="download-btn">
<div class="download-btn-icon">
<i class="fa fa-cloud-download fa-3x"></i>
</div>
<div class="download-btn-text">
<h3>Download Client</h3>
<h5>Get the latest full updated client.</h5>
</div>
</div>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">