En un div -> imagen a los bordes y fondo... ¿como?

pleter · #1 (**permalink**) 13/09/2009, 10:06

Saben? me encuentro hacieno mi primer trabajo (en realidad... proyecto personal para ver si puedo sacar un poco de redituo ya qye me quede sin trabajo jeje pero no viene al caso...) bueno.. y me estoy entrando al mundo de los div.
Nunca los use y quiero empezar de una vez y para siempre.
Mi problema reside en lo siguiente:

Quiero poner un div a lo ancho (900px y unos.. 28px de alto)
Va a tener un borde y color de fondo (por eso hice una imagen que quiero poner de fondo cosa que se repita todo a lo largo y sea mas sencillo (me parece ami)).
Va a tener las 2 esquinas tanto la derecha como la izquierda que son media redondiadas.
Va a tener un texto/icono luego un separador (separador.jpg) va a venir texto (que apareceran segun la categoria gracias a una programacion)

Mi problema es que, nose como hacar para poner las esquinas.
que me quede algo asi:

[ icono | categoria | sub-categoria | texto de busqueda ]
(lo que esta en italian no me preocupa porque lo sacare por codigo de programacion)

Me gustaria agregarle una iamgen mas descriptiva pero es que no me deja el foro y entonces se lo dejo en esta direccion: (triple W) .localhostr (punto com) /files/752d9a/lo%20que%20tengo.png
Pongo asi las www y el . com porque no me deja poner link
Pero es que ni idea como se hace.

Agradeceria mucho la ayuda y cualquier cosa que necesiten de mi estere a disposicion.

jomaruro · #2 (**permalink**) 13/09/2009, 10:40

Hola:

Deberías echarle un vistazo a este tema del propio foro CSS.

De todas formas sería mejor que pusieras un enlace a tu URL o pegaras tu código para ver como lo tienes.

Saludos.

pleter · #3 (**permalink**) 14/09/2009, 07:00

Estimado señor muhas gracias, estube biendo y la verdd que no entendi (o si es lo que buscaba ya que no busco la esquina redondiadas solo que esten alineados a los costados..)

Estaba pensando que tal vez se podia hacer un div que tenga 3 div. El derecho la imagen, el medio el contenido dinamico y el derecho la otra imagen.
(dejo esa idea en el html que les paso a contignuacion)

Aca le dejo la direccion para que vean mejor mi idea.
(triple w)(punto) YEOW (punto com punto ar)/DIV/
(perdon por escribir asi, pero no puedo escribir una direccion)

Es recontra sencillo (imagino) para el que sabe lo basico de div/css pero yo no lo se hacer y quiero tener esa idea para despues replicarla en todo lo que necesite.

Desde ya muchas gracias!

jomaruro · #4 (**permalink**) 14/09/2009, 15:50

Hola:

Creo que ahora entendí, prueba esto.

En el HTML:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>
            En un div -> imagen a los bordes y fondo... ¿como?
        </title>
        <link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    
    <body>
        <div class="img1">
            <div class="img1-izda"></div>
            <div class="img1-dere"></div>
            <div class="img1-cent"></div>
        </div>
    </body>
</html>

y el CSS:

Código:

.img1{
	width:780px;
	height:64px;
	margin:0 auto;
}

/* imagen izquierda de un tamaño de 15px de ancho por 64px de alto */

.img1-izda{
	background:url(images/imagen_iz.gif) no-repeat;
	width:15px;
	height:64px;
	float:left;
}

/* imagen derecha de un tamaño de 15px de ancho por 64px de alto */

.img1-dere{
	background:url(images/imagen_de.gif) no-repeat;
	width:15px;
	height:64px;
	float:right;
}

/* imagen central de un tamaño de 2px de ancho por 64px de alto */

.img1-cent{
	background:url(images/imagen_ce.gif) repeat-x;
	height:64px;
}

El código está basado en este menú y las imágenes son una de estas (son iguales sólo cambia el color).

En el primer enlace te puedes descargar el ejemplo del menú, así podrás ver como el código trata las imágenes.

Saludos.

P.D.: Por favor, no me trates de usted, te lo agradeceré. Saludos.

pleter · #5 (**permalink**) 14/09/2009, 21:50

SIIIIIIIIIIIIIIIIIIII
MILLONES DE GRACIAS! ME ENCANTO COMO QUEDO!
Mis mas sinceras y muy agradecidas gracias! jeje
Estoy ya me lo guardo para siempre que necesite utilizarlo.
Muy pero muy agradecido. Estoy contento :D.

Sabes? no quiero abusar de tu generosidad... pero hago la ultima pregunta...
Trato de que el texto me quede "en el medio" del DIV pero no puedo, no me refiero a centrar el texto horizontalmente, si no a centrarlo Verticalmente.
Intente utilizar la opción:
vertical-align: middle;
Pero nada de nada, me sigue apareciendo arriba.

P.S.: Es que lei tu "firma" y entonces supuse que te gustaba que te sean formal jeje perdón.

jomaruro · #6 (**permalink**) 15/09/2009, 14:09

Hola:

Me alegra un montón haberte sido útil

.

Prueba con la propiedad line-height, si no la conoces puedes encontrar información en este manual, de paso te recomiendo que tengas muy a mano la página.

Saludos.

P.D.: Mi firma va más por la ortografía, me enferman las faltas de ortografía

.

pleter · #7 (**permalink**) 17/09/2009, 11:44

muchas gracias buen señor!
Me ha ayudado a dar otra gran bocanada de aire.
Ahora solo me falta alinear todo el div contenedor que me ha pasado ( llamado .img1) todo hacia la derecha (o sea.. no el contenido, sino el div completo para que quede junto a la derecha)

Muchas gracias.

Que tenga un muy buen día.