¿Cómo poner una imagen en un borde?

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}

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

:wink:

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?

Lo he retocado como pude pero se sigue viendo mal :
[contenido no disponible]

Espero que alguien me diga como ponerlos en orden :S

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?????????????

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

<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

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

[contenido no disponible]

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!

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 escribió:<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????

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:
[contenido no disponible]
[contenido no disponible]

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

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

ooorale, has tenido suerte!!

Jorgens paso a visitarnos :wink:

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 ^^

Bueno si la abris con el IE podreis ver el aspecto final :P Muchisisisimas gracias a los que me habeis ayudado, sea más o menos.
http://twinkscrueldad.iespana.es/index.html

Por cierto, ¿cuál era el método para que sin escribir el index.html te llevara a él?

Yo creo que aún se puede hacer más sencillo usando capas.

Defines la capa que contiene todo ese espacio, la llamaremos ventana por ejemplo. En la hoja de estilo le asignamos una anchura concreta y de imagen de fondo una imagen que sea todo ese puzle completo pero sin la parte superior. Además la haremos de una altura tal que cubra la ventana más grande que creas que vas a tener. Es decir, si crees que como mucho (en función del contenido que pongas dentro, claro) va a tener una altura de 700 pixeles, creas esa imagen de unos 750 px. Esa imagen como te digo la pones de imagen de fondo de la capa ventana y le dices en la hoja de estilo que la posicione en la parte más baja de esa capa. Vamos, que la imagen esa esta formada por la imagen tuya del centro más la de abajo del todo, pegadas ambas en una sola imagen.

El resultado es la ventana como tú la quieres pero sin la parte superior. Esa parte la arreglamos ahora.

Como todas las páginas empiezan con un títular, le asignamos al título H1 otra imagen de fondo, en este caso la imagen que tú tienes arriba. Así, cada vez que pongas un titular del tipo H1 saldrá esa imagen superponiendose a la de debajo y el efecto es el que tú quieres.

Eso si, solo puedes usar el H1 allí, arriba del todo. Si en otro lugar quieres colocar otro titular, elige un H2, H3, etc, para evitar que en medio de la página aparezca la imagen superior, pues los H1 la van a tener de fondo. En este caso, en la hoja de estilo le indicas a H1 que su imagen de fondo es la tuya que tienes arriba del todo y que además la posicione arriba del todo (top).

A ninguna le tienes que poner repeat.

Qué ganas? Sencillez. Además verás como conforme pones más contenido la imagen va creciendo con él. Si alguna vez vez un espacio sin imagen es por que te quedaste corto y tienes que hacerla de una altura mayor.

Si tengo tiempo te lo explico con un ejemplo, oki? Pero dime si se entiende más o menos lo que digo, vale? Igual he perdido la costumbre de explicarme bien.... j eje je

Prueba con esto, mira:

Hoja de estilos "estilo.css"

body {
background-color: #000000 ;
background-image: url(http://twinkscrueldad.iespana.es/items/bg.jpg) ;
background-repeat: no-repeat ;
width:100% ;
text-align: center}
IMG { padding-top:10px; BORDER-STYLE: none; }

a { text-decoration: none ; color: #45acf6 ; font-family: calibri}
a:hover {color:white }
a:visited{color: none}
a:link {font-family: Calibri ;text-decoration: none ;color: #45acf6}

h1{font-family: Calibri ;font-weight: bold ;text-decoration: none ; font-size: 20px }
h2{font-family: calibri ;font-size: 20px ; text-decoration: none ; color: yellow}
h3{font-size: 14px ;font-family: Calibri ;color: black }
p {font-size: 14px; font-family: Calibri ;color: black ; margin-left: 60px ; margin-right: 60px ;}

#global {
MARGIN: 0px auto ;
WIDTH: 800px ;}

#logotipo {
width : 300px ;
height: 140px ;
float: right ;
margin: 5px 100px 4px 15px }

#emblema {
width: 270px ;
height: 125px ;
float:left ;
margin: 16px 15px 4px 30px }

#navegacion {
background-image: url(http://twinkscrueldad.iespana.es/items/module-lite.png) ;
width: 800px ;
height: 45px ;
padding: 0px ;
text-align: center;
clear: both; }

#navegacion li {
list-style: none ;
float:left ;
margin: 0px 40px 0px 20px ;
text-decoration: none; }

#navegacion ul {
margin-left:15px ;
display:inline}

#contenido {
text-align: left ;
width: 800px ;
margin-top : 10px}

#index {background-image: url(limited-001-parte-baja.png) ;
BACKGROUND-POSITION: left bottom;
BACKGROUND-REPEAT: no-repeat;
width: 800px ;
padding-left: 0px ;
padding-right: 0px ;
padding-bottom:70px;
text-align: center}

.superior {
background-image: url(limited-001-parte-alta.png) ;
BACKGROUND-POSITION: left top;
BACKGROUND-REPEAT: no-repeat;
width: 800px ;
padding-left: 0px ;
padding-right: 0px ;
padding-top:70px;
text-align: center}

Página ejemplo, ejemplo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Twinks Crueldad</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>

<div id="global">

<div id="emblema">
[contenido no disponible]
</div>

<div id="logotipo">
[contenido no disponible]
</div>

<div id="navegacion">
<ul>

<h2>Índice</h2>

<h2>Foro</h2>

<h2>Guilds</h2>

<h2>Regristro</h2>

<h2>Addons</h2>

<h2>Xfire</h2>

[contenido no disponible]

</div>

<div id="contenido">
<div id="index">
<h1 class="superior">¿Que es Twinks Crueldad?</h1>


Twinks Crueldad es una página de encuentro para todos los Twinks españoles jugadores del World Of Warcraft donde se comentan temas directamente relacionados
con twinks hasta otros banales y referentes al World Of Warcraft. Para entrar al foro simplemente se debe tener un Twink.</p>
<h1>¿Qué es un Twink?</h1>


Un twink es todo aquel personaje que posea el mejor equipo y sus respectivos encantamientos para su nivel.
No se distingue al twink por su nivel. Un personaje nivel 80 es twink cuando tenga el máximo equipo en su estilo(pve/pvp) y sus encantamientos, al igual que lo es
un personaje nivel 19.</p>
<h1>¿Como distinguir a un Twink?</h1>


El twink respeta al jugador enemigo, no usa emociones como /risa y no abusa de su potencial matando a jugadores normales.
Busca siempre batirse con otros twinks, no intenta frenar la victoria para campear(es decir, matar a los jugadores enemigos en su entorno de resurreccion)
,sino que acelera esta para entrar a otra batalla.
Un jugador que controla un Twink suele moverse de modo habil y calcula cada uno de sus movimientos. Si se ve en desventaja no se hace el valiente,
huye para no morir.
No se dedicará a spammear(escribir y escribir en el chat)el chat de batalla, se hara notar lo menos posible simplemente para
no causar mala impresion.</p>
</div>
</div>

</div>

</body>
</html>

Qué te parece?

Aquí lo tienes hecho. Lo que no entiendas lo preguntas, oki?

www.comocreartuweb.com/ejemplos-del-foro/limited-001.html

Lo más importante? Que si lo he hecho bien, se ve identico en cualquier navegador...

Un abrazo! :wink:

Bueno he corregido algunas cosas y ya se ve más o menos bien en el Firefox.
Yo simplemente quería saber el cómo colocarlo en base a la primera idea, poniendo cada trozo en su zona, es decir, el que tipo de palabra (align,position,float) usaba para cada uno de los fragmentos para darles su lugar.
Luego surgió tu idea de unificar las inferiores y superiores y ambos bordes al fondo para que fuera más sencillo, lo cual agrada.
Tu última idea no me gusta mucho, porque:
No daría el efecto que yo quiero, es decir, las imágenes del borde tendrían texto en su interior, que no lo deseo.
Y no quedaría todo alineado a la izquierda pues el título se comería parte del dibujo, y de por si quiero títulos también alineados a la izquierda.

Si no es molestia sólo querría saber el qué herramienta o palabra usar para decirle a cada capa su zona y que no se separen de las otras, y ya de paso el truco para poder evitar el escribir el index.html en el link para que éste funccione.