Problema con <div>

calathea · #1 (**permalink**) 31/05/2009, 10:46

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#coloca {margin-left: 5%;
    margin-top: 15%}
    
#imtexto { background: url(img/relojarena.png);
    background-repeat: no-repeat;
    margin-left: 41%; 
    margin-top: 5%;
    width: 286px;
    height: 245px;
} 
 
#imtexto p{ color: #aa1100;
    margin-top: 10%;
    margin-left: 5%;
    font-size: 20;
}

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!!

WillxD · #2 (**permalink**) 31/05/2009, 11:05

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!

calathea · #3 (**permalink**) 31/05/2009, 11:11

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.

calathea · #4 (**permalink**) 31/05/2009, 11:24

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

WillxD · #5 (**permalink**) 31/05/2009, 12:16

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>

kseso? · #6 (**permalink**) 31/05/2009, 13:13

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.noticias ul li {/*las propiedades y sus valores comunes a todas ellas*/}
.noticias ul li#primera {/*define las particularidades de esta noticia*/}
.noticias ul li#segunda {/*igual que para la anterior*/}
.noticias ul li#tercera {/*idem*/}

Y en el html

Código html:

Ver original<div class="noticias">
<ul>
<li id="primera">bla bla </li>
<li id="segunda">bla bla </li>
<li id="tercera">bla bla </li>
</ul>
</div>

un saludo

calathea · #7 (**permalink**) 31/05/2009, 14:33

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...

kseso? · #8 (**permalink**) 31/05/2009, 14:53

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"

calathea · #9 (**permalink**) 31/05/2009, 16:08

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#coloca {margin-left: 5&#37;;
    margin-top: 15%}
    
.imtexto { background: url(img/relojarena.png);
    background-repeat: no-repeat;
    margin-left: 41%; 
    margin-top: 5%;
    width: 286px;
    height: 245px;
} 
 
.imtexto p{ color: #aa1100;
    margin-top: 10%;
    margin-left: 5%;
    font-size: 20;
}
 
.ultcompra {margin-right: 50%;
    margin-top: 5%;
    width: 40%;
    height: 50%;
}
 
#im1 img{ position: absolute; top:0%; left:0%; }
 
#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...

calathea · #10 (**permalink**) 02/06/2009, 01:15

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 ;)

kseso? · #11 (**permalink**) 02/06/2009, 03:45

Pues qué bueno. Me alegro Calathea.

Hasta la próxima.