I've been asking way too many CSS/HTML questions on the questions thread lately... so I'm just gonna make a new thread and put all my stuff in.
Knowing nothing of HTML CSS, as of two weeks ago I decided to learn as much as possible by not letting DreamWeaver write all the codes for me. Instead, I'd do everything using ONLY Notepad.
With that said, this is part of a larger page I've been working on:
Hardest menu I ever did:
UGH! <---click!
The menu works fine most of the time, but there are options that display like this:
At first I thought it was a problem with the sub-menu width, but even when I gave it enough room to fit the text would still pile on top of each other, dispite being formated with [*] tags.
These other menus have more than enough space for text, and they still behave wierdly:
Of course, here's the codes I used
ul {
text-align:center;
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
background: white
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
border:1px black solid;
border-top:none;
padding:5px;
background: white
}
li > ul {
top: auto;
left: auto;
}
li:hover ul, li.over ul {
display: block; }
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
Posts
Wait...crap, you're using text, and I used pictures (the button that was scroll-over was an image and not text). I don't know if Fireworks will help. I'm under the impression that Dreamweaver can do text ones itself...I don't know. I'm talking too much without solving your problem. Hope that this might've helped.
After you work that part out, things become a little more clear in your CSS declarations. You've got li / ul combinations that are getting me confused. I can't see your first image (it's not loading for some reason) but I can address your funky "grouping" links (where they don't go to the next line).
My suspicion is that your "list-style: none;" declaration is taking away the "move to next line" property. Then you're having them "float: left" which means, if there is room, they will stay on the same line as the previous li. You can force them to go to the next line by "clear: both", which basically disregards the room situation and shoves it on a new line.
But you don't want every li to do this, because you have your top level menu using li's that you want to all be on the same line. This is where the good naming comes in handy. So we're going to take away the id "nav" since it's being used all over the place. We'll also get rid of the "menu" div, since we can use the first ul as the "menu" and get the same effect. Then we'll make the "nav" a class, and every ul under the "menu" ul gets the "nav" class. This allows us to access the "nav" li's without touching the "menu" li's. (Man, I hope this all making sense...)
I'll show you code now, which hopefully will make more sense.
First the html: notice I've gotten rid of the "menu" div and made a "menu" ul. Also, the other ul's are now "nav" classes, which lets us access it's li's without touching the "menu"s li's.
Next the CSS: notice the ".nav li" declaration, which is where the magic happens. I've also changed your link declarations (a.menu-link) because you can use inheritance to your advantage and only specify a property once. The other properties will grab those, and you can just change what you want to be different for this particular situation.
Let me know if this makes sense. Hopefully it helps.
And to jump on the notepad bandwagon. I use Notepad++ which has coloring and tabs, which is nice when you're working with lots of text files. There are plenty of others though that are great. Just find one you like and go with it. They do help a lot though.
Awesome!!
I'm a Notepad editor when on my PC, which has been fine. When I use my Mac, though, I use "Taco HTML Edit", which I downloaded for free from download.com. It's essentially like Notepad, but does the color-coded thing for certain tags, and can create tables for you.
Actually, I think that's the only time I ever use a program, is to create the base coding for tables. It's just 10x faster for me.
I've noticed that Dreamweaver can "add" superfluous tags into the coding, making it more jumbled and sometimes screwing up the page in general. Notepad obviously doesn't do that, though.
"And that's why I use one."
I swear by lynda.com. Really I do. It's more than worth it, in my opinion, and if you are more of a visual learner, it will definitely help.