Foros del Web » Creando para Internet » CSS »

Problema con <div>

Estas en el tema de Problema con <div> en el foro de CSS en Foros del Web. Hola a todos! Estoy haciendo una página web y en una de las secciones quiero poder noticias. Quería darle un aspecto desenfadado y ordenarlo de ...
  #1 (permalink)  
Antiguo 31/05/2009, 11:46
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Problema con <div>

Hola a todos!

Estoy haciendo una página web y en una de las secciones quiero poder noticias.

Quería darle un aspecto desenfadado y ordenarlo de forma que las "noticias" que pusiera estuvieran en diferentes capas: unas con una imagen de fondo, otras con otra imagen diferente, otras con el fondo mismo de la página web...

He incluido una noticia ya, que tiene de fondo una imagen... y esa capa se me coloca perfectamente en el sitio que la indico.

El problema viene cuando intento incluir otra capa más, esta vez sin fondo, pero incluyendo imágenes y texto...
Al modificar los distintos parámetros de dicha capa, me desaparece el fondo de la otra capa q antes me aparecía bien, el color del texto de la primera capa introducida cambia y las imágenes de la nueva capa nisiquiera aparecen.

He probado a crear las diferentes noticias en documentos aparte y luego incluirlos con php en la misma pagina...pero entonces el css me desplaza la cabecera hacia la derecha...y me deja la página en la izquierda.

Código HTML:
<body>
<?php
	include('cabecera.php');
	include('menu.php');
	cabecera();
	menu();
?>

<div id="coloca">
<h1> &Uacute;ltima Hora </h1>

	<div id="imtexto">
	<p>¡Ya somos <br>
	
	<?php
	include('lib.php');
	
	$db = conectardb();
	
	if( $db == false ){
		exit;
	}
	
	else {
	$consultaid = "SELECT id FROM users";
	$ids = mysql_query($consultaid);
	$numRows = mysql_num_rows($ids);
	echo " " . $numRows . " usuarios!</p>";
	}
	?>
	</div>

</div>
</body> 
Este es el código con sólo la primera noticia incluida (detro del div de id imtexto)
Y este el css correspondiente:

Código css:
Ver original
  1. #coloca {margin-left: 5%;
  2.     margin-top: 15%}
  3.    
  4. #imtexto { background: url(img/relojarena.png);
  5.     background-repeat: no-repeat;
  6.     margin-left: 41%;
  7.     margin-top: 5%;
  8.     width: 286px;
  9.     height: 245px;
  10. }
  11.  
  12. #imtexto p{ color: #aa1100;
  13.     margin-top: 10%;
  14.     margin-left: 5%;
  15.     font-size: 20;
  16. }

Así es como funciona bien, hasta que le añado otra capa a continuación

Ah! si incluyo texto dentro de la capa "coloca" después del código de la noticia de la capa "imtexto" tampoco me lo imprime...ni en el color predeterminado del texto...ni en otro (lo he comprobado quitando el estilo, no fuera a ser que se hubiera colocado con el mismo color que el fondo...)

¿¿Cómo puedo hacer para lograr que cada capa quede en la posicion que le indico sin desaparecerme por ello otras capas o desconfigurando el estilo??

Gracias de antemano!
un saludo!!
  #2 (permalink)  
Antiguo 31/05/2009, 12:05
Avatar de WillxD  
Fecha de Ingreso: febrero-2009
Ubicación: Lima =D!
Mensajes: 82
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: Problema con <div>

Si vas a repetir el estilo en varias "capas" ya no debes usar ID sino clases
osea en tu css lo pondrías así .coloca

Si dejas tu web sería más fácil ver el problema y ayudarte :)

Salu2!
  #3 (permalink)  
Antiguo 31/05/2009, 12:11
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: Problema con <div>

probare con las clases y te cuento, no me había dado cuenta de ese detalle

no puedo dejar la web porque no la tengo colgada... :S por eso había colocado los trozos de código que creí imprencindibles.
  #4 (permalink)  
Antiguo 31/05/2009, 12:24
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: Problema con <div>

No funciona usando clases tampoco.
Ahora mismo tengo el mismo código que puse antes, cambiando los id por class... (exceto el de coloca que me interesa tenerlo como id...solo lo puede tener una capa, la principal, en la que van el resto) y añadiendo un parrafo despues del código de la noticia...y tan solo me aparece la noticia...el parrafo que escribí desapareció... :S
  #5 (permalink)  
Antiguo 31/05/2009, 13:16
Avatar de WillxD  
Fecha de Ingreso: febrero-2009
Ubicación: Lima =D!
Mensajes: 82
Antigüedad: 8 años, 9 meses
Puntos: 3
Respuesta: Problema con <div>

Es así como es lo que estas buscando o me estoy equivocando =S

Código:
<div id="coloca">
<h1> &Uacute;ltima Hora </h1>

	<div class="imtexto">
            <p>¡Ya somos <br>
    			Todo el contenido aqui
            </p>
	</div>
    
        <div class="imtexto">
            <p>
        	texto 2
            </p>
        </div>
    
       <div class="imtexto">
            <p>
        	texto3
            </p>
        </div>

</div>
  #6 (permalink)  
Antiguo 31/05/2009, 14:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con <div>

Si a cada noticia le quieres dar un aspecto distinto en alguna de sus propiedades, utiliza identificadores únicos (#/id) para diferenciar cada una de ellas:
Código css:
Ver original
  1. .noticias ul li {/*las propiedades y sus valores comunes a todas ellas*/}
  2. .noticias ul li#primera {/*define las particularidades de esta noticia*/}
  3. .noticias ul li#segunda {/*igual que para la anterior*/}
  4. .noticias ul li#tercera {/*idem*/}

Y en el html
Código html:
Ver original
  1. <div class="noticias">
  2. <ul>
  3. <li id="primera">bla bla </li>
  4. <li id="segunda">bla bla </li>
  5. <li id="tercera">bla bla </li>
  6. </ul>
  7. </div>

un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 31/05/2009, 15:33
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: Problema con <div>

Estoy haciendo lo que tu dices Kseso, poner a cada noticia un identificador diferente...
si lo pongo en forma de lista ordenada, voy a poder poner una a la derecha y la siguiente al lado pero a la izq??
Probé metiendolo en tablas también en vez de en listas...pero no me funciona... en el momento en el que incluyo mas de una noticia se me destroza el css que tengo para el resto y me desaparecen...
  #8 (permalink)  
Antiguo 31/05/2009, 15:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con <div>

Calathea, mejor déjanos ver el código generado (no el .php) de esa parte, tanto el html como el css involucrado. Y mejor si podemos verla en red. ¿Puedes ponernos un enlace?
Cita:
si lo pongo en forma de lista ordenada, voy a poder poner una a la derecha y la siguiente al lado pero a la izq??
Esto no lo he entendido.

Un saludo.

P.D.: una pena que no se vea mejor tu "kukuxumuxo"
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 31/05/2009, 17:08
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: Problema con <div>

Os puedo copiar el código, no tengo la página subida.

Código HTML:
<body>
<?php[INDENT]#cabeceras php[/INDENT]?>

<div id="coloca">
<h1> &Uacute;ltima Hora </h1>

<div class="imtexto">

	<p>¡Ya somos <br>
	
	<?php
	#codigo de busqueda en base de datos y un echo con el final del párrafo
	?>
	</div> //imtexto

<div class="ultcompra">
<div id="im1"> <!--imagen a la izquierda-->
<img src="img/saco1.png">
</div> //im1
<p>El &uacute;ltimo intercambio fue:<br>

<?php
	#código de busqueda en base de datos y un echo con el final del párrafo
?>
<div id="im2"> <!--imagen a la derecha y un poco mas abajo que la otra--> 
<img src="img/saco2.png">
</div> //im2
</div> //ultcompra
</div> //coloca
</body> 
y el css que afecta a dichas capas es el siguiente:

Código css:
Ver original
  1. #coloca {margin-left: 5&#37;;
  2.     margin-top: 15%}
  3.    
  4. .imtexto { background: url(img/relojarena.png);
  5.     background-repeat: no-repeat;
  6.     margin-left: 41%;
  7.     margin-top: 5%;
  8.     width: 286px;
  9.     height: 245px;
  10. }
  11.  
  12. .imtexto p{ color: #aa1100;
  13.     margin-top: 10%;
  14.     margin-left: 5%;
  15.     font-size: 20;
  16. }
  17.  
  18. .ultcompra {margin-right: 50%;
  19.     margin-top: 5%;
  20.     width: 40%;
  21.     height: 50%;
  22. }
  23.  
  24. #im1 img{ position: absolute; top:0%; left:0%; }
  25.  
  26. #im2 img{ position: absolute; top: 10%; right: 0%; }

Espero que con eso os sirva...

Os adjunto una imagen donde se ve claramente que sólo aparece la noticia "imtexto" y las otras se las "come" ah! el texto está en color blanco excepto para la noticia "imtexto"; lo tengo definido así para toda la página



Se que se ve un fatal error en la noticia "imtexto" (imagen del reloj de arena naranja) pero es un problema con la base de datos que aun no he tenido tiempo de solucionar...

Gracias por la ayuda!

PD: Kseso, el Kukuxumusu está sacado con la camara de un movil, por eso sale asi de mal...

Última edición por calathea; 31/05/2009 a las 17:23
  #10 (permalink)  
Antiguo 02/06/2009, 02:15
Avatar de calathea  
Fecha de Ingreso: octubre-2008
Ubicación: Valladolid
Mensajes: 122
Antigüedad: 9 años, 1 mes
Puntos: 3
Respuesta: Problema con <div>

ya está solucionado el problema, aunque la verdad es que no se cómo se arregló... =S
pudieron ser los includes que estaban puestos como include y no como include_once
gracias por la ayuda y la atencion prestada ;)
  #11 (permalink)  
Antiguo 02/06/2009, 04:45
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con <div>

Pues qué bueno. Me alegro Calathea.

Hasta la próxima.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 22:41.