Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Capas una al lado de la otra

  1. #1
    Recien Llegado! Habitante Avatar de Vazquinhos
    Fecha de Ingreso
    24 ago, 11
    Ubicación
    Barcelonal
    Mensajes
    27
    Poder de Reputación
    13

    Capas una al lado de la otra

    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

    Código HTML:
    <!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>
    Código:
    /*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%;
    }
    Gracias!

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    17 ene, 09
    Ubicación
    argentina
    Mensajes
    455
    Poder de Reputación
    19
    Tienes que ponerles float:left en la css y darles un width para que entren en la capa que las contiene, si menu y contenido estan dentro de global, a global le pones 1000px de width a menu 200px de width y a contenido 800px de width, como veras 800+200=1000 por lo que entraria justito, por eso dejales un poco de juego en caso de que les pongas margin o padding.... es muy importante que las dos tengas float left, de ese modo se acomodaran solas una al lado de la otra

  3. #3
    Recien Llegado! Habitante Avatar de Vazquinhos
    Fecha de Ingreso
    24 ago, 11
    Ubicación
    Barcelonal
    Mensajes
    27
    Poder de Reputación
    13
    buah tio de verdad lo he estado intentando todo.. pero nada.. los he metido dentro de otra capa, y esta capa dentro de global he puesto los pixeles cuadrados.. y nada se me baja y me queda paralelo .. no se porque de verdad.. me estoy rayando un monton la cabeza y nada de nada...

    Gracias

Temas Similares

  1. LAS CAPAS NO SE ME PONEN UNA AL LADO DE OTRA.
    Por Kangui en el foro Foro General
    Respuestas: 1
    Último Mensaje: 14/02/2010, 11:45
  2. como poner capas una a lado de la otra?
    Por kero92 en el foro Foro General
    Respuestas: 6
    Último Mensaje: 25/06/2008, 03:08

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •