Buenas!
Mi problema es que quiero poner un menu lateral(que esta en una capa) y depsues he hecho otra de contenido.. pero no se me pone una al lado de la otra y no se como hacerlo.. me podriais ayudar
Mi web:InfoTecS
Mi problema es que quiero poner un menu lateral(que esta en una capa) y depsues he hecho otra de contenido.. pero no se me pone una al lado de la otra y no se como hacerlo.. me podriais ayudar
Mi web:InfoTecS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- CABEZA-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Titulo de la pagina-->
<title>Infotecs | Inicio</title>
<!--Vincuo entre html y hoja de estilo css-->
<link rel="stylesheet" href="estilogeneral.css" type="text/css" media="all" />
</head>
<body>
<div id="global">
<img src="images/logocp.png" width="384px" height="129px" alt="Logo" />
<!-----------------------cuerpo-------------------------------------->
<div id="Cuerpo">
<!--------------------button----------------------------------------->
<div id="button">
<ul>
<li><a id="active" href="index.html">Inicio</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="Services.html">Servicios</a></li>
<li><a href="Support.html">Quienes Somos?</a></li>
<li><a href="Order.html">Ofertas</a></li>
<li><a href="News.html">Encuentranos</a></li>
<li><a href="About.html">Contacto</a></li>
</ul>
</div>
<div id="contenido">
<p class="small">Bienvenido a InfotecS, de ahora en adelante no tendras que preocuparte por tu odenador, ya que nosotros cuidaremos de el por ti. Y te preguntaras como? y ademas si me costará mucho dinero?... pues no! Porque te ofrecemos los mejores precios y los mejores resultados. Te invitamos a que naveges un poco por nuestra pagina web, veas nuestros productos, nuestros precios, lo que te ofrecemos y te dejamos de ofrecer y si tienes cualquier duda no tengas miedo a escribirnos un correo electronico a este mail.</p>
</div>
<!----------------------pie--------------------------------------->
<div id="pie">
<div id="pieuno">
<p>Diseño y programacion por Alejandro Vázquez</p>
<p>InfoTecS© 2011</p>
</div>
<div id="piedos>
<a href="#" title="Siguenos en Facebook"><img src="images/facebook.png"/> </a>
<a href="#" title="Siguenos en TWITTER"><img src="images/twitter.png" /></a>
<a href="#" title="Suscribirse a RSS"><img src="images/rss.png" /></a></div>
</div>
<!------------------------------------------------------------->
</div>
<!------------------------------------------------------------->
</div>
</body>
</html>/*Hoja de estilo Infotecs*/
/*By Vazquinhos 2011*/
/*_____________________________________________________________________________________________*/
/*Formato cuerpo*/
body {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
margin: 0; padding:0;
font-size: 80%;
font-weight: bold;
background-color:#00CCFF;
background-image:url("http://www.fondosypantallas.com/wp-content/uploads/2010/08/Windows-Vista-Azul.jpg");
}
.small{
font-size:smaller;
}
/*Formato de los enlaces en la web*/
a {}
a:link{
color:#FF0000; text-decoration:none;
}
a:hover{
color:#FF0000;
}
a:visited{
color:#FF0000; text-decoration:none;
}
a:active{
color:#FF0000;
}
td {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
th {
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
}
/*Formato de imagen*/
img{
border-style:none;
border: none;
}
/*Formato de listas desordenadas*/
ul {
list-style: none;
margin: 0;
padding: 0;
/*_____________________________________________________________________________________________*/
}
/*Divs*/
/*Global*/
#global{
width:90%;
background-image:url();
border:#E0E0E0 solid 2px;
font-size:24px;
/*Para contornear bordes*/
-moz-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10x 10px;
background-color:#FFFFFF;
background-image:url("images/sky.jpg");
background-position:center;
background-repeat:repeat;
height:90%;
position:center;
margin-left:5%;
margin-top:5%;
/*position: relative;
left: 50%;
margin-left: -100px; /* La mitad que el width.*/
}
#global pre{
color:#FFFF00;
}
/*Navegacion
#navegacion{
width:100%; height:45px;
background-color:#000000;
background-image:url(http://freestocktextures.com/images/small/fst_432q8rztsmy.jpg);
background-position:center;
background-repeat:no-repeat;
border-top: solid #FF860D 1px; border-bottom: solid #FF860D 1px;
}
antigua barra de navegacion*/
/*Cuerpo*/
#cuerpo{
background-color:#A4D8FF;
}
/*menu*/
#button {
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
margin-right:85%;
font-family: Tahoma, Arial, sans-serif;
/*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/
font-size : 10px;
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
list-style-image: none;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
#button li #active {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
/*Contenido*/
#contenido{
float:right;
text-align:justify;
margin-left:16%;
padding-bottom:50%;
}
#conenido p{
font-size:small;
}
/*Pie*/
#pie{
}
#pie p{
font-size:xx-small;
text-align:center;
}
#pieuno{
float:left;
text-align:center;
}
#piedos{
float:right;
margin-left:70%;
}