Foros del Web » Creando para Internet » CSS »

las esquinas de mikmoro

Estas en el tema de las esquinas de mikmoro en el foro de CSS en Foros del Web. Hola!! He estado buscando la forma correcta para que en todos los navegadores acepten el CSS que utilizo. He estado averiguando como hacerlo en mi ...
  #1 (permalink)  
Antiguo 22/10/2009, 12:25
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
las esquinas de mikmoro

Hola!!

He estado buscando la forma correcta para que en todos los navegadores acepten el CSS que utilizo.

He estado averiguando como hacerlo en mi web con el tutorial de mikmoro (araudi.net/ejemplos/esquinas_redondeadas_4_imagenes.html). Podría alguien pasarme las imagenes de las esquinas para ver como son exactamente, ya que su truco me ha impresionado, y hasta en el "validador de css" no detecta ningun fallo.

gracias!!
  #2 (permalink)  
Antiguo 22/10/2009, 12:29
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: las esquinas de mikmoro

Curioso el título.

Sólo tienes que mirar en el código CSS y verás las imágenes a las que apuntan:
Código:
* {margin:0;padding:0;position:relative;outline: 0;}

body {font-family: verdana, "DejaVu Sans", "Bitstream Vera Sans", helvetica, sans-serif;
font-size: 0.9em;
background-color: #000;
}
#contenedor {margin: 8px auto;
width: 500px;
}
.texto {margin: 8px 12px 0 12px;
color: #fff;
background: #2b2b2b url(../img/cuadro_izq.png) no-repeat top left;
}
.texto .derecha {margin-left: 16px!important;margin-left: 13px;
height: 16px;
background: url(../img/cuadro_sup.png) no-repeat top right;
}
.texto .centro {background: url(../img/cuadro_der.png) no-repeat bottom right;
}
.texto .abajo {margin-right: 16px!important;margin-right: 13px;
height: 16px;
background: url(../img/cuadro_inf.png) no-repeat bottom left;
left:0;
}
.texto p {padding: 0px 10px 4px 14px;}
.texto img {float:right;
border: 1px solid #fff;
margin: 12px;
z-index: 1;
}
Saludos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 22/10/2009, 12:32
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

si, de esto lo habia mirado, pero lo que queria decir exactamente es que si alguien tiene las imagenes de las esquinas, para hacerme la idea.

gracias!
  #4 (permalink)  
Antiguo 22/10/2009, 12:37
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: las esquinas de mikmoro

con todo el valor entre a este post jajaja...

puedes bajarte las imagenes
http://araudi.net/img/cuadro_inf.png
por ejemplo

jaja mikmoro en el buen sentido de la palabra no conocia tus esquinas :D :)
  #5 (permalink)  
Antiguo 22/10/2009, 12:38
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.711
Antigüedad: 12 años, 7 meses
Puntos: 833
Respuesta: las esquinas de mikmoro

¿Y no puedes ir a esas URL y descargar las imágenes tú mismo?:
http://www.araudi.net/img/cuadro_izq.png
http://www.araudi.net/img/cuadro_sup.png
http://www.araudi.net/img/cuadro_der.png
http://www.araudi.net/img/cuadro_inf.png
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #6 (permalink)  
Antiguo 22/10/2009, 12:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: las esquinas de mikmoro

Cita:
Iniciado por alexk Ver Mensaje
jaja mikmoro en el buen sentido de la palabra no conocia tus esquinas :D :)
Soy flaco, pero tanto como "esquinas" no tengo

Efectivamente, zoloquoki, si sigues la ruta que te marcan las imágenes verás que son en ese caso 4.

http://araudi.net/img/cuadro_sup.png
http://araudi.net/img/cuadro_der.png
http://araudi.net/img/cuadro_inf.png
http://araudi.net/img/cuadro_izq.png

cuyos nombres no pueden ser más descriptivos

Parece raro que sean esas, ¿verdad? pues míralas bien y mira la CSS y verás que es así de sencillo.

EDITO: tiempo hacía que no chocábamos de narices, David. <OT>Todo bien, espero.</OT>
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 22/10/2009, 13:01
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

mil gracias!!!

es que como en la url de cada imagen ponia "(../img/cuadro_sup.png)", creia que eran imagenes guardadas desde la carpeta "images", total pensaba que no se podia descargarlas.

a probar las esquinas!!

  #8 (permalink)  
Antiguo 22/10/2009, 17:14
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

una pregunta...

lo de las esquinas, cuales de las diversas opciones es la adecuada??

es que he experimentado con varias formas y ningunas de ellas me ha convencido mucho..

llevo todo el día con las esquinas..

gracias!
  #9 (permalink)  
Antiguo 22/10/2009, 17:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: las esquinas de mikmoro

Cita:
Iniciado por zoloquoki Ver Mensaje
y ningunas de ellas me ha convencido mucho..
Vuelve la pregunta del revés: ¿qué es lo que sí te convencería? ¿no te convencen porque no te salen, por complicadas, enrevesadas?

Y no digas "una propiedad css", porque la hay, pero no compatible ni estandar.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 22/10/2009, 17:27
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

ese es el problema en cuanto a lo de la compatibilidad. y por otro lado, sinceramente me está comiendo la cabeza lo de las esquinas. Todo esto porq quiero darle borde redondeado y degradado fuera del "container". una "tela"!!


más vale dando que dado!
  #11 (permalink)  
Antiguo 22/10/2009, 17:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: las esquinas de mikmoro

Cita:
Iniciado por zoloquoki Ver Mensaje
más vale dando que dado!
Pues sí, pero para todos.

Hasta la vista
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 22/10/2009, 20:36
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: las esquinas de mikmoro

Personalmente me ha servido de mucho ver esto, sobre diseño progresivo con css.
http://www.librosweb.es/css_avanzado...rogresiva.html
Aunque no quiere decir que sea lo correcto ni que debas tomar este camino, solo es una alternativa.

Saludos
  #13 (permalink)  
Antiguo 23/10/2009, 19:02
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

aún estoy

problema grave!!

He aplicado lo de las esquinas redondeadas con sombra, con la regla de 3 div horizontales.

En mi dreamweaver se visualiza perfectamente las tres imagenes como fondo, pero en mi firefox desaparecen...

a que se debe esto?

salu2!!
  #14 (permalink)  
Antiguo 23/10/2009, 20:01
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: las esquinas de mikmoro

Sin ver tu codigo va a estar dificil saber la causa, motivo, razon o circunstacia que afecta, limita, obstruye o impide la visualizacion, vista o aparicion de las imagenes, fotos, graficos o archivos.

Ups, me senti como merolico.

Podria tratarse de un problema de rutas, pero, como dije antes, solo viendo tu codigo podriamos averiguarlo.
__________________
- León, Guanajuato
- GV-Foto
  #15 (permalink)  
Antiguo 24/10/2009, 06:05
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

(miweb.zxq.net)

gracias!
  #16 (permalink)  
Antiguo 24/10/2009, 06:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: las esquinas de mikmoro

Cita:
Iniciado por Triby Ver Mensaje
Ups, me senti como merolico.
Bonita palabra, que desconocía. Tiene tan buen sonido como significado
¡A la saca!
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #17 (permalink)  
Antiguo 24/10/2009, 06:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: las esquinas de mikmoro

Hola:

Cita:
Iniciado por kseso? Ver Mensaje
Bonita palabra, que desconocía. Tiene tan buen sonido como significado
¡A la saca!
Por lo que veo no he sido el único en aprender algo hoy

Saludos.

  #18 (permalink)  
Antiguo 24/10/2009, 07:05
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: las esquinas de mikmoro

Zoloquoki, ¿cómo quieres que se vean si no están por ningún lado?
Yo al menos no las encontré ni en el html ni en el css.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 24/10/2009, 09:51
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: las esquinas de mikmoro

Hola:

Cita:
Iniciado por zoloquoki Ver Mensaje
(miweb.zxq.net)
No entiendo nada ¿Dónde quieres poner las esquinas?

Saludos.

  #20 (permalink)  
Antiguo 24/10/2009, 11:31
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

Lo de las esquinas están en el contenedor central, por debajo del encabezado.

en CSS:

Código:
	.thrColFixHdr #cabeza {
	padding: 0 10px;
	margin-left: 185px;
	margin-right: 15px;
	border-bottom: 2px solid #FFF;
	border-top: 2px solid #FFF;
	background: url(esquina/cab800.png)) repeat-y;
    }
	.thrColFixHdr #cuerpo {
	padding: 0 30px;
	margin-left: 185px;
	margin-right: 15px;
	border-bottom: 2px solid #FFF;
	border-top: 2px solid #FFF;
	background: url(esquina/cuer800.png)) repeat-y;
    }
	.thrColFixHdr #pie {
	padding: 0 10px;
	margin-left: 185px;
	margin-right: 15px;
	border-bottom: 2px solid #FFF;
	border-top: 2px solid #FFF;
	background: url(esquina/pie800.png)) repeat-y;
    }
En HTML:

Código:
      <div id="cabeza">
    	  <p></p>
    	  <p></p>
  </div>
  <div id="cuerpo">
        <p></p>
        <p>texto </p>
        <p>texto</p>
        <p>texto</p>
  </div>
      <div id="pie">
        <p></p>
        <p></p>
  </div>
En mi dreamweaver si que se ven las imagenes en sus correspondientes div's, pero al visualizar en firefox, desaparecen.

En mi web está subida el ejemplo para que echeis un vistazo. No encuentro el fallo..
  #21 (permalink)  
Antiguo 24/10/2009, 15:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: las esquinas de mikmoro

Te sobra el segundo paréntesis en cada imagen de fondo:

background: url(esquina/pie800.png)) repeat-y;
__________________
Visita mi nueva web idplus.org
  #22 (permalink)  
Antiguo 25/10/2009, 08:24
Avatar de zoloquoki  
Fecha de Ingreso: octubre-2009
Mensajes: 53
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: las esquinas de mikmoro

Perfecto, el parentesis era el problema!! Menudo jaleo he tenido con el editor, ya que creia que era el programa que me daba fallos.

Muchas gracias mikmoro. Y otra cosa, me he dado cuenta lo facil que es hacer lo de las esquinas, con 4 imagenes como indica en tu tutorial, todo esto gracias a la iniciación de lo que estoy haciendo, primero con 3 div´s horizontales, lo cual me ha hecho abrir la idea de como sería con 4 imagenes, simplemente añadir en la hoja .css la regla perfecta, y luego añadir los div`s. .

Otra pregunta, para que el div "cabeza" se bloquee (display:block), y el "cuerpo" se repita (repeart) y el "pie" igual que "cabeza" pero con el "display:compact", está bien? Introduzco el codigo:

Código:
	.thrColFixHdr #cabeza {
	padding: 0 0;
	background: url(esquina/cab800.png) no-repeat;
	height: 30px;
	display:block;
    }
	.thrColFixHdr #cuerpo {
	padding: 2px 30px;
	background: url(esquina/cuer800.png) repeat;
    }
	.thrColFixHdr #pie {
	padding: 0 0;
	background: url(esquina/pie800.png) no-repeat;
	height: 30px;
	display: compact;
    }

gracias!
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 06:28.