¿Cómo poner una imagen en un borde?

[Limited]

Hola, bueno tengo un problema, no es exactamente el titulo pero parecido:
Tengo 2 divs, una de ellas de 800px y dentro otra que esta separada de la anterior pues unos 80px por todos los lados.
El caso es que cada esquina y todos los bordes tienen una imagen, pero nose como colocar cada imagen en su sitio, usando un "float" o "position", el codigo de momento este:

HTML:
<div id="frametopleft">
</div>
<div id="bordertop">
</div>
<div id="frametopright">
</div>
<div id="borderright">
</div>
<div id="framebottomleft">
</div>
<div id="borderbottom">
</div>
<div id="framebottomright">
</div>
<div id="borderleft">
</div>


CSS:
#frametopleft {background-image: url(objetos/border-top-left.png) ;
background-repeat: no-repeat ;
height: 84px ;
width: 132px ;
position: top left}
#frametopright {background-image: url(objetos/frame-top-right.png) ;
background-repeat: no-repeat ;
height: 84px ;
width: 132px ;
position: top right}
#framebottomleft {background-image: url(objetos/frame-top-left.png) ;
background-repeat: no-repeat ;
height: 132px ;
width: 84px ;
float:bottom left}
#framebottomright {background-image: url(objetos/frame-top-left.png) ;
background-repeat: no-repeat ;
height: 132px ;
width: 84px ;
float: bottom right}
#bordertop {background-image: url(objetos/border-top.png) ;
background-repeat: repeat-x ;
height: 82px ;
width: 538px ;
float:top}
#borderleft {background-image: url(objetos/border-left.png) ;
background-repeat: repeat-y ;
width: 82px ;
position: left}
#borderright {background-image: url(objetos/border-right.png) ;
background-repeat: repeat-y ;
width: 82px ;
position: right}
#borderbottom {background-image: url(objetos/border-bottom.png) ;
background-repeat: repeat-x ;
height: 82px ;
width: 538px ;
position: bottom}

[Yaneth]

hola

yo lo hice con capas

y tambien se hace con tablas

pones en un div angosto (del ancho del borde)
la imagen que deseas

[Limited]

Perdona, es que edite el post inicial y alomejor escribiste antes de ello y no me di cuenta.
Ya lo hice con divs, con tablas no me entero xD
Podrias responderme a la segunda pregunta?

[Limited]

Lo he retocado como pude pero se sigue viendo mal :


Espero que alguien me diga como ponerlos en orden :S

[Yaneth]

mira
sube tus imagenes
me das la url hacia ellas
y te lo hago en mi pc, (para mi es mas facil asi)

luego que lo tenga hecho, te digo como lo hagas tu

(ni creas que te darè los codigos ya hechos heeeeeeee???)
ya que si lo hago, no aprenderàs a hacerlo

ok?????????????

[Limited]

La cosa es que el float se lo pasan por el forro del culo estas imagenes, bueno te lo envio en un rar:
http://www.megaupload.com/es/?d=5UEM6CXQ

[Yaneth]

<div id="arriba">imagen de arriba con las esquinas</div>

<div id="relleno">aqui metes la imagen de fondo, para que puedas escribir sobre el</div>

<div id="abajoo">aqui la imagen de cierre del borde</div>


css

#arriba {ancho y alto de la imagen a mostrar;}
#relleno {solamente ancho; y puedes ponerle un padding para que el texto no quede muy a las orillas; no olvides la imagen de fondo; y ponerle repeat; para que la imagen se duplique hacia abajo}
#abajo {lo mismo que arriba}


con estas indicaciones no tendràs problemas, ya que como veràs solo se necesitan 3 divs

si necesitas algo mas me avisas

[Limited]

Gracias por el esfuerzo. pero no es a lo que me referia.
Yo solo queria saber como conseguia que cada borde y cada esquina se colocase donde debe :S Si tenia que hacerlo con float o position, porque no habia modo.
Porque por lo laterales tambien van los bordes, no solo arriba y abajo.

De momento consegui colocarlo asi, aunque las esquinas superior derecha e inferior inzquierda no se encajan en el huequito que tienen :S

[jorgens]

WOW!!! je je je, yo también jugaba al wow, cuando tenía tiempo... je je je.

Una pregunta. Por que cortas la imagen en trozos y no la colocas completa? De ese modo no hay que hacer ningún rompecabezas, no?

Responde a la pregunta y te enseño cómo hacerlo, oki? Explica bien lo que quieres conseguir y así nos lo pones más fácil. Por ejemplo, quieres un acho fijo para esa parte? Tiene una altura variable esa parte en función de cuanto texto y contenido va a tener o es la altura siempre la misma?

Dinos algo. Un abrazo!

[Limited]

Jeje, mi ''Joda'' del html jugaba al wow, que interesante :P
Bueno mira, si tienes algo de memoria, podras identificar los bordes con los de la pagina del wow (aun no les pedí el authorized fan site, pero hay tiempo), y como los cogí directamente ya estaban en fragmentos, por lo que no se me ocurrio el juntarlos.
Bueno tienen todos un ancho y alto definido, pero no el alto en los laterales, que variando de un contenido a otro de los que se desarrollen en esa página (de ahí el repeat-y).
Intentaré unificar los frames superiores e inferiores, y espero tu sabio consejo para conseguir que los laterales se coloquen donde deben, ya que nose que utilidad usar para indicarles su posicion (Float,position,align...).
Gracias de antemano.

Por otro lado si me puedes explicar como consiguen los geniales trabajadores de Blizzard para que su web funccione a las mil maravillas.
He encontrado un apartado de la pagina donde se ve claramente todo, pero no se identificarlo.
https://signup.wow-europe.com/menu.html?es_ES
Por cierto, ¿cómo funcciona el position: relative / absolute ? ¿Qué es "tr" y "td"?

[Yaneth]

<div id="arriba">imagen de arriba con las esquinas</div>

<div id="relleno">aqui metes la imagen de fondo, para que puedas escribir sobre el</div>

<div id="abajoo">aqui la imagen de cierre del borde</div>


css

#arriba {ancho y alto de la imagen a mostrar;}
#relleno {solamente ancho; y puedes ponerle un padding para que el texto no quede muy a las orillas; no olvides la imagen de fondo; y ponerle repeat; para que la imagen se duplique hacia abajo}
#abajo {lo mismo que arriba}


con estas indicaciones no tendràs problemas, ya que como veràs solo se necesitan 3 divs

si necesitas algo mas me avisas

Es que.... esto te lo puse antes de que tu me enviaras las imagenes jejeje
no creas que soy tan rapida!!!

ahora lo checo con tus imagenes ok????

[Limited]

Yaneth stopppp, lo unico de momento que voy a necesitar saber, es como hacer que cada borde circulo por donde debe, ya que no se como colocarlos cada uno por un lateral:



Espero que sepas la solucion a darme, muchas gracias :P

[Yaneth]

hola

mira hacerlo asi como lo quieres con puro div es complicado,
las tres imagenes de arribam se pueden acomodar sin problema
pero.... a la hora de poner los bordes del centro, hay fallo
porque,..... el ALTO del div donde pondràs el texto, va a depender del mismo verdad???, lo mismo no sucederà con la altura de los bordes laterales, por eso el fallo,
eso se arregla si le das una altura fija, (cosa que no creo te agrade)
pero igual aqui te lo dejo

http://unpocodemucho.atwebpages.com/ayuda.html

ahora.... si tu borde, tendrà un ancho fijo es mucho mas sencillo
y no tendràs el problema de la altura
asi tu contenido puede aumentar o reducir, segun lo necesites
para esto, necesitas juntar las 3 piezas de arriba,
y hacer todo un borde superior
y juntar las 3 piezas del centro, y lo mismo con las de abajo
asi.... solo son tres imagenes las que hay que colocar

y te quedaria asi
http://unpocodemucho.atwebpages.com/ayuda2.html

como veràs en una misma hoja de estilos puse todo
cuando lo hayas checado, me avisas para borrarlo ok???

saludos

[Yaneth]

ooorale, has tenido suerte!!

Jorgens paso a visitarnos

[Limited]

Jeje ya veo.
Bueno lo hare como me dices, que la verdad es la mejor solución.
Pero si Jorgens hace de Joda nuevamente y nos da una buena lección sobre como colocarlo como quería hacerlo al principio mucho mejor, que asi aprendemos todos ^^.
Ah Yaneth, muchisimas gracias por echarme un cable, que sin ti me hubiera pasado otra semana más pensando el cómo hacerlo ^^