i'm creating a site for a bookstore and the designer wants to represent the menu as seperate piles of books. I have 4 piles with different amount of books (read menu items). I can create the menu with ul containing 4 li's (piles) which contain ul with li's (books). I have to stick to the ul and li notation because the menu will be created like that by Joomla.
The problem is that the books look like they float to the ceiling instead of lying on the shelf. How can i make the books lie down on the shelf?
Example: http://jsfiddle.net/cJ8an/
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul li {
float: left;
list-style: none;
}
ul li ul {
margin-right: 25px;
}
ul li ul li {
float: none;
margin-top: 5px;
}
hr {
clear: both;
height: 10px;
background: brown;
}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li>HOME</li>
</ul>
</li>
<li>
<ul>
<li>BOEKENTIPS</li>
<li>MEER DAN BOEKEN</li>
<li>NIEUWS</li>
</ul>
</li>
<li>
<ul>
<li>LEZERSBLOG</li>
<li>BESTELFORMULIER</li>
<li>VERTELTHEATER</li>
<li>ANTROPOSOFIE</li>
</ul>
</li>
<li>
<ul>
<li>CONTACT</li>
<li>SCHOLEN</li>
<li>KINDEROPVANG</li>
</ul>
</li>
</ul>
<hr id="bookshelf" />
</body>
</html>
display:table used in a clever way seems to have worked. This will need some tweaking, but I'm sure you can take it from here. Good luck. http://jsfiddle.net/tmpQM/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
background: red;
padding: 2px 10px;
}
a:hover {
color: black;
}
ul {
display:table;
}
ul li {
display:table-cell;
list-style: none;
vertical-align:bottom;
}
ul li ul {
margin-right: 25px;
display:block;
}
ul li ul li {
float: none;
margin-top: 5px;
display:inline-block;
}
hr {
clear: both;
height: 10px;
background: brown;
}
Related
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I have a dropdown list item in my navbar and can't get the dropdown section to align underneath the parent link. I am trying to use just css and know I've done it before, it's just stumping me at the moment. None of the other examples I've come across use the same menu format so it's been troubling trying to force fit pieces of code. Please help me with this easy solution
HTML
<div id="navbar">
<li>Home</li><!--
--><li>Link2</li><!--
--><li>Link3</li><!--
--><li><a href="#">Link4
<ul>
<li>SubLink1</li><br />
<li>SubLink2</li><br />
<li>SubLink3</li><br />
<li>SubLink4</li>
</ul>
</a></li><!--
--><li>Link5</li>
</div>
CSS
#navbar {
width:75%;
margin:0px auto;
text-align:right;
position:relative;
top:218px;
}
#navbar li {
list-style:none;
display:inline;
position:relative;
}
#navbar a {
background-color:#862D59;
font-size:18px;
width:60px;
margin:0px;
padding:10px 15px;
color:#FFF;
text-decoration:none;
text-align:center;
}
#navbar a:hover {
background-color:#602040;
border-bottom:solid 4px #969;
}
#navbar li ul {
display:none;
}
#navbar li:hover ul {
position:absolute;
display:block;
}
Working Example
https://jsfiddle.net/o6Ldutp5/
Firstly, you should use a reset css of some kind to remove the default margin / padding attached to ul & li.
Then validate your HTML, it contained a number of errors such as missing the opening ul etc.
Then it's just a matter of using position:absolute and appropriate values.
top:100% will place the menu directly below the li parent (with position:relative) regardless of the height of the li.
left:0 will align the left edge of the submenu to the left side of the parent li.
#navbar {
margin: 0px auto;
text-align: right;
}
ul,
li {
margin: 0;
padding: 0;
}
#navbar li {
list-style: none;
display: inline-block;
position: relative;
}
#navbar a {
background-color: #862D59;
font-size: 18px;
width: 60px;
margin: 0px;
padding: 10px 15px;
color: #FFF;
text-decoration: none;
text-align: center;
display: block;
}
#navbar a:hover {
background-color: #602040;
border-bottom: solid 4px #969;
}
#navbar li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#navbar li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Home
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<ul>
<li>SubLink1
</li>
<li>SubLink2
</li>
<li>SubLink3
</li>
<li>SubLink4
</li>
</ul>
</li>
<li>Link5
</li>
</ul>
</div>
I've written my own minimal CSS without the styling, try replacing your whole CSS with this -
I've also edited your HTML by removing the comments and <br /> tags
div#navbar li {
display: inline-block;
}
div#navbar li ul {
width: 200px;
position: absolute;
display: none;
top: 10px;
}
div#navbar li ul li {
display: block;
width: 150px;
}
div#navbar li:hover ul {
display: block;
}
ul,ol,li {
margin-left: 0;
padding-left: 0;
}
Here is the fiddle
i have simple css & html menu. it's fine, but i try to move some links to right, but when i try, all of these goes. i tried with inside - and still nothing. Can someone help me?
#forum-nav,
#forum-nav ul {
list-style: none;
padding-left: 20px;
padding-right: 20px;
width: 960px;
}
#forum-nav {
float: left;
}
#forum-nav > li {
float: left;
}
#forum-nav li a {
display: block;
height: 28px;
line-height: 2em;
padding: 0 1.0em;
text-decoration: none;
}
#forum-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#forum-nav ul li a {
width: 80px;
}
#forum-nav li:hover ul.dropdown {
display: block;
}
/* Main menu
------------------------------------------*/
#forum-nav {
background:#597288;
}
#forum-nav > li > a {
color: #fff;
font-weight: bold;
}
#forum-nav > li:hover > a {
background: #889bac;
color: #fff;
}
.active {
background: #889bac;
color: #fff;
}
/* Submenu
------------------------------------------*/
#forum-nav ul{
margin-left: -20px;
}
#forum-nav ul a {
border-top: 1.5px solid #fff;
width: 100%;
padding-left: 20px;
padding-right: 20px;
background: #597288;
}
#forum-nav ul li a {
color: #FFF;
}
#forum-nav ul li:hover a {
background: #889bac;
}
#forum-nav ul li:last-child a {
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
}
and html:
<ul id="forum-nav">
<id="m_index">LINK ON LEFT</li>
<id="m_index">LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<id="m_index">LINK ON RIGHT</li>
<id="m_index">LINK ON RIGHT</li>
</ul>
how can i move it, and still it will be works fine?
Firstly, you haven't actually defined any li elements within your ul so your markup is invalid, secondly you need to add a rule in your CSS to float the last two list items to the right.
Change your HTML to:
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
<li>LINK ON RIGHT</li>
<li>LINK ON RIGHT</li>
</ul>
And add to your CSS:
#forum-nav li:nth-child(3),#forum-nav li:nth-child(4){
float:right;
}
nb. if you want to float all children other than the first two to the right you can use:
#forum-nav li:nth-child(n+3){
float:right;
}
nb. per Chriz's answer- id attributes must be unique.
html
<ul id="forum-nav">
<li>LINK ON LEFT</li>
<li>LINK ON LEFT</li>
AND I WANT IN ON RIGHT
<li class='right'>LINK ON RIGHT</li>
<li class='right'>LINK ON RIGHT</li>
</ul>
css
.right { float:right; }
Note : give li open tag, and giving same id more element is not good practice, this CSS classright will do your job
I'm new to CSS and I'm trying to experiment with this code - if you want to see what it looks like go to this link: https://www.servage.net/blog/wp-content/uploads/2009/03/css-menu.html
Here's the code:
<html>
<head>
<title>CSS based drop-down menu</title>
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>About
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
<li>Products
<ul>
<li>Cozy Couch</li>
<li>Great Table</li>
<li>Small Chair</li>
<li>Shiny Shelf</li>
<li>Invisible Nothing</li>
</ul>
</li>
<li>Contact
<ul>
<li>Online</li>
<li>Right Here</li>
<li>Somewhere Else</li>
</ul>
</li>
</ul>
</body>
</html>
I have 2 questions about this:
How do I make this navigation bar on the right side of the page ?
Some of the tabs have drop down lists, when I add this margin-top: 50px to change the position of the navigation bar the dropdown lists move down like this
To move the #menu to the right and 50px down, add these properties
#menu {
position: absolute;
top: 50px;
right: 0px;
}
JSFiddle
If you want to use float and margin-top instead, you must restrict the margin to the #menu
#menu {
float: right;
margin-top: 50px;
}
JSFiddle
you seem to be targeting both the parent ul and the childs uls
try that:
ul {
margin-top:50px;
}
ul#menu {
float:right;
margin-top:0;
}
By adding the #menu after ul you target that specific UL and therefore override its basic ul properties
Add float property to your list:
#menu {
float: right;
}
If you are using WordPress or a static website then you have to place this code to move your navigation bar to the right side.
position: static;
top: 50px;
right: 0px;
color: black;
display: inline-block;
margin-right: 45em;
}
You can vary margin-right according to your website design.
If you still not able to move navigation on the right side then change the position: Like static, absolute, relative and inherit.