Foros del Web » Creando para Internet » CSS »

Resultado horizontal (maysql + php + css)

Estas en el tema de Resultado horizontal (maysql + php + css) en el foro de CSS en Foros del Web. Hola Foreros!!! Creo que esto se resuelve con CSS No se si es a este foro que debo recurrir de no ser así mil disculpas ...
  #1 (permalink)  
Antiguo 18/11/2008, 11:17
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Resultado horizontal (maysql + php + css)

Hola Foreros!!!

Creo que esto se resuelve con CSS No se si es a este foro que debo recurrir de no ser así mil disculpas

Estoy en medio de un problema que no logro resolver desde hace días, pensé que el tiempo y las pruebas iban a traer claridad a mi mente.
Resulta que tengo una base de datos con productos y estos campos...

(modelo, imagen y medidas)

Unos cuadraditos así

--------------------
Modelo
--------------------


Imagen


---------------------
medida 1
medida 2
medida etc
--------------------

y necesito que se forme una tira horizontal uno al lado del otro con una barra de scroll abajo


entonces esto es lo que intenté


tira.php

Código PHP:
<?php
$conexion
=mysql_connect("localhost","pirulo","clave") or  die("Problemas en la conexion");
mysql_select_db("base",$conexion) or  die("Problemas en la selección de la base de datos");


$registros=mysql_query("SELECT * FROM modelo as m
join forma as f on f.id_f=m.id_f
where forma='rectangular' order by modelo;"
,$conexion) or die("Problemas en el select:".mysql_error());
while (
$reg=mysql_fetch_array($registros))
{
?>

<div id="tira">

<div id="tiraProd">
<div id="tiraMod">
<?
echo $reg['modelo'];
?>
</div><!--#/tiraMod-->
<div id="tiraImg">
<? 
$imagen 
$reg['imagen'];
if(
$imagen=="productos/"){
echo 
"<img src=\"img/imagen_no_dis.jpg\">"
}else{
echo  
"<img src='".$reg['imagen']."' onload='if(this.height > 125) {this.height=125}'>"; }
?>

</div><!--#/tiraImg-->
<div id="tiraMed">
<?
$medida
=mysql_query("select * from medida as med
join modxmed as mxm on mxm.id_med=med.id_m
where  mxm.id_mod="
.$reg['id_mod']);

while (
$reg_med=mysql_fetch_array($medida))

{
echo 
'<b>Medida: </b>'.$reg_med['medida'];
echo 
"<br />";
echo 
"<hr>";
    
    }
//cierre while medidas
?>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
<?
//cierre while modelo
mysql_close($conexion);
?>
</div>
que tiene este css
Código:
#tira{
	width:3000px;
	}
	
#tiraProd{
	width:146px;
	border:1px solid #FF6600;
	height:auto;
	margin-left:5px;
	float:left;
	}
	
#tiraMod{
	width:146px;
	background:#FF6600;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.8em;
	font-weight:bolder;
	color:#FFFFFF;
	}

#tiraImg{
	background:#000000;
	width:136px;
	height:129px;
	text-align:center;
	margin:5px;
	}
	
#tiraMed{
	background:#CCCCCC;
	width:136px;
	font:Verdana, Arial, Helvetica, sans-serif;
	font-size:0.7em;
	margin:5px;
	}
esto va dentro de un contenedor...

Código HTML:
<div id="panelCent"><? include("tira.php"); ?> </div><!--#/panelCentral--> 

En FF me lo toma pero no en ie6/7
desde ya muchas gracias por su atención y paciencia.
  #2 (permalink)  
Antiguo 18/11/2008, 12:31
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Creo que debería pasar al foro de php, alguien sabe como debo hacer?
  #3 (permalink)  
Antiguo 18/11/2008, 12:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Mira, yo en principio no veo nada raro en el código. Lo único tienes una cosa importante: no debes usar ID si los vas a repetir. Si como dices quieres hacer una tira, debes cambiar los ID por class y las almohadillas (#) por puntos (.)

Si crees que es cosa de css, mejor que pongas el código html generado en el navegador. Si crees que es PHP, usa el icono bajo tu nombre del símbolo de precaución y repórtalo para pedir a un moderador que mueva tu mensaje.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 18/11/2008, 13:21
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Gracias Mikmoro, ya cambié las id por clases y nada el IE sigue sin responder en cambio el FF me los lista uno al lado del otro.
  #5 (permalink)  
Antiguo 18/11/2008, 16:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Cuando decía "Si crees que es cosa de css, mejor que pongas el código html generado en el navegador", quería decir que lo pongas aquí para poder verlo.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 19/11/2008, 04:11
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Hola, perdón por la demora.
La tira que quiero mostrar horizontalmente es el código que está arriba que es "tira.php" este lo tengo dentro de un include en "panelCent" de este código que no se si es el que me estas sugiriendo que suba.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titulo</title>
<link href="estilos/master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="centrar">
<div id="contenedor">

<div id="top">

<div class="colVertTop"></div><!--#/colVert-->
	<div id="contNav">
	<ul id="navSup">
		<li><a href="#">Ambientaciones</a></li>
		<li><a href="#">Sucursales</a></li>
		<li><a href="#">Franquicias</a></li>
	</ul>
	</div>
</div><!--#/top-->

<div id="sepNar"></div><!--#/sepNar-->
<div id="sup"></div><!--#/sup-->
<div id="central">

<div class="colVertCent"></div><!--#/colVert-->
<div id="menuVert">
	
	<ul id="navVert">
		<li><a href="#">Hidromasajes</a></li>
		<li><a href="#">Sanitarios</a></li>
		<li><a href="#">Griferías</a></li>
		<li><a href="#">Amoblamientos</a></li>
		<li><a href="#">Mamparas</a></li>
		<li><a href="#">Bachas y Mesadas</a></li>
		<li><a href="#">Complementos</a></li>
	</ul>
</div><!--#/menuVert-->
<div id="panelCent"><? include("tira.php"); ?> </div><!--#/panelCentral-->
</div><!--#/central-->
<div id="pie"></div><!--#/pie-->
</div><!--#/contenedor-->
</div>
<!--#/centrar-->


</body>
</html> 
Me parece que voy a probar con tablas...hace tanto que no las uso que voy a tener que ponerme de nuevo a tiro con ellas.
  #7 (permalink)  
Antiguo 19/11/2008, 04:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Cuando se puede tratar de un problema de css y no se ve un error en el código a simple vista, el código php y los includes no aportan mucho para poder loalizar el error.

Cuado tú ves la página en tu navegador, si miras el código fuente verás el código html que te ha generado el php en el servidor, es decir, ves el resultado html que el servidor envia al navegador. Pues ese código hyml es el que hace falta ver para encontrar si hay un error n el propio html o de aplicación de css.

Si pones la tira en un include pero nos pones el include en lugar del código html que genera ese include en tu página, no podemos saber cómo afecta la css a tu código html.

Eso es lo que quiero decir.

Hacemos un intento antes de que pruebes con las tablas, que creo que te va a resultar bastante peor.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 19/11/2008, 08:49
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Ah!!! esto me devuelve el navegador.
Esto es como sería en realidad lo que tendría que mostrar.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>hidromasajeAldía</title>
<link href="estilos/master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="centrar">
<div id="contenedor">

<div id="top">

<div class="colVertTop"></div><!--#/colVert-->
	<div id="contNav">

	<ul id="navSup">
		<li><a href="#">Ambientaciones</a></li>
		<li><a href="#">Sucursales</a></li>
		<li><a href="#">Franquicias</a></li>
	</ul>
	</div>
</div><!--#/top-->

<div id="sepNar"></div><!--#/sepNar-->
<div id="sup"></div><!--#/sup-->
<div id="central">

<div class="colVertCent"></div><!--#/colVert-->
<div id="menuVert">
	
	<ul id="navVert">
		<li><a href="#">Hidromasajes</a></li>
		<li><a href="#">Sanitarios</a></li>
		<li><a href="#">Griferías</a></li>

		<li><a href="#">Amoblamientos</a></li>
		<li><a href="#">Mamparas</a></li>
		<li><a href="#">Bachas y Mesadas</a></li>
		<li><a href="#">Complementos</a></li>
	</ul>
</div><!--#/menuVert-->
<div id="panelCent">
<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Acapulco</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2677_acapulco.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>149 x 78<br /><hr><b>Medida: </b>164 x 78<br /><hr><b>Medida: </b>163 x 90<br /><hr><b>Medida: </b>182 x 91<br /><hr><b>Medida: </b>190 x 91<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Alvear</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2662_alvear.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>160 x 80<br /><hr>
</div><!--#/tiraMed-->

</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Aniversario</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2647_aniversario.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>147 x 70<br /><hr><b>Medida: </b>161 x 70<br /><hr><b>Medida: </b>170 x 70<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Aruba</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2922_aruba.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>180 x 150<br /><hr>
</div><!--#/tiraMed-->

</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Atenas</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2908_atenas.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>155 x 90<br /><hr>
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Bahía</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2912_bahia.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>120x 70 x 42<br /><hr><b>Medida: </b>130 x 70<br /><hr><b>Medida: </b>138 x 70<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Barbados</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2924_barbados.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>150 x 120<br /><hr><b>Medida: </b>165 x 120<br /><hr><b>Medida: </b>180 x 120<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Barbados</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/532.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Dual</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2936_dual.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>180 x 130<br /><hr><b>Medida: </b>180 x 150<br /><hr>
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Ibiza</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2931_ibiza.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>182 x 82<br /><hr><b>Medida: </b>182 x 91<br /><hr><b>Medida: </b>180 x 105<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Minimal</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/minimal.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>170 x 75<br /><hr>
</div><!--#/tiraMed-->

</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Orlando</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2915_orlando.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>160 x 75<br /><hr>
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Penélope</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2905_penelope.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>160 x 82<br /><hr><b>Medida: </b>170 x 82<br /><hr><b>Medida: </b>180 x 82<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Relax Dúo</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2723.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>180 x 120<br /><hr>
</div><!--#/tiraMed-->

</div><!--#/tiraProd-->

<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Relax Simple</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2618_relaxsimple.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>140 x 77<br /><hr><b>Medida: </b>149 x 77<br /><hr><b>Medida: </b>167 x 77<br /><hr>

</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</div>
 </div><!--#/panelCentral-->
</div><!--#/central-->
<div id="pie"></div><!--#/pie-->
</div><!--#/contenedor-->
</div>
<!--#/centrar-->


</body>
</html> 
  #9 (permalink)  
Antiguo 19/11/2008, 10:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Bien, efectivamente aquí es donde se ve que es el php el que te está produciendo el problema. Cada bloque lo haces así:

Cita:
<div class="tira">

<div class="tiraProd">
<div class="tiraMod">
Relax Dúo</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2723.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>180 x 120<br /><hr>
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
El problema es que estás iniciando la clase "tira" por cada bloque, y creo que no debes hacerlo así, es decir, la caja tira debe ser una, la que tiene los 3000px de ancho y debe englobar a todo el resto de cajas, por lo que <div class="tira"> debería empezar al principio de todas las cajas una única vez y cerrarse al final de estas, y en realidad cada bloque debería ser así:

Cita:
<div class="tiraProd">
<div class="tiraMod">
Relax Dúo</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2723.jpg' onload='if(this.height > 125) {this.height=125}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<b>Medida: </b>180 x 120<br /><hr>
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
Si haces esto funcionará bien. Cambia el <div class="tira"> por <div id="tira"> (también en la css, .tira por #tira). Ahora en el php haz que el id tira quede fuera de la generación de las cajas, para que salga una sola vez y no en cada bloque. De esa manera sin tocar nada en la css debería funcionarte bien.

Supongo que debes hacerlo así:

Cita:
<div id="tira">
<?php
$conexion=mysql_connect("localhost","pirulo","clav e") or die("Problemas en la conexion");
mysql_select_db("base",$conexion) or die("Problemas en la selección de la base de datos");


$registros=mysql_query("SELECT * FROM modelo as m
join forma as f on f.id_f=m.id_f
where forma='rectangular' order by modelo;",$conexion) or die("Problemas en el select:".mysql_error());
while ($reg=mysql_fetch_array($registros))
{
?>
<div id="tiraProd">
<div id="tiraMod">
<? (etcétera)
Pero seguro que sabes más que yo de php.

Si algo de lo que he dicho no te queda claro me dices.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 19/11/2008, 14:31
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Impecable Mikel, era eso nomás se ve perfecto en los 2 navegadores, muchísimas gracias por tu tiempo.
De paso te hago una pregunta con respecto al ancho de la tira, existe la posibilidad de que la tira se vaya ensanchando sola a medida que se cargan los productos?, porque al ponerle width:3000px; la limito si el cliente le carga algún producto nuevo.
Mil gracias nuevamente, un abrazo.
Claugtrs
  #11 (permalink)  
Antiguo 19/11/2008, 18:17
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

No creo que sea posible, y no me parece nada práctico. Lo que quizá sí te podría interesar es que la tira tenga un ancho determinado, como la página por ejemplo, y que aparezca un scroll en la caja, no en toda la página. De esta manera no tienes que deplazar toda la página para ver los productos de la derecha, y además puedes añadir los que quieras y la caja crecerá sin que lo notes.

Es mi opinión.
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 20/11/2008, 04:38
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (mysql + php + css)

Muy bueno y eso como podría hacerlo?... Donde busco esa información? porque cuando tenía un ancho determinado en la tira contenedora, los productos se me iban para abajo cuando se llenaba el ancho de la tira.
  #13 (permalink)  
Antiguo 20/11/2008, 05:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

A ver si este ejemplo te sirve de arientación sobre cómo hacerlo.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 20/11/2008, 11:01
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Probé con..

Código:
#panelCent{
		margin-top:10px;
		float:left;
		height:290px;
		width:580px;
		overflow:scroll;
		overflow-y:hidden;
		white-space:nowrap;
		}

.tira {display: inline;}
y no me funcionó me puso un producto arriba del otro en grupo de a tres (osea el ancho de la pag) ...esta noche con mas tiempo reviso bien el ej que me pasaste y te cuento , muchas gracias.
  #15 (permalink)  
Antiguo 22/11/2008, 10:42
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Es Probable que funcione con imágenes y no con divs?
  #16 (permalink)  
Antiguo 22/11/2008, 10:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

No, funciona con divs porque en otra consulta ayer mismo usaron el ejemplo para aplicarlo con divs y funcionó perfectamente. Además si te fijas bien está hecho con divs que tienen a su vez dentro imágenes.

Por la línea que pusiste en el anterior mensaje:

.tira {display: inline;}

ya me dió la sensación de que no lo ibas a hacer bien.

Tu div "tira" sería el que yo pongo como contenedor, y los bloques de dentro que tú tienes son los <div class="caja"> que yo pongo.

Es decir, tu <div id="tira"> sería el que llevaría

Cita:
#tira {overflow: auto;
width: 300px;
margin: 40px;
height: 104px;
white-space:nowrap;
}
y tus div <div class="tiraProd">, serían los que en mi ejemplo llevarían

.tiraProd {display: inline;} con el resto de propiedades que ya tengan de antes.

Si no te sale pon el código que quieres usar y lo vemos.
__________________
Visita mi nueva web idplus.org
  #17 (permalink)  
Antiguo 23/11/2008, 20:29
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Siempre me pasa lo mismo me los lista verticalmmente una vez que se llena la caja horizontalmente y no me scrola horizontal sino vertical..

Códigos

primero probé


Código:
#panelCent{
		margin-top:10px;
		float:left;
		height:290px;
		width:580px;
		overflow:scroll;
		overflow-y:hidden;
		white-space:nowrap;
		}
#tira{
  display: inline;
  }
no anduvo, entonces probé...

Código:
#panelCent{
		margin-top:10px;
		float:left;
		height:290px;
		width:580px;
		overflow:scroll;
		overflow-y:hidden;
		white-space:nowrap;
		} 
.tiraProd{
	width:146px;
	border:1px solid #FF6600;
	height:auto;
	margin-left:5px;
	float:left;
  display: inline;
	}
nop.. entonces

Código:
#panelCent{
		margin-top:10px;
		float:left;
		height:290px;
		width:580px;
		overflow:scroll;
		overflow-y:hidden;
	
		}   

#tira{
  display: 	white-space:nowrap;
  }
    
    
    .tiraProd{
	width:146px;
	border:1px solid #FF6600;
	height:auto;
	margin-left:5px;
	float:left;
  display: inline;
	}
tampoco, y finalmente

Código:
#tira{
	overflow: auto;
  width: 578px;
  margin: 1px;
  height: 288px;
  white-space:nowrap;
	}
	
.tiraProd{
	width:146px;
	border:1px solid #FF6600;
	height:auto;
	margin-left:5px;
	float:left;
  display: inline;
	}
y no quiso, siempre me los listó en forma vertical...veo el ejemplo que me subiste y es tan claro pero no tengo forma de entenderlo y adaptarlo a mi trabajo. Mikel agradezco tu paciencia.
  #18 (permalink)  
Antiguo 24/11/2008, 03:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Lo que no entiendo bien es por qué no estás imitando el ejemplo con exactitud. Por ejemplo, en .tiraProd te sobra el float: left. Prúebalo así:

Cita:
#tira{
overflow: auto;
width: 578px;
margin: 1px;
height: 288px;
white-space:nowrap;
}

.tiraProd{
width:146px;
border:1px solid #FF6600;
margin-left:5px;
display: inline;
}
__________________
Visita mi nueva web idplus.org
  #19 (permalink)  
Antiguo 24/11/2008, 04:46
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Ya lo había probado, pero de esta forma me los lista directamente uno arriba del otro.
  #20 (permalink)  
Antiguo 24/11/2008, 04:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

¿Estás completamente seguro de eso? Yo cojo lo que acabo de poner, lo meto en mi ejemplo y funcina perfectamente. Igual hay alguna otra cosa que te está afectando.
__________________
Visita mi nueva web idplus.org
  #21 (permalink)  
Antiguo 24/11/2008, 12:51
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Mira aquí te link para que veas
  #22 (permalink)  
Antiguo 24/11/2008, 13:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Sí, parece que algo ocurre ahí. Habrá que mirarlo con detenimiento.
__________________
Visita mi nueva web idplus.org
  #23 (permalink)  
Antiguo 25/11/2008, 05:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Pues no, parece que efectivamente en cuanto dentro de cada caja hay un elemento de bloque que produce un corte la cosa se rompe. Hay que buscar otra manera de hacerlo, probablemente mediante una tabla con table-layout: fixed;
__________________
Visita mi nueva web idplus.org
  #24 (permalink)  
Antiguo 25/11/2008, 05:21
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Resultado horizontal (maysql + php + css)

Pruébalo así:

Cita:
<!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" lang="es-es">
<head>
<title>Claugtrs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor {overflow: auto;
width: 300px;
margin: 40px;
height: 104px;
}
.tiraProd {border:1px solid #FF6600;
margin-left:5px;
width:146px;
}
table {table-layout: fixed;}
td {width: 146px; vertical-align: top;}
</style>
</head>
<body>
<div id="contenedor">
<table>
<tr>
<td>
<div class="tiraProd">
<div class="tiraMod">
- Acapulco</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2677_acapulco.jpg' onload='if(this.height > 115) {this.height=115}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<a href="formato.php?id_mod=8">149 x 78</a><br /><a href="formato.php?id_mod=8">164 x 78</a><br /><a href="formato.php?id_mod=8">163 x 90</a><br /><a href="formato.php?id_mod=8">182 x 91</a><br /><a href="formato.php?id_mod=8">190 x 91</a><br /></div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>

<td>
<div class="tiraProd">
<div class="tiraMod">
- Alvear</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2662_alvear.jpg' onload='if(this.height > 115) {this.height=115}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<a href="formato.php?id_mod=5">160 x 80</a><br /></div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>

<td>
<div class="tiraProd">
<div class="tiraMod">
- Alvear</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2662_alvear.jpg' onload='if(this.height > 115) {this.height=115}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<a href="formato.php?id_mod=5">160 x 80</a><br /></div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>

<td>
<div class="tiraProd">
<div class="tiraMod">
- Alvear</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2662_alvear.jpg' onload='if(this.height > 115) {this.height=115}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<a href="formato.php?id_mod=5">160 x 80</a><br /></div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>

<td>
<div class="tiraProd">
<div class="tiraMod">
- Alvear</div><!--#/tiraMod-->
<div class="tiraImg">
<img src='productos/2662_alvear.jpg' onload='if(this.height > 115) {this.height=115}'>
</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<a href="formato.php?id_mod=5">160 x 80</a><br /></div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>
</tr>
</table>

</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #25 (permalink)  
Antiguo 01/12/2008, 14:55
 
Fecha de Ingreso: febrero-2004
Mensajes: 134
Antigüedad: 20 años, 1 mes
Puntos: 0
Respuesta: Resultado horizontal (maysql + php + css)

Mikel!!! muy grosso!!! funcionó a la perfección, yo estaba desaparecido porque me estaba volviendo loco y estaba por cambiar el diseño y hacerlo de otra manera.
Entonces el código final del php (por si a alguien le sirve), es este...

Código PHP:
<div id="contenedor">
<table>
<tr>
<?php
$conexion
=mysql_connect("localhost","","") or  die("Problemas en la conexion");
mysql_select_db("",$conexion) or  die("Problemas en la selección de la base de datos");


$registros=mysql_query("SELECT * FROM modelo as m
join forma as f on f.id_f=m.id_f
where forma='rectangular' order by modelo;"
,$conexion) or die("Problemas en el select:".mysql_error());
while (
$reg=mysql_fetch_array($registros))
{
?>

<td>

<div class="tiraProd">
<div class="tiraMod">
<?
echo "- ".$reg['modelo'];
?>
</div><!--#/tiraMod-->
<div class="tiraImg">
<? 
$imagen 
$reg['imagen'];
if(
$imagen=="productos/"){
echo 
"<img src=\"img/imagen_no_dis.jpg\">"
}else{
echo  
"<img src='".$reg['imagen']."' onload='if(this.height > 115) {this.height=115}'>"; }
?>

</div><!--#/tiraImg-->
<div class="tiraMed">
<div class="tiraIz"><b>Medida: </b></div>
<div class="tiraDer">
<?
$medida
=mysql_query("select * from medida as med
join modxmed as mxm on mxm.id_med=med.id_m
where  mxm.id_mod="
.$reg['id_mod']);

while (
$reg_med=mysql_fetch_array($medida))

{

echo 
'<a href="formato.php?id_mod='.$reg['id_mod'].'">'.$reg_med['medida'].'</a>';
echo 
"<br />";
    
    }
//cierre while medidas
    
?>
</div><!--#/tiraDer-->
</div><!--#/tiraMed-->
</div><!--#/tiraProd-->
</td>

<?
//cierre while modelo
mysql_close($conexion);
?>
</tr>
</table>
</div>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:58.