Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Franjabube en 19 Septiembre 2014, 05:26 am



Título: Duda contenido dinámico
Publicado por: Franjabube en 19 Septiembre 2014, 05:26 am
Hola, como están?

Quisiera hacer una pregunta, el tema es así, estoy iniciándome en el desarrollo en HTML junto con CSS, actualmente estoy encaminando una pagina la cual tengo como proyecto final.

Llevo entendiendo mas o menos, como estructurar  la web de a secciones

Codigo.
Código:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="estilos.css">
<html>
<header>
  <title>Prueba</title>
</header>
    
<body>

<div id="top">
    <img class="logo_net"src="logo_net.png"/> <div class="logo_netd"></div>
</div>

<nav id="menu">
<ul>
    <li><a title="Ir a la pagina principal" href="principal.html">Inicio</a></li>
    <li><a title="Aquí encontrarás información referida a la web" href="principal.html">Acerca de</a></li>
    <li><a title="sección de asistencia" href="principal.html">Asistencia</a></li>
    <li><a title="Descarga de controladores" href="principal.html">Descargas</a>
        </li>
    <li><a title="ChangeLog" href="#">Log</a></li>
</ul>
</nav>
<div id="principal">
    
<div id="contenido">
</div>
    
<div id="banner_d">
</div>

</div>
    

</body>
</html>

CSS
Código:
body{
 background-color: #FF8000;  
}


#top{
height: 140;
width: 995;
background-color: yellow;
}

.logo_net{
float:left;
}

.logo_netd{
height: 140; /*altura*/
width: 250px; /*anchura*/
background-color: red;
border-radius:10px;
float: right;
}


nav{ /*para centrarlo en el medio*/
    /*Bordes redondeados*/
    -webkit-border-radius:10px;/*Para chrome y Safari*/
    -moz-border-radius:10px;/*Para Firefox*/
    border-radius:10px;/*El estandar por defecto*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
    /*Degradados*/
    background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
    overflow:hidden; /* overflow para ajustar el contenido a la capa*/
    padding:5px; /*anchura del relleno*/
    width:985;
}

nav ul{
    list-style:none;
    margin:0 10px 0 10px;
    padding:0;
}


nav ul li{
    /*Bordes redondeados*/
    -webkit-border-radius:5px;/*Chrome y Safari*/
    border-radius:5px;/*Estandar por defecto*/
    float:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    font-weight:bold;
    margin-right:10px;
    text-align:center;
    /*Sombras para texto, los mismos parametros que box-shadow*/
    text-shadow: 0px 1px 0px #FFF;
}
nav ul li:hover{
    /*Degradado de fondo*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
    background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
    background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
    background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
    /*Sombras*/
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar por defecto*/
    border:1px solid #E3E3E3;
}
nav ul li a:hover {
    color:#000;
}
nav ul li a{
    color:#999;
    display:block;
    padding:6px;
    text-decoration:none;
    /*Transiciones*/
    -webkit-transition: 0.4s linear all;
    -moz-transition: 0.4s linear all;
    -o-transition: 0.4s linear all;
    transition: 0.4s linear all;
}
div#principal{
height: 600px;
width: 995px;
background-color: green;

}
div#contenido{
height: 600px;
width: 860px;
background-color: red;
border-radius:10px;
overflow: hidden;
}

div#banner_d{
height:120px;
width: 120px;
background-color: blue;
position: relative;
right: 0;
}

(http://i58.tinypic.com/zt9g0n.png)

Mi cuestion es, quiero ubicar la caja azul, digamos, a la derecha..porque quiero que esta sea como una sección de banner, despues, la otra, es que en la caja de contenido quiero que tenga un contenido dinamico, es decir, que el usuario pueda mediante "anterior" y "siguiente" cambiar de contenido, esto para no tener que vooolver a cargar toda la web de nuevo

Como debería?

Saludos!



Título: Re: Duda contenido dinámico
Publicado por: DaNuK en 22 Septiembre 2014, 21:28 pm
Para ubicar la caja azul a la derecha le tienes que poner position absoluta con sus respectivos valores top,left,right y bottom, para el contenido dinamico necesitas un servidor que sirva el contenido puede ser php el mas popular o algun otro servidor, o simplemente un json que contengo el contenido y con ajax lo vas cargando en el div.

Saludos


Título: Re: Duda contenido dinámico
Publicado por: Franjabube en 23 Septiembre 2014, 01:54 am
Para ubicar la caja azul a la derecha le tienes que poner position absoluta con sus respectivos valores top,left,right y bottom, para el contenido dinamico necesitas un servidor que sirva el contenido puede ser php el mas popular o algun otro servidor, o simplemente un json que contengo el contenido y con ajax lo vas cargando en el div.

Saludos

Hola, muchas gracias por responder! Mirá realmente es lo que ando intentando jaja, pero se me va el bloque azul hacia la derecha del body y no contra el margen derecho de la caja verde..lo que quiero lograr es que dicha box verde contenga las otras dos cajas, peroque estas no se superpongan