How to remove whitespace from <li> - html

I have this issue, I can't for the life of me try and remove the whitespace in this (li) tag, below I've include a screen capture, what I'm trying to do is remove the white before the grey menu bar, as well make the whole menu bar line up to bottom grey bar.
CSS
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu li {
float: left;
margin: 0 0.5em 0 0.5em;
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0;
}
HTML
<div class="menu">
<div>
<ul id="MenuGreyBar">
<li style="left: 0px;">
</li>
</ul>
</div>
<ul>
<li>
About Us
</li>
<li >
Help & Support
</li>
<li >
Law & Information
</li>
<!-- ... There are a few more. -->
</ul>
</div>
The image: (it didn't let me embed)
http://db.tt/tcSr5kGv

I'm not positive if this is your issue, but here's my guess:
.menu li {
float: left;
margin: 0 0.5em 0 0.5em; /* We set a left margin for all menu elements here
which will cause them to jut over. We want this for
most elements*/
left: 0px;
padding: 0;
list-style: none;
}
.menu li a {
float: left;
display: inline-block;
width: 161.3px;
text-decoration: none;
text-align: left;
font-family: 'MyriadPro', sans-serif;
font-size: .875em;
color: #FFF;
height: 1.2em;
}
#MenuGreyBar li a{
display: block;
width: 200px;
list-style: none;
left: 0px;
height: 1.2em;
float: left;
margin: 0; /*The first menu item is special and needs no margin, so we try
to clear it, however we are clearing the anchor element in the li
block, and the margin is applied on the li block itself, so the li
block's margin is rendered before the anchor has any say*/
}
So what we need to do is clear the margin property on the actual li element, this code will do it:
#MenuGreyBar li{
margin: 0;
}
That should do it, my best guess.

Related

Position div inside navigation bar

I'm trying to position a website title (div) to the left of my navigation bar. I thought of creating another
<li><a>
element and put that as the website title, but I don't want it to have some of the propertise like font family and hover.
This is currently what I have:
and this is what I would like to achieve:
So in summary I would like to add a div to put my website title to the left of the navigation buttons.
#nav {
width: 100%;
height: 50px;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #3D3D3D;
}
#nav ul {
list-style: none;
width: 1000px;
margin: 0 auto;
padding: 0;
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 15px;
height: 50px;
text-decoration: none;
font-family: 'Quicksand', sans-serif;
font-size: 20px;
color: #FFFFFF;
}
#nav li a:hover {
color: #FF4343;
background-color: #FFFFFF;
}
<div id="nav">
<ul>
<li>Prev 1
</li>
<li>Prev 1
</li>
<li>Prev 1
</li>
</ul>
</div>
I think you've got too much in your CSS. Just changing the ul to:
display:inline;
and then setting some line-height does the trick.
See this fiddle: https://jsfiddle.net/x20mkx1n/5/ where I've taken out much of your CSS.

How to remove indentation of list items

I have padding-left set to zero and margin-left set to zero and yet my list items are still being indented, whereas I want them to align with the h2 element. My code and screenshot of problem:
My login.jsp:
<!-- Welcome page options -->
<div class="homepageNavButtons">
<h2 id="loginLabel" class="homepageOptionsText">Welcome to the SGA web application. Choose
an option:</h2>
<ul class="homepageNavButtonsList">
<li><a class="loginOptions"
href="${pageContext.request.contextPath}/menu" tabindex="1">
Click here to login</a></li>
<li><a class="registerOptions"
href="${pageContext.request.contextPath}/register" tabindex="2">Click
here to register </a></li>
</ul>
</div>
My css:
.homepageNavButtons {
width: 70%;
background-color: gray;
position: relative;
top: 70px;
margin: auto;
}
.homepageNavButtonsList ul {
margin-left: 0;
padding-left: none;
list-style: none;
}
.homepageNavButtonsList li {
list-style-type: none;
display: inline-block;
margin-right: 20px;
margin-left: 0;
padding-left: none;
list-style: none;
padding: 0;
}
.loginOptions {
color: blue;
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
}
.registerOptions {
color: blue;
text-decoration: none;
font-family: sans-serif;
font-size: 16px;
}
You are not selecting the ul to remove all its styles. Try this:
ul.homepageNavButtonsList {
margin-left: 0;
padding-left: 0;
list-style: none;
}
You had .homepageNavButtonsList ul with padding-left: none and of course you didn't have any ul inside the .homepageNavButtonsList

Coding a horizontal drop down leaves links on top of eachother

I'm trying to code a drop down menu where the hovered over list item displays a list of links horizontally.
What is happening with my code right now is that all the links are right on top of each other, and I can't for the life of me figure out how to fix them.
I've tried adding height and width, and then adjusting the padding, margins, you name it. Somehow using display: inline; hasn't been enough to accomplish this.
If anyone could help me out with this, that would be much appreciated.
<header>
<nav>
<div class="container">
<div class="wrapper">
<h1><img alt="logo" src="logosmall.jpg" />
<strong>New Ideas</strong>Education
</h1>
<ul>
<li>about us</li>
<li>teachers
<ul>
<li>Literature</li>
<li>International</li>
<li>Staff</li>
</ul>
</li>
<li>lessons</li>
<li>reviews</li>
</ul>
</div>
</div>
</nav>
</header>
And the CSS:
ul {
list-style-type: none;
display: inline;
}
header nav {
}
header nav ul {
background: #fff;
padding: 2px 0 0 0;
list-style: none;
position: relative;
float: right;
display: inline;
}
header nav ul:after {
content: "";
clear: both;
display: block;
}
header nav ul ul:after {
content: "";
clear: both;
display: inline;
margin: 0 20px 0 0;
}
header nav ul li {
float: left;
padding: 10px 20px;
text-transform: uppercase;
color: #757575;
display: inline;
}
header nav ul li:hover > ul {
color: #06cbe2;
display: inline-table;
padding: 5px 60px;
margin: 0 20px 0 0;
float: left;
position: absolute;
}
header nav ul li:hover a {
color: #06cbe2;
}
header nav ul li a {
display: inline;
color: #757575;
text-decoration: none;
text-transform: uppercase;
}
header nav ul ul {
background: #fff;
padding: 0px 20px 0px 0px;
list-style: none;
position: absolute;
float: left;
display: none;
}
header nav ul ul li {
position: absolute;
display: inline;
margin: 0 30px 0 0;
color: #757575;
text-transform: uppercase;
padding: 10px -60px;
font-size: 10pt;
}
header nav ul ul li a {
padding: 10px -60px;
color: #757575;
text-decoration: none;
text-transform: uppercase;
display: inline-table;
font-size: 6pt;
}
header nav ul ul li a:hover a {
color: #06cbe2;
}
firstly make sure where and how you wanted to display the controls, if you saying all controls are sitting on over the other then all those positions have same value, the css have same values for almost all ID and Class, I can give you and example to fix and it might help you to fix your problem
Imagine you need two dropdown list one is on left and one is on right side then do this
NOTE(its just an example)
<div id=Main>
<div id=left></div>
<div id=right></div>
</div>
now provide height and width as 100% to "Main", then provide css for "left" as below
#left
{
height:100%;
width:50%;
border:1px solid black;
background-color: #ffffff;
float:left;
}
#right
{
height:100%;
margin-left:50%;
border:1px solid black;
background-color: #ffffff;
float:right;
}
and inside to those div's use your dropdown controls or any controls and modify the width if you want, Let me know if it works, will help you

Spanning navigation bar CSS

I seem to be having trouble getting my navigation bar to span the width of the page and to locate itself underneath the header I've added. Could someone please help me?
<body>
<div id= "header">
FOOD
</div>
<div id= "navbar">
<ul>
<li>Home </li>
<li>Favs </li>
<li>Cusine
<ul>
<li>Asian </li>
<li>Europe </li>
</ul>
</li>
<li>Recipes </li>
<li>FAQ </li>
<li>Contact Us </li>
</ul>
</div>
</body>
This is the css I've used. I kept adding widths but it just seems to have different widths.
#navbar
{
clear: both;
float: left;
margin: 0px;
padding: 0px;
width: 100%;
font-family: sans-serif;
z-index: 1000;
position: relative;
top: 100px;
}
#navbar ul
{
list-style: none;
padding: 0px;
margin: 0px;
float: right;
position: relative;
right: 50%;
}
#navbar ul li
{
float: left;
position: relative;
left: 50%;
}
#navbar ul li a
{
display: block;
margin: 0px;
text-decoration: none;
background-color: #735D41;
color: white;
font-weight: bold;
text-align: center;
border: 1px solid;
width: 100%;
}
#navbar ul li ul li a
{
background-color: #735D41;
color: white;
}
#navbar ul ul
{
display: none;
position: relative;
left: 0px;
right: auto;
}
#navbar ul ul li
{
left: auto;
margin: 0px;
clear: left;
width: 100%;
}
A good option would be to remove most of your floats and relative positioning and instead use display:table on the ul and display:table-cell on the lis. This will enable you to stretch the nav across the screen. Try it with this:
#navbar ul {
list-style: none;
padding: 0px;
margin: 0px;
width:100%;
display:table;
}
#navbar ul li {
display:table-cell;
}
See an Example here
In this example I used your code but changed and removed a few things. It should be sufficient enough to give you a good idea of what to do.

:Last-Child not working with Nav Bar?

<div id="header"><!--start #header-->
<img id="logo" height="80" src="../resources/CHUG-LOGO.png" />
<ul>
<li id="home"><h2>Home</h2></li>
<li id="about"><h2>About</h2></li>
<li id="store"><h2>Store</h2></li>
<li id="contact"><h2>Contact</h2></li>
</ul>
</div><!--end #header-->
#header ul {
padding: 0px;
list-style-type: none;
margin: 0px;
float: right;
}
#header ul li {
text-align: center;
display: block;
margin: 0px;
float: left;
padding-top: 45px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height: 65px;
border-left: 1px solid #755b2c;
border-right: 1px solid #b99e68;
}
#header ul li h2 {
min-width: 105px;
margin: 0px;
padding: 0px;
display: inline-block;
color: #000;
font-size: 20px;
font-weight: bold;
}
This is the code I have for my nav bar, and I am trying to remove the right border on the last list item. I know I need to use the psuedo identifier :last-child, but I can't seem to get it to work. Any ideas?
The lis are technically not children of the ul element since they are wrapped by a elements. Move the a to the inside of the li and use the same code again.
#header ul a:last-child li {
border-right: none
}
but don't forget that last:child doesn't work in IE6, IE7 and IE8:
http://quirksmode.org/css/contents.html