I'm trying to write a navigation bar using an <ul> with inline elements, but the elements all have a gap between them that seem to come from nowhere. That is when hovering a link, the shaded box should snap to the surrounding boxes. The page currently looks like this: http://wictorht.at.ifi.uio.no/. What is causing these gaps?
HTML:
<body>
<div id="main">
<ul class="header">
<li class="title">wictorht</li>
<li class="header">
<a class="header" href="https://bitbucket.org/htor/dwmst/src">dwms</a>
</li>
<li class="header">
<a class="header" href="https://bitbucket.org/htor/linux/src">linux</a>
</li>
<li class="header">
<a class="header" href="http://www.fsf.org/register_form?referrer=10397">fsf</a>
</li>
<li class="header">
<a class="header" href="http://stackexchange.com/users/1006063">stackexhange</a>
</li>
</ul>
</div>
</body>
CSS:
body {
background: #666666;
color: #c0c0c0;
margin: 0;
}
a.header {
text-decoration: none;
padding: 10px;
margin: 0;
}
a.header:hover, a.header:active {
background-color: #666666;
color: #c0c0c0;
}
ul.header {
background-color: #c1c1c1;
color: #666666;
list-style: none;
padding: 10px 10px 10px 0;
margin: 0 0 10px 0;
}
li.header {
display: inline;
}
li.title {
background-color: #000000;
color: #bada55;
display: inline;
padding: 10px;
}
This is because all white-space, including new-lines, between elements is collapsed down to a single space when rendered by the client's browser. To hide the spaces you can either:
Remove the spaces between li elements:
<li><!-- content --></li><li><!-- more content --></li>
Set the font-size of the parent ul to 0, and redefine the font-size of the li element:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
}
Comment out the gaps between the li elements:
<li>Content</li><!--
--><li>Next li</li>
Float the li elements instead of using display: inline, which removes the spaces by taking the elements out of the normal flow:
ul {
overflow: hidden; /* to keep the li 'visibily' within the bounds of the ul */
}
ul li {
float: left;
}
Close the li tag on the next line, before the next li opening tag this feels slightly wrong to me, but it is valid:
<li>First li</li
><li>Second li</li>
(Or, obviously, place the next li opening-tag on the previous line, immediately after the previous element's closing tag:
<li>First li</li><
li>Second li</li>
)
The gaps are caused by the whitespace between the <li></li> tags.
Try <li>...</li><li>...</li> as a comparison.
Anyways, avoid this with display:block and using float:left
This is a great post explaining what is happening and the work arounds that have already been mentioned by the previous answers.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
You also have a little trouble with your css selector names, you actually only need one class and you can take advantage of the nature of CSS to do the rest.
.header {
background-color: #c1c1c1;
color: #666666;
list-style: none;
padding: 10px 10px 10px 0;
margin: 0 0 10px 0;
}
Now target all the 'li' tags that are children of the .header class
.header li {
display: inline;
}
Now target all the 'a' tags that are children of the .header class (these happen to be inside your 'li' tags)
.header a {
/* etc */
}
Related
I tried
<div>
<tr><h1><ins><font face ="bold" color = "white">Home</h1></ins></tr>
<tr><h1><ins><font face ="bold" color = "white">Contact</h1></ins></tr>
</div>
resulting in
Home
Contact
How can I align these tags side by side?
either display:inline or float:left which gives more control (but needs <div style="clear:both"></div> afterwards)
h1 {
float: left;
margin-right: 10px;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
nav {
display: flex;
}
before
<nav>
<h1>hello</h1>
<h1>world</h1>
<div style="clear:both"></div>
</nav>
after
try this:
{
display: inline-block
};
Ideally, you might benefit from a review of your markup.
Certainly you shouldn't be using multiple <h1> elements within a single document.
The <h1> is the principal heading of the entire document. By definition that means there will only ever be one.
Whenever you want to change the visual presentation of an element, you will use CSS.
HTML Structure
If you are building a navbar, then you can use:
<ul> - an unordered list
and nest this inside a:
<nav> - a navigation element
CSS Presentation
Once you have a structure like the outline above, there are multiple ways to align elements side-by-side:
nav ul { display: flex; }
nav ul { display: table; }
nav ul li { float: left; }
nav ul li { display: inline-block; }
When starting out, one of the simplest ways is to use the last option immediately above:
nav ul li {
display: inline-block;
}
Working Example:
nav {
background-color: rgb(191, 0, 0);
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
width: 96px;
height: 48px;
line-height: 48px;
text-align: center;
}
nav ul li a {
font-family: sans-serif;
color: rgb(255, 255, 255);
font-weight: 900;
}
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
I'm trying to make a sample website about photography, and as I start with my navigation bar, I have come to the issues of the background color not working. I have tried many things like putting an Id to call my nav on my CSS file. I have also tried using div, nav or even using a class and it won't work. I am sorry if this might be an easy fix but I am new to this.
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
float: right;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
<div>
<nav id="navbar">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Because your anchor tags are floated and there are no other non floated elements, your nav element collapsed. To fix these follow below steps.
Create a clearfix class like this. It will stop your nav element from collapsing.
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add this class to your nav element
Remove the float: right; rule from your anchor element, aka from ul li a selector. Right now, because of this rule, your last element becomes the first menu, aka "Contact" became first menu and "Home" became last. To understand why this happend read this.
Add a new rule float: left; for your li element. If you don't add this rule, your li elements each will take a seperate line, because by default li elements are block level elements. To keep them in the same line you have to add this rule. You can also add display: inline-block to change its default display property from block to inline to keep them in the same line. But there is a small problem with this solution, you will notice a small gap between inline-block elements. If those small gaps are not a problem for your design then go ahead and use display: block; rule, otherwise use float: left;. (To understand the difference hover over the menu next to the active menu)
Add two more rules float: right; and margin: 0; for your ul element. This will move your menu to the right as you intended. margin: 0; is there to remove the extra margins. You can change/delete this rule as per your design.
<!DOCTYPE html>
<html>
<head>
<link href="Css/Stylesheets.css" rel="stylesheet">
<meta charset= utf-8>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>LTphotography</title>
</head>
<style>
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
float: right;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>`
<body>
<div>
<nav id="navbar" class="clearfix">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Your containing li's are collapsing because they contain floated content. You need to add a clearfix to your li items.
.clearfix::after {
content: "";
clear: both;
display: table;
}
<ul>
<li class="clearfix"></li>
// and so on
</ul>
https://www.w3schools.com/howto/howto_css_clearfix.asp
That said, you can also simply remove float: right from your anchor elements. It shouldn't be necessary.
I found this menu sample on W3Schools. I'm trying to create a menu bar on my MVC layout page. My was looking very sloppy and I liked how this one looks. I pasted it into my website and it works as shown, but I don't understand how it is being styled. I don't see any height or vertical alignment settings. Is it the padding style that does it? Are ul and li tags commonly used for this kind of menu? I would have used something like a span tag to do this and not ul or li tags.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li style="float:right">About</li>
</ul>
</body>
</html>
The height is being set by the default CSS styling in addition to some padding applied to the links. The default CSS height for the ul element is auto, meaning that it will fill space (i.e. be as tall) as its children.
What this means is that it is taking the font-size / line-height of the links and adding padding, which is 14px on both top and bottom. That height becomes the height of the entire list / navigation bar.
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.
How to grow the li elements in the way, that all the four li elements consume the complete 900 pixels space and add a little gap between the elements. And why is there already a gap now - I have none defined?
<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }
#menu {
display: block;
position: relative;
width: 900px;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
display: inline;
position: relative;
margin: 0;
padding: 0;
}
#menu li a, #menu li a:visited {
display: inline-block;
position: relative;
padding: 10px;
background-color: yellow;
text-decoration: none;
}
#menu li a:hover, #menu li a:active {
background-color: green;
text-decoration: none;
color: white;
}
</style>
<body>
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li>
<li>OpenOffice</li>
<li>Microsoft Office Visio</li>
<li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
</body>
</html>
Inline blocks behave weirdly in the fact that they render whitespace. The gap shown between items is the new line characters in your code. You can either remove the new line characters as I have shown in the code below (or at this fiddle http://jsfiddle.net/UyQEK/). If you want to keep the HTML clean, and not have to do this removal of whitespace, use float left on the elements instead of display: inline-block and do a clearfix on the parent to set the height.
<div id="box">
<ul id="menu">
<li>Mozilla Firefox & Thunderbird</li><li>OpenOffice</li><li>Microsoft Office Visio</li><li>Apache OpenOffice 3.0.0</li>
</ul>
</div>
EDIT
Made the classic mistake of forgetting to check to ensure I answered the whole question. I have updated the fiddle http://jsfiddle.net/UyQEK/1/ to show the actual answer to utilize the entire bar rather then just get rid of your spaces. The basis of the solution was floating the elements and giving them each a width of 25% and applying a clearfix to the ul element.
Hope that solves the whole thing this time.