Entrar

como poner capas una a lado de la otra?

kero92 · · Solicitar retirada
pues quiero poner tres capas para que aparescan una l lado de la otra pero
siempre que lo intento, estas se ponen una sobre otra, como lo arreglo?
Raulyure · · Solicitar retirada
kero92 escribió:pues quiero poner tres capas para que aparescan una l lado de la otra pero
siempre que lo intento, estas se ponen una sobre otra, como lo arreglo?
Hola:
Haga una capa donde puedan caber esas tres y las mete dentro y le pone un float:left a cada una de las tres, y si la capa que va a contener a esas tres capas lleva bordes a la izquierda y a la derecha , hágala un par de píxeles mas ancha que la suma de las tres capas
saludos
Agradecido de los que aprenden enseñando
kero92 · · Solicitar retirada
ya tengo hecho así, pero cuando restauro el navegador y la ventana se hace mas paqueña, las capas se desalinean
Raulyure · · Solicitar retirada
kero92 escribió:ya tengo hecho así, pero cuando restauro el navegador y la ventana se hace mas paqueña, las capas se desalinean
Hola:
Entonces si no le molesta tendría que ponernos los códigos de la página en que están esas capas y los códigos de la hoja de estilo, para que podamos visualizar mejor el problema y poder solucionarlo.
Saludos
Agradecido de los que aprenden enseñando
kero92 · · Solicitar retirada
Codigos HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Pagina Principal del Ejemplo CCTW</title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all" >
<META content="Los mejores Animes, Series y Películas a tu alcanze" name="description">
<META content="peliculas, películas, anime, Ecuador, venta, series, Lost, Heroes" name="keywords">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


</head>
<div id="cabecera">
<div id="logo"></div>

</div></div>
<div id="menu">
<ul>
  • Inicio
  • Películas
  • Series
  • Musicales
  • Animes
  • Wii
  • SiteMap
  • Contáctenos
    </div>
    <div id"cuerpo">
    <div id="izquierda">hah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha ha </div>
    <div id="contenido">ahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha ha</div>
    <div id="derecha">a</div>
    </div>
    <div id="pie"></div>


    </body>
    </html>


    Codigod CSS



    *{margin:0px;padding:0px;border:0px;text-align:center;list-style: none; text-align: justify}
    #cabecera {float:top;width:100%; height:100px;background-color:pink}
    #logo{float: left;width:520px; background-color: red; background-image: url(objetos/logotipo.png); height:80px;margin: 10px}
    #publicidadcabeza{height: 80px;float: left;width:50%px; background-color: pink}
    #menu{width:1280px;height:25px;background-color:blue}
    #cuerpo{text-align: left}
    #izquierda{float:left; text-align: left;width: 150px;background-color:yellow;margin:15px 10px 15px 10px}
    #contenido{float:left; width: 600px ; text-align: left;background-color:red;margin:15px 5px 15px 5px}
    #derecha { float:left;width: 150px;background-color:green;text-align: left;margin:15px 7px 15px 10px}
    #pie{ float: left;width:100%; height: 20px;background-color: violet}
    #menu{border: black 1px solid;background-image: url(objetos/fondo-menus.gif);font-size: 15px;font-weight:bold;height: 35px; ;display: block }
    #menu li{font-size: 15px; float:left;text-align: left;font-size: 15px; margin: 0px 30px 0px 30px ; font-weight:bold}
    #menu a{font-size: 15px;display: block;color:#EEAD0E;text-decoration:none; font-weight:bold;background-image:white}
    #menu a:link{color:black}
    #menu a:visited{color:black}
    #menu a:hover{color: #90EE90; background-color:silver}
    #menu a:active{color: green}
    #menu ul{margin: 5px 0px 0px 30px}
    • Raulyure · · Solicitar retirada
    kero92 escribió:Codigos HTML:


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Pagina Principal del Ejemplo CCTW</title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all" >
    <META content="Los mejores Animes, Series y Películas a tu alcanze" name="description">
    <META content="peliculas, películas, anime, Ecuador, venta, series, Lost, Heroes" name="keywords">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


    </head>
    <div id="cabecera">
    <div id="logo"></div>

    </div></div>
    <div id="menu">
    <ul>
  • Inicio
  • Películas
  • Series
  • Musicales
  • Animes
  • Wii
  • SiteMap
  • Contáctenos
    </div>
    <div id"cuerpo">
    <div id="izquierda">hah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha ha </div>
    <div id="contenido">ahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha hahah h aha ha hah ha h hha ha h ha hha ha h ahha hahhah aha hha h ah ahha ha ha hh aahha ha hhha ha</div>
    <div id="derecha">a</div>
    </div>
    <div id="pie"></div>


    </body>
    </html>


    Codigod CSS



    *{margin:0px;padding:0px;border:0px;text-align:center;list-style: none; text-align: justify}
    #cabecera {float:top;width:100%; height:100px;background-color:pink}
    #logo{float: left;width:520px; background-color: red; background-image: url(objetos/logotipo.png); height:80px;margin: 10px}
    #publicidadcabeza{height: 80px;float: left;width:50%px; background-color: pink}
    #menu{width:1280px;height:25px;background-color:blue}
    #cuerpo{text-align: left}
    #izquierda{float:left; text-align: left;width: 150px;background-color:yellow;margin:15px 10px 15px 10px}
    #contenido{float:left; width: 600px ; text-align: left;background-color:red;margin:15px 5px 15px 5px}
    #derecha { float:left;width: 150px;background-color:green;text-align: left;margin:15px 7px 15px 10px}
    #pie{ float: left;width:100%; height: 20px;background-color: violet}
    #menu{border: black 1px solid;background-image: url(objetos/fondo-menus.gif);font-size: 15px;font-weight:bold;height: 35px; ;display: block }
    #menu li{font-size: 15px; float:left;text-align: left;font-size: 15px; margin: 0px 30px 0px 30px ; font-weight:bold}
    #menu a{font-size: 15px;display: block;color:#EEAD0E;text-decoration:none; font-weight:bold;background-image:white}
    #menu a:link{color:black}
    #menu a:visited{color:black}
    #menu a:hover{color: #90EE90; background-color:silver}
    #menu a:active{color: green}
    #menu ul{margin: 5px 0px 0px 30px}

    • Hola:
    creo que a continuación de la capa <div id="logo">usted la cierra con un </div> y estaría correcto pero es que después usted cierra la capa cabecera con otro </div> que también estaría correcto, el problema es que vuelve usted a poner a continuación otro </div> y yo diría que ese estaría sobrando, fuera de eso por lo que usted a puesto acá en el spot le falta poner <body> abajo de donde dice </head> eso sería en su página. En su hoja de estilo usted en el grupo de los enlaces (el grupo de las a) arriba de donde tiene puesto #menu a:link{color:black} le falta poner una a que va sola : a{}, cada vez que haga un grupo de enlaces con las a debe ocupar las cinco.
    También es posible que esté erróneo lo que usted ha puesto en su hoja de estilo en la primera línea, la del asterisco, usted tiene puesto text-align:center y mas adelante tiene puesto text-align:justify
    Usted debiera de tenerlo así:
    *{text-indent:0px;margin:0px;padding:0px;border:0px;} y en la segunda línea poner
    body{text-align:center;}
    y después lo demás y ya veremos como se va arreglándo poco a poco
    Saludos
    Agradecido de los que aprenden enseñando
    kero92 · · Solicitar retirada
    muchas gracias amigo, en realidad no me había percatado de esos errores, pero me sigue dando el error de que cuando le restauro al navegador y le cambio de tamaño a uno mas pequeño, los divs se descuadran, si alguien supiera como arreglar esto apreciaría mucho su ayuda