Why does my <li> element move when I hover over another <li> member? When I try to make it static by setting position to absolute, its still won't locate statically...
Here's the code :
/*Global Settings*/
a {
color: white;
}
body {
padding: 0px;
margin: 0px;
}
/********************/
/*Navigation Bar Setting*/
#navbar {
background: red;
height: 37px;
}
#navbar > ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#navbar > ul > li {
/*display: inline;*/
float: left;
padding: 8px;
height: 16px;
padding-right: 10px;
text-align: center;
}
#navbar > ul > li:hover {
border-bottom: 5px solid rgb(0, 0, 0);
}
#firsttab:hover > ul {
margin: 0px;
height: 60px;
padding: 5px;
padding-left: 0px;
padding-right: 0px;
top: 37px;
left: 111px;
background: rgb(119, 14, 14);
position: absolute;
}
#secondtab:hover > ul {
margin: 0px;
height: 60px;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
top: 37px;
left: 261px;
background: rgb(119, 14, 14);
position: absolute;
}
#firsttab:hover > ul > li {
display: block;
padding: 10px;
height: 8px;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
}
#secondtab:hover > ul > li {
display: block;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
height: 8px;
}
#secondtab:hover > ul > li:hover {
border-bottom: 5px solid black;
}
#firsttab:hover > ul > li:hover {
border-bottom: 5px solid black;
}
#home {
background: rgb(119, 14, 14);
height: 16px;
border-bottom: 5px solid rgb(119, 14, 14);
}
li > ul {
list-style: none;
}
li > ul > li {
display: none;
}
/********************/
#middle > ul {
list-style: none;
}
<div id="navbar">
<ul>
<li id="home">
<a>Home</a>
</li>
<li>
<a>News</a>
</li>
<li id="firsttab">
<a>Computer</a>
<ul>
<li>Software</li>
<li>Hardware</li>
</ul>
</li>
<li>
<a>Internet</a>
</li>
<li id="secondtab">
<a>HandPhone</a>
<ul>
<li>Software</li>
<li>Hardware</li>
</ul>
</li>
<li>
<a>Online Stream</a>
</li>
</ul>
</div>
<div id="middle">
<ul>
<li>tab</li>
<li>konten</li>
<li>tab</li>
</ul>
</div>
First screenshot
Second screenshot
Try to add border-bottom: 5px solid transparent; to your li like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
/*Global Settings*/
a{
color: white;
}
body{
padding: 0px;
margin: 0px;
}
/********************/
/*Navigation Bar Setting*/
#navbar{
background: red;
height: 37px;
}
#navbar > ul{
padding: 0px;
margin: 0px;
list-style: none;
}
#navbar > ul > li{
/*display: inline;*/
float: left;
padding: 8px;
height: 16px;
padding-right: 10px;
text-align: center;
}
#navbar > ul > li:hover{
border-bottom: 5px solid rgb(0, 0, 0);
}
#firsttab:hover > ul{
margin: 0px;
height: 60px;
padding: 5px;
padding-left: 0px;
padding-right: 0px;
top: 37px;
left: 111px;
background: rgb(119, 14, 14);
position: absolute;
}
#secondtab:hover > ul{
margin: 0px;
height: 60px;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
top: 37px;
left: 261px;
background: rgb(119, 14, 14);
position: absolute;
}
#firsttab:hover > ul > li{
display: block;
padding: 10px;
height: 8px;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
border-bottom: 5px solid transparent;
}
#secondtab:hover > ul > li{
display: block;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
height: 8px;
border-bottom: 5px solid transparent;
}
#secondtab:hover > ul > li:hover{
border-bottom: 5px solid black;
}
#firsttab:hover > ul > li:hover{
border-bottom: 5px solid black;
}
#home{
background: rgb(119, 14, 14);
height: 16px;
border-bottom: 5px solid rgb(119, 14, 14);
}
li > ul{
list-style: none;
}
li > ul > li{
display: none;
}
/********************/
#middle > ul{
list-style: none;
}
</style>
</head>
<body>
<div id="navbar">
<ul>
<li id="home"><a>Home</a></li>
<li><a>News</a></li>
<li id="firsttab"><a>Computer</a>
<ul>
<li>Software</li>
<li>Hardware</li>
</ul>
</li>
<li><a>Internet</a>
</li>
<li id="secondtab"><a>HandPhone</a>
<ul>
<li>Software</li>
<li>Hardware</li>
</ul>
</li>
<li><a>Online Stream</a></li>
</ul>
</div>
<div id="middle">
<ul>
<li>tab</li>
<li>konten</li>
<li>tab</li>
</ul>
</div>
</body>
</html>
Updated my answer:
CSS:
#firsttab:hover > ul > li{
display: block;
padding: 10px;
height: 8px;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
border-bottom: 5px solid transparent; / *newly added */
}
#secondtab:hover > ul > li{
display: block;
padding-top: 5px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 15px;
height: 8px;
border-bottom: 5px solid transparent; / *newly added */
}
Related
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
So I'm trying to understand why when I specify the width for my .thenav class it is not expanding to the entire width of the page.
I UNDERSTAND that it is taking the characteristics of the .container class, but I don't understand why and what is the solution seeing that i specified the width? PLEASE HELP!
Here is my picture of what's happening (I attached an image of what's happening because the jsfiddle makes the div appear at 100% and it's not):
http://imgur.com/a/zsBqC
Here is my jsfiddle:
https://jsfiddle.net/CheckLife/yox7Ln1b/3/
Here's the code for reference:
HTML:
<div class="header">
<div class="container">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com"/>Home</a></li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()"></li>
<li><a href="#kobesec"/>Kobe</a></li>
<li><a href="#"/>Kevin Durant</a></li>
<li><a href="#"/>The Goat</a></li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header, nav, section, aside, footer, article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background:linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1{
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display:inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li{
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align:left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759 ;
}
.thenav li ul li a:hover{
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul{
position:absolute;
}
.thenav li:hover ul{
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top:2px;
color: white;
}
input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
}
A child div that does not have absolute positioning and has a width of 100% (unnecessary if it's display is the default of block) will be set to it's containers width. Your div.container has a width setting of 1300px and it is the parent element of div.thenav, therefore div.thenav's width will also be 1300px.
You can either remove width on the container:
.container {
margin: 0px auto;
background-size: cover;
/*width: 1300px; remove this */
height: 100%;
}
or:
Move div.thenav outside of div.container as in this code:
(https://jsfiddle.net/nod19rze/)
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<!-- contents of thenav here -->
</div>
<div class="container">
</div>
</div>
Either the container should be the first wrapper and then comes the header, which could solve the issue. I am not sure if this is what u need. Please check this fiddle:
https://jsfiddle.net/estgLn1q/1/
<div class="container">
<div class="header">
</div>
</div>
Or if you want to maintain the same html structure, then remove width:1300px from '.container' which will cause the container to take the same width as of its parent.
I would just move #box and .thenav out of .container and start that class after those elements.
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header,
nav,
section,
aside,
footer,
article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background: linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1 {
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display: inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li {
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align: left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759;
}
.thenav li ul li a:hover {
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul {
position: absolute;
}
.thenav li:hover ul {
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top: 2px;
color: white;
}
input[type=text],
input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com" />Home</a>
</li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()">
</li>
<li><a href="#kobesec" />Kobe</a>
</li>
<li><a href="#" />Kevin Durant</a>
</li>
<li><a href="#" />The Goat</a>
</li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
<div class="container">
</div>
</div>
I've checked some web pages I've developed. There are some css problems for li width.
Here is the code for the navigation menu:
ul.tabs {
padding: 0px;
list-style: none;
background: transparent;
border-bottom: 3px solid #ff6600;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-align: center;
position: relative;
width: 100%;
}
ul.tabs li {
background-color: #ff6600;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left: 0px;
width: 16%;
text-align: center;
}
ul.tabs li.current {
background: #f5ede3;
color: #ff6600;
}
<ul class="tabs">
<li data-tab="tabs-1" class="current">Amenities</li>
<li data-tab="tabs-5">Attractions</li>
<li data-tab="tabs-2">Rates</li>
<li data-tab="tabs-6">Calendar</li>
<li data-tab="tabs-4">Reviews</li>
<li data-tab="tabs-3">Inquire</li>
</ul>
But I get the following result:
The width of the li tag is 16%. And the number of li is 6. Why is the total width of li tags larger than the ul width?
Set box-sizing: border-box globally as a quick fix - see demo below:
*{
box-sizing: border-box;
}
ul.tabs {
padding: 0px;
list-style: none;
background: transparent;
border-bottom: 3px solid #ff6600;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
text-align: center;
position: relative;
width: 100%;
}
ul.tabs li {
background-color: #ff6600;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left: 0px;
width: 16%;
text-align: center;
}
ul.tabs li.current {
background: #f5ede3;
color: #ff6600;
}
<ul class="tabs">
<li data-tab="tabs-1" class="current">Amenities</li>
<li data-tab="tabs-5">Attractions</li>
<li data-tab="tabs-2">Rates</li>
<li data-tab="tabs-6">Calendar</li>
<li data-tab="tabs-4">Reviews</li>
<li data-tab="tabs-3">Inquire</li>
</ul>
With this should work:
ul.tabs li{
background-color: #ff6600;
border-top-left-radius:5px;
border-top-right-radius:5px;
border:none;
color: #f5ede3;
display: inline-block;
padding: 5px 15px;
cursor: pointer;
margin-left:0px;
width:16%;
text-align:center;
box-sizing: border-box;// Try adding this line (:
}
I'm trying to put some bullet points underneath a breadcrumb-style timeline, however I can't figure out how to do it. I have tried this:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<br>
<li> point here</li>
</ul>
</div>
<div id="crumbs">
<ul>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
But it separates one part of the timeline from the rest. I would like the timeline to be together.
Here is the HTML code of the working timeline, without bullet points:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class= "point">
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring</li>
</ul>
</div>
Can someone let me know how I would do this? Thanks.
Here is the CSS:
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height:25px;
}
#crumbs {
text-align: center;
margin-left: em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0px 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height:25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before, #crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
/*Max width for smaller screen size*/
#media (max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before, #crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
I think that put another unsorted list inside of the items, may be what you are looking for:
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul class="point">
<li>
<b>STEP 1:</b>
<ul>
<li>
Sign up and pay for<br>the options<br> you want
</li>
</ul>
</li>
<li>
<b>STEP 2:</b>
<ul>
<li>
Sign up for<br>online sessions<br>(held most weeks)
</li>
</ul>
</li>
...
</ul>
</div>
Add this ruleset to CSS:
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
and add this above and under each <li>:
<li class='bullet'>∗</li>
PLUNKER
SNIPPET
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
list-style: none;
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
.bullet {
font-size: 50px;
color: #000;
text-align: center;
margin: 20px auto;
}
/* Responsive */
#media (max-width: 1100px) {
#crumbs ul {
display: block;
margin-left: 20%;
margin-right: 20%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 20px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding-right: 0;
}
}
/*Max width for smaller screen size*/
#media(max-width: 700px) {
#crumbs ul {
display: block;
margin-left: 5%;
margin-right: 10%;
}
#crumbs ul li {
display: block;
width: 100%;
}
#crumbs ul li a {
float: none;
padding: 10px 0 0 0;
margin: 0 0 5px 0;
}
#crumbs ul li a:before,
#crumbs ul li a:after {
border-top: 0;
border-bottom: 0;
border-left: 0;
}
#crumbs ul li:first-child a {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
#crumbs ul li:last-child a {
border-radius: 0;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Sign-Up Instructions</h1>
<div id="crumbs">
<ul>
<li class='bullet'>∗</li>
<li><b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
</li>
<li class='bullet'>∗</li>
<li><b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
</li>
<li class='bullet'>∗</li>
<li><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class='bullet'>∗</li>
<li><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
<li class='bullet'>∗</li>
</ul>
</div>
</body>
</html>
May be below code will help! I have removed media queries form styles to avoid complexity.
There
I have added a nested ul within the main ul list items.
Added a CSS class named "test" to the nested ul. Use a proper name to the class accordingly.
Break the style inheritance from the parent ul by adding !important
Add the styles to make it as a usual unorderd list
h1 {
margin-bottom: 20px;
color: #4679bd;
font-weight: 400;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
body {
margin: 0px;
font-family: Helvetica;
background: #f3f3f3;
line-height: 25px;
}
#crumbs {
text-align: center;
margin-left: 1em;
margin-right: 1em;
}
#crumbs ul {
display: inline-table;
position: relative;
}
#crumbs ul li {
display: inline;
}
ul.test {
float: left;
margin-top: 200px;
margin-left: -150px;
}
ul.test li {
list-style: square!important;
display: block!important;
display: list-item!important;
}
#crumbs ul li a {
display: block;
float: left;
height: 130px;
background: #8bdbed;
text-align: center;
padding: 50px 0px 0 120px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: black;
line-height: 25px;
}
#crumbs ul li a:after {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #8bdbed;
position: absolute;
right: -90px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
border-left: 90px solid #f3f3f3;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding-left: 20px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
display: none;
}
<div id="crumbs">
<ul class="list-unstyled">
<li class="">
<b>STEP 1:</b><br>Sign up and pay for<br>the options<br> you want
<ul class="test">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li></li>
<li class="">
<b>STEP 2:</b><br>Sign up for<br>online sessions<br>(held most weeks)
<ul class="test">
<li>1st point here</li>
<li>2nd point here</li>
<li>3rd point here</li>
</ul>
</li>
<li class=""><b>STEP 3:</b><br>Mock<br>OSCEs
</li>
<li class=""><b>STEP 4<br>(OPTIONAL):</b><br>Attend private<br>tutoring
</li>
</ul>
</div>
JSFiddle
How can I decrease the size of a <nav> tag in CSS? I cannot seem to figure it out. I have provided all of the code from my project below. My code did have PHP, but I have removed it due to it being unnecessary. Here is a JSFiddle, if you wish to preview the code there.
HTML and CSS:
#top-menu {
top: 0;
position: fixed;
}
nav {
position: relative;
/*float: left;*/
width: 100%;
background: #1E1E1E;
/* display: table; */
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
/*--------------------------------------------*/
#menu {
background-color: #1E1E1E;
text-align: center;
padding-bottom: 0px;
}
body {
margin: 0px;
}
.clearfloat {
clear: both;
margin: 0;
padding: 0;
}
/*--------------------------------------------*/
#bottom {
float: left;
width: 100%;
background: #1E1E1E;
/*display: table; */
margin: 0;
text-align: center;
min-height: 25px;
height: 25px;
border-width: 0px;
margin-top: 0px;
padding-top: 0px;
bottom: 0px;
position: fixed;
}
#bottom ul ul {
display: none;
}
#bottom ul li:hover > ul {
display: block;
}
#bottom ul {
background: #1E1E1E;
color: white;
padding: 0 0;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
}
#bottom ul:after {
content: "";
clear: both;
display: block;
}
#bottom ul li {
float: left;
}
#bottom ul li:hover:nth-child(1) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover:nth-child(2) {
background: #1E1E1E;
color: #757575;
text-decoration: none;
}
#bottom ul li:hover {
background: #1E1E1E;
color: white;
text-decoration: underline;
}
#bottom ul li:hover a {
color: #fff;
}
#bottom ul li a {
display: block;
padding: 25px 40px;
color: #757575;
text-decoration: none;
}
#bottom ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
width: auto;
}
#bottom ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#bottom ul ul li a {
padding: 15px 40px;
color: #fff;
}
#bottom ul ul li a:hover {
background: #4b545f;
}
#bottom ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
/*--------------------------------------------*/
.bottommenuitem {
vertical-align: middle;
padding: 25px 40px;
color: #757575;
}
<!DOCTYPE html5>
<html>
<head>
<title>Firma A/S</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="cssMenu.css">
</head>
<body>
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
<!-- PHP was here -->
</nav>
</nav>
<div style="margin-top: 410; margin-bottom: 115">
<!-- More PHP was here -->
</div>
<nav id="bottom">
<ul>
<li class="bottommenuitem">Firma A/S</li>
<li class="bottommenuitem">phone No</li>
<li>xxx#xxx.xx
</li>
</ul>
</nav>
</body>
</html>
Any help is appreciated, thank you.
Please try this:
nav ul {
background: #1e1e1e none repeat scroll 0 0;
border: medium none;
border-radius: 0;
color: white;
display: inline-table;
list-style: outside none none;
margin: 0;
padding: 10px;
position: relative;
}
nav {
float: left;
width: 100%;
background: #1E1E1E;
display: table;
margin: 0;
text-align: center;
height: 25px;
border: none;
border-width: 0;
margin: 0;
padding: 10px 10px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
border: none;
border-width: 0;
}
nav ul {
background: #1E1E1E;
color: white;
padding: 10px 10px;
border-radius: 0;
list-style: none;
position: relative;
display: inline-table;
border-width: 0;
border: none;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
border: none;
border-width: 0;
}
nav ul li:hover {
background: #1E1E1E;
background-color: orange;
color: white;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
height: 25px;
padding: 10px 10px;
color: #757575;
text-decoration: none;
border: none;
border-width: 0;
}
nav ul ul {
background: #1E1E1E;
color: white;
border-radius: 0px;
padding: 10px 10px;
position: absolute;
top: 50px;
border-width: 0;
margin-bottom: 0;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 10px;
color: #fff;
height: auto;
}
nav ul ul li a:hover {
background: #4b545f;
background-color: orange;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav li#english a {
background: url(images/english.jpg) no-repeat;
background-position: center center;
}
nav li#english a:hover {
background: url(images/english.jpg) no-repeat;
background-position: center center;
background-color: orange;
}
nav li#english a.current {
background: url(images/english.jpg) no-repeat;
background-position: center center;
cursor: default;
}
<nav id="top-menu">
<p id="menu" style="margin-bottom: -25">
<a href="Index.html">
<img src="Tilbage.jpg" alt="Tilbage" width="243" height="243" />
</a>
<img src="Top_10.jpg" alt="" width="739" height="243" />
</p>
<nav id="top">
<ul>
<li>Velkommen
</li>
<li>Firma A/S
<ul>
<li>Koncern oversigt
<ul>
<li>Ejendomsselskaber
</li>
<li>Investeringsselskaber
</li>
<li>Øvrige selskaber
</li>
<li>Lukkede eller solgte selskaber
</li>
</ul>
</li>
<li>Jubilæum
</li>
<li>Årsrapport
</li>
<li>Galleri
</li>
<li>Kontaktoplysninger
</li>
</ul>
</li>
<li>Privat
</li>
<li>Køb og salg
</li>
<li><a id="english" href="index.php">In English</a>
</li>
</ul>
</nav>
</nav>
If you are talking about the fixed nav id=top-menu, just add a height to the CSS for the id selector. It works for me. If you have problems with it being overridden, make sure that it is placed lower in the CSS file or add !important
after the rule.
#top-menu {
height: 6px;
}
#top-menu {
height: 6px !important;
}