Can / Should we use sliding doors tecnhique here?

HTML & CSS
21

As it happens, almost a year back, as a test for a freelance gig, I had to “slice” a jpeg which had a somewhat similar design for the menu:


<!DOCTYPE HTML>
<html lang="ro" dir="ltr">
<head>
<meta name="author" lang="ro" content="Dumitru Mitic&#259; Ungureanu">
<meta http-equiv="Content-Type"	content="text/html; charset=utf-8">
<style type="text/css" media="screen,projection,tv">
#meniu {
height:63px;
padding-right:20px;
font-size:16px;
line-height:18px;
background:black 0 0 no-repeat;
position:relative;
z-index:2;
}

#meniu  li {
list-style-type: none;
float:left;
padding:0 4px;
}

#meniu li a {
float:left;
display:inline;
padding:20px 12px;
text-decoration:none;
color:#FFF;
position:relative;
top:-7px;
height:1%;
}

#meniu li a:hover {
color:#000;
background:url(http://i1054.photobucket.com/albums/s490/itmitica/bg_meniu_item_middle.png) center 0 no-repeat;
}

#meniu li a:hover:before {
content: "";
position:absolute;
top:0;
left:0;
display:block;
width:40%;
height:100%;
background:url(http://i1054.photobucket.com/albums/s490/itmitica/bg_meniu_item.png) left 0 no-repeat;
z-index:-999;
}

#meniu li a:hover:after {
content: "";
position:absolute;
top:0;
right:0;
display:block;
width:40%;
height:100%;
background:url(http://i1054.photobucket.com/albums/s490/itmitica/bg_meniu_item.png) right 0 no-repeat;
z-index:-999;
}
</style>
<title>Token in the Middle</title>
</head>
<body>
<ul id="meniu">
<li><a href="home">Parteneri</a></li>
<li><a href="noutati">Nout&#259;&#355;i</a></li>
<li><a href="download">Download</a></li>
<li><a href="newsletter">Newsletter</a></li>
<li><a href="contact">Contact</a></li>
</ul>
</body></html>

There may be some garbage left in the CSS, and the graphics may not be top notch, but I had to “slice” a jpeg! :slight_smile: