This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
how can I get rid of the spacing between the navigation menu links? I want them to look as if they are in one cell and instead use borders between them!
body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; text-align:center; padding:0px; display:block; overflow:hidden;}
li a {display:block;text-decoration:none; text-transform:uppercase; padding:8px; background-color: #dddddd;}
li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Using display: inline-block, simply removing the line breaks is enough to remove the space, since the <li>s are behaving like text.
body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; text-align:center; padding:0px; display:block; overflow:hidden;}
li a {display:block;text-decoration:none; text-transform:uppercase; padding:8px; background-color: #dddddd;}
li {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
<li>Home</li><li>News</li><li>Contact</li><li>About</li>
</ul>
</body>
</html>
so try this
li {
margin-left: -4px;
display: inline-block;
}
Related
I have 3 links styled as a list in html, I used this code in CSS to bring them beside each other:
li
{
float:left;
margin-right:15px;
margin-top:40px;
}
But when I click one of them the other link on the right moves towards the one I clicked.
I don't know the reason why this happening. but how to make them fixed?
The code::
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
WebMD - Better information. Better Health.
</title>
<link rel="stylesheet" href="mainMd.css"/>
<img src="logo_trans.png" class="logo"/>
</head>
<body>
<header>
<ul class="categories">
<li class="links1" id="symp">Symptoms</li>
<li class="links1" id="doc">Doctors</li>
<li class="links1" id="health">Health Care Reform</li>
</ul>
</header>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
CSS:
html
{
background-image:linear-gradient(to top, white, #F5F9FA);
height:100%;
}
.logo
{
padding-left:176px;
padding-top:4px;
float:left;
}
li
{
float:left;
margin-right:15px;
margin-top:40px;
font-family:Candara;
font-size:12px;
color:#5895D4;
}
#symp
{
list-style-image:url(walking.png);
margin-left:55px;
}
#doc
{
list-style-image:url(doc.png);
}
#health
{
list-style-image:url(umb.png);
}
li a
{
color:#5895D4;
text-decoration:none;
}
li a:hover
{
text-decoration:underline;
}
li a:active
{
}
li a:visited
{
}
Currently, the CSS selects li, not li a.
If your HTML structure looks like this:
<li><a href=''>Item 1</li>
<li><a href=''>Item 2</li>
Try using the following CSS to target the links inside each li.
li a {
float: left;
margin-right: 15px;
margin-top: 40px;
}
The reason why your bug might be happening is because a::visitedis a separate element from li. See MDN's page on :visited.
I'm trying to get the navigation bar inside of the header but it only stays below it. How can I fix this? The nav divs are inside of the <header> so I'm not sure why the entire nav-bar is set below the header.
Here's the JSFIDDLE link.
HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FMHS Choral Dept.</title>
<link href="css/mainstyle.css" rel="stylesheet" type="text/css">
<link rel="icon" type="text/css" href="img/favicon.png" />
<link href='http://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
</head>
<body>
<header><span>FMHS Choral Department</span></p>
<div class="nav_wrap">
<div class="nav_items">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Calender</li>
<li>News</li>
<li>Awards/Honors</li>
<li>Documents</li>
<li>Links</li>
</ul>
</div><!--end of nav_items-->
</div><!--end of nav_wrap-->
</header><!--end of header-->
<div class="container">
</div><!--end of container-->
</body>
</html>
CSS Code
#charset "utf-8";
/* CSS Document */
body {
background-image:url(../img/crossword_green.png);
margin:0;
}
/* HEADER */
header {
font-family: Roboto;
width:100%;
height:50px;
font-size:24px;
background:#FFF;
text-align:left;
box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.5);
position:fixed;
top:0;
line-height:50px;
}
header span {
margin-left:20px;
}
header span a {
text-decoration:none;
color:#000;
}
.nav_wrap {
width:800px;
float:right;
background:#f0f;
}
.nav_items ul li {
display:inline-block;
list-style-type:none;
float:right;
}
/* CONTAINER */
.container {
width:900px;
height:800px;
border-radius:5px;
background:#fff;
margin:auto;
margin-top:70px;
}
http://jsbin.com/lufik/1/edit
First, you need to use some CSS reset, I used the Global one:
*{margin:0; padding:0;}
Than you don't need height set to header
...unless you want to replace your menu with an icon for 'mobile'.
header {
font-family: Roboto;
width:100%;
/*height:50px;*/ /* nope */
you don't need width for your nav wrapper, you already floated it right:
.nav_wrap {
/*width:800px;*/ /* njaaah */
float:right;
}
you don't need to float left your LI elements:
.nav_items ul li {
display:inline-block;
list-style-type:none;
/*float:right;*/ /* nöööu */
}
P.S: I would really apply that #media rule for a fancy nav tab icon!
How do I get the navigation bar to appear next to the logo instead of breaking to the next line under it?
I've tried several changes but it keeps going onto the next line. I'm trying to avoid using floats because I was told they are not good to use. I want it to look like the navigation bar on this website in this end:
http://www.freecsstemplates.org/
I would like to understand how it is being done on that website.
I am just very confused as to how the process is to work.
CSS:
#header
{
background-image:url('menubg.png');
background-repeat:repeat-x;
}
#logo
{
display:inline-block;
}
#menu ul
{
display:inline-block;
list-style-type:none;
padding: 0px;
margin:0px;
}
#menu li
{
display:inline-block;
margin:0px;
padding:0px;
}
#menu a:link,a:visited
{
display:inline-block;
text-transform:lowercase;
width:auto;
font-weight:bold;
padding-left:47.5px;
padding-right:47.5px;
padding-top:9px;
padding-bottom:9px;
text-decoration:none;
color:#57fafc;
text-align:center;
background-color:#62d2d3;
}
#menu a:hover,a:active
{
background-color:#7ce5e6;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mainstyle.css">
<title>Blah</title></head>
<body>
<div id="header">
<div id="logo"><img src="logo.png" /></div>
<div id="menu">
<ul>
<li>Home</li><li>Contact</li><li>About</li><li>Products</li><li>Design-a-Tee</li><li>Reviews/Testimonials</li>
</ul>
</div>
</div>
</body>
</html>
add this css
#logo {
float:left;
}
#menu {
float:right;
}
#header {
clear: both;
overflow: auto;
}
I've been trying to absolutely position my navigation at the bottom right of its parent div (header>nav>menu) and i'm a little lost. Help would be appreciated!
I've been trying to relatively position its parent div, but each property i try, it either disappears from the browser, aligns all the way at the bottom right of the page and not its parent div, or somewhere else i'm not wanting it to go.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<div id="wrapper">
<header>
<div class="logo">
<img src="images/logo.png" / id="logo">
</div>
<nav>
<ul id="menu">
<li>Home</li>
<li>Portfolio</li>
<li>Career</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
body {
margin:auto;
width:960px;
}
.logo {
display:block;
float:left;
width:242px;
height:141px;
margin:0px;
}
#header {
position:relative;
height:100%;
}
#nav .menu {
position:absolute;
bottom:0px;
right:0px;
margin:0px;
padding:0px;
float:right;
}
#menu ul {
list-style:none;
}
#menu li {
display:inline;
float:left;
}
#menu a {
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover,a:active
{
background-color:#7A991A;
}
you define in your css nav is a tag element not id or menu is a id not class Please change to your css and define as like this
Change to this
#nav .menu
into this
nav #menu
Demo
You made some mistakes,
you use #header in css but you don't put id header to the <header> tag,
you use #nav in css instead of nav tag because there is no id in nav tag,
#header height is 100%. it will take the height of parent. put height:auto; so that it will take only the height it need to fit its content.
I made a JSFiddle. please check. hope this will solve your problem.
http://jsfiddle.net/banded_krait/Q4Zjj/
I am inputting this in w3school's tester and I can't figure out how to vertically align the text. vertical-align:middle; doesn't help.
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:100px;
height:30px;
margin:5px;
background-color:#66CC33;
text-decoration:none; color:#000;
text-align:center;
font-family:"Verdana",Times,serif;
vertical-align:middle;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
Set the line-height equal to the height (30px).
http://jsfiddle.net/9Gr9S/
li {
padding-right: 80px;
padding-top: 25px; /*could be bottom depens on what you prefer to do.*/
}
I guess this work, if the px not match play with them see what you can do.
Don't forget confirm or vote up.