Página que "crece" horizontalmente
bueno ya se que el titulo no explica bien, tampoco se si voy a conseguir explicarlo aqui mejor...
un cliente quiere que le haga una plantilla html con noticias que el podra añadir con un backofice...
el caso es que en vez de tenerlas vertical y que se vayan colocando una encima de la otra lo que quiere es que sea horizontal:
primero saldria una cabecera y luego los bloques de noticias uno al lado del otro...
bueno y aqui mi problema:
lo hago con <div>
1º <div> contiene la cabecera y va con float: left;
y lugo cada noticias iria en <div> distintos pero si copio y pego varios cuando llega al tope del navegador en vez de seguir por la derecha se ponen por debajo... (he probado con float: left;, con display: inline; pero nada...)
¿alguna idea???
Fritsch
lo pruebo!
gracias!!!
hartum
ni el uno, ni el otro, las dos soluciones propuestas requieren programación (cosa que por otro lado me encanta), o calculo previo del contenido para fijar el ancho, prueba a ponerle al contenedor de las noticias la propiedad CSS:
white-space:nowrap;
y asi no te hara salto de pagina cuando llegue al tope.
XCX
Es sencillo, la idea es que si el div de cada noticia tiene un ancho fijo calcules la cantidad de noticias que se muestran y los multipliques por este ancho. De este modo le asignas al div que contiene las noticias este ancho por CSS . Te pongo un ejemplo rápido imaginando que lo hagas en php:
PHP
<? $anchonoticia=200;// el ancho del div de noticia
$anchocontenedor=6*$anchonoticia; //si por ejemplo hay 6 noticias?>
CSS
.noticia {
float: left;
height: 200px;
width: 400px;
}
#noticias {
width: <?=$anchocontenedor;?>px;
}
HTML
<div id="noticias">
<div class="noticia">Blablablabla</div>
<div class="noticia">Blablablabla</div>
<div class="noticia">Blablablabla</div>
<div class="noticia">Blablablabla</div>
<div class="noticia">Blablablabla</div>
<div class="noticia">Blablablabla</div>
</div>
Así de facil
sr_lucha
Prueba a ponerle al div en donde metes las noticias un ancho que sea mayor que la pantalla.