Toaster's CSS Notepad Challenge!

MagicToaster · January 2007

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

CSS wrote:

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 */

html wrote:

<div id="menu">

<ul id="nav">
[*]Visitantes&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
[*]Productos y servicios
[*]Directorio de proveedores
[*]Preguntas frecuentes
[*]Glosario
[/list]

[*]Asegurados&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
[*]Productos y servicios
[*]Directorio de proveedores
[*]Preguntas frecuentes
[*]Formularios
[*]Glosario
[/list]

[*]Grupos&nbsp&nbsp&nbsp
<ul id="nav" style="width:165px">
[*]Empresas
[*]MCS Online
[*]Productos y servicios
[*]Directorio de proveedores
[*]Preguntas frecuentes
[*]Glosario
[/list]

[*]Productores&nbsp&nbsp&nbsp
<ul id="nav" style="width:166px">
[*]Productos y servicios
[*]Directorio de proveedores
[*]Preguntas frecuentes
[*]Glosario
[/list]

[*]Proveedores&nbsp&nbsp&nbsp
<ul id="nav" style="width:230px">
[*]MCS Provinet
[*]AdministraciÃ³n de la red
[*]Administradores y mÃ©dicos IPA
[*]MCS HIPAA
[*]FacturaciÃ³n electrÃ³nica
[*]Preguntas frecuentes
[*]Archivos IPA
[*]Elegibilidad asegurados
[/list]

[*]Valores aÃ±adidos&nbsp&nbsp&nbsp
<ul id="nav" style="width:100px">
[*]MCS Alivia
[*]MCS Solutions
[*]MCS Farmaflex
[*]MCS Educa
[*]MCS Medilinea
[/list]

[*]Conoce MCS&nbsp&nbsp&nbsp
<ul id="nav" style="width:115px">
[*]Perfil corporativo
[*]VisiÃ³n y misiÃ³n
[*]Actividades
[/list]

[*]HIPAA&nbsp&nbsp&nbsp
<ul id="nav" style="width:180px">
[*]Transaccione electrÃ³nicas
[*]Seguridad y firma electrÃ³nica
[*]ContÃ¡ctenos
[*]Privacidad
[*]Formularios
[/list]

[*]Classicare&nbsp&nbsp&nbsp

[*]Home

[/list]

</div>

javascript wrote:

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;

srsizzy · January 2007

I actually did this yesterday, and I used Fireworks. Of course, I don't know if you have Fireworks, but it can do all of that itself. If I had time I could make it and send you the files, but I have rehearsals/performances until 10 everyday until Thursday. You can download the Fireworks trial actually, and if you search something like "drop down menu fireworks" in Google you should get an explination on how it's done.

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.

no_toast · January 2007

MagicToaster wrote:

Instead, I'd do everything using ONLY Notepad.

Not really anwering your questions here but are you really using notepad? Because there are plenty of free editors out there with code highliting, tabs, auto-pretty-printing. They don't do the code for you but are much more convenient to use.

Grifter · January 2007

Yeah, there's a lot of plain text editors that will auto colour your code so that you know where it is and stuff. Much better for editing than using notepad

monkeypoo · January 2007

Okay, first, you're using some clunky code. You should only use an id once in your html. The point of an id is a direct mapping to an element in your page. If something needs to be repeated, use a class instead. (You did this in a few places.)

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.

<body>
<div id="container">

<ul id="menu">
  [*][url="#"]Visitantes[/url]
    <ul class="nav" style="width: 165px;">
      [*][url="#"]Productos y servicios[/url]
      [*][url="#"]Directorio de proveedores[/url]
      [*][url="#"]Preguntas frecuentes[/url]
      [*][url="#"]Glosario[/url]
    [/list]
  

  [*][url="#"]Asegurados[/url]
    <ul class="nav" style="width: 165px;">
      [*][url="#"]Productos y servicios[/url]
      [*][url="#"]Directorio de proveedores[/url]
      [*][url="#"]Preguntas frecuentes[/url]
      [*][url="#"]Formularios[/url]
      [*][url="#"]Glosario[/url]
    [/list]
  

  [*][url="#"]Grupos[/url]
    <ul class="nav" style="width: 165px;">
      [*][url="#"]Empresas[/url]
      [*][url="#"]MCS Online[/url]
      [*][url="#"]Productos y servicios[/url]
      [*][url="#"]Directorio de proveedores[/url]
      [*][url="#"]Preguntas frecuentes[/url]
      [*][url="#"]Glosario[/url]
    [/list]
  

  [*][url="#"]Productores[/url]
    <ul class="nav" style="width: 166px;">
      [*][url="#"]Productos y servicios[/url]
      [*][url="#"]Directorio de proveedores[/url]
      [*][url="#"]Preguntas frecuentes[/url]
      [*][url="#"]Glosario[/url]
    [/list]
  

  [*][url="#"]Proveedores[/url]
    <ul class="nav" style="width: 230px;">
      [*][url="#"]MCS Provinet[/url]
      [*][url="#"]AdministraciÃ³n de la red[/url]
      [*][url="#"]Administradores y mÃ©dicos IPA[/url]
      [*][url="#"]MCS HIPAA[/url]
      [*][url="#"]FacturaciÃ³n electrÃ³nica[/url]
      [*][url="#"]Preguntas frecuentes[/url]
      [*][url="#"]Archivos IPA[/url]
      [*][url="#"]Elegibilidad asegurados[/url]
    [/list]
  

  [*][url="#"]Valores aÃ±adidos[/url]
    <ul class="nav" style="width: 100px;">
      [*][url="#"]MCS Alivia[/url]
      [*][url="#"]MCS Solutions[/url]
      [*][url="#"]MCS Farmaflex[/url]
      [*][url="#"]MCS Educa[/url]
      [*][url="#"]MCS Medilinea[/url]
    [/list]
  

  [*][url="#"]Conoce MCS[/url]
    <ul class="nav" style="width: 115px;">
      [*][url="#"]Perfil corporativo[/url]
      [*][url="#"]VisiÃ³n y misiÃ³n[/url]
      [*][url="#"]Actividades[/url]
    [/list]
  

  [*][url="#"]HIPAA[/url]
    <ul class="nav" style="width: 180px;">
      [*][url="#"]Transaccione electrÃ³nicas[/url]
      [*][url="#"]Seguridad y firma electrÃ³nica[/url]
      [*][url="#"]ContÃ¡ctenos[/url]
      [*][url="#"]Privacidad[/url]
      [*][url="#"]Formularios[/url]
    [/list]
  

  [*][url="#"]Classicare[/url]
  

  [*][url="#"]Home[/url]
  
[/list]

<div id="art">
  [img]art.gif[/img]
</div>
</div>
</body>

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.

#container {
  width: 750px;  
  height: auto;  
  margin-left: auto; 
  margin-right: auto;
  border:1px black solid; 
}

body {
  text-align: center;
  margin: 0;
  padding: 0;
}

#art {
  width:750px;
  height:128px;
}

#menu {
  padding:5px;
}

a.menu-link {
  color: black; 
  text-decoration:none; 
  font: 7.5pt Verdana, Helvetica, Arial, sans-serif;  
  font-weight: bold; 
}

a.menu-link:visited {
} 

a.menu-link:hover {
  color: #009933; 
}

ul {
  text-align:center;
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  float: left;
  position: relative;
  background: white;
}

.nav li {
  clear: both;
}

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 */

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.

NightDragon · January 2007

monkeypoo wrote:

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.

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."

Munacra · January 2007

http://movielibrary.lynda.com/html/modListing.asp?sid=29

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.

Penny Arcade

Quick Links

Toaster's CSS Notepad Challenge!

Posts