I have the following HTML:
<ul class="navlist">
<li>Home</li>
<li>Agenda</li>
<li>Presenters</li>
</ul>
And I'm using this CSS:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {display: inline;}
As shown in a fiddle, there is whitespace between the li elements. How do I remove that whitespace?
In the HTML, remove all whitespace between each closing tag </li> and opening tag <li>. In addition, set display: inline-block on the list items.
Demonstration:
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
}
.navlist li {
display: inline-block;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
<ul class="navlist">
<li>Home</li><li>
Agenda</li><li>
Presenters</li>
</ul>
The reason is that you set the LI as inline elements, the spaces are caused by the "spaces"/linebreaks between the html code </li> and <li>.
We usually make the LI float: left instead:
http://jsfiddle.net/Lsbwt0n8/3/
In this instance you can just add
.navlist li:after { content: ' '; font-size:0; }
The white-space between the li elements will collapse into the pseudo element, which has a font-size of 0, so no gap is rendered.
.navlist {
padding: 10px 0 0;
margin :0;
list-style-type: none;
height:33px;
}
.navlist li a {
text-decoration: none;
font-size:18px;
color:white;
background:#63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color:#63B3E4;
background:white;}
.navlist li {display: inline;}
.navlist li:after { content: ' '; font-size:0; }
<ul class="navlist">
<li>Home</li><li>
Agenda</li><li>
Presenters</li>
</ul>
you can remove the whitespace by adding font-size:0 to parent
.navlist {
font-size: 0;
}
.navlist {
padding: 10px 0 0;
margin: 0;
list-style-type: none;
height: 33px;
font-size: 0;
}
.navlist li a {
text-decoration: none;
font-size: 18px;
color: white;
background: #63B3E4;
padding: 10px 45px 12px;
}
.navlist li a:hover {
color: #63B3E4;
background: white;
}
.navlist li {
display: inline;
}
.navlist {
font-size: 0;
}
<ul class="navlist">
<li>Home
</li>
<li>
Agenda
</li>
<li>
Presenters
</li>
</ul>
In order to remove the white space, you must remove the white space.
<ul class="navlist">
<li>Home</li><li>Agenda</li><li>Presenters</li>
</ul>
http://jsfiddle.net/Lsbwt0n8/5/
Related
I have a ul and h2 element. The container that both elements are in has padding-left: 4%.
I want the h2 and ul elements to both start from the same horizontal position so that they're directly below each other. The problem is that as the contents of the li elements are centered, the first element is not directly below the h2 - there's a gap:
If I add margin-left: -3% to the first li element, it pushes it to the left and removes the gap:
But they're not exactly aligned and I'd have to fiddle around with the margin to make it exact. Is there an alternative way to make them directly start from the same point?
#menu {
background: #bb1919;
padding: 0 4%;
}
#menu h1 {
margin: 0;
font-weight: normal;
padding-top: 10px;
}
#menu ul {
list-style-type: none;
padding: 0;
display: flex;
align-items: center;
margin: 0;
}
#menu li {
display: inline-block;
border-bottom: 4px solid transparent;
cursor: pointer;
text-align: center;
}
#menu li:first-of-type {
/* margin-left: -2%; */
}
#menu li:hover {
border-bottom: 4px solid #fff;
}
#menu li:first-of-type p {
border-left: none;
}
#menu li p {
border-left: 1px solid #d0d0d06b;
padding: 0 14px;
margin: 14px 0 8px 0;
}
<div id="menu">
<h1>NEWS</h1>
<ul>
<li>
<p>Home</p>
</li>
<li>
<p>Coronavirus</p>
</li>
<li>
<p>UK</p>
</li>
<li>
<p>World</p>
</li>
<li>
<p>Business</p>
</li>
<li>
<p>Politics</p>
</li>
</ul>
</div>
JsFiddle: https://jsfiddle.net/naq0mb48/
Use :first-of-type rules for li and the p inside li to set margin-left and padding-left to 0 and text-align to left.
ADDITION after comment:
You can add margin-left: -14px; text-indent: 14px; to the #menu li:first-of-type rule to achieve the desired underline left of the left-aligned first menu entry on hover.
#menu {
background: #bb1919;
padding: 0 4%;
}
#menu h1 {
margin: 0;
font-weight: normal;
padding-top: 10px;
}
#menu ul {
list-style-type: none;
padding: 0;
display: flex;
align-items: center;
margin: 0;
}
#menu li {
display: inline-block;
border-bottom: 4px solid transparent;
cursor: pointer;
text-align: center;
}
#menu li:hover {
border-bottom: 4px solid #fff;
}
#menu li p {
border-left: 1px solid #d0d0d06b;
padding: 0 14px;
margin: 14px 0 8px 0;
}
#menu li:first-of-type {
text-align: left;
padding-left: 0px;
margin-left: -14px;
text-indent: 14px;
}
#menu li:first-of-type p {
border-left: none;
padding-left: 0px;
}
<div id="menu">
<h1>NEWS</h1>
<ul>
<li>
<p>Home</p>
</li>
<li>
<p>Coronavirus</p>
</li>
<li>
<p>UK</p>
</li>
<li>
<p>World</p>
</li>
<li>
<p>Business</p>
</li>
<li>
<p>Politics</p>
</li>
</ul>
</div>
I have created a html page with ul and li's to show some links and set up some background color to the li's. Now I want to add vertical line on the li's.
When I try to set up a image it is coming as shown in figure 1 but I want it to be as shown in figure 2.
figure 1
figure 2
What I have tried so far:
ul#sitemap1 {
list-style: none;
}
ul#sitemap1 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
#sitemap1 li {
clear: left !important;
margin-top: 0px !important;
padding: 10px !important;
background: url('/Images/ConnectLine.JPG') no-repeat !important;
float: inherit;
}
ul#sitemap1 li a:hover {
background-color: Orange;
}
ul#sitemap2 {
list-style: none;
}
ul#sitemap2 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap2 li a:hover {
background-color: Orange;
}
ul#sitemap3 {
list-style: none;
}
ul#sitemap3 li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul#sitemap3 li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">
Home
<li>Services</li>
<li>Organizational Change</li>
<li>kit</li>
<li>Sheets</li>
</ul>
<ul id="sitemap2">
Engagement
<li>Ideas</li>
<li>WorkSmart</li>
</ul>
<ul id="sitemap3">
Related Links
<li>GO-TIME</li>
</ul>
I suggest remove the id's form the CSS, no need to duplicate the same CSS just refer to the ul tag.
You can use :after pseudo-element to create the line.
Use :last-child to remove the line form the last item.
ul {
list-style: none;
}
ul li {
width: 220px;
position: relative;
margin-bottom: 20px;
}
ul li:after {
content: "";
position: absolute;
top: 90%;
left: 50%;
height: 25px;
background: black;
width: 4px;
border-radius: 5px;
border: 2px solid white;
z-index: 100;
}
ul li:last-child:after {
display: none;
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
}
ul li a:hover {
background-color: Orange;
}
<h1>Innovations</h1>
<ul id="sitemap1">Home
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">Engagement
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">Related Links
<li>GO-TIME
</li>
</ul>
you can use a pseudo element ::after in the a child of li
Note you can only have li as direct childs of ul. otherwise it is invalid HTML
I tweaked your CSS removing duplicated properties.
ul {
list-style: none;
margin-top: 30px
}
ul li a {
background-color: #002163;
color: white;
padding: 10px;
text-decoration: none;
width: 200px;
display: block;
margin: 10px;
font-weight: bold;
position: relative
}
ul li a::after {
position: absolute;
top: 100%;
left: 50%;
background: black;
width: 5px;
height: 100%;
content: ""
}
ul li:last-of-type a::after {
background: transparent;
height: 0
}
ul li a:hover {
background-color: Orange;
}
<div>
<h1>Innovations</h1>
<ul id="sitemap1">
<li>Home
</li>
<li>Services
</li>
<li>Organizational Change
</li>
<li>kit
</li>
<li>Sheets
</li>
</ul>
<ul id="sitemap2">
<li>Engagement
</li>
<li>Ideas
</li>
<li>WorkSmart
</li>
</ul>
<ul id="sitemap3">
<li>Related Links
</li>
<li>GO-TIME
</li>
</ul>
Try this, same you could try for sitemap 1 and 3.
ul#sitemap2 li::after{
content:'';
border:3px solid #111;
height:50px;
margin-left:110px;
}
I want to make it so the +Kendrick element is not underlined, but the Gmail and Images elements remain underlined when hovered over, any help would be appreciated, thanks
Relevant HTML
<body>
<div id="header">
<ul>
<li>+Kendrick</li>
<li>Gmail</li>
<li>Images</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Relevant CSS
#header {
background-color: none;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#header ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
}
#header ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#header ul li a:hover {
text-decoration: underline;
}
ul a:hover first-child {
text-decoration: none;
}
You almost had it there. You just needed to finish the last css style like this
#header ul li:first-child a:hover {
text-decoration: none;
}
Here is the JSFiddle
I am trying to make a simple vertically aligned menu that has a width of 100%. However, there is some weird padding on the left that prevents the menu from stretching the whole 100%.
HTML
<div class="sidecontent">
<nav class="sidemenu">
<ul>
<li>T-Shirts</li>
<li>Long Sleeve T's</li>
<li>Hoodies</li>
<li>Towels</li>
<li>Design Your Own</li>
</ul>
</nav>
</div>
CSS
div.sidecontent {
width: 100%;
background-color: #E6E6E6;
border-radius: 0 0 10px 10px;
}
nav.sidemenu {
width: 100%;
}
nav.sidemenu ul {
list-style-type: none;
margin: 0;
}
nav.sidemenu ul li {
width: 100%;
border-top: 1px solid #999999;
}
nav.sidemenu ul li:first-child {
border-top: 0;
}
nav.sidemenu ul li:last-child a {
border-radius: 0 0 10px 10px;
}
nav.sidemenu ul li a:link, nav.sidemenu ul li a:visited {
display: block;
font-weight: bold;
font-size: 1em;
text-align: center;
font-family: "Trebuchet MS";
text-decoration: none;
text-transform: uppercase;
color: #4C4C4C;
padding: 28px 0;
}
nav.sidemenu ul li a:hover, nav.sidemenu ul li a:active {
background-color: #CCCCCC;
}
Here is the jsfiddle
Solution
nav.sidemenu ul {
list-style-type: none;
margin: 0;
padding:0;
}
It's the unordered list indent, try adding this to your css:
ul {
list-style:none;
padding-left:0;
}
According to Chrome's HTML inspector, the ul object appears to have sever hidden characteristics:
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px; //this is what's bothering you
}
Hence you want to set the padding-left to 0 px for ul objects:
nav.sidemenu ul {
list-style-type: none;
margin: 0;
padding-left: 0; //this is what I added
}
Fixed fiddle: http://jsfiddle.net/awcPd/5/
I've got a little issue with a inline menu, bug only appears in ie7. The only menu li that has another menu underneath it, is not inline with the rest, the rest seem to appear pushed down.
HTML
<div id="topnav">
<ul id="jsddm">
<li id="">
<a id="" href="/">Home</a>
</li>
<li id="">
About
<ul style="visibility: hidden;">
<li>
Board
</li>
<li>
Contact
</li>
</ul>
</li>
<li>
Practices
</li>
<li>
How we work
</li>
<li>
Patients
</li>
<li>
News & Links
</li>
<li>
Link
</li>
</ul>
</div>
CSS
#jsddm
{ margin: 0;
padding: 0;
width: 100%;
}
#jsddm li
{
display: inline-block;
list-style: none;
font: 12px Tahoma, Arial;
width: 100px;
text-align: center;
}
*+html #jsddm li { display:inline }
* html #jsddm li { display:inline }
#jsddm ul li
{
display: block;
font: 12px Tahoma, Arial;
}
#jsddm li ul
{
margin: 0 0 0 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 0px solid white;
*margin: 0 0 0 -50px; /* IE 7 and below */
/* margin: 0 0 0 -50px\9; IE 8 and below */
}
#jsddm ul li ul li
{
font: 12px Tahoma, Arial
}
#jsddm li a
{
display: block;
background: #009EE0;
padding: 0;
line-height: 28px;
text-decoration: none;
border-right: 0px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap;
font-weight: bold;
width: 100%;
}
#jsddm li a:hover
{ background: #1A4473}
#jsddm li ul li
{
float: none;
*margin: -2px 0 0 0;
*padding:0;
}
+html #jsddm li ul li { }
#jsddm li ul li a
{
width: auto;
background: #009EE0
font-weight: bold;
}
#jsddm li ul li a:hover
{ background: #0E559C }
It uses a jquery function to display the dropdownmenu but it does'nt effect the static html/css.
Thanks.
IE7 doesn't support inline-block. Try to float the elements in it - http://jsfiddle.net/SsDnd/1/
#jsddm li
{
display: inline-block;
list-style: none;
font: 12px Tahoma, Arial;
width: 100px;
text-align: center;
*float: left;
}