Problema:Crear una página con dos columnas y disponer en la primera columna un menú de opciones (como el visto en conceptos anteriores)
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="columna1">
<div id="menuvertical">
<li><a href="#">Opcion 1</a></li>
<li><a href="#">Opcion 2</a></li>
<li><a href="#">Opcion 3</a></li>
<li><a href="#">Opcion 4</a></li>
</div>
</div>
<div id="columna2">
Aca va el contenido de la columna 2. Aca va el contenido
de la columna 2.Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna
2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.
Aca va el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna
2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2
.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.
Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna 2.
Aca va el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido de la
columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna
2.Aca va el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido de la columna
2.Aca va el contenido de la columna 2.Aca va el contenido de la
columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la
columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido de la
columna 2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la columna
2.Aca va el contenido de la columna 2.Aca va el
contenido de la columna 2.Aca va el contenido de la
columna 2.Aca va el contenido de la columna 2.Aca va
el contenido de la columna 2.Aca va el contenido de
la columna 2.Aca va el contenido de la columna 2.Aca
va el contenido de la columna 2.Aca va el contenido
de la columna 2.Aca va el contenido de la columna 2.
Aca va el contenido de la columna 2.Aca va el contenido
de la columna 2.
</div>
</body>
</html>
* {
margin:0px;
padding:0px;
}
#columna1 {
position:absolute;
top:0px;
left:0px;
width:200px;
margin-top:10px;
background-color:#ffff55;
}
#columna2 {
margin-left:220px;
margin-right:20px;
margin-top:10px;
background-color:#ffffbb;
}
#menuvertical {
padding:15px;
list-style-type:none;
}
#menuvertical a:hover {
background-color:#336699;
}
#menuvertical a {
width:170px;
text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:3px 2px;
display:block;
}