I am debutant at html and css. I just wanted to create my first website using html and css but in the navbar I found that I cant make <a> and fa icons in the same line, is there any solution please?
here is the code:
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
text-decoration: none;
color:white;
margin-top:30px;
font-size: 20px;
margin-left: 10px
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
display: inline
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
codepen:
https://codepen.io/badis-kerdellou/pen/KKKYELJ
Thanks in advance
Remove float: right from .fa and add display: inline !important;.
You could also apply padding-left if required. Please see snippet below:
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
text-decoration: none;
color:white;
margin-top:30px;
font-size: 20px;
margin-left: 10px;
}
nav span{
color: white;
font-size: 15px;
}
.fa{
/* updated here */
display: inline !important;
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
************************ SOLVED ************************
Here is your updated code.
body{
margin: 0;
padding: 0
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
}
nav a{
display: inline-block; /*added*/
text-decoration: none;
color:white;
font-size: 20px;
margin-left: 10px
/*margin-top:30px;*/
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
}
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav><!-- End of Navbar -->
</body>
</html>
Related
I noticed my nav bar links were a bit off-centered with my logo on the left. Would someone explain to me how I can fix this? I attached a screenshot and code snippets. I tried doing inline-block and float but still jacked things up. Should I position them using the x and y offsets or not? I just want to do this in the best and most organized way.
/*Font for logo*/
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
/* Add a black background color to the top navigation */
.topnav {
margin: 0;
position: relative;
background-color: #141414;
overflow: hidden;
text-align: center;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
/* Style the links inside the navigation bar */
.topnav a {
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
/*Style for website logo*/
.logo {
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
/*CSS style for the body*/
body {
margin: 0;
background-color: #262626; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class = "logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
Consider to use
display: grid;
in topnav selector, its common way to make navbar.
Sparate the nav size by giving `
grid-template-columns: 1fr 1fr 1fr;
also you need to wrap your nav bar links to single <div></div>.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
/* position: relative; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #141414;
/* overflow: hidden; */
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
/* position: relative; */
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
/* position: absolute; */
/* top: 50%; Important for vertical centered element */
/* transform: translateY(-50%); vertically centered */
color: white;
font-family: 'leander', sans-serif;
text-align: left;
/* float: left; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="R">C</span>
<span id="R">L</span>
<span id="R">I</span>
<span id="R">G</span>
<span id="R">H</span>
<span id="R">T</span>
</div>
<div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
</div>
<script src="app.js"></script>
</body>
</html>
the easy way to archive this result is to use either flex or grid.
you can for example add nav element to wrap Links something like
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<nav>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</nav>
and than in you CSS you can use flex to align element inside topnav like so
.topnav {
display: flex;
align-items:center;
justify-content: space-around;
}
align-items:center in this case will take of center elements in cross axis
Give position: absolute; to .logo.
Center the logo by adding top: 50%; transform: translateY(-50%); properties to .logo.
Rest of code was organized from start.
#font-face {
font-family: 'leander';
src: url(/Fonts/LEANDER.TTF);
}
body {
margin: 0;
background-color: #262626;
}
.topnav {
position: relative;
background-color: #141414;
overflow: hidden;
text-align: right;
padding: 14px 20px;
box-shadow: 0px 5px 10px black;
}
.topnav a {
position: relative;
color: white;
text-align: center;
padding: 30px 16px;
text-decoration: none;
font-size: 17px;
}
.logo {
position: absolute;
top: 50%; /*Important for vertical centered element*/
transform: translateY(-50%); /*vertically centered*/
color: white;
font-family: 'leander', sans-serif;
text-align: left;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arclight Web Development</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="topnav">
<div class="logo">
<span id="A">A</span>
<span id="R">R</span>
<span id="C">C</span>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
<a class="active" href="#home">Home</a>
Projects
Meet the Dev
Contact
</div>
<script src="app.js"></script>
</body>
</html>
I want to use different icons from different stylesheets as not all the icons are available in 1 stylesheet that I wanted to use. When I tryto do that it causes the height problem.One icon leaves in upside and leaves some bottom space and another icon looks as it is required to be. What can be done to align them with same height? if you see the height of last icon of font awesome left some bottom space...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
Change you footer to display as flex could solve the issue:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
display: flex;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
/* float: left; */
display: flex; /* Consider flex layout */
color: black;
justify-content: center; /* Alignment of icons */
padding: 14px 0px;
text-decoration: none;
font-size: 17px;
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
try this, added line-height and font-size to 'i' tag
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
.footer a {
float: left;
display: block;
color: black;
text-align: center;
text-decoration: none;
/*removed padding*/
width:20%;
bottom:0;
margin-bottom:0;
}
.footer a:hover {
background-color: #ddd;
color: black;
}
.footer a.active {
background-color: #2196F3;
color: white;
}
/* added this */
.footer a i{
font-size: 24px;
line-height: 50px;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="material-icons">home</i>
<i class="fa fa-tachometer"></i>
</div>
</body>
</html>
i am trying to make a html + css website, i tried to make a right float for a span (which have the class .float ) but it's breaking a line, i want to know how can i prevent it from breaking a line? i tried display:inline-block but no addition, full code:
<html>
<head>
<title> Web page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
Acceuil <span> | </span>
Types d'appareils <span> | </span>
Ordinateurs <span> | </span>
Telephones <span> | </span>
O.S <span> | </span>
Etudes
</nav>
<!-- End of Navbar -->
<div class="header">
<br> <br>
<span class="pad"> Soufferez vous </span> <br> <br>
<span class="pad"> De l'utlisation </span>
<span class="not"> exagirée </span><span class="notn">de l'internet? </span>
<br> <br> <br> <br>
<img src="hey2.png">
<span class="float"> Hey </span>
</div>
</body>
</html>
css code :
body{
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
nav{
background-color: purple;
height: 55px;
padding-top: 25px;
padding-right: 20px;
border-bottom: 5px solid gray
}
nav a{
display: inline-block; /*added*/
text-decoration: none;
color:white;
font-size: 20px;
margin-left: 10px
}
nav span{
color: white;
font-size: 15px
}
.fa{
float: right;
}
.header{
background-color: purple;
height: 600px
}
h1{
padding: 0;
margin: 0
}
.header h2,h1{
display: inline-block;
color: white;
font-family: 'Raleway', sans-serif;
margin-left: 20px
}
.pad{
color: wheat;
padding-left: 15px;
font-size: 40px
}
.not{
color: red;
padding: 0;
font-size: 40px
}
.notn{
color: wheat;
font-size: 40px
}
.header img{
height: 300px
}
.float{
float: right
}
.header span{
display: inline
}
codepen.io:
https://codepen.io/badis-kerdellou/pen/NWWVpLV
I'm not sure if I'm so dumb I didn't even got the problem, but obviusly <br> breaks the line, just put the <span class="float"> Hey </span> before the <br>, like this:
<div class="header">
<br> <br>
<span class="pad"> Soufferez vous </span> <br> <br>
<span class="pad"> De l'utlisation </span>
<span class="not"> exagirée </span><span class="notn">de l'internet? </span>
<span class="float"> Hey </span> <!--Just moved it above the <br>-->
<br> <br> <br> <br>
<img src="hey2.png">
I am trying to build a custom navigation bar. Currently, it looks like this:
How do I bring each of my anchor element to get in the center of each box (both vertically, and horizontally)? Also, the brand element has a bigger font, but I want a solution which will center all the elements nicely.
In short, I want it to look something like this:
The borders on the first pic is for testing obviously. I made the second pic with a photoshop edit. My code for this page looks is this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-top: 13px;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 20px;
font-weight: bold;
margin-top: 7px;
margin-right: 25px;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav class="navbar">
<div class="container">
<ul class="navbar-list navbar-list-left navbar-brand-list">
<li class="navbar-item navbar-brand-item">
BRAND
</li>
</ul>
<ul class="navbar-list navbar-list-left">
<li class="navbar-item">
Product
</li>
<li class="navbar-item">
Pricing
</li>
<li class="navbar-item">
Company
</li>
<li class="navbar-item">
Blog
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li class="navbar-item">
Log in
</li>
<li class="navbar-item">
Sign up
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="twelve column">
<h4>Basic Page</h4>
<p>
Lorem ipsum ....
</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Note: I am using Skeleton for this.
So how do I fix my navbar? These are the things I want:
The text of each anchor element needs to be centered vertically and horizontally.
I want the element containing the element to take up 100% of the height of the navbar.
Any help is appreciated!
Replace this css and check, it may help you..
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}
</style>
I'm trying to make a navbar for a new project I'm working on.
I want the navbar to have the website title in it, that is the h1 and the menu items, but when I try to do that it doesn't make both the h1 and the ul on the same line.
I want the navbar items and the navbar "header" aligned at the same height and on the same line not as diffrent blocks that can't fit together.
html, body {
width: 100 % ;
padding: 0;
margin: 0;
font - family: 'Roboto',
sans - serif;
}
h1, h2, h3, h4, h5 {
margin: 0;
padding: 0;
}
.main - title {
text - align: center;
margin - top: 20 px;
margin - bottom: 2 px;
}
header {
border - bottom: 2 px solid grey;
}
ul {
padding: 0;
margin: 0;
}
.nav - ul {
list - style - type: none;
float: right;
margin - right: 50 px;
display: inline - block;
}
.navbar - title > h1 {
text - align: center;
margin - top: 20 px;
}
.nav - ul > a: visited, a: link {
text - decoration: none;
color: black;
font - size: 1.5e m
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>
h1 tags are display:block by default, meaning they take up 100% width. You can change this by adding display:inline-block to .nav-brand and .nav-list:
html, body {
width: 100%;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
h1,h2,h3,h4,h5 {
margin: 0;
padding: 0;
}
.main-title {
text-align: center;
margin-top: 20px;
margin-bottom: 2px;
}
header {
border-bottom: 2px solid grey;
}
ul {
padding: 0;
margin:0;
}
.nav-brand, .nav-list {
display:inline-block;
}
.nav-ul {
list-style-type: none;
float:right;
margin-right: 50px;
display: inline-block;
}
.navbar-title > h1 {
text-align: center;
margin-top: 20px;
}
.nav-ul > a:visited, a:link {
text-decoration: none;
color: black;
font-size: 1.5em
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Raspberry pi projects</title>
<link rel="stylesheet" href="assets/css/main.css">
<!-- JQUERY CDN -->
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/3.0.0-beta1/jquery.js"></script>
<!-- LOADING SCREEN SCRIPT -->
<!--<script type="text/javascript" src="assets/js/load.js"></script>-->
<!-- ROBOTO FONT -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,100italic,300italic,500,300,700,400italic,700italic,500italic,100&subset=latin,greek-ext,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<nav>
<div>
<div class="nav-brand">
<h1>Raspberry pi projects</h1>
</div>
<div class="nav-list">
<ul class="nav-ul">
<li class="nav-item">
Submit a project
</li>
</ul>
</div>
</div>
</nav>
<script src=""></script>
</body>
</html>