Como poner el menu en línea

tany1995 · #1 (**permalink**) 24/11/2010, 21:54

hola amigos les tengo una gran duda!!!! conseguí un menú en html que es así

pero yo quiero que se mire así

este es el código html

Código HTML:

<div align="right">
    <center>
        <a href="URL_PAGINA"><img class="pushbutton" src="http://www.fileden.com/files/2010/8/4/2933396/flecha%20izquierda.gif" title="TRUCO ANTERIOR" alt="" /></a>
    </center>

    <center>
        <a href="URL_PAGINA"><img class="pushbutton" src="http://www.fileden.com/files/2010/8/4/2933396/escribeme.gif" title="ESCRIBEME" alt="" /></a>
    </center>

    <center>
        <a href="URL_PAGINA"><img class="pushbutton" src="http://www.fileden.com/files/2010/8/4/2933396/homes.gif" title="INICIO" alt="" /></a>
    </center>

    <center>
        <a href="URL_PAGINA"><img class="pushbutton" src="http://www.fileden.com/files/2010/8/4/2933396/flecha%20derecha.gif" title="TRUCO SIGUIENTE" alt="" /></a> <a href="URL_PAGINA"><img class=
        "pushbutton" alt="" /></a>
    </center>
</div>

porfa ayuda!!!!!!!!!!!!

zerokilled · #2 (**permalink**) 24/11/2010, 22:26

fijate que cada enlace esta envuelto en elementos <center>. ahi es donde esta el problema, pues <center> es un elemento de tipo bloque. lo que significa que el elemento crea saltos de linea antes y despues del elemento. simplemente tienes que envolver todos los enlaces en un solo <center>. nota: <center> es un elemento ya en desuso.

rogweb · #3 (**permalink**) 25/11/2010, 11:01

Olas, mira amigo también prodias hacerlo con listas y css, creo que es mejor que usar center, ya que como dice zerokilled, esa etiqueta esta en desuso, chequea este código, bueno yo lo arreglaria asi:

Código HTML:

<?xml version="1.0" encoding="UTF-8"?>
<!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>
    <title>Menu</title>
    <style type="text/css">
    a img { 
        border-style: none;
    }
    #menu {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    #menu li {
        float: left;
        margin: 5px;
    }
    </style>
</head>
<body>
    <ul id="menu">
        <li><a href=#><img src="b-f.png" width="25px" height="25px"/></li>
        <li><a href=#><img src="carta.png" width="25px" height="25px" /></li>
        <li><a href=#><img src="casa.png" width="25px" height="25px" /></li>
        <li><a href=#><img src="a-f.png" width="25px" height="25px" /></li>
    </ul>
</body>
</html>