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>
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'm working on a mock website and have run into an issue. Here is the wix web page I am referencing. I want to scroll to the bottom of my web page and make multicolored div boxes that I can place my text over. Simply put, I can't figure it out. When I try making a div, it covers my background image. How was this done? Thanks in advance for your help.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Keith Consulting</title>
<style>
body {
background-image: url("https://66.media.tumblr.com/d0914fab2603665235669293d3b61c37/tumblr_os8sx9UAHb1slhhf0o1_1280.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: bottom;
font: 15px/1.5, helvetica, sans-serif;
}
p,
h1,
h3 {
text-transform: capitalize;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
/*--------------header----------------*/
header {
background-color: cornflowerblue;
color: white;
padding-top: 30px;
min-height: 50px;
text-transform: capitalize;
}
header ul {
padding: 0;
margin: 0;
}
header li {
display: inline;
padding: 0 20px 0 20px;
}
header li a {
color: blue;
}
header nav {
float: right;
margin-top: 15px;
}
header #branding {
float: left;
margin-bottom: 25px;
}
header #branding h1 {
margin: 0;
}
header .highlight,
header .current a {
color: lavender
}
/*-------------------------------*/
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>keith<span class="highlight"> consulting</span></h1>
</div>
<nav>
<ul>
<li class="current">home</li>
<li>about</li>
<li>services</li>
<li>project</li>
<li>clients</li>
<li>contact</li>
</ul>
</nav>
</div>
</header>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body></html>
Maybe this could help you? https://www.solodev.com/blog/web-design/how-to-create-a-parallax-hero-image.stml
If you want make elements semi-transparent (if that is what you mean by "multicolored") then you can use rgba color.
I am unsure on how to place the image in correct location. I am using a bootstrap custom blog template, and I am trying to slightly modify it to make it look the way I want.
I want to place a image in the location of the blue rectangle on the left side as shown in picture bellow. Here I have tried couple of different things, but my images keeps rendering right under the blog title "The Bootstrap Blog", which is not what I want. I have tried using
class="col-sm-offset-1"
But the more I increase the offset, this just moves the image to the right of the screen. I can't get it to go far left. How can i accomplish this, without losing the bootstrap auto scaling for different screen sizes?
Here is my base.html file:
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
{% load staticfiles %}
<title>Blog Title</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Global blog css for custom defined parameters -->
<link href="{% static 'css/blog.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="{% url 'blog:index' %}">Home</a>
<a class="blog-nav-item" href="{% url 'about:index' %}">About</a>
</nav>
</div>
</div>
<div class="container">
<div class="blog-header">
<h1 class="blog-title">Code'N Cofee Blog</h1>
<p class="lead blog-description">Live and write code. </p>
</div>
<!-- place image on page -->
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<img src="{% static 'media/Pic3.jpg' %}" alt="" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-sm-8 blog-main">
<!-- blog post goes here -->
{% block content %}
{% endblock %}
<nav>
<ul class="pager">
<li>Previous</li>
<li>Next</li>
</ul>
</nav>
</div><!-- /.blog-main -->
</div><!-- /.row -->
</div><!-- /.container -->
<footer class="blog-footer">
<p>Blog template built for Bootstrap by #mdo.</p>
<p>
Back to top
</p>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
And here is my blog.css file:
/*
* Globals
*/
body {
font-family: 'Source Sans Pro', Georgia, "Times New Roman", Times, sans-serif;
color: #555;
background-color: ghostwhite;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
#media (min-width: 1200px) {
.container {
width: 970px;
}
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
/*
float image to left
*/
.pull-left {
float: left !important;
}
#swoosh {
padding-left: 0;
}
Thank you for your help,
Nermin
The class="col-sm-offset-1" moves the image to the right not to the left. If you increase the no like class="col-sm-offset-2" it will move to the right by 1 column. So, this is not the solution.
You have two option
NO.1
Wrap it inside class="container-fluid" and don't give class="col-sm-offset-1" see the snippet below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
No.2
Wrap it inside class="container" and add some margin-left according to your wish.
See the example below--
.image {
margin-left:-60px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 image">
<img src="https://static.pexels.com/photos/7720/night-animal-dog-pet.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</body>
</html>
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 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%;
}