Problema con el menú

JorgeGn · #1 (**permalink**) 28/07/2008, 12:29

Yo tengo un problema con el menu de mi web y es que quiero poner un menú vertical a la izquierda y el contenido a contuanuacion pero me salta hasta el fin del menu y no se como lo hacer ya lo he probado todo espero que me podais ayudar.Muchas gracias

Raulmmmm · #2 (**permalink**) 28/07/2008, 13:59

Es normal esta duda cuando estás empezando, no te preocupes por eso. Aquí está la solución (muy sencilla):

Código HTML:

<!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="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menú usando listas</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
#menu { float: left; width: 15%; background: #eee; }
#texto { float: left; width: 85%; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="menu">
Este es el menú
</div>
<div id="texto">
Este es el texto
</div>
<div class="clear"></div>
</body>
</html>

Te recomiendo que si todavía no sabes CSS te leas este manual.

JorgeGn · #3 (**permalink**) 28/07/2008, 15:12

Muchas gracias por tu repuesta, pero no lo soluciono del todo por que detras de menu sale una sombra muy rara y el texto esta demasiado hacia la izquierda me podrias decir como lo puedo solucionar?. Gracias de nuevo

Raulmmmm · #4 (**permalink**) 29/07/2008, 00:46

La sombra que dices es un color de fondo, lo puedes borrar aquí:

Código HTML:

<!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="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menú usando listas</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
#menu { float: left; width: 15%; [b]background: #eee;[/b] }
#texto { float: left; width: 85%; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="menu">
Este es el menú
</div>
<div id="texto">
Este es el texto
</div>
<div class="clear"></div>
</body>
</html>

Y el ancho se cambia modificando los valores de porcentaje:

Código HTML:

<!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="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menú usando listas</title>
<link rel="shortcut icon" href="favicon.ico" />
<style type="text/css">
#menu { float: left; [b]width: 15%;[/b] background: #eee; }
#texto { float: left; [b]width: 85%;[/b] }
.clear { clear: both; }
</style>
</head>
<body>
<div id="menu">
Este es el menú
</div>
<div id="texto">
Este es el texto
</div>
<div class="clear"></div>
</body>
</html>