equally distribute ul list across div - css

i can't seem to figure out why this works:
#inside-footer {
display: inline-block;
margin-left: auto;
margin-right: auto;
font-size: 85%;
}
#inside-footer ul.footer_nav {
text-align: left;
float: left;
margin: 20px 10px;
position: relative;
width: 164px;
}
<div id="inside-footer">
<ul class="footer_nav">
<h4>Zeigeist</h4>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact & Support
</li>
<li>
Training
</li>
<li>
Site Status
</li>
</ul>
<ul class="footer_nav">
<h4>Tools</h4>
<li>
Chapter Generator
</li>
<li>
Activies Board
</li>
</ul>
<ul class="footer_nav">
<h4>Documentation</h4>
<li>
Chapter Sites
</li>
<li>
Developers
</li>
</ul>
<ul class="footer_nav">
<h4>External Links</h4>
<li>
News
</li>
<li>
Media
</li>
</ul> <!-- /upper-footer-->
</div><!-- /inside-footer -->​
but on my site http://zmgc.net/ the list items are across, and not under the header tags.
i would like to display it like http://jsfiddle.net/ypr8g/13/ but equally distributed within the yui3-u-19-24 div and i perhaps i can split this with another yui3-g and put each within a yui3-u-1-4 div but does not seem right!
what am i missing?
thanks


Where you have #inside-footer li {
float: left;
margin-top: 5px;
padding: 0;
} it needs the float taken out as this displays the li's side by side, change it to #inside-footer li {
margin-top: 5px;
padding: 0;
} and it will display as you want it i.e. below the header tags.

Related

How do I make my CSS Drop-down menu work?

I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}

To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Having trouble with padding a CSS menu

I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)

So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.

Attach button next to side menu

I am using the Simple Side Nav: http://startbootstrap.com/template-overviews/simple-sidebar/
I want to attach a button next to side of this Nav, on the Right Side which I will be using to hide and show the Nav Bar.
I have created a JSFiddle: https://jsfiddle.net/4q08khy1/
This button is the position i want it to be, as you can see in the image:
But it is hiding behind the Content Part of the page, is there a way to fix this?
my Left Nav:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<span> << </span>
</div>
and Style on toggle
<style>
.toggle {
background: #1ABC9C;
color: #eee;
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
right: -50px;
top: 18px;
box-shadow: 5px 0 0 rgba(0,0,0,0.1);
z-index: 5000;
}
</style>

Try adding following CSS to your code:
a#menu-toggle {
margin: -25px 0 0 -36px;
}

third level of CSS dropdown menu not appearing in two-column format

I have constructed a three-level dropdown using CSS. It works until I add this to the CSS:
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
The HTML is basically just two unordered lists (by the way, the "feelings" list and the "needs" list have the same content -- that will change eventually -- this is just for experimenting!):
<div class="feelings">
<ul class="nav feelings">
<li class="feelings" id="feelings"> FEELINGS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="needs">
<ul class="nav needs">
<li class="feelings" id="needs"> NEEDS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
ul ul, ul ul ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.nav feelings needs {
padding-left: 10px;
padding-right: 10px;
width: 200px;
color:#ff0000;
background-color:#ffffff;
}
.nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
background-color:#ffffff;
}
.nav li, .nav li li {
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
background-color:#ffffff;
}
.nav a {
width: 200px;
overflow:hidden;
}
.nav li a{
display: block;
}
.nav ul {
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
.nav ul ul {
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
position: relative;
}
.nav ul li {
display: block;
visibility:visible;
}
.nav li:hover > ul, nav li:hover * {
display: block;
visibility:visible;
z-index:1;
}
If I eliminate the first CSS item (setting the menu to two columns), the last level of the menu appears (the items in small letters as opposed to all caps). With the two-column CSS in place, the third level doesn't appear.
Here is a fiddle:
http://jsfiddle.net/Lq7NK/2/
Interestingly, on the fiddle, the third level does seem to be trying to appear a bit, but it's certainly not working the way I'd like it to, which is the third level appearing in a vertical column to the right of the second level item.
Any thoughts will be appreciated!
/* image below was added after original question, in response to a request for a picture */
The top screenshot in this picture shows what comes up now when I hover over the first feeling, AFRAID -- and it is actually pretty much what I want (though obviously it needs some prettifying): two sets of two-column dropdowns, namely, the one in all caps and the one in all small letters. (This is basically with the code shown above, but with one change, namely, removing ul ul to leave only ul ul ul as suggested by user3369554.) However, when I move the cursor, stuff starts jumping all over the place; the screenshot on the bottom shows one state, but things just jump all over in a very disconcerting way. For instance, I would like to be able to just move the cursor over to where ANGRY is at the top of the second column. But if I try to do that, it jumps to somewhere else. And if I go to that place, it jumps to still another location. If the both sets of emotions (all caps and all small letters) would hold still in the configuration shown at the top, and let me click on them, I'd be happy.

I don't know if I'm understanding well, but you can get the third level in a 2 column format to the right of the second level, if you replace:
ul ul, ul ul ul
for
ul ul ul
Demo: http://jsfiddle.net/QKkg4/
Is that what your're after?

Link Inside <li> No Working

Pretty simple nut I'm trying to crack. I'm doing image rollovers with CSS only. When I plugged in my a href link, it just does not work. By not work I mean, it does not act like it's a link and as a result you cannon click through to the page. Figuring it has something to do with the <li> but I can't figure out what. Here's my HTML and CSS:
CSS
ul.navigation,
ul.navigation ul {
margin: 25px 0 0 0;
}
ul.navigation li {
list-style-type: none;
margin:15px;
}
.AboutUsNav{
display: block;
width: 159px;
height: 54px;
background: url('../images/N_About_Us.png') bottom;
text-indent: -99999px;
}
.AboutUsNav:hover {
background-position: 0 0;
}
HTML
<div>
<ul class="navigation">
<li class="AboutUsNav">About Phin &amp Phebes Ice Cream</li>
<li class="FlavorsNav">Ice Cream Flavors</li>
<li class="WheretoBuyNav">Where to Buy Our Ice Cream</li>
<li class="WholesaleNav">Wholesale Orders Ice Cream</li>
<li class="ContactUsNav">Contact Phin & Phebes Ice Cream</li>
<li>about</li>
</ul>
</div>

Your .AboutUsNav has text-indent: -99999px;, pulling the a outside of the clickable viewport.
You probably want to put the negative text-indent on the a itself, and then set the a element to display: block; width: 100%; height: 100%, depending on your circumstances.

don't apply the text-indent and background to the list - do it to the link instead.
Example:
<div id=​"main_nav">
<li class="home">
Home
</li>
<li class="news">
News
</li>
</div>
CSS:
#main_nav a {
background-image:url();
}
#main_nav .home a {
width: 82px;
background-position: 0px 0px;
}
#main_nav .news a {
width: 85px;
background-position: 82px 0px;
}

thank you for your help. I tried the approach you both recommended. I think this definitely works under certain circumstances. For me, my background image just wasn't showing up but the links were working.
I ended up solving this problem by leaving the CSS the same but changing the HTML markup as so:
<div>
<ul class="navigation">
<li><a class="AboutUsNav" href="/about">About Phin & Phebes Ice Cream</a></li>
<li><a class="FlavorsNav" href="/flavors">Phin & Phebes Flavors</a></li>
<li><a class="WheretoBuyNav" href="/buy">Where to Buy Phin & Phebes Ice Cream</a></li>
<li><a class="WholesaleNav" href="/wholesale">Wholesale Orders Ice Creamf</a></li>
<li><a class="ContactUsNav" href="/contact">Contact Phin & Phebes Ice Cream</a></li>
</ul>
I was working off this demo, which didn't include an unordered list: http://kyleschaeffer.com/best-practices/pure-css-image-hover/

Resources