How can I add spacing in the navigation bar?
here's the code I have written btw I am still a noob learning coding so yeah!
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #FFFFFFF;
}
.topnav a {
float: left;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #FFFFFFF;
color: black;
}
</style>
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Men
Women
Our Materials
Stores
</div>
<div style="padding-left:10px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
Please provide exact details I should do and better it be in html
You can add space un numerous ways. I advice you to delete the float:left; because is not the current best way to do this.
In spite of you can add display: inline-block to the elements or put display: flex to the topnav class.
If you user inline-block you will be able to add margin to the a, if you use flex type you can read more about on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I hope you understand and learn more about flex and the display option.
The best case would be to give your a class or id and edit a child element. I did margin: 0; to eliminate any margin, and then declare the margin-right: 5px; this way it will all fall inline neatly without any weird gaps. In your CSS you can also add text-transform: uppercase; to get your navigation to be all caps.
As of Bootstrap 4, you can use the spacing utilities. Add for instance px-2 in the classes of the nav-item to increase the padding.
You can change this in your CSS with the property padding:
.navbar-nav > li{
padding-left:30px;
padding-right:30px;
}
Also, you can set margin
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
Related
html,body{
background-color: #5f5f5f;
margin: 0;
padding: 0;
font-family: sans-serif;
}
div.container{
max-width: 1200px;
margin: 0;
padding: 0 30px;
}
header{
background-color: #000000;
float: left;
width: 100%;
}
header h1{
color: #ffffff;
text-transform: uppercase;
float: left;
}
.nav {
float: right;
list-style-type: none;
list-style: none;
padding: 10px 100px;
}
.nav li {
display: inline-block;
}
.nav ul li a{
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
font-size: 15px;
font-family: "Roboto", sans-serif;
}
.nav li a:hover{
color: #D3D3D3;
border: 1px solid white;
}
.nav li.active a{
border: 1px solid white;
}
.banner-image {
width: 100%;
}
<DOCTYPE html>
<head>
<title> GWS News</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
</head>
<body>
<header>
<div class="container">
<h1> Grass World Sport News</h1>
<ul class="nav">
<li class="active">Home</li>
<li>World Cup</li>
<li>Sports</li>
<li>Schedule</li>
<li>About</li>
</ul>
</div>
<div class="banner">
<img class="banner-image" src=img/banner1.jpeg>
</div>
</header>
</body>
I want to fix up my navigation bar but do not know how to do it.
Improvement I want to make are:
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
How do I make the link spaced out?
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
How do I make the title "Grass World Sport News" bigger?
How do I change the font colour to white (I have tried font: #ffffff as you can see in the coding)?
The problem is your selector, should be ul.nav li a and not .nav ul li a
How do I make the link spaced out?
Just add to link element a left margin (since you want it to float right):
ul.nav li {
margin-left: 1rem // for example
}
How do I move the links to the very right (float does not seem to be working as you can see in the coding)?
The float is working correctly but you have a max width on parent container so it gets only to the far right of the container. If you want it to the right of the window remove max-width.
div.container{
margin: 0;
padding: 0 30px;
}
How do I make the font bigger for the navigation bar (font: 20px does not seem to be working as you can see in the coding)?
Same problem as number 1. Just set the selector to be ul.nav li a
How do I make the title "Grass World Sport News" bigger?
If you mean a bigger font just set a higher font-size.
header h1 {
// for example
font-size: 30px;
}
This is very broad, and looking at the code it appears much was either copy/pasted from another site expecting the same results which is not how coding works.
Here's a pen: https://codepen.io/codespent/pen/BVXyWO
To answer your questions:
To change font color, you use color: #fff in the parent rule.
Spacing can be done in multiple ways, but just learn box model before you start playing with anything so you know why you're using paddings or margin.
Moving the links to the right is also contextual, there's many ways you can do so, but you need to understand why you're doing it this way. text-align:right; may work, but Flexbox is recommended.
font is an outdated property. You may use font-size:20px; to change the font size.
This is also a broad question as there are many ways that are contextual to how you feel is best.
To understand these fundamentals, I highly recommend taking freeCodeCamp's Basic CSS courses and as well, you should see StackOverflow's "How to Ask" knowledge object to grasp how you should be presenting your questions when coming here for help.
I am trying to make a template for my webpage. I am creating a header and a footer, and have the content in between. But for some reason, I cant get any of it to work. I have been fooling with this for hours and cant find answers.
I have a logo, I am trying to position it inside the that way it looks clean. But I cant. I wont stay centered on my navigation text! I then notice when I resize my browser, it shifts all my navigation links until they all fit on the screen. How do I fix that?
Upon looking around for the fix, I noticed that I should instead convert all my position: absolute; top: (so many px) left: (so many px); to percent style measurements..no such luck. Once I get this working, I should be pretty much over the hardest part.
here is the css file:
//this is not in the div tag rather a test logo outside.
#logo{
display: inline;
float: left;
}
.nav{
display: inline;
float: left;
width: 5;
border: 1px solid #C0C0C0;
margin: auto;
text-align: center;
}
.nav ul{
list-style-type: none;
}
.nav li{
display: inline;
}
.nav li img{
height: 30px;
}
.nav a{
text-decoration: none;
padding: 20px 5px 20px 20px;
font-weight: 900;
color: #C0C0C0;
font-family: monospace;
font-size: 20px;
display: inline;
}
.nav a:visited{
color: #C0C0C0;
}
.nav a:hover{
color: black;
}
here is the html
</head>
<meta charset="UTF-8">
<meta name="description" content="This is a website that offers free information on IT">
<body>
<!--
Creating the navigation bar. I used nav as the dic class name with an unordered list
-->
<img src="Images/logo.png">
<div class="nav">
<ul>
<li><img src="Images/logo.png"></li>
<li> Home</li>
<li>Contact</li>
<li>Service</li>
<li>About</li>
</ul>
</div>
<div class="ad">
<center>
<img src="Images/head_pic.jpg">
<center>
</div>``
adding
min-width: (whatever);
fixed most of my issues.
I am learning html/css and have the following issue when aligning the "navigation menu" to the left. There's a small gap (see the pic below with a question mark)
can someone tell me how to remove the gap on the left side?
Here is my html/css code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
}
#header {
height: 200px;
width: 800px;
background-color: #CCC;
}
#navi {
height: 50px;
background-color: #036;
width: 800px;
margin: 0px;
padding: 0px;
}
ul {
}
#content-area {
height: 400px;
width: 800px;
background-color: #FFC;
}
#footer {
height: 100px;
width: 800px;
background-color: #000;
}
h2 {
color: #FFF;
text-align: center;
margin: 0px;
padding-top: 50px;
}
h3 {
color: #FFF;
text-align: center;
padding-top: 10px;
margin: 0px;
}
p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 18px;
padding: 10px;
margin: 0px;
}
ul {
list-style-type: none;
margin: 0px;
}
li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
font-size: 12px;
margin-top: 10px;
margin-right: 10px;
float: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
</div><!--navi end-->
<div id="content-area"><p>Isn't saw evening shall open them had behold thing said evening i herb. Yielding kind second night image. Grass void green. Make Man given replenish brought. Spirit them seed fifth for living said his. Man abundantly.<br /><br />
Sixth yielding saying. Make female said they're night from fourth you'll make signs be. Our. Earth from. Replenish form living grass tree creepeth own. Had rule land from living, replenish appear the their days shall bearing waters moving seas living you, forth fourth.<br /><br />
Sixth whose stars i a. Creeping sea second above beast living signs created had first, face male dry our a his.</p></div>
<!--content area end-->
<div id="footer"><h3>This is the Footer</h3></div><!--footer end-->
</div><!--wrapper end-->
</body>
</html>
Apply padding:0; for your ul style.
ul {
list-style-type: none;
margin: 0px;
padding:0;
}
The space is being applied from the default user agent style sheet.
You can remove it by explicitly setting padding, margin of <ul> to 0.
It's a common practice to override it throughout the document like
*{
margin:0;
padding:0;
}
Demo
Please check this
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
Add
ul{
padding:0;
}
This will solve this issue. In general, you can use the following at the top of your CSS file:
*{
padding:0;
margin:0;
}
If you use this snippet at the top of your CSS, these problems won't occur and default padding etc. vary from browser-to-browser. So this will make it more consistent.
I can't see where you are using CSS position property? This is quite helpful. Also you can use these resources:
CSS Box model
CSS Padding
CSS Margin
CSS Positioning
more CSS Positioning
You can use the 'Try it yourself' option to see it in real action. It's helpful and a good practice to set to zero all paddings and margins at the beginning at your code, like this:
body{
padding:0;
margin:0;
}
I would suggest you to avoid floating and use:
display: inline-block;
also you should give your ul id and apply the css settings to that #ulid >li this way you avoiding the rest of your li to get the menu rules.
Also I will recommend using some reset code as suggested in other answers so your CSS wont include the default browser CSS rules.
here are my modifications:
#ulmenu > li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 12px;
display: inline-block;
line-height: 50px;
padding-left: 10px;
padding-right: 0px;
margin: 0px;
}
#ulmenu{
margin:0px;
padding:0px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h2>This is the header</h2></div><!--header end-->
<div id="navi">
<ul id="ulmenu">
<li>Facebook</li>
<li>Twitter</li>
<li>LinkdIn</li>
<li>Google Plus</li>
</ul>
I just ran into the same issue and all the paddings and margins were zero already, after much trawling through the inspector, I noticed there was text-indent on the li
li{
margin:0;
padding:0;
text-indent:0;
}
Fixed my issue.
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
I'm building a text-based navigation bar, evenly spaced across the width of a parent div, but I'm having a problem keeping certain navigation items grouped together. Each word, instead of each list item, distributes across the entire width of the div. Is there a way to distribute each list item evenly within the div, but keep longer items, like "/painting & Mixed media" properly spaced? I also have a phantom space in front of the first link I can't find, so it's not exactly justified the way I would hope.
To clarify:
The posted code displays the link to "/Painting & Mixed Media" with additional spacing between each word. Example below, where dashes represent spaces in the nav menu:
Currently: .../Prints---/Illustration---/Painting---%---Mixed---Media---/About---/Blog...
Desired: .../Prints---/Illustration---/Painting-&-Mixed-Media---/About---/Blog...
Here's the CSS:
.navbar{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
text-decoration: none;
text-align:justify;
width: 800px;
}
.navbar * {
display: inline;
}
.navbar span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
a.nav:link {color:#000; text-decoration: none;}
a.nav:visited {color:#000; text-decoration: none;}
a.nav:hover {color:#6CC; text-decoration: none;}
a.nav:active {color:#F90; text-decoration:none;}
And the HTML:
<div class="navbar">
<ul>
<li>/home</li>
<li>/design </li>
<li>/prints</li>
<li>/illustration</li>
<li> /painting & mixed media</li>
<li>/about</li>
<li>/blog</li>
<li>/cv</li>
</ul>
<span></span>
</div>
Demonstration fiddle
HTML:
<div class="navbar">
<ul>
<li>/home</li>
<li>/design </li>
<li>/prints</li>
<li>/illustration</li>
<li>/painting & mixed media</li>
<li>/about</li>
<li>/blog</li>
<li>/cv</li>
</ul>
<span></span>
</div>
CSS:
.navbar {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
text-align: justify;
width: 800px;
}
.navbar * {
display: inline;
}
.navbar a {
display: inline-block;
text-decoration: none;
}
.navbar span {
display: inline-block;
width: 100%;
}
.navbar a:link,
.navbar a:visited {color:#000;}
.navbar a:hover {color:#6CC;}
.navbar a:active {color:#F90;}