2 bordes de 2 colores distintos en un mismo DIV

rulzzz · #1 (**permalink**) 04/06/2011, 05:26

como puedo crear 2 bordes juntos de 2 colores distintos? o 1 solo borde de 2 colores distintos en el ancho.

si utilizo esto: " 2px ridge #CCCCCC " me crea el borde doble que quiero pero solo me deja elegir el color de uno, y el otro se queda negro siempre

como puedo cambiar el color de ambos?

y otra dudilla algo relacionada, por no abrir otro post, si quiere poner un mismo borde pero solo a la izquierda y derecha del DIV ( pero no arriba y abajo ), tengo que poner: " border-left: ... ; border-right: ... ; " ,
hay alguna manera abreviada de ponerlo, por ejemplo asi:
" border-left,border-top,border-right: 2px ridge #CCCCCC ; " (esta no funciona), hay alguna forma parecida a esa de ponerlo?

Ventru3 · #2 (**permalink**) 04/06/2011, 05:35

A tu primera pregunta es algo muy fácil.

Ponle esto al div.

Código CSS:

Ver originalborder: 1px solid red;
outline: 1px solid blue;

Y a tu segunda pregunta por experiencia te digo que no, pero alomejor alguien sabe algún método, pero lo dudo porque no es como el margin y el padding.

rulzzz · #3 (**permalink**) 04/06/2011, 08:08

el OUTLINE no me funciona porque solo quiero poner borde abajo y arriba, y no existe OUTLINE-top ni bottom :(

alguna otra solucion?

Ventru3 · #4 (**permalink**) 04/06/2011, 08:23

Pues a ver especificado

De momento solo se me ocurre que crees otro div dentro o fuera de ese div.
Que quieres algo como esto?

kseso? · #5 (**permalink**) 04/06/2011, 08:51

Al ser algo estético lo más semántico sería:
elemento::before
elemento::after
con anchura 100% y altura, background y posicionados según las necesidades

Otra vía sería con box-shadow y los valores apropiados.

En ambos casos combinados con el borde del elemento.

rulzzz · #6 (**permalink**) 04/06/2011, 09:11

en realidad es un borde que recorre varias capas, entonces es por arriba y abajo en una, solo por la derecha en otra..... entonces el BEFORE, AFTER no me vale, y hacerlo en varias capas seria bastante lioso.

Y las veces que e hecho sombras se veia fatal en IE....

supongo que para hacer el efecto que quiero tendré que echar mano de photoshop :\ , pero me parece raro que CSS no permita hacer un borde doble con los 2 colores que yo quiera, de la misma manera que se hace un borde simple

kkurosaki · #7 (**permalink**) 04/06/2011, 09:46

Cita:

Iniciado por rulzzz

en realidad es un borde que recorre varias capas, entonces es por arriba y abajo en una, solo por la derecha en otra..... entonces el BEFORE, AFTER no me vale, y hacerlo en varias capas seria bastante lioso.

Yo no lo veo tan lioso.

Código HTML:

Ver original<div id="one">
<div id="two">
 
CONTENIDO
 
</div>
</div>

Código CSS:

Ver original#one {width:500px, height:500px; border: 1px solid #00f;}
#two {position:relative; width:495px; height:495px; border:1px solid #f00; margin:auto;}

Saludos.

kseso? · #8 (**permalink**) 04/06/2011, 10:53

@rulzzz:
¿Y por qué extraña razón no facilita toda la información necesaria de una vez por todas en vez de andar soltándola con cuenta gotas y hasta parece que a regañadientes?

Comparta los códigos implicados (css+html generado) y un enlace a su realización e indique claramente sobre qué elementos quiere actuar.

rulzzz · #9 (**permalink**) 04/06/2011, 12:52

a cuenta gotas y a regañadientes? pero que dices.

Si planto aqui todo el codigo (que por cierto las capas estan escritas dentor de "echos" de PHP, lo que hace el codigo bastante largo) pues seguramente la gente ni se moleste en leerlo para ayudarme.

Ademas la pregunta tampoco es que fuese tan compleja como para tener que plantar todo el codigo, simplemente deberia haber especificado al principio que el borde no lo queria en las 4 paredes de la capa, sino solo en algunas, pero pense que no seria necesario especificarlo, aunque despues lo hice y ya quedo todo claro, las respuestas me han quedado perfectamente claras...

Ventru3 · #10 (**permalink**) 04/06/2011, 13:02

Haz lo que quieres en photoshop y después lo pones aquí y te decimos si se puede hacer con css o tienes que maquetarlo. Así es mas fácil para todos.

rulzzz · #11 (**permalink**) 04/06/2011, 13:08

no se porque os liais tanto, la pregunta esta bastante clara, como poner un borde doble de 2 colores distintos en un cualquiera de los lados de una capa.

Segun decis se puede hacer poniendo una capa distinta para cada borde, pero para hacer eso prefiero poner un borde normal y otro artificial de imagen........

pensaba que habia alguna propiedad de los "border" para hacerlo, pero segun decis no se puede hacer con la propiedad border, asi que nada.... gracias por las respuestas igualmente

kseso? · #12 (**permalink**) 04/06/2011, 13:22

Cita:

a cuenta gotas y a regañadientes? pero que dices.

Pues mis disculpas, se ve que no he sabido ni leer ni comprender:

Cita:

Iniciado por rulzzz

como puedo crear 2 bordes juntos de 2 colores distintos? o 1 solo borde de 2 colores distintos en el ancho.

Cita:

Iniciado por rulzzz

el OUTLINE no me funciona porque solo quiero poner borde abajo y arriba, y no existe OUTLINE-top ni bottom :(

Cita:

Iniciado por rulzzz

en realidad es un borde que recorre varias capas, entonces es por arriba y abajo en una, solo por la derecha en otra.....

Y sigo con mis disculpas por la autocita que resalto en negrita

Cita:

Iniciado por kseso?

@rulzzz:
Comparta los códigos implicados (css+html generado) y un enlace a su realización e indique claramente sobre qué elementos quiere actuar.

Y sí, existe /border-top-color/ que admite múltiples valores. Pero nunca lo recomendaría en nada que no sea una simple demo. Nunca en un sitio real.

rulzzz · #13 (**permalink**) 04/06/2011, 13:51

Cita:

Ademas la pregunta tampoco es que fuese tan compleja como para tener que plantar todo el codigo, simplemente deberia haber especificado al principio que el borde no lo queria en las 4 paredes de la capa, sino solo en algunas, pero pense que no seria necesario especificarlo, aunque despues lo hice y ya quedo todo claro, las respuestas me han quedado perfectamente claras...

KSESO realmente no se a que viene tu contestacion despues de que la pregunta quedase totalmente clara e incluso resuelta :S , pero en fin tu sabrás. Pero vamos, que si te hace ilusion ver el codigo me lo dices y te lo pongo, aunque ya te digo q solo "el codigo implicado css+html" no va a poder ser, porque como ya te he dicho antes, el codigo html lo tengo metido dentro de un "echo" de PHP, de ahí que no lo pusiera.....

kseso? · #14 (**permalink**) 04/06/2011, 15:44

Supongo que el hecho de que no sepa o se de cuenta de lo descorazonador y desagradable de actuar(1) como ha hecho usted en este tema es debido a que de sus 47 mensajes todos son para pedir ayuda, excepto 1 donde respondió a una oferta de trabajo. Ni uno sólo para intentar ayudar a otro usuario.

Y la última razón para solicitar códigos implicados no es precisamente la ilusión por verlos. Pero puede pensar que lo es si eso le hace sentirse mejor.

(1) Pregunta y ofrece una información -- Respuesta -- la descarta dando información complementaria --- Respuesta -- Idem -- Respuesta -- idem ...

Y con ésta termina mi participación en este tema.

rulzzz · #15 (**permalink**) 04/06/2011, 16:52

vale que tu has ayudado a mucha gente y que yo no he ayudado a nadie y he abierto 8 o 9 posts pidiendo ayuda (cosa que no quita que yo haya podido ayudar en otros foros/medios), pero el hecho de que eso sea asi no justifica el que seas un borde, si no te parece bien mi post simplemente no respondas y punto.

De todas formas no creo que tenga mucho merito tu ayuda porque debes tener bastante tiempo libre si lo pierdes navegando en mis 47 mensajes para poder hacer ese comentario, pero en fin tu sabrás lo que haces, pero aqui nadie te obliga a que ayudes que si te molesta que no haya dado una informacion a tu gusto en la pregunta, pues no ayudes y deja que lo haga otro que si haya entendido mi pregunta.

seoista · #16 (**permalink**) 05/06/2011, 00:28

Cita:

Iniciado por rulzzz

vale que tu has ayudado a mucha gente y que yo no he ayudado a nadie y he abierto 8 o 9 posts pidiendo ayuda (cosa que no quita que yo haya podido ayudar en otros foros/medios), pero el hecho de que eso sea asi no justifica el que seas un borde, si no te parece bien mi post simplemente no respondas y punto.

De todas formas no creo que tenga mucho merito tu ayuda porque debes tener bastante tiempo libre si lo pierdes navegando en mis 47 mensajes para poder hacer ese comentario, pero en fin tu sabrás lo que haces, pero aqui nadie te obliga a que ayudes que si te molesta que no haya dado una informacion a tu gusto en la pregunta, pues no ayudes y deja que lo haga otro que si haya entendido mi pregunta.

¡Calma @rulzzz!.

@kseso? lo único que ha pretendido es ayudar (es su forma de ser, ayudar a los demás, cómo lo está demostrando día a día), si ha entendido o no tu pregunta es otra cosa y creo que con tu aptitud, no te va a ayudar nadie.

En verdad, yo tampoco he entendido lo que quieres.

Saludos.

jomaruro · #17 (**permalink**) 05/06/2011, 01:49

Hola:

Cita:

Iniciado por rulzzz

... el codigo html lo tengo metido dentro de un "echo" de PHP...

Pero, ese "echo" de PHP, genera un HTML ¿verdad? Pues a ese HTML se refería kseso?. Y aunque a tí te parezca que no, a veces es necesario verlo porque puede haber herencias que afecten al código que al que pregunta no le funciona ¿Correcto?

Saludos.

rulzzz · #18 (**permalink**) 05/06/2011, 03:32

Cita:

Pero, ese "echo" de PHP, genera un HTML ¿verdad? Pues a ese HTML se refería kseso?

no, el me dijo que debia copiar solo el codigo referente a mi problema, y SOLO CSS+HTML. Y despues de decirle que si no lo habia puesto era porque me era imposible poner el codigo sin las sentencias PHP al estar todo dentro de un ECHO, y el insistio despues en que "debia poner solo el codigo relacionado en CSS+HTML" ................

ademas, que me parece bastante absurda la exigencia ya que la duda habia quedado resuelta ya sin necesidad de eso, por tanto no entiendo su actitud, la gente que me respondio habia entendido la pregunta perfectamente, y a mi me han quedado claras las respuestas.

kseso? · #19 (**permalink**) 05/06/2011, 05:56

Seoista, Jomamuro:
Déjenlo estar y no fuercen más.
Dejen que piense, actúe y se comporte como quiera, que yo ya había quedado de lo más agustito con mi retirada de este tema y el usuario con su victoria y su orgásmico esparmeo de -karma a todos y cada uno de mis mensajes, hasta el #5, juas!.

Por mi parte, veo que sólo me resta explicar el significado de "los códigos implicados (css+html generado)". Pero eso será otro año

Lo dicho, vamos a dedicarnos a cuestiones más reconfortantes y placenteras.

rulzzz · #20 (**permalink**) 05/06/2011, 06:29

Cita:

Y con ésta termina mi participación en este tema.

y sin embargo, vuelves a replicar :)

y si, te di karma negativo porque no me gusta tu conducta, esto es un foro, cada uno participa/ayuda como quieres, yo no entro aqui para que me des sermones asi que si no te gusta mi forma de preguntar no hace falta que me juzgues sin conocerme de nada, simplemente ignorame, no me respondas, y listo. Porque soltarme el rollo despues de que el tema quedase zanjado porque ya me habian resuelto la duda, sobraba.

kkurosaki · #21 (**permalink**) 05/06/2011, 12:42

Quiero golpear a Obama

Ya dejense de lios tios...

@Kseso! es un buen posteador, ha ayudado a mucha gente, con el simple hecho de saberlo, pudieses haber puesto el codigo que te pedia, para que te hubiese dado una respuesta concreta, pero en fin....

El ya no va a participar aqui y tu @rulzzz, perfectamente haz mencionado que ya esta resuelto tu problema, estonces no hay razón para que tu también estes replicando aqui.

Ya dejense de berrinches y sigamos, que hay más usuarios a los cuales podemos ayudar.