Very new to coding, I'm having an issue. I want to turn my list that is used in my header into buttons. However, even though I set ul to list-style-type: none; the area where the bullet was seems to still be there, because when I go to make a button that area has the border applied to it.
If you need any more information please let me know!
ul {
display: flex;
list-style-type: none;
}
li {
padding: 30px;
border: 0.05em dotted #35b8b1;
margin: 1em;
/* text-decoration: none; */
}
.button {
border: 1px solid #ffffff;
border-radius: 50%;
padding: 10px;
}
<nav>
<ul>
<li><a class="button" href="#HTML">HTML</a></li>
<li><a class="button" href="#CSS">CSS</a></li>
<li><a class="button" href="#JS">JS</a></li>
</ul>
</nav>
Related
I have a navigation menu on my website. It works, however when hovering over a menu item with sub-items they disappear when trying to click on them. It appears that there is a spacing issue with these items.
*Additionally, I am trying to figure out how to insert a | between the menu items. If you could share some insight that would be amazing. I only have basic coding knowledge as you can probably tell from my post.
I appreciate the assistance!
/* do not change */
.container {
overflow: unset;
}
#container ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
#container ul li ul li {
display: none;
}
/* can change */
#container {
text-align: center;
}
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
#container ul li a {
color: black;
text-decoration: none;
font-weight: bold;
display: block;
}
#container ul li a:hover {
text-decoration: none;
border-radius: 0px;
color: #1dcdfe;
}
#container ul li:hover ul li {
background-color: white;
display: block;
margin-left: 0px;
}
<div id="container">
<ul>
<li><a href='#scroll-home'>Home</a></li>
<li><a href='#'>About Us</a>
<ul>
<li><a href='#scroll-whyhere'>Why You're Here</a></li>
<li><a href='#scroll-ourmethod'>Our Method</a></li>
<li><a href='#scroll-whyus'>Why Choose US</a></li>
<li><a href='#scroll-testimonials'>Testimonials</a></li>
</ul>
</li>
<li><a href='#'>Our Services</a>
<ul>
<li><a href='#scroll-wetreat'>What We Treat</a></li>
<li><a href='#scroll-packages'>Packages & Pricing</a></li>
</ul>
</li>
<li><a href='#scroll-faq'>FAQs</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
If I'm understanding you correctly, you want horizontal separators on your top-most navigation elements.
To do this, you can add borders to your li elements and then exclude the last one, like so:
#container ul li {
// ... other styles here
border-right: 1px solid black;
}
/* Add this additional style so that the last item doesn't receive the border */
#container ul li:last-child {
border-right: none;
}
A working example can be found at https://codepen.io/BrandonClapp/pen/wvGqrmQ
Following code add the pipes between menu's
#container > ul > li {
border-right: 1px solid black;
}
#container > ul > li:last-child {
border-right: 0;
}
Well thats because you have given every li a specific height here:
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
Which does not let the box grow when its hovered. You can give the nav buttons that have the hovering option an id and give the following code:
#container ul li #drop_down{
height: 100%;
}
For hindering future confusion, if you want to select direct children, use >, like so:
#container > ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
Here you have not used it, so even the inner ul is having these attributes, which ruins it. If you change it to the code above it will get fixed. Why? because the inner ul has the display: inline-block; attribute in your code which should not be.
Furthermore, Try giving the box a background-color and a z-index, so it will not keep detecting hover in behind boxes, in this case contact button.
For your other question I refer you to this link:
How to make a vertical line in HTML
And, or:
https://medium.com/#hollybourneville/creating-border-lines-using-pseudo-elements-in-css-a460396299e8
Alright so the problem is this, when I hover over the li:a my entire div will drop down a bit and then come back once I finish hovering. Im just trying to set it so it will just show the border-bottom without dropping the entire div a bit down
<div id="header_left">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
and the css configuration is
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
border-bottom: 2px solid green;
}
just add a transparent border to the none hovered state of your element.
like this:
li a {
border-bottom: 2px solid transparent;
}
this will help getting rid of the bumpiness on hover.
If you are trying to get the individual menu item hovered on to show the border at the bottom then you might want to set an ID for each menu item and specify what it does in css on hover. As it is right you are targeting everything which is why the whole thing drops on hover. Its an easy fix, just needs a few more lines of code.
Always adds "box-sizing: border-box" to include borders and padding inside box model
Set default transparent border and change only the color on hover
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
border-bottom: 2px solid transparent;
}
li a:hover {
border-color: green;
}
<div id="header_left">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.
Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.
http://codepen.io/briligg/pen/emwXaw?editors=110
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
}
nav button {
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
height: 32px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 7;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
margin-top: 9px;
padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
padding: 8px 2px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #52cbff;
}
Then in the html, the ul's are nested in the buttons, with links, like this:
<button tabindex="4">Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.
IE has button {overflow:hidden;} style by default, You can rest that as follows.
nav button {
overflow: visible;
}
Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.
nav {
position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
white-space: nowrap;
}
nav > ul > li {
display: inline-block;
position: relative;
font-size: 16px;
height: 32px;
line-height: 32px;
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
}
nav > ul > li > ul {
display: none;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
padding: 6px;
position: absolute;
z-index: 7;
top: 32px;
left: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #52cbff;
}
<nav>
<ul>
<li tabindex="1">Purpose</li>
<li tabindex="2">
Moon vs Mars
<ul tabindex="3">
<li>Ambiance</li>
<li>Communication</li>
<li>There and Back</li>
</ul>
</li>
<li tabindex="4">
Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</li>
</ul>
</nav>
The problem must be caused by this Link inside a button not working in Firefox (and IE).
Full Demo: http://codepen.io/anon/pen/KwOqKv
Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <li>.
<ul class='primary-links'>
<li class='primary'><a href='#'>Primary link</a></li>
<li class='primary'>
<a href='#'>Another primary link</a>
<ul class='secondary-links'>
<li class='secondary'><a href='#'>Secondary Link</a></li>
<li class='secondary'><a href='#'>Another secondary link</a></li>
</ul>
</li>
</ul>
The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.
.primary {
display: inline-block;
}
.secondary-links {
display: none;
position: absolute;
}
.primary:hover > .secondary-links {
display: block;
}
body {
font: 1em/1.5 sans-serif;
}
a:link,
a:visited {
color: #08f;
text-decoration: none;
}
a:hover,
a:active,
a:focus{
color: #f80;
}
ul {
list-style: none;
margin: 0;
padding: .25em;
border-radius: .25em;
background: #fff;
border: thin solid #ccc;
box-shadow: 0 0 .25em #ccc;
}
li {
margin: .5em;
}
nav > ul > li {
display: inline-block;
}
li > ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li><a href='#'>One</a></li>
<li>
<a href='#'>Two</a>
<ul>
<li><a href='#'>Two One</a></li>
<li><a href='#'>Two Two</a></li>
<li><a href='#'>Two Three</a></li>
</ul>
</li>
<li>
<a href='#'>Three</a>
<ul>
<li><a href='#'>Three One</a></li>
<li><a href='#'>Three Two</a></li>
<li><a href='#'>Three Three</a></li>
<li><a href='#'>Three Four</a></li>
</ul>
</li>
</ul>
</nav>
This is probably a very simple question for many of you, but I can't seem to figure it out and I've been at it for about an hour now.
I'm trying to create a navigation bar with buttons. I'd like the buttons to have the following features, but I can't figure out how to implement them:
Clicking anywhere on the button will activate the button redirection.
The font is not underlined or recolored like a regular text hyperlink.
The font is much more "fat" (I don't know how else to describe it.
In the picture, I put small red cross to signal that I'd like to be able to click in those locations for it to work.
I've included a jsfiddle with what I've been able to accomplish thusfar.
My html:
<ul>
<li><a id="nav" href="#">Page1</a></li>
<li><a id="nav" href="#">Page2</a></li>
<li><a id="nav" href="#">Page3</a></li>
<li><a id="nav" href="#">Page4</a></li>
</ul>
My CSS:
body {
margin: 0px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float:left;
overflow: auto;
padding: 6px 12px 6px 12px;
background-color: grey;
border: 1px solid #000;
text-decoration: none;
margin: 0;
border: 0;
margin-right: 3px;
font-weight: bolder;
color: yellow;
}
ul li:hover{
background-color: black;
}
}
replace ul li { with ul li a{ and ul li:hover{ with ul li a:hover{
http://jsfiddle.net/vxre4x2k/2/
Simply replace ul li with ul li a and ul li:hover with ul li a:hover.
To make the font thicker or thinner change your font-weight
You need to make you anchors work like block elements. The LI's will contain the anchor.
ul li a {
display: block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
ul li a:hover {
background-color: black;
}
You can use display: inline-block to a(anchor element) and give it some padding for your first request(Clicking anywhere on the button will activate the button redirection.). Also you can remove underline with text-decoration: none; and reduce "fat" from font with font-weight: 100;:
body {
margin: 0px
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
float: left;
padding: 6px 12px 6px 12px;
background-color: grey;
border: 1px solid #000;
text-decoration: none;
margin: 0;
border: 0;
margin-right: 3px;
font-weight: bolder;
color: yellow;
}
ul li:hover {
background-color: black;
}
ul li {
padding: 0;
}
ul li a {
display: inline-block;
padding: 5px;
text-decoration: none;
color: white;
font-weight: 100;
}
<ul>
<li><a id="nav" href="#">Page1</a>
</li>
<li><a id="nav" href="#">Page2</a>
</li>
<li><a id="nav" href="#">Page3</a>
</li>
<li><a id="nav" href="#">Page4</a>
</li>
</ul>
References:
font-weight
text-decoration
Clicking anywhere on the button will activate the button redirection.
to do this, wrap your list elements with the anchor elements instead.
ex.
<a href='#'><li>foo</li></a>
The font is not underlined or recolored like a regular text hyperlink.
for the links you gave them each an id of "nav". This isn't recommended as its commonplace to set id's to individual elements. I would look up the difference between CSS id's and classes. In short, classes are used for multiple elements that share the same styles. In this case you would use a class so it should be:
<a class="nav" href="#"><li>Page1</li></a>
The styles for the class to remove the underline would be:
.nav{
text-decoration:none;
color: black;
}
The font is much more "fat" (I don't know how else to describe it.
are you saying you want it to be fat?
if so then try this:
<a class="nav" href="#"><strong><li>Page1</li></strong></a>
or you could also set the css style font-weight property
the font-weight property can be used to increase or decrease the "fattness" of the font.
if that doesn't do it for you i'd suggest using a different font.
I built a little drop down menu without using any javascript, but it's not quite co-operating in firefox and IE 10. Here's what it looks like:
Both Link1 and Link2 are links. In chrome, clicking on them works fine - I get redirected as expected. In firefox and IE10, however, the menu just closes without visiting the link.
I thought it might be a z-index problem but I tried adding that and it didn't seem to do anything. Hovering over those links in firefox does bring up the tooltip showing the link address as well.
Any idea what might be causing this? Or is there a better way to do this? I'd like to try t avoid using javascript if possible.
Markup:
<ul class="header-right">
<li>
<ul class="user-menu">
<li class="menu-item" tabindex=0 id="submenu_li">
<span class="sub-menu-header" title="Menu">Long menu name Menu</span>
<div class="dropdown"></div>
<div class="user-sub-menu" id="user-sub-menu">
<ul class="submenu-list">
<li class="submenu-item">
<a id="a1" href="/Test">Link1</a>
</li>
<li class="submenu-item">
Link2
</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
Css is kind of long:
ul.header-right
{
position: absolute;
top: 7px;
right: 10px;
list-style-type: none;
margin: 0;
}
ul.header-right li
{
display: inline-block;
padding-left: 2px;
vertical-align: top;
}
li.menu-item
{
padding: 2px 2px 2px 10px !important;
}
li.menu-item:hover
{
background-color: #888888;
cursor: pointer;
}
li.menu-item:focus #user-sub-menu
{
display: block;
}
ul.user-sub-menu a, ul.user-sub-menu a:visited
{
text-decoration: none;
color: #232323;
}
div.user-sub-menu
{
display: none;
background-color: #FFFFFF;
min-width: 125px;
max-width: 300px;
min-height: 50px;
max-height: 400px;
position: absolute;
right: 22px;
z-index: 1000;
border: 1px solid #DDDDDD;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
color: #232323;
font-size: 1em;
}
div.user-sub-menu ul
{
display: block;
margin: 0;
padding: 0;
}
div.user-sub-menu li
{
display: block;
padding: 2px 2px 2px 2px;
font-size: 1.15em;
border: 1px solid #FFFFFF;
}
div.user-sub-menu li a, div.user-sub-menu li a:visited
{
text-decoration: none;
color: #232323;
}
div.user-sub-menu li:hover
{
text-decoration: none;
background-color: #CCFFCC;
border: 1px solid #DDDDDD;
}
JSFiddle
I eventually figured out what was happening (or at least, I think I did).
When I focus li.menu-item the #user-sub-menu div appears as is all well and good. However, if I click on an element inside that div, such as one of the links, technically the li.menu-item element has lost the focus and makes the div invisible.
My best guess is that chrome processed the link click before it processed the focus change, and thus things worked right away. For firefox, I added the following css to keep the #user-sub-menu div open even when li.menu-item loses focus.
#user-sub-menu:active, #user-sub-menu:hover, #user-sub-menu:focus
{
display: block;
}
As a result this now works fine in Firefox. Unfortunately it still doesn't work in IE, so if anyone else has any insights there I'm happy to hear them, but I'll mark this as answered for now.