Foros del Web » Creando para Internet » CSS »

desorden..

 Estas en el tema de desorden.. en el foro de CSS en Foros del Web. buenas: he creado un estilo css. El problema es que se descuadra todo y lo que es peor, falla al generar contenido dinámicamente con php. ...
  #1 (permalink)  
Antiguo 05/09/2011, 08:46
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Pregunta desorden..
buenas:
he creado un estilo css. El problema es que se descuadra todo y lo que es peor, falla al generar contenido dinámicamente con php.
El código es el siguiente
#contenedor { /* contenedor genérico */
width:1100px;
text-align:center;
margin:auto;
font-family:helvetica;
font-size:10pt;
background:#F6F6F6;
border:1px solid #000;
}

#logo { /* contenedor del logo */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:765px;
height:175px;

}

#multi { /* esto pretende ir a la derecha del logo */
position:absolute;
top:9px;
left:880px; /* tuve que meterle posicionamiento absoluto porque no hay manera de que coloque a la derecha, si no que se coloca debajo */
margin-top:10px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
background:#F6F6F6;
width:295px;
height:175px;
}
#subcontenedor {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
background:#FFFFFF;
width:1080px;
border:1px solid #000;

}
/* barra izquierda */
#contCategorias {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:260px;
background:#F6F6F6;
border:1px solid #000;
border-radius:5px;
}
#categoriasImg { /* contenedor de la imagen */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
width:240px;
background:#F6F6F6;
border-radius:5px;
}
#categorias { /* dentro de aquí va el contenido generado por php */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:240px;
background:#F6F6F6;
border:1px solid #000;
border-radius:5px;
}
#categorias img { /* ahora está como img, pero también probé con div
float:left;
margin-top:2px;
margin-left:8px;
margin-right:8px;
margin-bottom:2px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:100px;
height:100px;
border:1px solid #000;
border-radius:5px;
}


el problema con el código de las categorías es que las imágenes "flotan" por encima de los divs donde se contienen si se generan por php
while(isset($_SESSION["usrCats"][$i])) {
$id=$_SESSION["usrCats"][$i]->get_id_categoria();
$nombre=$_SESSION["usrCats"][$i]->get_nombre(); ?>
<a href="#" onclick="ver(<?=$id;?>)">
<img src="./imgCats/<?=$id;?>.jpg" WIDTH="100" height="100" alt="<?=$nombre;?>" border="0" >
</a>
<?php
$i++;
}?>

alguien puede echar una mano?

gracias!


EDIT:

incluyo las imágenes de los problemas que hay con esta CSS:




Última edición por jesusbg; 05/09/2011 a las 09:27 Razón: mas info
  #2 (permalink)  
Antiguo 05/09/2011, 09:56
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: desorden..
he solucionado lo de las imágenes en negro metiéndolas en una tabla. No es lo más elegante pero bueno, funciona.

Qué hariais con la parte del login/carrito/cuenta?

un saludo
  #3 (permalink)  
Antiguo 05/09/2011, 11:12
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: desorden..
me parece mala idea que utilices position:absolute solo porque no logras alinear las cosas, si se te va para abajo es porque seguramente no tiene espacio suficiente.

el problema de tus cuadros negros se genera porque están flotando, lo que significa que los has sacado del flujo y para compensar tenias que limpiar el float, es decir, agregar overflow:hidden o auto al div padre de estos elementos para que pueda crecer junto con ellos...

o también pudiste haber agregado un gif transparente al final y aplicarle un clear:both; este ultimo no es de mi agrado pero sin duda mas eficiente que meter todo en una tabla

en cuanto al login/carrito/cuenta no me ha quedado muy claro tu problema o el objetivo final que esperas lograr, tal vez si explicas un poco mas y si puedes incluye el código HTML y CSS de esa sección especifica, reitero HTML no PHP que este no nos sirve de nada para reproducir tu fallo.... o mejor aun déjanos un link a tu sitio web utilizando un acortador de URL para que no la coloques directamente.
  #4 (permalink)  
Antiguo 05/09/2011, 11:34
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: desorden..
todavía trabajo en local. Lo del overflow ha funcionado.

Lo de que puede ser por espacio lo dudo, de hecho fue lo primero que pensé y también lo primero que probé:




esto lo hago con este código:

Cita:
<!-- sub cuerpo de la pagina -->
<div id="subcontenedor">
<!-- columna de la izquierda -->
<div id="contCategorias">
<div id="categoriasImg">
<img src="./imgp/categorias.png">
</div>
<div id="categorias">
<form name="frmMenuNavegacion" action="./util/actMenu.php" method="post">
<input type="hidden" name="idIndex" id="idIndex">
esto se llena con php y salen los cuadrados negros

</form>
</div>
</div>
<!-- bloque central -->
<div id="central">
<div id="navegacionBar">
Inicio
</div>
<div id="navegacionDiv">
prueba....
</div>
</div>
<!-- columna de la derecha -->
<!-- <div id="otros">
prueba...<br><br><br><br><br><br><br><br>
</div>-->
</div>
</div>
y el CSS:
Cita:
/* barra izquierda */
#contCategorias {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:260px;
background:#F6F6F6;
border:1px solid #000;
border-radius:5px;
overflow:hidden;
}
#categoriasImg { /* contenedor de la imagen */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
width:240px;
background:#F6F6F6;
border-radius:5px;
}
#categorias {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:240px;
background:#F6F6F6;
border:1px solid #000;
border-radius:5px;
}
#categorias img {
margin-top:2px;
margin-left:0px;
margin-right:0px;
margin-bottom:2px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:100px;
height:100px;

border-radius:5px;
}

/* cuadro central */
#central {
margin-top:10px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:560px;
border:1px solid #000;
border-radius:5px;
}
#navegacionBar {
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:540px;
border:1px solid #000;
border-radius:5px;
color:#00A6D6;
}

#navegacionDiv {
margin-top:0px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:540px;
border-radius:5px;
}
sobran 200 y pico pixels pero aún así se situan uno bajo el otro.

Con lo del "login/carrito/cuenta" el problema es que antes de hacer login(si se diese colocado sin el relative) se vería bien. Sin embargo, al hacer login y aparecer los botones de "cuenta" y "carrito" se sale el subcontenedor de dentro del contenedor.

PD: muchísimas gracias por la ayuda :)
  #5 (permalink)  
Antiguo 05/09/2011, 11:54
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 2 meses
Puntos: 1146
Respuesta: desorden..
la verdad que con tu código no logre identificar el área del problema (login/carrito/cuenta) o no supe leerlo jeje pero bueno intentare adivinar con unos códigos ilustrativos y darte un par de soluciones

Ejemplo 1 (con problema)
Código CSS: 
Ver original
  1. .div1{width:500px;border:1px #333 solid;margin:auto;}
  2. .div2{width:200px;background:#fe0;}
  3. .div3{width:200px;background:#f00;float:right;}
Código HTML: 
Ver original
  1. <div class="div1">
  2.     <div class="div2">dsa</div>
  3.     <div class="div3">dsa</div>
  4. </div>
el div3 que flota a la derecha se coloca abajo porque su hermano (div2) no esta flotando.

solución 1
Código CSS: 
Ver original
  1. .div1{width:500px;border:1px #333 solid;margin:auto;overflow:hidden;}
  2. .div2{width:200px;background:#fe0;float:left;}
  3. .div3{width:200px;background:#f00;float:right;}
flota ambos div uno izquierda y otro derecha, sumado a esto agrega overflow:hidden; al padre para que cresca junto con el contenido.

solución 2 (menos practica pero funcional)
Código HTML: 
Ver original
  1. <div class="div1">
  2.     <div class="div3">dsa</div>
  3.     <div class="div2">dsa</div>
  4. </div>
coloca primero el div3 (flotado a la derecha) y después el div2 que no esta flotando

Nota: asegúrate de siempre tener un doctype valido
  #6 (permalink)  
Antiguo 05/09/2011, 12:06
Avatar de jesusbg  
Fecha de Ingreso: septiembre-2011
Ubicación: Santiago de Compostela
Mensajes: 41
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: desorden..
...acabo de ver la luz! xD muchísimas gracias. Llevaba entorno a 10 horas sin avanzar lo más mínimo.
El problema del otro sitio es con
Cita:
#logo { /* contenedor del logo */
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
width:765px;
height:175px;

}

#multi { /* esto pretende ir a la derecha del logo */
position:absolute;
top:9px;
left:880px; /* tuve que meterle posicionamiento absoluto porque no hay manera de que coloque a la derecha, si no que se coloca debajo */
margin-top:10px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
padding-top:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
background:#F6F6F6;
width:295px;
height:175px;
}
ya le he quitado el posicionamiento relativo y haciendo que flote funciona, si está enseñando el formulario. Si enseña las imágenes el problama es que el subcontenedor se sale del contenedor(mira arriba a la derecha en las 2 primeras pantallas que envié y justo después, mira la posición del cuadrado blanco)

por cierto, si eres de santiago o alrededores y te veo por aquí te debo, como mínimo, unas cañas xD

Etiquetas: php+css
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:37.