CSS - Web2.0,CSS,XHTML http://www.lvjiyong.com/en-us/category/css About CSS en-us Thu, 26 Oct 2006 13:57:00 GMT Thu, 26 Oct 2006 13:57:00 GMT 吕的部落格 Version 1.0.0.0 How To Clear Floats Without Structural Markup http://www.lvjiyong.com/en-us/item/How-To-Clear-Floats-Without-Structural-Markup John Lv John Lv Thu, 26 Oct 2006 13:57:00 GMT http://www.lvjiyong.com/en-us/item/How-To-Clear-Floats-Without-Structural-Markup http://www.lvjiyong.com/en-us/item/How-To-Clear-Floats-Without-Structural-Markup http://www.lvjiyong.com/en-us/item/How-To-Clear-Floats-Without-Structural-Markup#postComment 0 http://www.lvjiyong.com/en-us/comment/How-To-Clear-Floats-Without-Structural-Markup http://www.lvjiyong.com/en-us/trackback/How-To-Clear-Floats-Without-Structural-Markup not automatically force the container's bottom edge down as the float is made taller. Instead the float is ignored by the container and will hang down out of the container bottom like a flag. Those familiar only with Explorer for Windows may scratch their heads and say "That's not right!" True, IE/Win does enclose a float within a container 'automatically', but only if the container element has a stated dimension, and in any case it's a W3C spec violation. This illegal behavior can also be 'toggled' on and off by links within the container, if 'hovering' alters the link background or several other properties. Quite a mess.]]> Listamatic http://www.lvjiyong.com/en-us/item/listamatic John Lv John Lv Mon, 12 Jun 2006 15:22:54 GMT http://www.lvjiyong.com/en-us/item/listamatic http://www.lvjiyong.com/en-us/item/listamatic http://www.lvjiyong.com/en-us/item/listamatic#postComment 0 http://www.lvjiyong.com/en-us/comment/listamatic http://www.lvjiyong.com/en-us/trackback/listamatic Can you take a simple list and use different Cascading Style Sheets to create radically different list options? The Listamatic shows the power of CSS when applied to one simple list.

CSS and Javascript workshops

]]> CSS ONLY DROPDOWN MENU - FURTHER EXAMPLES http://www.lvjiyong.com/en-us/item/DROPDOWNMENU John Lv John Lv Sun, 11 Jun 2006 07:04:26 GMT http://www.lvjiyong.com/en-us/item/DROPDOWNMENU http://www.lvjiyong.com/en-us/item/DROPDOWNMENU http://www.lvjiyong.com/en-us/item/DROPDOWNMENU#postComment 0 http://www.lvjiyong.com/en-us/comment/DROPDOWNMENU http://www.lvjiyong.com/en-us/trackback/DROPDOWNMENU CSS Panel http://www.lvjiyong.com/en-us/item/CSSPanel John Lv John Lv Sun, 11 Jun 2006 06:51:55 GMT http://www.lvjiyong.com/en-us/item/CSSPanel http://www.lvjiyong.com/en-us/item/CSSPanel http://www.lvjiyong.com/en-us/item/CSSPanel#postComment 0 http://www.lvjiyong.com/en-us/comment/CSSPanel http://www.lvjiyong.com/en-us/trackback/CSSPanel #info {background:#fff;} #info ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;} #info li {display:block; float:left;} .xsnazzy {background:transparent;} .xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;} .xtop {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 { display:block; /* hide overflow:hidden from IE5/Mac */ /* \*/ overflow: hidden; /* */ } .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;} .xb1 {margin:0 5px; background:#fff;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;} a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;} a.xmenu2:hover {background:transparent; cursor:pointer;} a.xmenu2:hover span {color:#000;} a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;} a.xmenu2:hover .xb1 {background:#888;} a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;} #abs {background:transparent; cursor:pointer;} #abs span {color:#000;} #abs .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;} #abs .xb1 {background:#888;} #abs .xb2, #abs .xb3, #abs .xb4 {background:#fff; border-color:#888;} ]]>