I have tried various methods in css to align the icons with the text but the icons appear slightly shifted up from the text baseline.
I address the icons with:
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i class="fa fa-fw fa-home"></i> Home
<i class="fas fa-archive"></i></i> Archive
<i class="fas fa-folder-open"></i> New File
<i class="fas fa-chart-pie"></i> Analytics
<i class="fas fa-address-book"></i> Contacts
<i class="fas fa-dumpster-fire"></i> Hero
<i class="fas fa-search"></i> Search
<i class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
It is strange because it looks good in the post editor but not when I run it in browser for VS code. Any help on how to align icons appreciated.
Are you looking for something like this?
I applied text-align: right to each icon. - Some icon shapes/sizes are bigger than others so maybe adjust them individually until you're happy with the result.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i style="text-align: right;" class="fa fa-fw fa-home"></i> Home
<i style="text-align: right;" class="fas fa-archive"></i></i> Archive
<i style="text-align: right;" class="fas fa-folder-open"></i> New File
<i style="text-align: right;" class="fas fa-chart-pie"></i> Analytics
<i style="text-align: right;" class="fas fa-address-book"></i> Contacts
<i style="text-align: right;" class="fas fa-dumpster-fire"></i> Hero
<i style="text-align: right;" class="fas fa-search"></i> Search
<i style="text-align: right;" class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
This will be help you.
I noticed images are not the same size. I adjusted the size and changed home's class.
/* Style the full height sidebar */
.sidebar {
height: 100%; /* Sidebar will take the full screen height */
width: 180px; /* Sidebar width */
position: absolute; /* Position the sidebar relative to the browser window */
z-index: 1; /* Appears on top of other elements */
top: 0px; /* Top margin of 0px */
left: -140px; /* Left margin sets the sidebar off screen, leaving 20px visible */
padding: 10px 5px 5px 10px; /* Padding 15px */
background-color: #111; /* Background color */
overflow-x: hidden;
}
.sidebar a {
text-decoration: none; /* This stops the underline on link elements */
font-size: 20px; /* Set font size of sidebar links */
color:#818181; /* Set font color of sidebar links */
display: block;
padding: 10px; /* Same as the sidebar */
}
.sidebar a:hover {
text-decoration: none; /* This stops the underline on link elements */
color: #f1f1f1; /* On mouse over change font color of sidebar links */
}
.sidebar:hover {
left: 0; /* On mouse over the sidebar should appear on screen */
}
i {
float: right;
width:20px;
height:20px;
}
<html>
<head>
<title>Master Tracker</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load a font library -->
<link href="https://fonts.googleapis.com/css?family=Yantramanav:100,300,400,500,700,900" rel="stylesheet">
<!-- Load an icon library -->
<script src="https://kit.fontawesome.com/ae6badd0ee.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="sidebar">
<i class="fas fa-home"></i> Home
<i class="fas fa-archive"></i></i> Archive
<i class="fas fa-folder-open"></i> New File
<i class="fas fa-chart-pie"></i> Analytics
<i class="fas fa-address-book"></i> Contacts
<i class="fas fa-dumpster-fire"></i> Hero
<i class="fas fa-search"></i> Search
<i class="fas fa-life-ring"></i> Help
</div>
</body>
</html>
I changed these codes:
<i class="fa fa-fw fa-home"></i> Home <!--deleted fa-fw and fa-->
<i class="fas fa-home"></i> Home <!--inserted fas-->
and I insert this code:
i {
float: right;
width:20px;//inserted
height:20px;//inserted
}
Related
So, recently I've been learning some coding for my course.
I've experimented with a few ideas, and I'm currently making this top header ("topbar") that acts as a mini-header just above the actual header, which displays some extra info.
Unfortunately, I'm a bit of a coding noob and I can't figure out what's going wrong in this code. If you run it, you'll see the social media icons on the right (I'm using Font Awesome) aren't in the header and it's a pain to try and get them there. They should be in line with the elements on the left (middle of the topbar in terms of height, and 30px inwards from the right).
I've played around with padding, margin, align and a bunch of other things but I just can't figure it out. Any help?
HTML CODE:
<!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">
<link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Noto+Sans+JP&family=Salsa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>TestWeb</title>
</head>
<body>
<!-- ======= Top Bar ======= -->
<section id="topbar" class="d-flex align-items-center">
<div class="container d-flex justify-content-center justify-content-md-between">
<div class="contact-info d-flex align-items-center">
<i class="fa fa-envelope d-flex align-items-center">contact#example.com</i>
<i class="fa fa-map-marker d-flex align-items-center">1 Avenue, London, AB12 0AB</i>
<i class="fa fa-phone d-flex align-items-center ms-4"><span>123 456 78900</span></i>
<div class="social-links d-flec align-items-center">
<i class="fa fa-twitter d-flex align-items-center"></i>
<i class="fa fa-instagram d-flex align-items-center"></i>
<i class="fa fa-facebook-square d-flex align-items-center"></i>
</div>
</div>
</div>
</section>
</body>
</html>
CSS CODE:
/* ==============================
========== G L O B A L ==========
============================== */
*{
margin: 0;
padding: 0;
}
/* =============================
========= T O P B A R =========
============================= */
#topbar{
height: 30px;
width: 100%;
background-color: #313030;
color: white;
font-size: 14px;
font-family: 'Noto Sans JP', sans-serif;
transition: all 0.3s;
padding: 0;
padding-top: 5px;
padding-left: 10px;
}
#topbar .contact-info i a, #topbar .contact-info i span{
padding-left: 5px;
color: #A1B82B;
font-family: 'Noto Sans JP', sans-serif;
text-decoration: none;
}
#topbar .contact-info i a{
line-height: 0;
transition: 0.3s;
transition: 0.3s;
padding: 30px;
padding-left: 5px;
color: #A1B82B;
}
#topbar .contact-info i:hover{
text-decoration: underline;
}
#topbar .social-links i{
float: right;
color: white;
transition: 0.3s;
padding-right: 5px;
}
#topbar .social-links i:hover{
color: #909090;
text-decoration: none;
cursor: pointer;
}
The reason your social media icons aren't in line with everything else is because they are actually going below it.
Take a look at this image:
As you can see, the dashed blue line is your .social-links div, and it is going below the other items in your menu.
Why is this happening?
The reason this is happening is because by default a div has a display property of block
display: block means that the element should start on a new line, and take up the entire width of it's parent.
So, long story short, to fix your problem you could add something like:
#topbar .social-links{
float: right;
}
This code will make your .social-links div appear on the same line as the other items in your menu, as well as be forced to the right hand side of the navigation bar (which I'm assuming is where you want it.)
Now the icons are in the menu bar, but they're stuck to the top. To fix that remove this line of code:
#topbar .social-links i{
/* float: right; <-- REMOVE THIS */
color: white;
transition: 0.3s;
padding-right: 5px;
}
Just a side note, it looks like you're using a lot of unneeded classes in your HTML, try to only use a class if you have actual CSS written for it :)
Here's a working example of your site:
https://codepen.io/jacobcambell/pen/zYzzrjW
Hope this helped!
I just wanted to copy some dropdown menu to other site of mine. but it seems i did something wrong, so all of my dropdown items have some white space aside them. (like the picture)
white space side the dropdown items
but in the first site i developed the code, this problem did not exist! (example)
example of source code dropdown item
actually i mixed bootstrap and materialize to form the code (and i know this is a bad idea, but it worked last time for me).
I just don't know what to do, to remove the gap!
and this is part of my code:
`
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="{% static 'petrobavar/css/materialize.min.css' %} "
media="screen,projection"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<nav class="mb-3">
<div class="nav-wrapper blue-grey darken-1 amber-text darken-text-5" style="font-family: IRANSansWeb">
<i class="material-icons">menu</i>
<a href="{% url 'petrobavar:home' %}" class="left hide-on-large-only"><img
src="{% static 'petrobavar/petrologo.png' %}" style="width: 5rem"></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="tab dropdown-trigger " data-target="dropdown6" style="text-shadow: 0 2px 5px rgba(0,0,0,.5);"><a href="#">ارتباط با
ما</a></li>
</ul>
<ul id="dropdown6" class="dropdown-content center-align" style="font-family: IRANSansWeb">
<li>آدرس و تلفن های تماس</li>
</ul>
<style>
/* Dropdown list color */
.dropdown-content li > a, .dropdown-content li > span {
background-color: #546e7a;
margin: 0;
border: 0;
width: 100% !important;
}</style>
`
Can you please just add padding: 0; width: auto !important; in .dropdown-content class in CSS file as below:
We have added padding and width in last line.
.dropdown-content {
background-color: #fff;
margin: 0;
display: none;
min-width: 100px;
overflow-y: auto;
opacity: 0;
position: absolute;
left: 0;
top: 0;
z-index: 9999;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
padding: 0;
width: auto !important;
}
Please try and let me know.
I have a good enough knowledge of HTML, but I am just stuck with something related to my responsive design HTML CSS code. I was following the W3 Schools webpage showing how to create a Navbar for a website (Link).
Here is my current CSS file and index.html:
body {
background-color: #FAEBD7;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a black background color to the top navigation */
.top-navbar {
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.top-navbar a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.top-navbar a.active {
background-color: #4CAF50;
color: white;
}
/* Centered section inside the top navigation */
.top-navbar a {
/* float: none; */
/* position: absolute; */
/* top: 50%; */
/* left: 50%; */
/* transform: translate(-50%, -50%); */
}
/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
#media screen and (max-width: 600px) {
.top-navbar a {
float: none;
display: block;
}
.topnav-centered a {
position: relative;
top: 0;
left: 0;
transform: none;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FUBS</title>
<meta name="description" content="Elder Scrolls, Fallout, Information, Wiki">
<link rel="stylesheet" href="css/mystyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="top-navbar">
<a class="active link" href="index.html">Home</a>
<a class="link" href="scrolls/index-scrolls.html">The Elder Scrolls</a>
<a class="link" href="fallout/index-fallout.html">Fallout</a>
</div>
<div class="test-div">
</div>
<div style="padding:0 16px;">
<br />
etc. etc. etc.
</div>
</body>
</html>
If you run the above code snippet you will get an idea of what I want it to do (If you drag your window smaller you will see the change).
Basically, what I just want to do is to have the nav bar links to be centered (Along with the black bar that goes across the screen). I already have it so that when the screen size if below 600 pixels, it switches to that effect.
I narrowed down the part of the tutorial that was making my nav bar disappear. It has the above from the #media part of the CSS (You will see that it is commented out). In the tutorial, the centered part of the class topnav-centered had only one element, an a tag. Maybe because in my website it has more than one element in the class that it is refusing to work? That is just my guess though.
Any help with this would be appreciated.
The reason the items aren't centered is because the a tags are floated to the left, this will always force them to the left.
To fix this you just need to amend the 2 classes below, adding text-align: center; as well as removing the float and setting your links to display: inline-block; will allow you to control their position.
/* Add a black background color to the top navigation */
.top-navbar {
text-align: center;
position: relative;
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.top-navbar a {
float: none;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
Trying to code a simple webpage and am learning html. I wonder why my simple styling code for the makes no changes. Here it is below.
<!DOCTYPE html>
<html>
<head>
<!-- SE copied from old site -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/topnav-index.css">
<!-- abv css I created myself, just the TopNav bar -->
<style>
<!-- this is for page wide style -->
<!-- define all paragraph font for main pg -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
<!-- margin: 4 prop is top, R, bott, L -->
margin-left: 32px;
margin-top: 30px;
<!-- margin: 20,25,35,40; -->
padding-left: 12%;
padding-top: 10%;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Title</h2>
<p>Responsive Topnav Example</p>
</div>
<!-- main content -->
<p>B This site explores the connection between XXX and the
historical events...</p>
Now the Top Nav bar works but none of the formatting for the p text seems to do anything. It's in the header & I understand the p, in the greater/less than signs, acts as a specialty container of it's own...
in css you should use /* */ for comment and not<!--- -->
p {
color: red;
text-align: left;
font-family: palatino;
font-size: 16pt;
background-color: #909090;
/* margin: 4 prop is top, R, bott, L */
margin-left: 32px;
margin-top: 30px;
/*margin: 20,25,35,40; */
padding-left: 12%;
padding-top: 10%;
}
Want to add my uni and free Code Camp projects on my website. I'm trying to make text float left and picture float right along with being mobile friendly. For some reason I can only see picture on desktop version but not on mobile. Picture is not displaying on mobile. Only text on the right. At first I've been trying to give text col-xs-2 col-sm-2 and img src="" col-xs-8 col-sm-8 but it didn't work. Now I'm trying to achieve desirable result by making this picture as a background for that section=projects but still doesn't work. How can I include picture on the right? Can't figure out what am I doing wrong? Please help.
Please find pictures attached.
Here is my website: http://www.kiljakandweb.com
Here is my **HTML**:
<!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">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="javascript/main.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<section id="header" class="text-center">
<h1>Kiljak<br> + Web </h1>
<br>
<br>
<br>
<h3> I'm a freelance front-end web developer <br> based in London. I develop responsive, high-performance <br>websites using HTML5, CSS, and JavaScript.
</h3>
<br>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</section>
<section class="projects">
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-5 col-lg-5">
<h2><span style="font-family: 'Open Sans';
font-size: 200px">01</span> Wikipedia Viewer </h2>
</div>
</div>
</section>
<div id="googleMap">
<footer>
<div class="container">
<div class="text-center">
<h4><strong>KILJAK + WEB</strong>
</h4>
<p>Ace Hotel Shoreditch
<br>London, UK E1 6JQ</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (44) 7568599454</li>
<li><i class="fa fa-envelope-o fa-fw"></i> edgar.kiljak#kiljakandweb.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © KILJAK + WEB 2016</p>
</div>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
</body>
</html>
And CSS:
#import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
#import url('https://fonts.googleapis.com/css?family=Oswald:300');
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');
#import url('https://fonts.googleapis.com/css?family=Roboto:300');
#header{
width: 100%;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
}
h1 {
font-family: 'Abril Fatface', cursive;
font-size: 92px;
line-height: 90px;
color: black;
}
h2 {
margin-top:250px;
float: left;
font-family: 'Abril Fatface', cursive;
font-size: 30px;
font-weight: normal;;
color: black;
}
h3 {
font-family: 'Open Sans';
font-size: 13px;
font-weight: lighter !important;
color: black;
}
hr {
color: black !important;
}
.fa {
color: black !important;
}
.fa:hover {
color: red !important;
}
.projects {
float: right;
background-image: url('images/ipad.png');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top:500px;
width: 100%; /* Span the entire width of the screen */
height: 800px;
}
#googleMap {
padding-top: 100px !important;
margin-top: -10px;
width: 100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white */
}
footer {
position: static;
background-color: white;
padding: 100px 0;
font-family: 'Open Sans';
font-size: 13px !important;
font-weight: lighter;
line-height: 15px;
}
/* Really small phones */
#media screen and (max-width:320px) {}
/* Regular smart phones, including iPhone 6 + with 414px viewport! */
#media screen and (min-width: 321px) {}
/* Regular Tablets from 480 to 800px including Galaxy tablets - 768px is only good for iPad */
#media screen and (min-width: 481px) {}
/* Desktops and Laptops */
#media screen and (min-width: 801px) {}
Try a row with 2 columns and put text and picures in seperate columns like this:
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-4">
<h2><span style="font-family: 'Open Sans';
font-size: 200px">01</span> Wikipedia Viewer </h2>
</div>
<div class="col-sm-12 col-xs-12 col-md-8">
<img class="img-responsive" src="images/ipad.png">
</div>
</div>
You can find a demo code in the below link:
https://jsfiddle.net/Djav/m93p7ove/1/