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?
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 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 want to create Buttons with icons and text under it. I started with the following:
<ion-view view-title="Title">
<ion-content>
<div class="list">
<a ng-repeat="image in images" class="item">
<div class="container">
<img ng-src="{{image}}" />
</div>
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i> preview
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i> crop
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i> styles
</button>
</div>
<div>
<button class="button button-clear">
<i class="icon ion-social-tumblr"></i> text
</button>
</div>
</div>
</a>
</div>
</ion-content>
</ion-view>
with the following css:
.container {
margin-left: auto;
margin-right: auto;
background-position: center center;
background-image: url("../img/frames/frame_01.png");
background-size: contain;
background-repeat: no-repeat;
width: 245px;
height: 325px;
position: relative;
}
.container img {
width: 87.5%;
height: 68.5%;
position: absolute;
top: 0;
bottom: 13%;
left: 0;
right: 0;
margin: auto;
}
.container-side-menu {
width: 10%;
height: 50%;
top: 20%;
right: 15px;
position: absolute;
margin: auto;
}
.container-side-menu .button {
color: white !important;
}
but the result of it is ofcourse that the text is written next to the icons of the buttons.
How can i set the text directly under the buttons without padding and how can i make my icons greater and my text smaller?
I was able to get the text under the icons:
<ion-view view-title="Title">
<ion-content>
<div class="list">
<a ng-repeat="image in images" class="item">
<div class="container">
<img ng-src="{{image}}" />
</div>
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i>
<span>preview</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i>
<span>crop</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i>
<span>styles</span>
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-social-tumblr"></i>
<span>text</span>
</button>
</div>
</div>
</a>
</div>
</ion-content>
</ion-view>
css:
.container-side-menu div {
vertical-align: top;
text-align: center;
}
.container-side-menu span {
display: block;
font-size: 10px;
}
BUT: between the icon and the text is too much space. how can i remove that space?
Alter the line-height of the button inside the container.
angular.module('app', ['ionic']);
.container-side-menu {
width: 10%;
top: 15%;
right: 15px;
position: absolute;
margin: auto;
}
.container-side-menu .button {
font-size: 10px;
line-height: 10px; // Add
}
.container-side-menu .button-icon .icon {
display: block;
font-size: 30px;
margin-bottom: 3px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="container-side-menu">
<div>
<button class="button button-icon">
<i class="icon ion-eye"></i> preview
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-crop"></i> crop
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-android-options"></i> styles
</button>
</div>
<div>
<button class="button button-icon">
<i class="icon ion-social-tumblr"></i> text
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Using this css bellow:
.button-icon .icon {
display: block; /*** icons on the texts ***/
font-size: 36px; /*** increase size of icons ***/
margin-bottom: 3px;
}
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.