
23/05/2010, 21:07
|
| | Fecha de Ingreso: mayo-2010
Mensajes: 1
Antigüedad: 14 años, 10 meses Puntos: 0 | |
Se dimenciona la pag. Que tal estoy tratando de implementar este menu, el problema que al pasar el raton aparecen las barras de desplazamiento hori y vert. modificando el tamaño de la web a ver que opinan. Gracias.
Código:
HTML
<div id="positioner">
<div class="holder p1">
<dl class="menu">
<dt><a href="#url">Home</a></dt>
</dl>
</div>
<div class="holder p2">
<dl class="menu">
<dt><a class="sub" href="#url">Products</a></dt>
<dd class="dd4">
<a href="#url">Digital Cameras</a>
<a href="#url">Tripods</a>
<a href="#url">Flashguns</a>
<a href="#url">Telephoto Lenses</a>
</dd>
</dl>
</div>
<div class="holder p3">
<dl class="menu">
<dt><a class="sub" href="#url">Services</a></dt>
<dd class="dd5">
<a href="#url">Enlarging</a>
<a href="#url">Framing</a>
<a href="#url">Printing</a>
<a href="#url">Copying</a>
<a href="#url">Sepia Toning</a>
</dd>
</dl>
</div>
<div class="holder p4">
<dl class="menu">
<dt><a class="sub" href="#url">Outlets</a></dt>
<dd class="dd4">
<a href="#url">London</a>
<a href="#url">Gloucestershire</a>
<a href="#url">East Midlands</a>
<a href="#url">Glasgow</a>
</dd>
</dl>
</div>
<div class="holder p5">
<dl class="menu">
<dt><a class="sub" href="#url">Terms</a></dt>
<dd class="dd3">
<a href="#url">Payment Methods</a>
<a href="#url">Conditions of Sale</a>
<a href="#url">Privacy Policy</a>
</dd>
</dl>
</div>
<div class="holder p6">
<dl class="menu">
<dt><a href="#url">Site Map</a></dt>
</dl>
</div>
</div>
Código:
CSS
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}
#positioner {
position:absolute;
width:750px;
height:25px;
background:#fff; /* color amarillo */
top: 569px;
margin-left: 250px;
}
.holder {
position:absolute;
width:125px;
height:25px;
top: 0px; /* superior*/
}
dl.menu {
width:250px;
float:left;
margin:-32000px 0 0 -9999px;
}
.p1 {left:0;}
.p2 {left:125px;}
.p3 {left:250px;}
.p4 {left:375px;}
.p5 {left:500px;}
.p6 {left:625px;}
dl.menu a {display:block; height:25px; font:normal 11px/25px verdana, sans-serif; text-decoration:none; text-indent:10px; border-bottom:1px solid #fff; border-left:1px solid #fff;}
dl.menu dt {float:left; padding:0; position:relative; left:9999px; z-index:50; margin:32000px 0 0 0;}
dl.menu dt a {width:124px; background:#aaa; float:left; color:#fff;}
dl.menu dt a.sub {background:#888 url(dl-pullup/arrow.gif) no-repeat 110px center; color:#fff;}
dl.menu dt a:hover,
dl.menu dt a:focus,
dl.menu dt a:active
{margin-right:1px; text-decoration:none; background-color:#888; color:#fc0;}
dl.menu dd {float:left; padding:0; margin:0;}
dl.menu dd.dd3 {height:104px;}
dl.menu dd.dd4 {height:130px;}
dl.menu dd.dd5 {height:156px;}
dl.menu dd:hover {clear:both;}
dl.menu dd a {position:relative; height:25px; background:#aaa; width:124px; color:#fff; left:9999px; top:-100%; z-index:60;}
dl.menu dd a:hover,
dl.menu dd a:focus,
dl.menu dd a:active
{margin-right:1px; background:#888; color:#fc0;}
|