I am trying to write a website with a toolbar at the top, the HTML for the toolbar is:
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
ul li{
display: inline;
}
<ul>
<li>Home </li>
<li><p>|</p></li>
<li> About Us </li>
<li><p>|</p></li>
<li> Contact Us</li>
</ul>
Any help you could give would be really apreciated!
You can use display: inline-block instead of display: inline
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
}
<ul>
<li>Home </li>
<li> <p>|</p> </li>
<li> About Us </li>
<li><p>|</p></li>
<li> Contact Us</li>
</ul>
Here is better option to do this with Flexbox and :after pseudo-element
ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li:not(:last-child):after {
content: '|';
margin: 0 5px;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Remove these:
<li><p>|</p></li>
Because:
Paragraph elements are blocks (and generate line breaks)
Dividing characters are not paragraphs
Dividing characters are not list items
Use CSS borders if you want a line between list items.
Related
I've searched around and found a lot of questions about this problem, but none of the answers I tried seemed to work in my case. So I have a unordered list inside of the nav tag and I want the list to be centered relative to the parent nav tag. But the list is always a bit to the right and never in the center no matter what I tried.
HTML pretty straight forward:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
Here is the CSS so far:
nav {
float: left;
width:15%;
margin: 0;
padding:0;
background:gray;
text-align:center;
}
nav ul {
list-style-type: none;
color:blue;
}
Any ideas how can I get this to work?
try this
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
this is because ul have a padding and margin applied to it by browsers by default you need to remove them
nav {
float: left;
width: 50%;
margin: 0;
padding: 0;
background: gray;
text-align: center;
}
nav ul {
list-style-type: none;
color: blue;
margin: 0;
padding: 0;
}
<nav>
<ul>
<li>MENU</li>
<li>Opt 1
</li>
<li>Opt 2
</li>
<li>Opt 3
</li>
</ul>
</nav>
Test this:
<nav>
<ul>
<li>MENU</li>
<li>Opt 1</li>
<li>Opt 2</li>
<li>Opt 3</li>
</ul>
</nav>
nav {
display:table;
margin:0 auto;
padding : 10px;
}
To achieve this layout of a fully justified menu list, I can not use CSS pseudo-classes to display separators between list items; instead, I have to put the separator directly in the HTML.
Since according to HTML5 standard in an <ul> only <li> and script-supporting elements are allowed, I made the below code. It is valid HTML5 but it seems quirky to me. Any concerns?
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
}
li.home {
padding: 0;
}
li,
script::after {
vertical-align: middle;
padding-top: 10px;
}
nav {
border-bottom: 1px solid black;
border-top: 1px solid black;
height: 40px;
}
script.separator {
display: block;
}
script.separator::after {
content: "*";
}
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<script class="separator"></script>
<li class="second">Item 1</li>
<script class="separator"></script>
<li>Item 2</li>
<script class="separator"></script>
<li>One more Item</li>
<script class="separator"></script>
<li>Another Item</li>
<script class="separator"></script>
<li class="last">Contact</li>
</ul>
</nav>
Replace the <script> with another <li> and simply assign a style to it with
ul li:nth-of-type(even) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
This will have the same effect but will look much neater on the code view.
<nav id="main-menu">
<ul>
<li class="home">
<img src="http://dummyimage.com/40x40/000/fff">
</li>
<li></li>
<li class="second">Item 1</li>
<li></li>
<li>Item 2</li>
<li></li>
<li>One more Item</li>
<li></li>
<li>Another Item</li>
<li></li>
<li class="last">Contact</li>
</ul>
</nav>
You may have to tweak the actual CSS in the rule above to suit your look and feel but as a concept I think it's neater and cleaner to have all <li> elements and then use CSS to intelligently select all of the correct ones. This also reduces the number of class=" ... " laying around too.
You can also potentially add further rules so that for example you do not do the seperator CSS on the last of type, so the final li would never be the seperator either:
ul li:nth-of-type(even), ul li :not(:last-of-type) {
display: block;
content: "*";
vertical-align: middle;
padding-top: 10px;
}
I'm not sure this is the exact layout you're after, but can you not use display: table and a border?
ul {
margin: 0;
padding: 0;
list-style: none;
display: table;
width: 100%;
}
li {
display: table-cell;
text-align: center;
}
li:not(:last-child) {
border-right: 1px solid #333;
}
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
I found a lot of posts about centering submenu <ul> absolute positioned, but none of them solved the problem of center the submenu that have dynamic width determined by the text length of the <li> children...
Most of those posts offer a solution based on the use of negative margin-left,
and this means that it can work only for a specific width, but not for dynamic width!
So I have prepared a quick FIDDLE HERE with a very basic menu,
please can you help me to figure out how is possible to automatically center submenus?
nav {
background-color: red;
}
ul {
background-color: rgb(88, 164, 228);
padding: 0;
margin: 0;
list-style-type: none;
}
li {
display: inline-block;
margin: 0 20px;
}
ul ul {
background: rgb(119, 193, 255);
position: absolute;
outline: 1px solid black;
}
ul ul li {
margin: 0;
display: block;
}
<nav>
<ul>
<li>Menu</li>
<li>Menu
<ul>
<li>aa aa aa aa</li>
<li>bb bb</li>
</ul>
</li>
<li>Menu
<ul>
<li>cc cc cc</li>
<li>dd dd dd dd dd</li>
<li>ee ee ee</li>
</ul>
</li>
<li>Menu
<ul>
<li>ff ff</li>
<li>gg gg</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
I am trying to lessen the vertical space between items in the submenu of my drop down navigation bar. You can see what it currently looks like at http://www.mirandabee.com
I am trying to reduce the space vertically, but can't figure it out.
Here is my HTML for it:
<ul id ="nav">
<li><a href="http://www.mirandabee.com/search/label/About%20Me#.UuQfD-Io6Rs">About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Blog%20Series#.UuPc3uIo6Rs1">Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Freebies#.UhDj0D92XiM">Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Recipes#.UuPyGOIo6Rt">Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Projects%20%26%20Crafts#.UuP03OIo6Rt">Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</a></li>
<li><a href="http://www.mirandabee.com/search/label/Organize%20Your%20Life#.UuP2yuIo6Rt">Organization
<ul>
<li>One Space at a Time</li>
</ul>
</a></li></ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: -80px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
Keep in mind that I am very much a beginner, but I would appreciate any help I can get. Thanks so much!
Your HTML is totally broken. You have
<a><ul><li><a>...</a></li></ul></a>
you cannot have anchors inside anchors like that. Your css also doesn't make much sense. You've got position: absolute, but no position: relative anywhere else, so ALL of the nested <ul>'s are going to be in the wrong place.
Your HTML structure is bad. I'm sorry to say that. But here I try to fix it for you.
Fiddle
HTML:
<ul id="nav">
<li>
About Me
<ul>
<li>About Me</li>
<li>Photo Album</li>
</ul>
</li>
<li>
Blog Series
<ul>
<li>Guest Post Monday</li>
<li>Infographic Monday</li>
<li>What I Wore Wednesday</li>
<li>Fun Friday Link Party</li>
</ul>
</li>
<li>Freebies
<ul>
<li>Giveaways</li>
<li>Printables</li>
</ul>
</li>
<li>Recipes
<ul>
<li>All Recipes</li>
<li>Appetizers</li>
<li>Snacks</li>
<li>Main Dishes</li>
<li>Sides</li>
<li>Drinks</li>
<li>Desserts</li>
<li>Other Recipes</li>
</ul>
</li>
<li>Projects
<ul>
<li>For the Home</li>
<li>Kids & Family</li>
<li>Travel Solutions</li>
<li>Gift Ideas</li>
<li>Other</li>
</ul>
</li>
<li>Organization
<ul>
<li>One Space at a Time</li>
</ul>
</li>
</ul>
CSS:
/* ----- NAVMENU ----- */
#nav, #nav ul {
padding: 0px;
margin: 0;
z-index: 999;
margin-top: 0px;
margin-left: 100px;
list-style: none;
color: #007581;
}
#nav a {
display: block;
width: 6.5em;
}
#nav li {
float: left;
width: 6.5em;
font-size:18px;
color: #ff6962
}
#nav li ul {
position: absolute;
width: 6em;
font-size: 5px;
left: -999em;
}
#nav li:hover ul {
left: auto;
width: 7em;
font-size:18px;
color: #ff6962;
margin-left: -2px;
padding-top:-112px;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
I hope it will help you on solving this problem.. :)
I have a problem regarding CSS styling for my list.
Here is the code.
CSS
NAV {
width: 940px;
height: 50px;
float: left;
font-family: Geneva,Arial;
border: 1px solid #000000;
background-color: #D0DBF0;}
NAV ul {
margin: 0px auto;
padding-top: 15px;
padding-left: 70px;
list-style-type: none;
}
NAV li {
display: inline;
}
NAV li a {
float: left;
text-align: center;
border-right: 2px solid #00DBF0;
width: 100px;
font-size: 14px;
padding: 0px 10px;
color: #0000FF;
text-decoration: none;
}
HTML
<NAV>
<UL>
<LI>Home</LI>
<LI>About Us</LI>
<LI>Contact Us</LI>
<LI>Red Widgets</LI>
<LI>Blue Widgets</LI>
<LI>Green Widgets</LI>
</UL>
</NAV>
So here i have designed everything for navigation list, but for the first list i.e home.
<LI>Home</LI> i want right border. please help me.
You can do it using the :first-child pseudo-class:
nav li:first-child
or
nav li:first-child a
depending on whether you want to target the list item (<li>) or anchor (<a>).
You should add a class, or id.
For example (Let's also assume later you want a "current selected" item):
CSS:
.first a { /* specific style for first item */ }
.current a { /* specific style for current item */}
HTML:
<NAV>
<UL>
<LI class="first">Home</LI>
<LI>About Us</LI>
<LI class="current">Contact Us</LI>
...
<!-- if the first item happens to be the curent one: -->
<LI class="first current">Home</LI>
</UL>
</NAV>
JsFiddle here