I have the following script in my html file:
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
And below is the .css file:
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below:
the result
What is causing the nav class to not start from the beginning of the screen (bottom left)?
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.
Furthermore some additions on your Template:
The head and body should only be in your client/main.html while the body content will be rendered using the templates. This is, because Blaze is focused to develop single page applications.
So your code client/main.html may be like the following:
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<i class="fa fa-user-circle"></i>
<i class="fa fa-upload"></i>
<i class="fa fa-eye"></i>
<i class="fa fa-search"></i>
</div>
</template>
The default margins and padding are still in place. What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:
template {
margin: 0;
padding: 0;
}
try this one
margin: 0 !important;
Related
I am learning HTML and CSS. I am practicing by designing some pages but I got a problem. I tried many ways but couldn't fix it. I want to add a space between the icon and the text so that they lock more beautiful.
Image:
CSS:
.facebook {
background: blue;
padding: 0.8rem;
padding-left: 4.1vw;
padding-right: 4.1vw;
margin-left: 0vw;
border-radius: 10px;
}
.facebook:hover {
opacity: 0.5;
}
.google {
background: red;
padding: 0.8rem;
padding-left: 4.6vw;
padding-right: 4.6vw;
margin-left: 3vw;
border-radius: 10px;
}
.google:hover {
opacity: 0.5;
}
HTML:
<div class="login-with">
<i class="fab fa-facebook">Facebook</i>
<i class="fab fa-google">Google</i>
</div>
Can you please help me to fix it. When I add a space manually the link text go to below the icon.
Full Codes link:
CSS: Full Code
HTML: Full Code
Try one of the below methods as mentioned in Fontawesome examples page
Text outside i tag, and add a space in between
<i class="fab fa-facebook"></i> Facebook
Use , below code is from Fontawesome site
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
If you dont want to change your markup(html) use the below CSS
.login-with > a i::before {
padding-right: 15px;
}
People usually keep the icon element as an empty node and put the text content after it. Then you add a margin to the icon to get appropriate spacing:
.facebook .fab { margin-right: 1em }
<a href="..." class="facebook">
<i class="fab fa-facebook"></i>
<span>Facebook</span>
</a>
The <span> tags are technically not necessary, but it is common to avoid text-only nodes.
Use space or   between text and icon. Also plz put ; after  
Place service name outside i tag.
You can add margin-right: 10px; styling to i element,
or display: flex; justify-content: space-between; to the a tag.
It would be best to set a base class for the social icons
/* set base class */
.social-btn {
padding: 0.8rem 4.1vw;
border-radius: 10px;
color: white;
background: gray;
text-decoration: none;
font-family: sans-serif;
}
/* space the buttons */
.social-btn + .social-btn {
margin-left: 1rem;
}
/* set icon padding */
.social-btn i {
padding-right: 0.5rem;
}
/* Modifiers */
.facebook-btn {
background: blue;
}
.google-btn {
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<i class="fab fa-facebook"></i>Facebook
<i class="fab fa-google"></i>Google
In Bootstrap you can use me which represents margin from end in icon
<button type="button" class="btn btn-primary"
style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
Sample Code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<center>
<button type="button" class="btn btn-primary" style="width:150px;"><i class="bi bi-info-circle me-2"></i>Information</button>
<br><br>
<button type="button" class="btn btn-secondary" style="width:150px;"><i class="bi bi-gear-fill me-3"></i>Settings</button>
<br><br>
<button type="button" class="btn btn-info" style="width:150px;"><i class="bi bi-person-circle me-3"></i>Profile</button>
</center>
</body>
</html>
I have a list of users, with two inline elements: a "contact me" button ('a' element with a fontawesome icon) and a tag showing the type of user (span element).
Not all users have a tag, and whenever there is a tag, the 'a' element is giving to the icon more width than it needs. This is how it looks like:
As you can see, the bottom one fits correctly, while the blue space of the top one is bigger on the right. They have the exact same classes and attributes (this is generated from a loop, so it's the same code).
This is the HTML code for the link+span:
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I tried checking if there was any difference in the cumputed styles of the two elements through javascript (maybe there was a ":last-child" selector somewhere), but their maps looks exactly the same (checked using getComputedStyle on both elements).
Whenever I change the span element display property to block, flex, or other not-inline options, the other element resize itself in the correct way.
The only option I found is to change the icon width to .8em (currently 1em), and then add a last-child selector to resize it correctly to 1em when there is no span on the right, but it's not a real solution...
Could anyone help me figure out why, or at least how to fix it?
Set the display on item-btn-contact to inline-block. Seems like the default display of a (inline) is messing with the sizing.
.item-title {
margin-bottom: 10px;
}
.item-btn-contact {
margin-left: 10px;
padding: 3px 10px;
border-radius: 5px;
background-color: #1b95e0;
font-size: 80%;
color: #fff;
text-decoration: none;
display: inline-block;
}
.item-type-tag {
margin-left: 10px;
padding: 3px 5px;
border-radius: 5px;
background-color: #dedede;
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
<span class="item-type-tag">Allenatore</span>
</div>
<div class="item-title">
xxxx
<a href="" class="item-btn-contact" title="Contattami">
<i class="fas fa-envelope"></i>
</a>
</div>
I am trying to achieve this design having a semicircle with logo inside in the center. Kindly refer to the link given below.
Image
I have tried making a semicircle using CSS but it won't be suitable for the design that I want. I have used 2 jumbotrons, one after the other. The semicircle should cover the area on both jumbotron as in the image(link mentioned above).
Any help is appreciated on how can I achieve this design.
HTML:
<div class="jumbotron">
<div class="container navheader">
<div class="social">
<i class="fa fa-facebook " aria-hidden="true"></i>
<i class="fa fa-google-plus " aria-hidden="true"></i>
<i class="fa fa-instagram " aria-hidden="true"></i>
</div>
<div class="contact-us">
<a href="">
<i class="fa fa-phone " aria-hidden="true">
<label class="icon-label">CALL 0417 949 773</label></i></a>
</div>
</div>
</div>
<div class="jumbotron other-color">
<div class="container navheader">
<div class="user-actions">
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-in">
<i class="fa fa-lock" aria-hidden="true">
<label class="icon-label">SIGN IN</label>
</i>
</button>
<button class="btn btn-link" data-toggle="modal" data-
target="#sign-up">
<i class="fa fa-user " aria-hidden="true">
<label class="icon-label">CREATE AN ACCOUNT</label>
</i>
</button>
</div>
<div class="div-semicircle top"></div>
<div class="cart">
<a href=""><i class="fa fa-shopping-cart " aria-
hidden="true">
<label class="icon-label">2 ITEM(S)</label>
</i></a>
</div>
</div>
</div>
CSS:
<style>
/* Remove the navbar's default rounded borders and increase the bottom margin */
.navbar {
margin-bottom: 50px;
border-radius: 0;
}
/* Remove the jumbotron's default bottom margin */
.jumbotron {
margin-bottom: 0;
background-color: #5a9f33;
padding: 2em 1em;
}
.other-color {
margin-bottom; 0;
background-color: #67b63d;
padding: 2em 1em;
}
.navheader{
display: inline-block;
width: 100%;
}
.social, .user-actions{
float:left;
}
.contact-us, .cart{
float:right;
}
.sign-up{
background-color:#67b63d;
margin: 0 50px 50px;
padding:20px;
}
input{
padding:15px;
margin:20px;
width:85%;
}
.btn-sign{
background-color: #67b63d;
font-family: serif;
color: white;
border-radius: 30px;
font-size: 2em;
padding: 10px 50px;
margin: 20px auto;
display: block;
}
.title{
font-family: serif;
font-weight: 600;
color: #67b63d;
font-size: 3em;
margin-top:20px;
}
.div-semicircle {
background: #9e978e;
display: inline-block;
margin: 0 1em 1em 0;
}
.top,
.bottom {
height: 45px;
width: 90px;
}
.top {
border-top-left-radius: 90px ;
border-top-right-radius: 90px;
}
</style>
UPDATE:
Solution: In case anyone wants to know, refer to the sample by #bhv in the first comment for reference and tweak it as per your requirement.
first of all your posted code isn't of any help....still I'll try to give a procedure how you can achieve the linked image
create a div not with class .container
create 2 navs inside above created div
create a jumbotron below the navs inside the same div and contain it
in a div with class container
set margins as you need it between these 3 to bring them together
It is clearly visible that you dont need a semicircle..you need an ellipse use clip-path: ellipse(65px 30px at 125px 40px); someting like this to create it within same div then position it in a way you want to using css and give it highest z-index so that it renders as top-most layer.
prey that it works!! ;-)
you must use position:absolute to cover both jumbotron
add these lines of code to this class: .div-semicircle.
position: absolute;
top: 23%;
left: 40%;
Im wanting it to look like:
[BUTTON]
or
[Button 1] [Button2]
But im not sure how do so.
My code:
HTML:
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
CSS:
#bottom-btn1{
margin-top: 10px;
margin: 20px;
margin-left: 340px;
display: inline-block;
float: left;
}
#bottom-btn2{
margin-top: 10px;
margin: 20px;
margin-right: 40px;
display: inline-block;
float: right;
}
JSFiddle link: https://jsfiddle.net/d2L7ynu3/
Thank you to the people that help me. It means alot :D
So this is a good opportunity to learn in CSS positioning; something I've fought with for years in order to learn. There's two main methods of achieving this effect but they have some gotchas. Using the following HTML (I've taken out the p tags).
Get Started
<span>or</span>
Log In
Sign Up
The inline-block method will work here, but we'll need to make a small change in order to get the links to line up next to each other. inline-block preserves white space, so you'll see a gap between the elements. Adding HTML comments between the elements will remove the white space (or you can just put the elements side-by-side without the line break for readability).
Get Started
<span>or</span>
Log In<!--
-->Sign Up
Now we can add CSS.
a{
display:inline-block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
width:50%;
}
If you didn't put the HTML comments in, you'll notice the sign_up link drop below the log_in because of the hidden white space.
If you go with the float method instead, then you'll need some extra markup.
Get Started
<span>or</span>
<p class="cf">
Log In
Sign Up
</p>
.cf:before, .cf:after{
content:"";
display:table;
}
.cf:after{
clear:both;
}
a{
display:block;
}
#get_started{
width:100%;
}
#log_in, #sign_up{
float:left;
width:50%;
}
The cf class stands for clearfix, which is a hack developed to help create height for parent elements with floated children.
The p element is making the buttons to be draw in different lines. You can try
p {
display: inline-block;
}
I suggest to place a selector class in those p so you will not need to overwrite the css for all th p elements
don't forget text-align : center; it saves most of the times.
i just tided up your code.. that might help you improve your coding.. just change the .wrap size if you do any changes on buttons. hope it helps
p, .back, h3 {
text-align: center;
}
.wrap {
margin: 0 auto;
width: 172px;
}
.btn {
float: left;
margin-left: 5px;
}
<p> ← Get Started
</p>
<h3>or</h3>
<p class="wrap">
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</p>
Try this
<div class="buttonbox">
<p> ← Get Started</p>
<h3>or</h3>
<p> <i class="fa fa-code-fork"></i> Log In / Sign Up</p>
<p> <i class="fa fa-user-plus" ></i> Sign Up</p>
</div>
CSS
.buttonbox {
text-align: center;
}
.buttonbox > p {
display: inline-block;
float: none!important;
}
don't call float: left; for those buttons.
HTML:
<div class="wrap">
← Get Started
<h3>or</h3>
<div>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
</div>
</div>
CSS:
.wrap {
max-width: 1000px; /* any size you want */
width: 96%; /* 960px */
margin: 0 auto;
text-align: center;
overflow: hidden;
padding: 1%;
}
.wrap h3 {
margin: 10px 0;
}
.wrap a {
padding: 20px 0;
}
.wrap > a {
border: 1px solid #ddd;
display: block;
width: 60%;
margin: 0 auto;
}
.wrap div a {
width: 48%;
float: left;
outline: 1px solid #ddd;
margin: 0 1%;
}
Result looks like this:
[BUTTON]
or
[Button 1] [Button2]
#bottom-btn1, #bottom-btn2{
padding: 10px;
border: solid black 3px;
background-color: #83D8B7;
color: #134A1E;
}
a{
text-decoration: none
}
<br>
<i class="fa fa-code-fork"></i> Log In / Sign Up
<i class="fa fa-user-plus" ></i> Sign Up
I am trying to create the following control with HTML / CSS. I need advice on the best way to implement this with solely HTML and CSS. I was able to implement it using different anchor () tags. But I am not sure that this is the best approach since it all has the same purpose.
The link, blue circle, and cart icon should take you to a different page.
Also - for the icon I am implementing font-awesome. http://fortawesome.github.io/Font-Awesome/icons/
Any advice and suggestions would be appreciated!
Here is a picture:
Here is my HTML so far - but I dont think it's the best approach...
<div id="check_out_utility" class="float_right">
<a id="check_out_utility_link" class="white_link float_left" href="#">Check Out</a>
<div id="shopping_cart" class="float_right">
<i class="fa fa-shopping-cart fa-3x white_color"></i>
</div>
</div>
Again, thanks
You may use absolute positioning within the cart icon.
I build a quick example from scratch
HTML:
<a class="cart" href="#">
Checkout
<span class="fa fa-2x fa-shopping-cart">
<span class="badge">3</span>
</span>
</a>
CSS:
.cart {
background-color: #2F4178;
display: inline-block;
width: 200px;
height: 20px;
text-decoration: none;
color: #FFF;
padding: 20px;
}
.cart .fa {
position: relative;
}
.cart .badge {
display: inline-block;
background-color: #478BFF;
border-radius: 50%;
padding: 3px;
color: #FFF;
width: 10px;
height: 10px;
text-align: center;
font-size: 11px;
position: absolute;
bottom: 0;
left: 0;
}
fiddle: http://jsfiddle.net/jqac30Lz/