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>
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 placed an icon cart from Font Awesome in my Navigation Bar. The problem is that this line appears to the left below in the cart icon when I go over with my mouse. I tried a lot of things but I could not find a way to remove this line:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Σκοτεινή Πλευρά</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<nav>
<div class="row justify-content-center">
<div class="Basket">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="Basket_Number">2</span>
</a>
</div>
</div>
</nav>
</body>
</html>
.Basket {
display: inline-block;
text-align: center;
margin-right: 11px;
margin-bottom: -6px;
}
.Basket a {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
margin-top: 100px;
font-size: 30px;
width: 40px;
height: 40px;
color: #332f25;
transition: color 0.3s ease;
text-decoration: none;
}
.Basket_Number {
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: -15px;
left: 35px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fe4c50;
font-size: 12px;
color: white;
}
Just add this css in to alter the hover state:
.Basket :hover {
text-decoration: none;
}
Use the :hover selector to get rid of the underline when hovering
.Basket a:hover {
text-decoration: none;
}
I want to make the menu to be always on the top when scrolling down the page but the heading that is above the menu to hide. I would like only the menu that is in div tag with id="fixed-div" to stay on the top and the other menu to hide.
I want the menu to pull up and stay fixed on the top of the page like in this site: https://www.w3schools.com/html/default.asp
body {
margin: 0px;
background-color: #fcede0;
height: 900px;
}
#my-logo {
width: 150px;
height: 100px;
position: absolute;
left: -10px;
top: -25px;
z-index: -1;
}
#page-title {
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight: bold;
font-size: 25px;
text-align: center;
color: #22117a;
}
#inner-title {
padding-left: 120px;
padding-right: 70px;
}
body div img::selection, #inner-title::selection, #menu-up li a::selection, #menu-down li a::selection, body div article a img::selection, footer table tr td div::selection, footer a::selection{
color: #ef4810;
background-color: lightblue;
}
#menu-up{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
#menu-down {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: right;
background-color: #ef4810;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 3px;
}
#menu-up li{
float: left;
display: inline-block;
font-size: 20px;
width: 200px;
}
#menu-down li {
float: right;
display: inline-block;
font-size: 15px;
width: 250px;
}
#menu-up li a:link, #menu-down li a:link, #menu-up li a:visited, #menu-down li a:visited {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: #22117a;
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
#menu-down li a:link, #menu-down li a:visited {
color: #972d09;
}
#menu-up li a:hover, #menu-down li a:hover {
display: block;
text-align: center;
padding: 10px 30px;
text-decoration: none;
color: white;
/*background-color:red;*/
font-family: "Courier New";
font-weight: bold;
padding-top: 1px;
padding-bottom: 1px;
}
.HTML-CSS-logo {
height: 300px;
width: 300px;
box-shadow: 0px 0px 100px 10px black;
border-radius: 40px;
}
#HTML-article, #CSS-article {
display: inline-block;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
#div-article {
padding-top: 150px;
text-align: center;
margin-bottom: 130px;
}
.HTML-CSS-logo:hover {
-webkit-filter: blur(4px);
filter: blur(4px);
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="title" content="Сайт за електронно обучение по HTML5 и CSS3">
<meta name="keywords" content="HTML5, CSS3, обучение, електронно обучение, самоучител">
<meta name="description" content="HTML5 и CSS3 обучение">
<meta name="author" content="Иванка Янкулова">
<meta name="copyright" content="Иванка Янкулова">
<!--<meta name="pubdate" content="2017-12-21">-->
<title>HTML5 и CSS3 обучение</title>
<link rel="icon" href="images/icon.png" type="image" >
<link rel="stylesheet" type="text/css" href="Style.css" />
<link rel="stylesheet" type="text/css" href="Index.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header>
<div id="page-title">
<img id="my-logo" src="images/logo2.png" alt="Лого" title="Лого" />
<div id="inner-title">Сайт за електронно обучение по HTML5 и CSS3</div>
</div>
</header>
<div id="fixed-div">
<nav>
<ul id="menu-up">
<li id="home-button" class="icon-bar">
<i class="fa fa-home"></i>
</li>
<li>
HTML5
</li>
<li>
CSS3
</li>
<li>
Разработки
</li>
<li>
Справки
</li>
</ul>
</nav>
</div>
<nav>
<ul id="menu-down">
<li>
Полезни връзки
</li>
<li>
Препоръки и забележки
</li>
<li>
Информация за сайта
</li>
<li>
Контакти
</li>
</ul>
</nav>
<div id="div-article">
<article id="HTML-article">
<a href="">
<img class="HTML-CSS-logo" src="images/HTML-logo.png" alt="HTML5" title="HTML5" />
</a>
</article>
<article id="CSS-article">
<a href="">
<img class="HTML-CSS-logo" src="images/CSS-logo.png" alt="CSS3" title="CSS3" />
</a>
</article>
</div>
</body>
</html>
You shoud listen the event of window scroll, using js control #menu-up's position be fixed or static
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
*{color:#fff;padding:0;margin:0;}
.m-header{height: 68px;background: #ff00ff;}
.m-nav{height: 44px;width:100%;background: #0026ff;}
.m-main{height: 1500px;background: #73ff00;line-height: 200px;}
.m-fixed{position: fixed;top:0;left:0;z-index:3;}
.pt44{padding-top:44px;}
</style>
</head>
<body>
<div class="m-header">I'm header</div>
<div class="m-nav">I'm the nav</div>
<div class="m-main">I'm main content</div>
<script type="text/javascript">
var oNav = $('.m-nav');
var oMain = $('.m-main');
var nNavTop = oNav.offset().top;
var sNavTop= 0;
$(window).scroll(function(){
sNavTop = $(this).scrollTop();
if(sNavTop >= nNavTop){
oNav.addClass('m-fixed');
oMain.addClass('pt44');
}else{
oNav.removeClass('m-fixed');
oMain.removeClass('pt44');
}
});
</script>
</body>
</html>
Add position: fixed css rule to your css code of your menu
like this:
#menu-up{
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #ef4810;
padding: 5px;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
Just add
#fixed-div
{
position:fixed;
}
I'm trying to create a portfolio for freecodecamp, however I can't find out how to center the button, and or div labeled "row" on the page. I need the row div as I will later be adding more buttons, but for now I only need the FCC button. Below are both my html and css files for my site so far. Any help is welcome!
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
CSS:
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
right: 50%;
}
#btnrow {
display: flex;
justify-content: center;
}
Should do the trick. See working example below
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
You could give the div a width and use margin auto for the left and right values, this will center the element horizontally.
.row {
margin: 0 auto;
width: 150px; /*or any measurement*/
}
i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}