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>
Related
I'm doing some homework and I'm trying to reproduce this
right here
this is my code
<div class="filterbar">
<p>Filtres</p>
<button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button>
<button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button>
<button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button>
<button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button>
</div>
CSS right here
.filterbar{
display: flex;
max-width: 1100px;
margin: 0 auto;
overflow: auto;
}
.filterbar p {
font-weight: bold;
font-size: 18px;
margin-top: 10px;
margin-right: 20px;
}
.buttonfilter{
display: flex;
align-items: stretch;
height: 50px;
background: none;
border: 4px solid var(--background);
border-radius: 30px;
padding: 0;
}
.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog {
color: var(--primary-color);
background: rgba(0,101,252,0.2);
border-radius: 100px;
}
and the thing is that I can't align the font awesome icon and the text, and the background of the font awesome is so strange I really don't understand
I have litte modified your code:
.filterbar{
display: flex;
max-width: 1100px;
width: 1100px;
margin: 0 auto;
overflow: auto;
justify-content: space-between;
}
.filterbar p {
font-weight: bold;
font-size: 18px;
margin-top: 10px;
margin-right: 20px;
}
.buttonfilter{
display: flex;
align-items: stretch;
height: 50px;
background: none;
border: 4px solid var(--background);
border-radius: 30px;
padding: 0;
align-items: center;
border: 1px solid #333;
padding-right: 10px;
}
.fa-money-bill-wave,.fa-child,.fa-heart,.fa-dog {
color: var(--primary-color);
background: rgba(0,101,252,0.2);
border-radius: 100px;
padding: 10px;
margin-right: 10px;
width: 35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="filterbar">
<p>Filtres</p>
<button class="buttonfilter Eco"> <i class="fas fa-money-bill-wave fa-2x"></i> Economique</button>
<button class="buttonfilter Fam"> <i class="fas fa-child fa-2x"></i>Famillial</button>
<button class="buttonfilter Rom"> <i class="fas fa-heart fa-2x"></i>Romantique</button>
<button class="buttonfilter Pet"> <i class="fas fa-dog fa-2x"></i>Animaux autorisé</button>
</div>
To show the fontawsome Icons you need to put in the source like this:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous
This worked for me:
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<i class="fas fa-money-bill-wave fa-2x"></i><button>Economique</button>
<i class="fas fa-child fa-2x"></i>
<button>Famillial</button>
<i class="fas fa-heart fa-2x"></i>
<button>Romantique</button>
<i class="fas fa-dog fa-2x"></i>
<button>Animaux autorise</button>
I think at this point you can adjust it yourself :)
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>
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'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>