Foros del Web » Diseño web » CSS »

Forzar a un estilo dentro de un div con otro diferente

Estas en el tema de Forzar a un estilo dentro de un div con otro diferente en el foro de CSS en Foros del Web. Veréis, tengo un lio tremendo. A ver si me podéis ayudar porque no funciona mi lógica ya. Tengo varios div dentro de otros div. En ...
  #1 (permalink)  
Antiguo 04/06/2006, 13:55
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Forzar a un estilo dentro de un div con otro diferente

Veréis, tengo un lio tremendo. A ver si me podéis ayudar porque no funciona mi lógica ya.

Tengo varios div dentro de otros div. En el div primero, el más grande, tengo que para poder colocar enlaces en la imagen del fondo, y estos tienen un estilo tal que así:

#bloque a {
text-decoration: none;
width: 46px;
position: absolute;
}

#bloque a i{
visibility: hidden;
}

a#inicio {top: 54px; left: 527px; height:40px;}

(aquí va un listado de 10 con 10 trozos de imagen que tienen enlace).

O sea que se supone que todo aquel dentro de <i></i> y dentro de bloque tendrán esta forma, no es así?.

Bien. Ahora yo quiero que dentro de este bloque haya otro div, donde va texto, con enlaces.

pues estos enlaces me salen mal, con ancho 46 y esas cosas.

He cambiado y he puesto esto:

#bloque a {
text-decoration: none;

}

#bloque a i{
visibility: hidden;
width: 46px;
position: absolute;
}

para que solo afectase a los que estan dentro de <i>. Pero...no salen los enlaces!!.

He intentado crear otra

#bloque-central a {
estilo
}


Para que afecte a las cosas dentro del div grande, pero no parece que haga nada. De hecho salen mal igualmente. Tampoco sé qué poner en position aqui, si relative, inherit, o lo que sea.


Realmente no se como hacer para que el estilo de las de arriba funcione, pero los enlaces del texto normal se vean NORMALES.




Teneis alguna forma de arreglar esto?



Gracias millones, chicos.
  #2 (permalink)  
Antiguo 04/06/2006, 17:50
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 9 años
Puntos: 1
Hola darkgaze.
Olvidaste poner el código html al que aplicas el css. sin ello cuesta entender cual es el problema.


Parece que tienes razón, te estas liando. veo dos salidas: simplificar, si no sabes hacerlo complejo hazlo simple. Aprender, si quieres hacerlo complejo necesitas entenderlo:


Simplificar:
Cita:
Realmente no se como hacer para que el estilo de las de arriba funcione, pero los enlaces del texto normal se vean NORMALES.
si quieres que las cosas se vean 'normales' no les apliques ningún estilo.
si quieres que se algo se vea de-una-manera, aplícale la clase de-un-manera




Entender:
las reglas con selectores compuestos se entienden mejor leyendolas al reves:
#bloque a i { visibility: hidden; }
esto se lee así:
aplíquesele el estilo visibility: hidden; a todo elememto i que sea descendiente de un elemento a que sea descendiente del elemento con id='bloque'

Última edición por Jorolo; 04/06/2006 a las 18:03 Razón: comentario erroneo
  #3 (permalink)  
Antiguo 05/06/2006, 01:10
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Exclamación

Bueno. mil gracias por la respuesta.

Verás, el código html en realidad no existe. Es una pagina php que carga un html dependiendo de qué sea.

Es decir, te puedo poner esto, a ver si lo entiendes, pero dentro de la parte derecha e izquierda no te pongo nada, porque ahi van cosas que se cargan, pero que no tienen importancia.

La estructura es:

- bloque que ocupa toda la imagen de fondo de un libro. Hay unos enlaces de imagenes.
- bloque-central que son el libro en sí, que es mas pequeño y es disjunto a los enlaces de las imagenes (que son pestañas en el libro, justo encima, y a los lados)
-izquierda y derecha: las paginas del libro donde va el texto.

Sobre los enlaces, hay etiquetas predefinidas al principio del css, con el a:hover, a:visited...y todo eso.
Había definido un estilo

#bloque a {
text-decoration: none;
width: 46px;
position: absolute;
}

#bloque a i{
visibility: hidden;
}

y luego un listado de todos los enlaces

a#inicio {top: 54px; left: 527px; height:40px;}
a#ambientacion {top:20px; left:590px; height:70px;}
.....


Y aquí esta el html que muestra todo esto.
Lo que pretendo es que los enlaces del texto de las paginas no tengan el estilo con ese tamaño, y todo eso. Intenté poner, como dices, el estilo completo a las etiquetas <i>, pero entonces es como si el estilo no existiera. Se hace asi lo de las i?.


<body>
<div id="bloque">
<a href="" name="inicio" target="_self" id="inicio"><i>ini</i></a>
<a href="" target="_self" id="ambientacion"><i>xTmas</i></a>
<a href="" target="_self" id="reglamento"><i>xDias</i></a>
<a href="" target="_self" id="fotos"><i>¿Nuevo?</i></a>
<a href="" target="_self" id="personajes"><i>contacto</i></a>
<a href="" target="_self" id="volver"><i>volver</i></a>
<div id="bloque-central">
<div id="Izquierda">
<?php
?>
</div>
<div id="Derecha">
<?php
?>
</div>
</div>
</div>
</body>


Gracias. Es lo unico uqe me queda arreglar para poder sacar mi web, si me podéis ayudar estaré eternamente agradecida.
  #4 (permalink)  
Antiguo 05/06/2006, 08:11
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 9 años
Puntos: 1
Hola de nuevo.

Ahora está mucho más claro. Un par de apuntes.

Veo que tus elementos a contienen un elemento i, esto no tiene razon de ser, si quieres que el texto de tus enlaces tenga un estilo en cursiva, hazlo con css.
a { font-style: italic }
http://www.sidar.org/recur/desdi/tra...def-font-style

Tambien veo que haces un uso intensivo de id pero no usas class (te estas complicando la vida)
http://html.conclase.net/w3c/html401...l.html#h-7.5.2

Por ejemplo:
#bloque a {
text-decoration: none;
width: 46px;
position: absolute;
}

Estos estilos son aplicados a 'todos' los a que esten dentro de 'bloque'. todos tendran un 'width: 46px;'

Lo dicho al no usar class te estás complicando la vida.

Veo que tu documento tiene la siguiente estructura:
Código HTML:
<body>
 <div id="bloque">
     <!-- enlaces -->
   <div id="bloque-central">
     <div id="Izquierda">
        <?php?>
     </div>
     <div id="Derecha">
         <?php?>
     </div>
  </div>
 </div>
</body> 
En principio me parce mas apropiado y 'manejable' algo así:
Código HTML:
<body>
 <div id="bloque">
     <!-- enlaces -->
 </div>

  <div id="bloque-central">
     <div id="Izquierda">
        <?php?>
     </div>
     <div id="Derecha">
         <?php?>
     </div>
  </div>

</body> 
Espero que mis comentarios te sirvan de algo.
  #5 (permalink)  
Antiguo 05/06/2006, 09:18
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Bien, ya veo por donde quieres indicarme que vaya.

Yo miré un tutorial, y para poder poner estos enlaces especiales, lo que importa no es que esté en italicas, sino que se usa la i como comodín para poder asignarles este estilo. Sé que podría haberlo hecho así.

Lo que me dices, sé que se podría hacer así mejor, si señor.

Pero es un libro. Un div que contiene una imagen de fondo, en el bloque grande quedan las imagnenes, el bloque de dentro es el sitio donde estan las paginas.

Creo que mejor te mando un enlace para que veas como es, aunque es una prueba. Aqui no lo pongo, como eres el unico que me ayuda, mejor será que lo veas por ti mismo.

la verdad es que la idea del fondo es un poco malvada, porque no conseguía que saliese bien, y no hiciese cosas raras (me cuesta que salgan este tipo de cosas en el explorer...),y al final puse que el ancho del div fuera el ancho de la pantalla, porque si no hacía scrolls que yo no quería.

en fin. quizás desconozco algunas cosas, y por eso me monto estos jaleos.

Te mando la web a tu cuenta personal.
  #6 (permalink)  
Antiguo 05/06/2006, 09:41
Avatar de JavierB
Moderata
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.055
Antigüedad: 12 años, 8 meses
Puntos: 767
Hola darkgaze

La idea de este foro es que todos compartamos, tanto las preguntas como las respuestas. Si solicitas y recibes ayuda en privado, el resto de los usuarios no tendrá acceso a esa información.

El que hasta ahora Jorolo sea el único que te ha respondido, no es escusa para que no pueda seguir ayudandote aquí, en el propio foro.

Saludos,
  #7 (permalink)  
Antiguo 05/06/2006, 12:08
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Claro claro.

pero como entenderás... no voy a poner la direccion de mi web, que ni siquiera esta acabada, y esta en proceso de pruebas (y por lo tanto no quiero que nadie toque), para que todo el mundo que dices que ve este post se meta.

Pero es que es urgente, y necesito que al menos este chico lo vea. :_

tranquis. Igualmente he puesto todo aqui.
  #8 (permalink)  
Antiguo 05/06/2006, 14:10
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 9 años
Puntos: 1
Hola darkgaze.

No contextaré a los 'privados que me has enviado, no te lo tomes a mal. Además de los motivos espuestos por JavierB, no lo haré por que si lo hiciese, mañana me encontraria 10 solicitudes como la tuya en mi buzon y pasado 20...

Estás intentando hacer algo que supera tus conocimientos. Ayudarte me costaría tiempo, y no te haría ningún favor ayudandote a hacer algo que te supera. ¿Se trata de tu blog personal? haz algo que puedas manejar tu solo.

Diseños como el que intentas (con una imagen de fondo que condiciona todo el diseño) son visualmente muy atractivos, pero son una fuente de problemas. Por ejemplo: Lo estas haciendo para una resolucion de 1024x800, por culpa de la imagen, solo se verá bien en esa resolución, (al menos centrala)

Cita:
Yo miré un tutorial, y para poder poner estos enlaces especiales, lo que importa no es que esté en italicas, sino que se usa la i como comodín para poder asignarles este estilo.
en vez de i usa span y cambia de tutorial.

El problema inicial era con los enlaces (a), solución usa class.
  #9 (permalink)  
Antiguo 05/06/2006, 14:32
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
De acuerdo. De acuerdo, cambiaré de tutorial. No creas que me supera tanto, solo que no entiendo algunas cosas, y no comprendo bien algunas otras.(que por programar no me sobre, que ya habrás visto, quizás, el código php de la web que te mandé, que es bastante sencillo, y yo ya sé bastante c++, java, y demás locuras).

No se si podré. Lo de la resolucion ya esta solucionado, no me importa que quede así, y si es mas grande, pues estupendo.

Para resoluciones mas pequeñas que 1024 puede dar un poco de problema, si. Asi que haré dos webs, por si acaso. Eso es lo bueno del php...


Lo miraré, muchas gracias. A ver si he entendido lo de las class, que me dices, y si funciona así.


DarkGaze


PD: Soy una chica, por cierto.
  #10 (permalink)  
Antiguo 06/06/2006, 01:14
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
id & class o Como arreglar el lio que tengo aqui.

Hola chicos, soy la misma del post de estos dias.

He seguido los consejos de Jorolo, y ahora estoy loca intentando arreglar esto que he creado.


Bien! ahora tenemos solo una caja Div que ocupa el 100% de la pantalla en ancho, y 100 px de alto.

Dento de esto quiero colocar enlaces en una imagen de fondo. Estos enlaces flotan dentro de la caja con ciertos valores.

He probado DE TODO. todas las combinaciones que a mi me parecía que debían de funcionar.

Bien chicos. esto no funciona y yo no entiendo porqué no.

Aqui esta el css

span#enlaces {
text-decoration: none;
width: 46px;
position: absolute;
visibility: hidden;
}

a.inicio {top: 54px; left: 527px; height:40px;}
s.ambientacion {top:20px; left:590px; height:70px;}
a.reglamento {top:35px; left:660px; height:55px;}
a.fotos {top:50px; left:730px; height:40px;}
a.personajes {top:30px; left:796px; height:55px;}
a.volver {top:10px; left:10px; height:55px;width: 150px;}


He puesto span, div, clases todo, ids todo, unos ids, y otros clases, nada. nada funciona. Y todo por no querer repetir lo del principio en todos los enlaces!!.

El codigo html es el siguiente:

<span id="enlaces">
<a href="blog.php?NumPost=inicio" name="inicio" target="_self" class="inicio">ini</a>
<a href="blog.php?NumPost=XTemas" target="_self" class="ambientacion">xTmas</a>
<a href="blog.php?NumPost=XDias" target="_self" class="reglamento">xDias</a>
<a href="blog.php?NumPost=novedades" target="_self" class="fotos">¿Nuevo?</a>
<a href="blog.php?NumPost=contacto" target="_self" class="personajes">contacto</a>
<a href="despacho.html" target="_self" class="volver">volver</a>
</span>


Y ya os digo, he probado a cambiar de todo, y siguen sin salir.
me estoy volviendo loca, en serio. U_U




Gracias por la ayuda prestada, si es que la hay. Gracias gracias. Estoy un poco desesperada.
  #11 (permalink)  
Antiguo 06/06/2006, 01:28
Avatar de axiertxo  
Fecha de Ingreso: octubre-2005
Ubicación: España
Mensajes: 389
Antigüedad: 9 años
Puntos: 0
Pero cual es tu problema?
__________________
El mundo exige resultados. No le cuentes a otros tus dolores del parto. Muéstrales al niño.
  #12 (permalink)  
Antiguo 06/06/2006, 01:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.137
Antigüedad: 12 años, 6 meses
Puntos: 1136
Hola:

Como el id se supone único no es necesario escribir span por delante (aunque no está mal...

después de #enlace debes poner la etiqueta con un espacio y luego el punto... aunque me parece que te falta la posición absoluta de los enlaces...

#enlaces a {position: absolute;}

Creo que el resto lo tienes bien.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #13 (permalink)  
Antiguo 07/06/2006, 08:17
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
mi problema es que no sale. Ese es mi problema

Que no se ponen los cuadrados flotando dentro de la caja div.


Muchas gracias por las respuestas (me olvidé y no miré...arf).
Probé otras combinaciones, y ahora he encontrado una mejor, porque no entiendo bien lo que me dices.

Ahora con esto sale en mi Dreamweaver perfecto....

pero en el mozilla no se ve.

El css:
Código:
#bloque-cabecera {
 padding: 0px;
 margin: 0px;
 float: left;
 width: 100%;
 height: 100px;
 list-style: none;
}

#enlaces li{
	position: absolute;	
	width: 46px;
}

#enlaces li a{
	text-decoration: none;
	visibility: hidden;
	display: block;
}

#LIinicio {top: 54px; left: 527px; height:40px;}
#LIXTemas {top:20px; left:590px; height:70px;}
#LIXDias {top:35px; left:660px; height:55px;}
#LINovedades {top:50px; left:730px; height:40px;}
#LIContacto {top:30px; left:796px; height:55px;}
#Volver {top:10px; left:10px; height:55px;width: 150px !important;}
Y el html
Código:
<div id="bloque-cabecera"> 
	<ul id="enlaces">
	<li id="LIinicio"><a href="blog.php?NumPost=inicio" name="inicio" target="_self">ini</a></li>
	<li id="LIXTemas"><a href="blog.php?NumPost=XTemas" target="_self" class="ambientacion">xTmas</a></li>
	<li id="LIXDias"><a href="blog.php?NumPost=XDias" target="_self" class="reglamento">xDias</a></li>
	<li id="LINovedades"><a href="blog.php?NumPost=novedades" target="_self" class="fotos">¿Nuevo?</a></li>
	<li id="LIContacto"><a href="blog.php?NumPost=contacto" target="_self" class="personajes">contacto</a></li>
	<li id="Volver"><a href="despacho.html" target="_self" class="volver">volver</a></li>
	</ul>
</div>

Debería de funcionar!. No creeis?. Pues nada, sale en Dreamweaver, pero en el mozilla me salen unos puntos negros flotando donde deberían empezar los cuadrados.

No entiendo por qué cambia tanto todo en cuanto cambias dos etiquetas. Realmente no se cual es la mejor manera de hacerlo, chicos.


Gracias a todos. Estoy un poco desesperada..es lo unico que me queda para abir mi blog y estoy harta de trabajar en esta tontería que antes funcionaba.
  #14 (permalink)  
Antiguo 07/06/2006, 09:18
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.853
Antigüedad: 13 años, 2 meses
Puntos: 367
Hola darkgaze,

he unido los dos temas que tenías abiertos para tratar lo mismo. Si abres un post nuevo los que lleguen por primera vez al tema no sabrán de qué va el tema ni qué se te ha respondido con anterioridad. Por favor, trata de mantener siempre el mismo tema dentro del mismo post.

Un saludo
  #15 (permalink)  
Antiguo 07/06/2006, 09:55
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
?

ah. perdona. quizas he cometido un error. no pretendia. :_
  #16 (permalink)  
Antiguo 07/06/2006, 09:59
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.137
Antigüedad: 12 años, 6 meses
Puntos: 1136
Hola:

Has cambiado el ejemplo, pero creo que es lo mismo, position absolute deben tener los elementos que dices que son plotantes, pero su contenedor también debe tener position absolute o relative...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #17 (permalink)  
Antiguo 07/06/2006, 13:22
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
no me digas?. no entiendo bien!
  #18 (permalink)  
Antiguo 07/06/2006, 13:23
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
de todas formas voy a ver si entiendo lo que me dices....
  #19 (permalink)  
Antiguo 07/06/2006, 13:26
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Ya he puesto position absolute en el div que lo contiene, tambien, que supongo que será el de bloque-cabecera.


Pues se me ha destrozado la pagina del todo, ahora sale todo mal. Luego he puesto relative, y sale bien colocado, pero no se ven los enlaces en el lugar.


Lo curioso, fijaos, es que el mozilla con su explorador de código muestra los rectangulos rojos de los enlaces. Pero estos no salen!
  #20 (permalink)  
Antiguo 07/06/2006, 13:31
Avatar de darkgaze  
Fecha de Ingreso: febrero-2006
Ubicación: Madrid, España
Mensajes: 462
Antigüedad: 8 años, 8 meses
Puntos: 2
Mirad. Esto no funciona.

Estoy pensando en cambiar ese codigo y hacerlo... sin lista. Con otra cosa, con span, por ejemplo.

No se que hacer! de verdad. Está chupado. seguro. U_U de verdad, no se que conjunto de cosas, y tampoco sé que frases poner en el (li), en el (li a), qué diferencias hay entre ponerlo en uno o el otro.

Que locura.
  #21 (permalink)  
Antiguo 07/06/2006, 15:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 9 años
Puntos: 1
Hola de nuevo. hola a todos

Cita:
Iniciado por darkgaze
tampoco sé que frases poner en el (li), en el (li a), qué diferencias hay entre ponerlo en uno o el otro.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/> 
<title>selección de descendientes</title> 
<style type='text/css'> 
li { padding: 1em; } /* esta regla no es importante */

li { border: solid red 1px; } 
li a { border: solid blue 1px; } 
</style> 

<ul> 
 <li> li con <a>enlace</a> </li> 
</ul> 
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 12:44.
SEO by vBSEO 3.3.2