Foros del Web » Creando para Internet » CSS »

estilo dentro de caja div

Estas en el tema de estilo dentro de caja div en el foro de CSS en Foros del Web. hola. tengo un caja con bordes redondeados que genere con round corner CSS @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original .roundedcornr_box_324801 {    background: #cccccc; } ...
  #1 (permalink)  
Antiguo 23/09/2010, 10:49
 
Fecha de Ingreso: octubre-2005
Mensajes: 407
Antigüedad: 12 años, 2 meses
Puntos: 2
estilo dentro de caja div

hola.

tengo un caja con bordes redondeados que genere con round corner

CSS
Código HTML:
Ver original
  1. .roundedcornr_box_324801 {
  2.    background: #cccccc;
  3. }
  4. .roundedcornr_top_324801 div {
  5.    background: url(roundedcornr_324801_tl.png) no-repeat top left;
  6. }
  7. .roundedcornr_top_324801 {
  8.    background: url(roundedcornr_324801_tr.png) no-repeat top right;
  9. }
  10. .roundedcornr_bottom_324801 div {
  11.    background: url(roundedcornr_324801_bl.png) no-repeat bottom left;
  12. }
  13. .roundedcornr_bottom_324801 {
  14.    background: url(roundedcornr_324801_br.png) no-repeat bottom right;
  15. }
  16.  
  17. .roundedcornr_top_324801 div, .roundedcornr_top_324801,
  18. .roundedcornr_bottom_324801 div, .roundedcornr_bottom_324801 {
  19.    width: 100%;
  20.    height: 10px;
  21.    font-size: 1px;
  22. }
  23. .roundedcornr_content_324801 { margin: 0 10px; }

a la cual le agregue:

Código HTML:
Ver original
  1. .buscar {
  2. font-size: 10px;
  3. color:#ff0000;
  4. }

HTML
Código HTML:
Ver original
  1. <div class="roundedcornr_box_324801">
  2.    <div class="roundedcornr_top_324801"><div></div></div>
  3.       <div class="roundedcornr_content_324801">
  4.          <p class="buscar">Lorem ipsum dolor sit amet, consectetur
  5.          adipisicing elit, sed do eiusmod tempor incididunt
  6.          ut labore et dolore magna aliqua. Ut enim ad minim
  7.          veniam, quis nostrud exercitation ullamco laboris
  8.          nisi ut aliquip ex ea commodo consequat. Duis aute
  9.          irure dolor in reprehenderit in voluptate velit esse
  10.          cillum dolore eu fugiat nulla pariatur. Excepteur
  11.          sint occaecat cupidatat non proident, sunt in culpa
  12.          qui officia deserunt mollit anim id est laborum.
  13. </p>
  14.       </div>
  15.    <div class="roundedcornr_bottom_324801"><div></div></div>
  16. </div>



el problema es que en la etiqueta <p> no me toma el estilo "buscar" que hice
alguna ayuda?
__________________
DJJJ
  #2 (permalink)  
Antiguo 23/09/2010, 14:11
 
Fecha de Ingreso: enero-2007
Ubicación: perdida entre líneas de código...
Mensajes: 235
Antigüedad: 10 años, 11 meses
Puntos: 1
Respuesta: estilo dentro de caja div

Este estilo lo pusiste en el css no? porque en el post mencionás que es código html.


.buscar {
font-size: 10px;
color:#ff0000;
}
  #3 (permalink)  
Antiguo 23/09/2010, 15:01
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: estilo dentro de caja div

Con CSS3 puedes redondear directamente los cantos de los div, mírate algun manual ;)
  #4 (permalink)  
Antiguo 23/09/2010, 15:19
 
Fecha de Ingreso: septiembre-2009
Mensajes: 5
Antigüedad: 8 años, 3 meses
Puntos: 0
Respuesta: estilo dentro de caja div

no sabria decirte exactamente el motivo por el cual no te piya el estilo, pero es muy probable que poniendo !important detras de la propiedad que falla te funcione:

un ejemplo seria asi:

font-size: 10px !important;

como recomendacion te diria que te instales el firebug de firefox o chrome, te permite navegar por el codigo de una web y ver que estilos se estan aplicando a cada etiqueta, soluciona muchos problemas.
  #5 (permalink)  
Antiguo 23/09/2010, 18:21
 
Fecha de Ingreso: octubre-2005
Mensajes: 407
Antigüedad: 12 años, 2 meses
Puntos: 2
Respuesta: estilo dentro de caja div

voy contestando por parte

si el codigo del estilo buscar lo puse dentro del css.
con css3 se puede rendondear pero para navegadores viejos no es soportado

el problema es con firefox tengo instalado el firebug y lo que me sale en el css en la etiqueta buscar es que lo hereda de p

yo no se si sera que aparte tengo estas dos etiquetas


Código HTML:
Ver original
  1. p.titulo {
  2. text-align:center;
  3. font-family:Arial ;
  4. font-weight:bold;
  5. padding:0px;
  6. margin: 12px;
  7. color:#FFFFFF;
  8. font-size:12px;
  9. }
  10.  
  11. p {
  12. text-align:justify;
  13. font-family:Arial ;
  14. padding:0px;
  15. margin: 10px;
  16. color:#333333;
  17. font-size:12px;
  18. }


que interfieren con el <p de la clase buscar
__________________
DJJJ
  #6 (permalink)  
Antiguo 24/09/2010, 04:47
 
Fecha de Ingreso: septiembre-2010
Ubicación: http://nomenrecordo.blogspot.com/
Mensajes: 111
Antigüedad: 7 años, 2 meses
Puntos: 1
Respuesta: estilo dentro de caja div

Es que para redondear en navegadores viejos o usas imágenes o nada ;)
  #7 (permalink)  
Antiguo 24/09/2010, 12:02
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: estilo dentro de caja div

Buenas,

por el código que has mostrado las dos reglas del último mensaje no parecen tener nada que ver. El problema es que estará heredando otro valor para la propiedad font-size de algún elemento en el que se haya declarado con más peso específico, por ejemplo en la línea 17 de tu primer código declaras esa propiedad con un selector formado por un elemento div y una clase con lo que tendría un peso de 11 y tu intentas modificarlo unicamente con una clase cuyo peso sería 10 por eso no se modificaría y según la estructura del html del ejemplo el párrafo con la clase buscar se vería afectado y heredaría el valor. Como no muestras todo el código puede que haya otra declaración con mas peso que sea la que finalmente se aplique pero la solución pasa por revisar los estilos y ajustar el peso específico de las declaraciones que afecten a esa propiedad del elemento en cuestión para que la mayor sea la que quieres que se aplique.
  #8 (permalink)  
Antiguo 24/09/2010, 13:37
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: estilo dentro de caja div

en la hoja de estilos tiene prioridad la ultima regla que pongas....

si tienes:

p{}
.buscar{}

no hay problema pero si pones

.buscar{}
p{}


estarías sobre escribiendo los estilos de buscar, y por ende no funcionaria como tu deseas.

prueba colocar los estilos de .buscar al final de tu CSS
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 25/09/2010, 04:15
Avatar de Tecna  
Fecha de Ingreso: enero-2010
Mensajes: 291
Antigüedad: 7 años, 11 meses
Puntos: 45
Respuesta: estilo dentro de caja div

Buenas,

el orden de aparición de las reglas en las hojas de estilo es sólo el último criterio que se usa para determinar que valor se aplicará a una propiedad de un elemento según el orden de cascada y no tendrá importancia si en el resto de criterios hay diferencia, es decir sólo en el caso de que dos reglas tengan el mismo peso, origen y especifidad prevalecería la última declarada. Y en el ejemplo que se muestra las declaraciones no tienen el mismo peso ya que si usamos una clase como selector tiene más peso que si usamos un elemento genérico incluso aunque declaremos éste despues. Por ejemplo:

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <title>prioridad cascada</title>
  4.     p {background: #f00;} <!-- rojo -->
  5.     .buscar{background: #ff0;} <!-- amarillo -->
  6.     p{background: #0f0;} <!-- verde -->
  7. </head>
  8. <p class="buscar">soy de color amarillo porque la clase tiene mas peso que el elemento</p>
  9. <p>soy de color verde y no rojo porque a igual peso prevalece la ultima declarada para el elemento p</p>
  10. </body>
  11. </html>

Etiquetas: caja, estilo
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:25.