Request for help: HTML -> CSS

[Inoue Katsu]

Does anyone have any decent CSS skills ?

I'm having trouble with creating a CCS only vertical menu, I have a 2 level menu template that is easy and not overly complicated .. but I need a 3rd level.

I'm baffled by the oddness of css and have no idea wtf im doing, so If anyone knows how to get this done in css ..

body {
        behavior:url("csshover3.htc");
        padding: 10px;
}

* {
        font: normal Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
}

ul,li {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
}

ul {
        width: 250px;
        background: #fff;
        list-style-type: none;
}

li {
        position: relative;
        padding: 0px;
        z-index: 9;
}

li.folder       {
        font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
        padding: 2px 0 4px 15px;
        background-color: #EFEFEF;
        border-top: 1px solid #FFFFFF;
        border-bottom: 1px solid #CCCCCC;
}

li.folder:hover {
        z-index: 10;
        background-color: #EFEFEF;
        font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
}

li.folder ul {
        position: absolute;
        display: none;
        left: 130px; /* IE */
        top: 5px;
}
/*Inspring 2e menu*/
li.folder>ul {
        left: 200px;
}

ul.level1 li.folder:hover ul.level2 {
        display: block;
        width: 200px;
}

a {
        padding: 2px;
        text-decoration: none;
        width: 100%; /* IE */
}

li>a {
        width: auto;
}

li a.submenu {
        background-color: #EEE;
        padding-left: 10px;
        font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
        display: block;
        border-bottom: 1px solid #FFF;
        padding-top: 3px;
        padding-bottom: 4px;
}

li.explain {
        font: bold 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
        background-color: #DCEAF9;
        border-bottom: 1px solid #FFFFFF;
        color: #6699CC;
        padding-left: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        width: 190px;  
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
* html li.explain {
        width: 202px;
}
/* End hide from IE5/mac */

a:link, a:visited {
        color: #666;
}

a:hover {
        color: #00f;
}

#menu {
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    width: 250px; /* Top menu width */
}

#link {
    font: 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
        padding: 0px 0px 0px 20px;
        margin-top: 15px;
}

[Pseudothrax Azemus]

Hey there Inoue,

This shouldn't be a problem at all. =D Since you seem bewildered by CSS here's a really simple overview.

CSS consists of blocks, and each block consists of two things: a selector statement and a series of style rules contained between two curly brackets. { }

A selector can be extremely simple or extremely complicated. The simplest one you'll see consists of a single tag name. In this case the style statements inside of the block are applied only to tags of that type. This should make sense. For instance, consider the block:

p {

font-weight: bold;

color: #68d;

}

This will select all 'p' tags in an html document and apply the styles to it. In this case, this will make the text inside a paragraph tag bold and blue.

A selector statement can do more complicated things too though. For instance, you can select things by specifying containment or descendants. Consider:

li a {

background-color: #888;

color: #fff;

text-decoration: none;

}

This statement will select all anchor tags ('a') which are inside of list item tags ('li'). The block then applies the contained styles, changing the background color to a medium gray, the font to white, and removing the default underline which the browser obnoxiously applies. Note that the containment doesn't only mean a first-child here. This block will apply to not only the first-child, but ANY anchor tag inside of an li tag.

If you want to select only an immediate descendant, use the '>' character. This does the same thing as simply separating them by a space, except it exclusively selects first children.

For more information on rules and syntax for selectors, see the W3C documentation here.

Another things to know is that the file is read from top to bottom and style statements are applied to the HTML content in order. This means that anything occurring later in the document overrides any conflict which came earlier. Consider the snippet:

div.awesome {

position: absolute;

left: 20px;

top: 20px;

background-color: #fff;

}

div.awesome {

background-color: #777;

}

The period '.' is the class selector character in CSS and selects elements which have the specified class. Here the second block will select division tags which have class "awesome". Notice that both blocks contain a style rule for background color. If you have any div anywhere in your HTML document with class awesome it will receive the first set of rules, moving 20 pixels from the top of the window, 20 pixels from the left edge of the window, and setting its background color to white. But what happens with the background color style? Here order matters. Both blocks will be applied to the div.awesome tag, but since the last applicable rule in the document sets the color to #777, that color wins out! If the two had been in the reverse order, the reverse case would be true. This is how CSS resolves ambiguity and allows you to have many many different blocks which apply to each element. This is where the 'cascading' part of Cascading Style Sheets comes from.

Anyway, I have no idea if you needed all that and I sincerely apologize if that was redundant information for you. It was just a little bit in case you needed something to help see the reason in the madness. I just don't like throwing out answers unless I feel that you will know how to resolve any further challenges you find.

I don't know much about what you're actually trying to make, but here's an example css snippet that will get the job done fairly simply I believe. I just threw it together so just if it's not what you need let me know and we can actually chat and figure things out. It's modified from what you posted.

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

body {

font: normal Verdana, Arial, Tahoma, Sans-Serif, Helvetica;

padding: 0;

margin: 0;

background-color: #fff;

}

ul,li {

display: block;

margin: 0;

padding: 0;

border: 0;

}

ul {

width: 100px;

list-style-type: none;

}

li {

width: 100px;

font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;

padding: 2px 0 4px 15px;

background-color: #CDCDCD;

margin: 1px 0px;

}

li.folder {

background-color: #efefef;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #cccccc;

}

li.folder:hover {

background-color: #dedede;

}

li.folder>ul {

position: absolute;

display: none;

left: 115px;

top: 5px;

}

li.folder:hover>ul {

display: block;

background-color: #f2f2f2

}

li > a {

padding-left: 10px;

text-decoration: none;

font-weight: bold;

}

li > a:link {

color: #FFF;

}

li > a:hover {

color: #A22;

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

and here's a simple HTML document which uses it:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<!DOCTYPE html>

<html>

<head>

<title>Verticle Menu</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<ul >

<li class="folder">

One >

<ul >

<li><a href="#">subone</a></li>

<li><a href="#">subtwo</a></li>

<li><a href="#">subthree</a></li>

</ul>

</li>

<li class="folder">

Two >

<ul >

<li class="folder">

subone >

<ul >

<li><a href="#">subsuboneA</a></li>

<li><a href="#">subsubtwoA</a></li>

<li><a href="#">subsubthreeA</a></li>

</ul>

</li>

<li class="folder">

subtwo >

<ul >

<li><a href="#">subsuboneB</a></li>

<li><a href="#">subsubtwoB</a></li>

<li><a href="#">subsubthreeB</a></li>

</ul>

</li>

<li><a href="#">subthree</a></li>

</ul>

</li>

<li><a href="#">Three</a></li>

</ul>

</body>

</html>

//////////////////////////////////////////////////////////////////////////////////////////////////

I have to go to class, but I'll upload it for viewing at http://mmas.unca.edu/~atjones/cssmenu. Hope that's helpful.

Oh, one last thing, the ':hover' stuff in a selector just means those styles are only applied to the elements during mouseover.

[Guest Ruin Nefarious]

how i script

[Mark Karlfeldt]

how i script

[media]http://www.youtube.com/watch?v=RSf9aEETnvE

[Pr0wer Miles]

CSS... did a lot of it when I was younger, quite easy :D

Anyway going to assume that you already know that CSS depends on HTML as in CSS overrides HTML elements visually (Style Sheets). There are three levels of CSS external, embedded, and inline of which inline overrides embedded, embedded overrides external (order of precedence from highest to lowest: inline, embedded, external). The snipped you gave us I'm going to assume is external of which a website's header would include

<link rel="stylesheet" type="text/css" href="styles.css" />

Not sure on what exactly by what you mean by a menu template, if you are using frames which are viewed as two separate pages put together of which can contain their own css styles to be independent of each other or if you are using a single page of which you would have to define the items in the style sheet that you are referencing from and also define it in the HTML document itself. I would love to help you but I need a bit more clarity as to how you are organizing the page, how its being referenced, etc.

HTML was my first language followed up by CSS and then object oriented came next so on and so forth.

I actually love doing things like and made plenty of websites back in my high school as well as the entire design for the school site from essentially a blank notepad so I know my way around these things :P. I would be more than glad to help you but as I said prior, need a bit more information about the organization of the page/site to give you a more direct answer D:

[Inoue Katsu]

I hate html almost as much as i hate vbscript and clowns.

The magic of css is eluding me atm because most of the tutorials assume you're on the same expertise level as they are right from the start. Kinda like my old math teacher.

What does the comma do in ul,li ? or the > ?

And if i'm reading this right, a 3rd submenu would start with 'li.folder ul ul { }' and then 'li.folder ul ul li { }' for list items under that ?

The css that i posted is what i have now, and its a good working 2 level menu even though i need to tamper with the colors still. Tech first, then prettifying.

[Addison Setzer]

I played games in my Programming class. Too bad my teacher loved Seniors and didnt care what the 4 seniors did in her class. :D

[Agares Tretiak]

a:link, a:visited { color: #666; }

You got the devil in you, son.

[Pr0wer Miles]

The comma between ul,li is a technique that allows you to save time by not needing to rewrite the additional code that is similar to a previous element. (Otherwise known as "grouping")

In this this case the ul and li (unordered list and ordered list) share the exact same properties, if you change one of the elements in this section you can see how it affects both instances in the HTML document.

The ">" is called the child selector, basically its a way of overwriting the style (sorta like doing inline coding without actually writing in the document) but in a more practical sense of over riding inheritance (best way I can think of explaining it). In an actual scenario lets say that you defined in an external sheet that you want every element of p to be a certain font size, but you want to make bullet-ed items (unordered, ul) inside a p to have a different font size.

Code for p

p {font-size:14px}

Code for ul in p

p>ul {font-size:12px} //For every instance of ul in p set font size to 12 px instead of 14 px

ul would be called the child and p would be the parent (ul of p) would be independent from styles declared from either p or if in an instance of ul by itself.

Code for p

p {font-size:16px}

Code for ul (for ul is outside of p)

ul {font-size:14px}

Code for ul in p

p>ul {font-size:12px} //Would not be overridden from either p or ul declarations previously mentioned.

[Genesis Ronmark]

for anything from lists to tables to descriptions etc if you just use ul { } in the css wont that just cover anything related to un ordered listes from the htm doc that its attached too? or are things being id or classed as ul? I'm still going through all of my work from the current html course I am in :P

[Pr0wer Miles]

@Inoue

Woke up this morning and I think I know what you mean, by third level menu are you talking about the a 3rd level listed element? You could also do li.folder ul ul ol,ul { //Pretty things here} for both third level elements in a list (unordered and ordered) else you are going to be making a ordered listed element in something that has two upper tiers which are unordered. The reason you don't need to put the li is because CSS implicitly knows that li would is the actual listed element (bullet or number) and thus the declarations of ul or ol in the CSS file inherit the 'idea' that this is going to be applied to the

elements under ul or ol.

Copy this and save it as htm for a visual reference (a little sloppy on the list but making a point :P)

<html>
<head>
<style type="text/css">

ul {font-size:30px}
ul ul{font-size:20px}
ul ul ul,ol {font-size:10px}
</style>
</head>

<body>

<!-Unordered Example->
<ul><li>a
<ul>
<li>b<ul>
<li>c</li>
</ul></li>
</ul>
</li></ul>

<!-Ordered Example->

<ul><li>a
<ul>
<li>b<ol>
<li>c</li>
</ol></li>
</ul>
</li></ul>
</body>
</html>

@Genesis

Vaguely speaking yes that is true but exceptions do exist if you have been following up to what I have been writing. Visual elements defined in a CSS document override elements in the HTML document and even then as mentioned earlier CSS can override itself depending on how its declared. Even if you by chance use, my coined term 'general element', the CSS declaration would override the the visual element no matter where it is BUT by giving it a special id/element you can apply a spefic style declared in the CSS to a certain attribute by referencing it in the HTML document thus breaking the 'general element' trend.

[Inoue Katsu]

by 3rd level i mean:

((fear my awesome ascii art ... if it borks IT LOOKED GOOD ON THE EDIT SCREEN)

[font=courier new,courier,monospace]+------------------------+
|		   Level 1   +-------------------+
+---------------------|	   Level 2	 |
|		   Level 1   +-------------------+
+---------------------|	   Level 2  +-------------------+
|		   Level 1   +----------------|	   Level 3	 | <----------------- 3rd level menu
+------------------------+			 +-------------------+
|		   Level 1	  |
+------------------------+[/font]

[Pseudothrax Azemus]

Was what I said wrong? o.=.o;

In the example I posted the CSS works for as many levels as you want, simply by containment. I won't post the code here again, but please feel free to scroll up to look at it.

So look first at the HTML file. The list itself is a single unordered list, 'ul', which contains three list items, 'li'. By specifying that a list item has class 'folder' it tells the browser that the item specified contains further items (as in it contains another unordered list which then contains more list items). You COULD go in and specify each level, giving all the items on the uppermost level a class 'level1' and the items on the second level class 'level2' and so on.

But I hate stuff like that. It means it will 1) only work for the levels specified, 2) be a bitch to expand since adding another level requires adding a whole new set of CSS blocks, and 3) it's cluttered. It means that every single 'li' tag and 'ul' tag has to have a class specifying its location in the hierarchy. Why not just used the built in hierarchy of HTML?

So what you'd like to see is that if you have code such as the following:

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

all three of the items will be put in a visual list on the same level.

But then you'd like to see that:

<ul>

<li>1

<ul>

<li>a</li>

<li>b</li>

<li>c</li>

</ul>

</li>

<li>2</li>

<li>3</li>

</ul>

would create items 1,2 and 3 on the top level, and then items a,b and c on the second level inside of item 1. See how the form itself implies the style? This is the ideal, and the most readable and versatile code.

So looking back at the CSS file I included, how do I accomplish this? Let's look at each block and break it down. Here's the first block again:

body {

font: normal Verdana, Arial, Tahoma, Sans-Serif, Helvetica;

padding: 0;

margin: 0;

background-color: #fff;

}

The body tag contains all of the visible content of your HTML document. It's basically the canvas on which everything else in your page is embedded. Most browsers, however, obnoxiously include a small amount of space around the body so that your content will start like 10 pixels from the top and left of the screen by default. This first block removes that by setting the margin and padding around the body to 0 pixels. It also sets the background to white (some browsers, believe it or not, don't have white as the default background color.) Lastly it sets the font to be applied to all content in the page (unless a more specific tag overrides it.)

So this tag can be thought of as setting all of your defaults. The next block does something similar, except to a more specific region of the web page. Here it is:

ul, li {

display: block;

margin: 0;

padding: 0;

border: 0;

}

This does almost the exact same thing, except this is applied to the 'ul' and 'li' elements. It also removes and default border which the browsers puts on list elements. The "display:block;" isn't really necessarily...I was just being careful. So this block sets the stage for how ALL unordered lists and list items should appear on the web page unless otherwise specified.

The general rule with style is don't let the browser have control over anything it doesn't have to. Not that I'm against fluid sites or having a certain amount of browser-imposed slippage in your design, but most default behaviors are, to be blunt, bad. For example, the blue underlined bold font which all browsers use to indicate a hyperlink is ugly and crude. Chances are, unless Internet Explorer is the theme of your site, you don't want that there. So, the first thing anyone does in their stylesheet is override all relevant default behaviors. That's what these first two blocks did. Here are the next two:

ul {

width: 100px;

list-style-type: none;

}

li {

width: 100px;

font: normal 11px/16px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;

padding: 2px 0 4px 15px;

background-color: #CDCDCD;

margin: 1px 0px;

}

There is some redundancy here which I could have eliminated but I put it all together pretty quick. The first block here further specifies that unordered lists should have no bullets (the "list-style-type" style) and sets their default width to be 100 pixels. The second block sets the default style for each list item. This is still essentially default behavior, or at least that's how I think of it. Later tags apply to specific classes or states such as 'hover'.

If you think about it for a moment they are all 'default' in a sense, but on different levels. This sounds silly, since default should only be what is considered the top behavior, but it's a convenient analogy. The process of creating CSS is the process of gradually reducing your site's style down into individualized packets which, ideally, only apply to the things they contain. HTML and CSS both revolve around the hierarchical syntax which defines them, so designing with them means thinking hierarchical.

li.folder {

background-color: #efefef;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #cccccc;

}

li.folder:hover {

background-color: #dedede;

}

You should see the pattern here. These blocks both pertain to all list items which have class "folder". The first says the way they look normally, and the second says how they should change when you move your mouse over them. So, what these say is that, normally, an 'li' tag with class "folder" will be a light gray and have a white border on the top and a slightly darker gray border on the bottom. When moused over, the background color darkens slightly.

NOW we get to the actual part which describes how to style lists inside of lists. As it stands, this will simply style all of the list items the same, as if the document were just one long list and all the items were gray. We want to make it such that unordered lists which are contained inside of the list item of another unordered list are styled differently. In particular, we want them to be moved over 115 pixels (100 for the width of the list next to it, 15 for the padding) and we want them to be hidden unless we mouse over the parent item. SO, let's look at the last few blocks, which is where that magic happens:

li.folder>ul {

position: absolute;

display: none;

left: 115px;

top: 5px;

}

li.folder:hover>ul {

display: block;

background-color: #f2f2f2

}

So note that both of these tags apply to unordered lists, but specifically to unordered lists which are contained inside of list items with the class "folder". So, on page load the first style is applied and moves the unordered list over 115 pixels and down 5 pixels. Since the position is "absolute" this is from top-left corner of the containing tag. The most important part of this, however, is the style "display: none;". This says that, by default, a unordered list immediately contained inside of a folder is invisible! Perfect. The last block here is a little strange. It says that while hovering over the list item which contains an unordered list, make said unordered list visible. So by hoving over a list item which has subitems, it makes the sublist visible.

So note that this will work with any number of levels in your list. It has no reference to whether the original list was itself contained in another list. Position in the hierarchy doesn't matter, the behavior is invariant. If you mouse over a list item which has subitems, it will make the sublist visible. If that sublist then contains an item which contains further subsubitems, the same rule is applied to it since it also is a 'ul' contined inside of a "folder". So it is by default invisible and doesn't show. When you mouse over it, it makes the sublist visible and shows you the subsubitems. This can continue ad infinitum.

I suggest you look at the link I provided earlier to an example of this in action. It may even be able to be simplified still further since I think having a class called "folder" might be superfluous, but I think this should suffice. Oh, and the last three blocks just style links. They don't have anything to do with the way the list works, just how links look inside of it. Feel free to add me on Skype as AsaDragon220 if you have trouble with this in any way. ^.=.^

[Inoue Katsu]

I got this working now thanks :-)

Now I'm looking for a good how-to on how to load an existing page into a div with Ajax =p

I dont want to use frames.