Div, centrar y magenes

salbatore · #1 (**permalink**) 01/05/2008, 09:48

Hola, foreros:

Estoy haciendo un div algo especial, por lo menos para un novato como yo, jeje. Mirar los divs los tengo de este modo:

Código HTML:

 <div id="uno">
	<div id="dos">
            Mi texto
        </div>
   </div>

Y los estilos:

Código HTML:

<style type="text/css">
<!--
 #uno {background:url(image_line_top.gif); height:37px; text-align:center;}
         #dos {margin: 0 auto 0 auto; text-align:right; width:700px; background:url(image_line_top_box.gif); background-repeat:no-repeat; background-position:right;}
-->
</style>

Lo que busco es que el div "dos" tenga dentro de el un margen de 50px. Es decir, primero el div "dos" esta centrado en la web, mide 700px, tiene el contenido alineado a la derecha, pero el contenido no esta justo pegado en el borde del div "dos", sino que dista de el 50px.

¿Es posible hacerlo?¿como?.

Mikmoro · #2 (**permalink**) 01/05/2008, 09:57

Pues bastará con que el texto lo pongas dentro de un span, por ejemplo

Cita:

<div id="uno">
<div id="dos"><span>Mi texto</span></div>
</div>

y que en la css añadas:

span { margin-right: 50px;
}

Mikel.

salbatore · #3 (**permalink**) 01/05/2008, 10:54

Hola de nuevo...

Estoy intentado hacerlo pero no se muy bien, jeje. Pongo lo de span en el html, luego me voy a la hoja css y añado span { margin-right: 50px;}, pero no ocurre nada.

Tal vez lo des por supuesto pero se muy poco de css.

Mikmoro · #4 (**permalink**) 01/05/2008, 11:00

Hola, Sabatore.

No, no daba nada por supuesto; sólo hay que copiar lo que te puse y pegarlo, y debería funcionar.

Prueba a poner esto:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type" />
<title>Salbatore</title>
<style type="text/css">
#uno {background:url(image_line_top.gif); height:37px; text-align:center;}
#dos {margin: 0 auto 0 auto; text-align:right; width:700px; background:url(image_line_top_box.gif); background-repeat:no-repeat; background-position:right;}
span { margin-right: 50px;
}
</style>
</head>
<body>
<div id="uno">
<div id="dos"><span>Mi texto</span></div>
</div>
</body>
</html>

A ver si te funciona. Desgraciadamente no sé cómo son tus imágenes ni cómo podrán afectar al resultado.

Mikel.

Mikmoro · #5 (**permalink**) 01/05/2008, 11:09

Mira: para que lo veas funcionando. te pongo un ejemplo.

Como no tengo tus imágenes he puesto colores de fondo para que lo veas.

Mikel.

salbatore · #6 (**permalink**) 01/05/2008, 11:29

Hola, de nuevo Mikmoro:

Muchisimas gracias, menuda disposicion para ayudar, que crack!

Gracias de nuevo, me sirvio perfectamente.

Mikmoro · #7 (**permalink**) 01/05/2008, 16:26

De nada, es un placer.

Hasta la próxima.

Mikel.