How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}
Related
Still learning css...
I've just got one major issue..
My nav-bar is currently squished. I'm not sure how to space out the text away from each other to go wider, so it takes up more space.
I have tried using the following (got it from similar post as mine):
justify-content: space-between
but that didn't work.
Lastly, (just a random trick Id like to learn )if you know how to do it..
How would I separate the two sides from the logo to be pushed away to left and right? As an example..
All content from the left side of the logo, is showing from the edge of the left screen and vice versa for the right side. But the logo remains in the middle. And all text remains horizontal.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>
In order to use justify-content, you need to set display: flex on the parent element first. I'd also suggest not to use justify-content: space-between but justify-content: space-around while resetting the default left padding of the <ul> to get even spacing. Alternatively, set the right padding to an equal value while using justify-content: space-between.
In order to have the logo take up more space and the menu items to be "pushed" to the sides, just set the logo's <li> to something like 50% width, flex layout will take care of the rest. I added a class "logo" to the element in order to achieve that.
Update: About keeping the menu items centered horizontally, you can achieve that by using align-items: center on the flex container.
Update2: I've also added in an example pushing the items as far to the sides as possible by setting the logo width to 100% and a margin of 10px between the elements, as well as a 15px padding to the menu bar itself.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav ul {
display: flex;
justify-content: space-around;
padding: 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav2 .logo {
width: 50%;
}
.nav3 {
padding: 15px;
}
.nav3 .logo {
width: 100%;
}
.nav3 li {
margin-left: 10px;
}
.nav3 li:first-child {
margin-left: 0px;
}
.nav4 ul {
align-items: center;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the menu items aside:</p>
<div class="nav nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the items as far aside as possible, with a fixed-width spacing:</p>
<div class="nav nav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Nav items centered horizontally:</p>
<div class="nav nav4">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
In this case .nav ul has been set as a flex-container with display:flex;
Rather than using space-around, I have added a class to the logo and set the flex property to 1 (flex: 1). This pushes the left/right nav items apart and the logo expands to take up the remaining space.
.nav li items has been given a bit of padding so they aren't squished together.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px;
}
.nav ul {
display:flex;
align-items:center;
margin:0;
padding:0;
}
.nav li{
list-style: none;
display: inline-block;
padding:0 10px;
}
.logo {
flex:1;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class='logo'><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</ul>
</div>
I'm trying to get the last two of the link "Get started" and "Hire me" to right at the end of the navigation. I've attach a photo and also my code. I'm using SASS for styling
I have Been try and error with this issue for 4 days.I managed to put it the way I wanted it using display flex, it worked after I position absolute on the logo
enter image description here
.header
max-width: 100%
height: 80px
border: 1px solid #dfe3e8
.container
height: 100%
max-width: 100%
padding: 0px 7em
display: flex
justify-content: flex-start
.logo
background: url("/sass/img/test-logo2.svg")
size: contain
repeat: no-repeat
width: 135px
height: 35px
margin: 20px 20px 0px 0px
.nav
margin: 7px 0px 0px
ul
lists-style: none
ul li
display: inline-block
padding: 20px
ul li a
text-decoration: none
.right-nav
display: inline-flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pratice</title>
<link rel="stylesheet" href="css/app.css" type="text/css">
<!--- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<!---<img src="../sass/img/test-logo2.svg" alt="test" class="logo">-->
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<div class="right-nav">
<li>Get started</li>
<li>Hire me</li>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
You need to fix the markup first, a div cannot be directly under ul. And I suggest to use flexbox for the layout.
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto; /* align last two items to the right */
}
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
To include the logo be part of the row, you can either 1) use nested flexbox, or 2) make the logo to be one of the list items.
Example 1:
.container {
display: flex;
align-items: center;
}
.nav {
flex: 1;
margin-left: 20px;
}
.nav ul {
display: flex;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}
<div class="container">
<div class="logo"><img src="https://i.stack.imgur.com/U8Pq6.png" width="30" height="30" alt=""></div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
</div>
Example 2:
.nav ul {
display: flex;
align-items: center;
padding-left: 0;
}
.nav li {
list-style: none;
}
.nav li:not(:last-child) {
margin-right: 20px;
}
.nav li:nth-last-child(2) {
margin-left: auto;
}
<nav class="nav">
<ul>
<li><img src="https://i.stack.imgur.com/U8Pq6.png" width="30" height="30" alt=""></li>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Get started</li>
<li>Hire me</li>
</ul>
</nav>
Have you considered using bootstrap or another css framework? By doing this without a css framework you're doing a lot of reinventing the wheel. Practically every webpage in the world has a navbar so this kind of thing is built for you with the framework. It also has the added perk of being responsive so it looks good on all devices (desktops, tablets, phones). In general you will have a much easier time.
Here is documentation for the bootstrap navigation bar component:
https://getbootstrap.com/docs/4.0/components/navbar/
Here is a page with some examples you can play with:
https://getbootstrap.com/docs/4.0/examples/navbars/
I'm working on a site but I'm trying to set the navigator bar at the right and that works good but when I'm trying to give the <ul> a color it doesn't give it the color if I remove float:right; it only works.
Does someone knows how to do this?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styling.css">
<head>
<body>
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
div.navi li {
font-size:30px;
display:inline-block;
width:12%;
float:right;
}
div.navi {
background-color:red;
}
Your div should have some width and height
div.navi li {
font-size:20px;
padding-right:10px;
float:right;
}
.navi {
background-color:red;
width:100%;
height:20px;
}
ul{
list-style:none;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
div.navi {
background: red;
float: right;
width: 12%;
}
div.navi li {
font-size: 30px;
display: inline-block;
}
Please try
Since div.navi only contains floated elements, it doesn't have any height of its own (i.e. height 0), so you don't see any background color.
To avoid this (and let div.navi wrap the lielements), add overflow: auto to div.navi
div.navi li {
font-size: 30px;
display: inline-block;
padding: 0 10px 5px 10px;
float: right;
}
div.navi {
background-color: red;
overflow: auto;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
I studied a little bit of html and css through high school but I'm having a little bit of trouble creating my website for my small business. I have created my nav bar design but I can't center it in my wrapper. My current code is below.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
margin-left: auto;
margin-right: auto;
background-color: white;
}
#navigation: {
margin-left: auto;
margin-right: auto;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
<br>
<br>
</div>
</body>
</html>
I have tried a couple different things that were posted on here but nothing seems to work. I'm sure it will be an easy fix and feel like im getting tunnel vision. Thank you for you help in advance!
First remove BR from ur html code this is bad idea to create vertical space use padding or margin.
body {
background-color: #3393FF;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}
#wrapper {
width: 1300px;
padding: 20px 0 40px;
background-color: white;
}
#navigation {
text-align: center;
}
#navigation ul {
display: inline-block;
padding: 0;
}
#navigation li {
display: inline-block;
line-height: 40px;
height: 40px;
}
#navigation a {
text-decoration: none;
text-align: center;
color: #fff;
display: block;
width: 204px;
font-size: 15px;
background-color: #3393ff;
}
#navigation a:hover {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 3px #000;
color: #fff;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Xcite Technologies</title>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Pricing
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
hope this help :D
Hi there you can use HTML to do that:
use the <center> tag, your code would become something like that:
<body>
<div id="wrapper">
<br>
<div id="navigation">
<ul>
<center>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact Us</li>
</center>
</ul>
</div>
<br>
<br>
</div>
</body>
Please test it and let me now if it works :)
I have a menu in which some of the menu should be on right and some of it must be on left.
I'm able to do this using BootStrap Framework,I want to do this without it. Here is my code.
HTML
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="index_style.css">
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Categories</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Register</li>
<li>Login</li>
</ul>
</div>
</div>
</body>
CSS
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
body{
margin: 0;
}
You have to separate/define your CSS rules: Pull-right/Pull-left aren't defined in anyway along with the majority of your classes.
*You tagged your question with Twiiter-Bootstrap which most of these classes are used in.
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
}
.nav {
margin-left: -35px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
ul.pull-left {
float: left;
}
ul.pull-right {
float: right;
}
.nav li {
display: inline-block;
}
.nav ul > li > a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home
</li>
<li>Categories
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
<ul class="pull-right">
<li>Register
</li>
<li>Login
</li>
</ul>
</div>
</div>
Yes you can make navigation menubar without Bootstrap.Here,I make Demo.
http://jsfiddle.net/Xroad/33ovfgeL/
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Categories</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<ul class="pull-right">
<li>Register</li>
<li>Login</li>
</ul>
<div class="clear"></div>
</div>
</div>
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.pull-left{float:left}
.pull-right{float:right}
.clear{clear:both}
.container{background-color:#bbb}