Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

divs and line items invalid according to w3c

div li ul w3c nesting

This topic has been archived. This means that you cannot reply to this topic.
17 replies to this topic

#1 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 28 March 2013 - 09:53 AM

Greetings Codecall. I recently discovered a way to distribute horizontal drop-down menu buttons evenly within a space, as seen here.

 

What I am wondering is if it's possible for this code to be w3c compliant. According to the w3c validator, this XHTML 1.0 Transitional doctype does not allow for <div>tags to encompass <li> tags in an <ul>.

I've tried moving the class from the div attributes to the line item attributes and it doesn't work. Neither does putting the divs inside the <li> tags instead of outside it.

If any of you have any ideas, let me know, I would greatly appreciate it!

 

W3C's error:

error.png Line 71, Column 23: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

		<div class="box"><li><a href="#" class="menulink">Button 3</a>

 

The HTML in question:

<div id="newbuttons">
<ul class="menu" id="menu">
<div class="box">
        <li><a href="#" class="menulink">Button 1</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#">Submenu D</a>
            <li><a href="#">Submenu E</a></li>
            <li><a href="#">Submenu F</a></li>
        </ul>
    </li>
    </div>
    <div class="box">
    <li>
        <a href="#" class="menulink">Flinkledy Plinkledy Doo</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
        </ul>
    </li>
    </div>
    <div class="box">
    <li>
        <a href="#" class="menulink">Button 3</a>
        <ul>
            <li><a href="#">Submenu A</a>            </li>
            <li><a href="#">Submenu B</a>            </li>
        </ul>
    </li>
    </div>
    <div class="box">
    <li>
        <a href="#" class="menulink">Button 4</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#" class="sub">Submenu D</a>
                <ul>
                    <li class="topline"><a href="#">Sub-Submenu A</a></li>
                    <li><a href="#">Sub-Submenu B</a></li>
                    <li><a href="#">Sub-Submenu C</a></li>
                    <li><a href="#">Sub-Submenu D</a></li>
                </ul>
            </li>
        </ul>
    </li>
    </div>
    <div class="box">
    <li>
        <a href="#" class="menulink">Meat and You: Partners in Freedom</a>    </li></div>
        <span class="stretch"></span>
</ul></div>
 

The CSS, the ones governing button behavior are the newbuttons, box and stretch divs, as well as the ul properties on the bottom:

 

@charset "utf-8";
/* Styles for new template based versions of Jezebelgallery.com */
body  {
    background:#FFFFFF url("images/WhiteSandsBackgroundaubs.jpg") no-repeat;
	background-attachment: fixed;
    background-color:#FFFFFF;
	font: Verdana, Helvetica, sans-serif;
	font-size:12px;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
    font-family:'Lucida Grande', Helvetica, Arial, sans-serif;
    font-size:12px;
    letter-spacing:1px;
    color:#000000;
}

div

#newbuttons {
    text-align: justify;
	 
}
.box{
    width:auto;
    vertical-align: top;
    display: inline-block;	
}
* html box {display: inline}
*+html box {display:inline}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}
* html stretch {display: inline}
*+html stretch {display:inline}

img
{ border-style: none;
border: 0px;
border-width: 0;}
a img {
border-width: 0;
border-style: none;
}
#container { 
	width: 1000px;  /* using less than a full 1024px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	/*border: 1px solid #000000;*/
	text-align: left; /* this overrides the text-align: center on the body element. */
} 

#mainContent { 
	margin: 0 0 0 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

a{border:0}

.sub{
font-family:Verdana, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
color:#582B52;
}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#sddm
{	margin: 0;
	padding: 5px;
	z-index: 30}

#sddm li
{	margin: 0;
	padding: 0px 0px 5px;
	list-style: none;
	float: left;
	font: Verdana, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	color:#582B52; }

#sddm li a
{	display: block;
	margin: 0 0px 5px;
	padding: 0px;
	width: 100px;
	background: #FFFFFF;
	color: #582B52;
	text-align: center;
	text-decoration: none;
	}
	
#sddm li a.extrawide
{ width: 130px;
}

#sddm li a.extrasmall
{ width: 80px;
}

#sddm li a:hover
{	color: #FFFFFF;
background: #582B52}

#sddm div
{	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #582B52;
	border: 0px}

	#sddm div a
	{	position: relative;
		display: block;
		margin: 0;
		padding: 5px 10px;
		width: auto;
		white-space: nowrap;
		text-align: left;
		text-decoration: none;
		background: #FFFFFF;
		color: #582B52;
		font: Verdana, Helvetica, sans-serif; }

	#sddm div a:hover
	{	background: #582B52;
		color: #FFF}
		
textarea 
{
overflow:auto;
font: Verdana, Helvetica, sans-serif;
font-size:12px;
}

ul.sitemap {color:#582B52; font: Verdana, Helvetica, sans-serif;}
ul.sitemap a {color:#582B52; font: Verdana, Helvetica, sans-serif;}
		
ul.menu {list-style:none; margin:0; padding:0; font-weight:bold; font: Verdana, Helvetica, sans-serif; font-size:12px;}
ul.menu * {margin:0; padding:0;}
ul.menu a {display:block; color:#582B52; text-decoration:none;}
ul.menu li {position:relative; float:left; margin-right:2px;}
ul.menu ul {position:absolute; top:26px; left:0; background:#FFFFFF; display:none; opacity:0; list-style:none;}
ul.menu ul li {position:relative; border:0px; border-top:none; width:148px; margin:0;}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#FFFFFF; font-size:12px;}
ul.menu ul li a:hover {background-color:#582B52; color:#FFFFFF}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink {border:0px; padding:5px 2px 7px; font-weight:bold; background:url(images/dropdownimages/header.gif); text-align:center;}
ul.menu .menulink:hover, ul.menu .menuhover {background-color:#582B52;}
ul.menu .sub {background:#ffffff url(images/dropdownimages/arrow.gif) 136px 8px no-repeat; letter-spacing:0px}
ul.menu .topline {border-top:1px solid #FFFFFF}
ul.menu .filler {width: 100%; height:0px;}
ul.twitter_update_list
{color:#582B52; text-decoration:none; list-style:none; margin:0; padding:0; font-weight:bold; font: Verdana, Helvetica, sans-serif; font-size:12px; text-align:left}

Here's a live example of the page as it is now, unvalidated.



#2 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 28 March 2013 - 10:46 AM

Change your header, like the example below:

 

 

Yes it is valid according to xhtml1-strict.dtd. The following XHTML passes the validation:

 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Test</title>
</head>
<body>
  <ul>
    <li><div>test</div></li>
  </ul>
</body>
</html>
 

My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#3 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 28 March 2013 - 12:36 PM

I tried having the divs inside the line items like you've done but as you can see here, the effect isn't the same.

What to do?



#4 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 28 March 2013 - 02:50 PM

Can't you just use the outline CSS property for li?
My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#5 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 28 March 2013 - 03:16 PM

How would that help?



#6 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 29 March 2013 - 04:54 AM

Here is a quick menu without divs:

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Menu Maker Installation Instructions</title>


<style type="text/css">
   body{padding:20px; font-size:14px; color:#000000; font-family:Arial, Helvetica, sans-serif;}
   h2 {font-weight:bold; color:#000099; margin:10px 0px; }
   p span {color:#006600; font-weight:bold; }
   a, a:link, a:visited {color:#0000FF;}
   textarea {width: 100%; padding: 10px; margin: 10px 0 15px 0; font-size: 13px; font-family: Consolas,monospace;}
   textarea.html {height: 300px;}
   p {margin: 0 0 10px 0;}
   code, pre {font-family: Consolas,monospace; color: green;}
   ol li {margin: 0 0 15px 0;}
</style>


</head>


<body>


<h2>Menu</h2>


<style type="text/css">#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  border-bottom: 2px solid #e00f16;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #e00f16;
  ;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%; 
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #e00f16;
  border-bottom: 1px dotted #ec6f73;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #b00c11;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #b00c11;
  border-bottom: 1px dotted #d06d70;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #80090d;
}
</style>
<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='has-sub '><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub '><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
<div style="clear:both; margin: 0 0 30px 0;">&nbsp;</div>
</body>
</html>
 

Edited by lespauled, 29 March 2013 - 04:54 AM.

My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth

#7 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 29 March 2013 - 03:07 PM

Hi Lespauled.

 

I'd prefer it if you used the pre-existing code I have. Your sample code does not create an equidistant arrangement of buttons in a defined space, which is what I worked so hard for.

 

Thanks.



#8 PiJoKra

PiJoKra

    CC Newcomer

  • Member
  • PipPip
  • 15 posts

Posted 31 March 2013 - 06:27 AM

Why do you do this:
<ul>
  <div class="box">
    <li>Hey</li>
  </div>
</ul>
instead of this:
<ul>
  <li class="box">
    <ul>
      <li>Hey</li>
    </ul>
  </li>
</ul>
?

#9 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 01 April 2013 - 10:32 AM

I've tried changing the class property from the div to the line item. It doesn't work. Somehow being in a div positions it in a desirable equidistant manner.



#10 JasonKnight

JasonKnight

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 312 posts

Posted 06 April 2013 - 08:06 PM

Now, keep in mind I'm trying to help... but you need the Gordon Ramsey treatment.  To be brutally frank and honest with you, your HTML is GARBAGE. It's completely invalid/nonsensical GIBBERISH as you seem to have completely missed the structural rules for even building markup.
 
For example:
<div id="newbuttons">
<ul class="menu" id="menu">
<div class="box">
<li><a href="#" class="menulink">Button 1</a>
It is unlikely you need a DIV around your menu as UL is a perfectly good block level container in it's own right. It is COMPLETELY invalid to have div.box where it is since the only thing that can come after a UL is a LI.... and if every anchor inside your menu is getting the same class, NONE of them need classes. That's four lines of code -- two of them don't even belong there.

Moving through it you've got SPAN where you can't put SPAN, DIV where you can't put DIV, classes for nothing, and that's before we even get to the CSS or look at the example page.

The CSS has a whole bunch of oddball pointless redundancies, easily half that code should be pitched, while the example page is even worse using tables for layout, IE conditionals on something so simple it shouldn't need them, clearing breaks like it's still 2001, and a host of other problems.

Even the first line of code proudly proclaims to the world a lot of the problem -- It's a trap. Transitional means the code is in 'transition' from 1997 to 1998 coding practices -- and boy does it show.

... and then, it appears to be resorting to using javascript too on something that shouldn't even need scripting?!? (unless you REALLY need that IE6 support... and then use a .htc)

Of course, the CSS is a train wreck of inaccessible nonsense with the fixed width, px metric fonts, basically the antithesis of accessible design.

If I was coding the same style menu, it is unlikely my code would be much more than:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Menu Of Frustration
</title>

</head><body>

<div id="pageWrapper">

	<ul id="mainMenu">
		<li>
			<a href="#">Button 1</a>
			<ul>
				<li><a href="#">Submenu A</a></li>
				<li><a href="#">Submenu B</a></li>
				<li><a href="#">Submenu C</a></li>
				<li><a href="#">Submenu D</a>
				<li><a href="#">Submenu E</a></li>
				<li><a href="#">Submenu F</a></li>
			</ul>
		</li><li>
			<a href="#">Flinkledy Plinkledy Doo</a>
			<ul>
				<li><a href="#">Submenu A</a></li>
				<li><a href="#">Submenu B</a></li>
				<li><a href="#">Submenu C</a></li>
			</ul>
		</li><li>
			<a href="#">Button 3</a>
			<ul>
				<li><a href="#">Submenu A</a></li>
				<li><a href="#">Submenu B</a></li>
			</ul>
		</li><li>
			<a href="#">Button 4</a>
			<ul>
				<li><a href="#">Submenu A</a></li>
				<li><a href="#">Submenu B</a></li>
				<li><a href="#">Submenu C</a></li>
				<li>
					<a href="#">Submenu D</a>
					<ul>
						<li><a href="#">Sub-Submenu A</a></li>
						<li><a href="#">Sub-Submenu B</a></li>
						<li><a href="#">Sub-Submenu C</a></li>
						<li><a href="#">Sub-Submenu D</a></li>
					</ul>
				</li>
			</ul>
		</li><li>
			<a href="#">Meat and You: Partners in Freedom</a>
		</li>
	</ul>

<!-- #pageWrapper --></div>

</body></html>
That's really all that should be in the markup... just needs CSS for the magic.

I'm away from my workstation at the moment, and doing CSS on the lappy sucks, but I'll try to remember to get to this later so I can show you a purely CSS only way of doing a menu, fixing most of the things I mentioned.
The only thing about Dreamweaver that can be considered professional grade tools are the people promoting it's use.

#11 JasonKnight

JasonKnight

    CC Addict

  • Senior Member
  • PipPipPipPipPip
  • 312 posts

Posted 06 April 2013 - 09:00 PM

Here's what I came up with.
http://www.cutcodedo...n/template.html

as with all my examples the directory:
http://www.cutcodedo...others/cyberen/

...is open for access to the gooey bits and pieces.

Uses overflow:hidden to create the hovers, works perfect in all modern browsers as well as IE 8 through 10. IE7 doesn't show the ยป for more, but you could just plug your little image in there if you really care.

IE6 is right out, but something like PeterNed's csshover3.htc and maybe a haslayout trigger or two would fix things right up.

Admittedly it doesn't have the cutesy little animation, but those are usually more hindrance than help -- you could likely do a simple opacity fade using CSS3 transitions which can look as good if not better if you know how to use them right.

Hope this helps.

Edited by JasonKnight, 06 April 2013 - 09:02 PM.

The only thing about Dreamweaver that can be considered professional grade tools are the people promoting it's use.

#12 Cyberen

Cyberen

    CC Regular

  • Member
  • PipPipPip
  • 41 posts

Posted 09 April 2013 - 08:13 AM

I understand the Gordon Ramsey treatment, most of the code was written years before I started taking care of the site, and I've been too busy and inexperienced to rebuild the site from scratch. w3c certainly does not like the website.

Your example, although much cleaner code-wise, does not distribute the buttons evenly in a predefined space. That's what I'd really like, and why it seems only the divs will do it. I know divs being inserted between line items is a horrible practice, but it's the only thing that seems to work so far. I will gladly look through your code, but if you have one that can achieve the same distribution look, I would like to know.






Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download