Margenes

:oops: :oops:

Quiero saber como colocar un margen de 160px desde el lateral izquierdo para el contenido de la web, pero sin que se desplace el menu lateral. Este debe quedar en los 5px del margen izquierdo.

:roll: :roll:


Gracias
Puedes ponernos un ejemplo aunque sea con un dibujito de paint? No te entendí bien (soy torpe, jeje :oops: ) :lol:
Creo que ya sé lo que dices.
Prueba a ponerle el padding a la del contenido, y el menú (por primera vez voy a aconsejar esto) le pones unas posiciones absolutas para que se queda fijodonde está.
Saludos :wink:
Para hacer mas claro mi inquietud digo que pasen vista a este sitio

http://grupoimpro.zoomblog.com/

Quiero hacer mi web de modo que el contenido principal mantenga una distancia de 160px aproximadamente desde el margen izquierdo en troda su extensión sin que se deslice los menú

ESTILO
#contenido {background-image: url(objetos/nubes.gif) ; width: 800px ; float:left ;
border-left ; black 1px solid ; border-right: black 1px solid }
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}

Cambie valores pero no cambia nada.

Dice Jugocan

Prueba a ponerle el padding a la del contenido, y el menú (por primera vez voy a aconsejar esto) le pones unas posiciones absolutas para que se queda fijodonde está.

Cuando dices posiciones absolutas en el menú ¿a que refieres?



Me fijo en los codigos fuente de otros sitios pero no encuentro solucion
Este problema me obstaculiza seguir con la confección de mi web:

Cuando instalo una imagen en el lateral derecho el menú desde el margen superior de la imagen hasta terminar [b]SE CENTRALIZA..

Con esta etiqueta:
#contenido p {padding: 5px 10px 5px 160px ; text-indent: 15px}
Puedo poner el margen que quiero desde el encabezamiento hasta la imagen, pero a partir de la imagen se centraliza

Tambien cambie padding por margin pero tampoco cambio algo
¿Cómo lo soluciono?

Estas son las etiquetas que uso en la inserción de la imagen a la derecho:
HTML


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

ESTILOS de la imagen
#arca{float: right ;margin:5px 10px 5px 10px}

ESTILOS Contenido de la web
#contenido {background-image: url(objetos/nubes.gif) ; width: 800px ; float:left ; border-left ; black 1px solid ; border-right: black 1px solid }

Espero encontrar en ustedes una resolucion a este problemon
me gustaria ayudarte,

pero..... no logro entender que es lo que deseas,

no podrás mostrarnos algo??? como te decía juanma aunque sea un dibujito
es que no logro comprender lo que deseas

:wink:

saludos
Conque programa dibujas para que luego lo pueda copiar en el foro.

Una pequeña explicación por favor
con el que sea, solo lo guardas como jpg,

en este mismo foro hay un tutu de como poner imagenes

saludos
Telebaitin en un principio yo pondria esto en contenido p
contenido p {margin: 5px 10px 5px 10px ; text-indent: 15px}

Si le pones 160px es el padding de la izquierda y te empuja la página, es una medida que te descompensa todo.

y despues los estilos estan bien


ESTILOS de la imagen
#arca{float: right ;margin:5px 10px 5px 10px}


Te tiene que funcionar a la fuerza.

Ahora que me acuerdo una vez me paso a mi esto que el menu se me iba al centro de la página, y era precisamente por este motivo no le daba los margenes correctos en el contenido
o de perdis sube lo que tienes
y nos das la url
y vemos el fallo

:wink: :wink:
He estado revisando desde el principio tus mensajes, nos das de ejemplo la pagina web
http://grupoimpro.zoomblog.com/ como ejemplo, pues estos son los codigos de esa página, precisamente del menu, esta echo en tablas, tambien puedes hacerlo en capas o divs, pero me parece que en table te resultara más fácil
un saludo


<table width="100%" border=0><tr><td>
<table border="0" cellpadding="3" cellspacing="0" width="100%">
<tbody><tr>
<td></td>
<td>
<h2>AVISO de errores en correos-e

</h2>
<div class="newstext">
<table background="http://www.zoomblog.com/pics/blogs/tp/07/shadow.jpg" border="0" cellpadding="4" cellspacing="0" width="100%">
<tbody><tr>
<td><div valign="middle">[contenido no disponible]<font color="#000000">31 de Enero, 2008, 12:28</font></div>
</td>
</tr>
</tbody></table>



</p><blockquote>



<table><tr><td>


<font color="#cc0000">Eliminaciones de correos de la lista TOP, del grupo.</font></p>


<font color="#cc0000">- Terra.es</font></p>


<font color="#cc0000">- Terra.cl</font></p>


<font color="#cc0000">- Teleline.es</font></p>


<font color="#cc0000">- Telefonica.net</font></p>


<font color="#cc0000">- Dataful.com</font></p>


Estos correos nos devuelven los mensajes que enviamos y por lo tanto han sido eliminados de nuestra listaTOP. Si eras suscriptor con un de estos dominios de correo, deberás volver a suscribirte usando otro correo de otro proveedor.</p>


TODOS los correos que nos son devueltos, son eliminados de todas nuestras listas. Tenlo en cuenta!!</p>


En el Grupo IMPRO, no necesito correos inactivos, buzones llenos de correos, ni devoluciones, es preciso optimizar mis recursos y tiempos, y por lo tanto elimino correos con incidencias. Si de pronto no recibes nuestros correos ya sabes que es por causa de tu buzón de correo.</p>


Revisa tus filtros antispam, esto tambien causa eliminaciones de direcciones de correo.</p>


Si nuestros e-amils no te llegan, no nos sirve de nada tenerte con nosotros!</p>


Saludos y OJO a tu buzón de correo.</p>


Juan Carlos - Grupo IMPRO</p>
</td></tr></table>
8) 8)

Estas dificultades me haciendo transpirar mas que testigo falso.

Te agradezco Pedro por tus sugerencias las que vos a probar. De todos modos igual envio los http. De cómo esta ahora como quiero que sea.

Esto es apedida de Yaneth yJugocan

Asi se ve ahora

http://img148.imageshack.us/img148/7771/forocctwrr2.jpg

Asi quiero que se vea
http://img441.imageshack.us/my.php?image=cctwwdr0.jpg

Creo que no hace falta mayor explicación

Dios nos ayuede a resolver este "encordio"
Pienso que en div global le tienes que dar 800 px, luego en la capa o div contenido {width: 300px;text-align:center}Es cuestión de ir probando el ancho 300, o 350px yo no lo he probado, pero por esa ruta que te digo lo encontrarás
:lol: :lol: Yes madame....Por fin me hice entender.

Enviame la hoja de estilo de és pagina.-
Si a este tema lo trataron en las lecciones en verdad no lo entendi.

Gracias
mira mejor te digo como lo hice sale?????

tenemos asi:

<div id="contenido>
<div id="menu">
</div>(cierre del menu)
texto del contenido
</div>(cierre de contenido)

bueno... pues agregué una div llamada texto en la hoja de estilos
asi:

#texto {width:630px; float:left; background-color:silver}
(puedes jugar con el ancho y el color de fondo, el float: left, si lo necesita)

y en html lo agrego asi:

<div id="contenido>
<div id="menu">
</div>(cierre del menu)
<div id="texto">
texto del contenido
</div>(cierre de texto)
</div>(cierre de contenido)


ahora solo debes confirmar (agregaselo si no lo tiene) el float:left en la div menu de la hoja de estilos

es todo, cualquier cosa, por aqui andamos, haaaaaaa se me olvida una cosita, por lo pronto, y hasta que me encuentre una mejor solución, (investigaré al respecto) deberás ponerle un alto a la div contenido, yo le he puesto 400px, pero tu puedes jugar con eso

saludos
:lol: :lol:

Bueno Yaneth, con algunos retoques a tu envio solucione los 2 problemas que me tenían muy preocupado.

Dicho ejemplo mas el analisis, me permitio tomar algo mas de claridad sobre el manejo de los márgenes.

Gracias a ti y tambien a quienes tambien trataron de ayudarme
Ahí lo tienes amigo

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
body { text-align:center}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font-size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}

#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px }
#navegacion li {float:left ; list-style:none ; margin: 0px 5px 0px 0px; }
#navegacion ul { margin-left: 100px }
#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {background-color: lorange ; width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(objetos/menu-curva-superior.gif) }
#pie {border-left: black 1px solid ;
text-align: center ;
border-right: black 1px solid ;
border-top: black 1px solid ;
height: 65px }
#pie li {list-style: none ; font-size: 10px }
#pieuno {float:left ; width:150px ; list-style:none }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }

a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

#pie a {color: blue; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}

#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

#navegacion a { background-image:url(objetos/menu-curva-superior.gif); padding:1px 46px 0px 46px}
#navegacion a:link {}
#navegacion a:visited {}
#navegacion a:hover { background-image:url(objetos/menu-parte-inferior.gif); background-position: bottom }
#navegacion a:active {}
8) 8)

El asunto de este post está terminado.
Muchas gracias a quienes me ayudaron.

Atento :? :?