Foros del Web » Creando para Internet » CSS »

Problema con margen de las letras

Estas en el tema de Problema con margen de las letras en el foro de CSS en Foros del Web. ¡Saludos! Pues tengo un problemilla, absurdo para muchos de los aquí presentes, pero que me está costando lo indecible solucionar xD Lo he intentado por ...
  #1 (permalink)  
Antiguo 30/12/2009, 13:32
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Problema con margen de las letras

¡Saludos!
Pues tengo un problemilla, absurdo para muchos de los aquí presentes, pero que me está costando lo indecible solucionar xD
Lo he intentado por activa y por pasiva, pero no consigo hacer más estrecho el espacio en el que tienen que ir las letras del contenido de la página, tanto por el margen izquierdo como por el derecho

Lo primero:
Aquí va el cógido que uso para el .html, muy básico como vereis xD

Cita:
<html>
<head>
<title>Página de prueba</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="estilos.css" type="text/css" />
</head>

<body>
<div id="sidebar">
<br><br><br><br><br><br><br><br>
<h1>Menú</h1>
<br>

<div id="menu">
<a class="active" href="index.html">Submenú 1</a>
<a href="#">Submenú 1</a>
<a href="#">Submenú 1</a>
<a href="#">Submenú 1</a>
<a href="#">Submenú 1</a>
</div>

<h3>Más info:</h3>
<p>Información que sea</p>
</div>

<div id="content">
<br><br>
<h1><img src="img/logo.png" width="703" height="200" /></h1>
<h2>Título de la página</h2>

<h3>¡Bienvenido!</h3>
<p>Blablabla blabla blabla blabla blabla blabla blabla blabla blablablabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blablablablabla blablablabla blabla blabla blabla blabla blabla blabla blabla blabla</p>

<h3>Prueba de alineación de puntos:</h3>
<ul>
<li>Aquí iría la primera</li>
<li>Y aquí la segunda</li>
</ul>
<br><br>
</div>
</body>
</html>

Lo segundo:
La hoja de estilos que tengo para la página, que he toqueado por todas partes y que no consigo apañar


Cita:
body
{margin:0; padding:0; color:#000000; background:#FFFFFF top left repeat-y; font:70% Verdana,Tahoma,sans-serif;}

ul
{list-style:circle; margin:15px 0 20px 0; font-size:1.0em;}

li
{margin:8 0 8px 25px;}

a
{color:#3f3f3f; font-weight:bold; text-decoration:none;}

a:hover
{color:#3f3f3f; text-decoration:underline;}

img
{float:center; margin:0 15px 15px 0; padding:1px; border:0px solid #3f3f3f;}

a img
{border-color:#3f3f3f;}

a img:hover
{background:#3f3f3f; border-color:#3f3f3f;}

/**************** Estilos del área de la barra lateral ****************/

#sidebar
{position:absolute; top:0; left:0; width:220px; height:100%; overflow:auto; top right repeat-y; text-align:right;}

body > #sidebar
{position:fixed;}

#sidebar h1
{margin:20px 18px 0 5px; color:#3f3f3f; font-size:1.6em; letter-spacing:-2px; text-align:right;}

#sidebar h2, #sidebar h3
{margin:0 20px 18px 5px; color:#FFFFFF; font-size:1.1em; font-weight:bold; letter-spacing:-1px; text-align:right;}

#sidebar h3
{margin:20px 18px 4px 5px; color:#3f3f3f;}

#sidebar p
{margin:0 20px 18px 5px; color:#3f3f3f; font-size:0.8em;}

#sidebar a
{color:#3f3f3f}

/**************** Estilos del menú de navegación ****************/

#menu a
{display:block; width:202px; padding:5px 15px 5px 0; color:#a77038; top right repeat-y; font-size:1.5em; font-weight:normal; text-decoration:none; letter-spacing:-2px;}

#menu a:hover
{color:#a77038;}

#menu a.active
{padding:5px 18px 5px 0;}

#menu a.active:hover
{color:#523d22;}

/**************** Estilos del área de contenido ****************/

#content
{width:900px; margin: 0 0 0 240px; padding:0px 0; background:url(img/bg_header.png) top left repeat-y;}

#content p
{margin:0 0 20px 0; line-height:1.5em;}

#content h1
{margin:0; color:#FFFFFF; font-size:4em; letter-spacing:-5px; text-align:center;}

#content h2
{margin:0; color:#3f3f3f; font-weight:bold; font-size:2.5em; letter-spacing:-2px; text-align:center;}

#content h3
{clear:both; margin:30px 0 10px 0; color:#3f3f3f; font-weight:bold; font-size: 2em; letter-spacing:-2px;}

Lo tercero:
Una captura de pantalla para que veais del problema del que os hablo





Así que ahí está. Si hay algún conocedor del tema o alma caritativa dispuesto a echarme una mano, pues se lo agradecería muchísimo. La cosa es hacer que las letras no sobresalgan por ambos lados de la imagen, pero claro, si reduzco se me reduce también el espacio completo del contenido, y el problema sigue pasando..
  #2 (permalink)  
Antiguo 30/12/2009, 13:40
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con margen de las letras

has probado a ponerle un padding?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 30/12/2009, 13:46
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con margen de las letras

creo que se te a ido el titulo por la imagen que muestras, creo que tu problema es el margen de los párrafos, pruébate modificar esta linea en tu css

Código HTML:
#content
{width:900px; margin: 0 0 0 240px; padding:0px 0; background:url(img/bg_header.png) top left repeat-y;}
cámbiala por
Código HTML:
#content
{width:850px; margin: 0 0 0 240px; padding:0 25px; background:url(img/bg_header.png) top left repeat-y;}
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 30/12/2009, 14:29
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 8 años
Puntos: 18
Respuesta: Problema con margen de las letras

También veo que falta el doctype: http://es.wikipedia.org/wiki/Declaraci%C3%B3n_de_tipo_de_documento y también http://www.cristalab.com/tips/la-importancia-de-doctype-y-de-validar-xhtml-y-css-c57338l/
Esto sería lo primero que debes arreglar ya que si no lo declaras los navegadores no suelen interpretar todo el html correctamente.
Posiblemente no te arreglará tu problema, pero en cualquier caso conviene ponerlo antes que nada.
  #5 (permalink)  
Antiguo 30/12/2009, 14:51
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Problema con margen de las letras

hades87:
No, la verdad es que no he probado todavía. Una posible solución que había pensado era ponerle un padding-right: inherit, pero no se si funcionaría, no se dónde ponerlo, ni la sintaxis que debo utilizar =(


Ag666:
No, no funciona. Siguen sin ensancharse el espacio donde deben ir las letras. Reduciendo el width del content hago más pequeño el contenido, pero las letras siguen empezando y terminando en el borde de ese mismo contenido a pesar de cambiarle también el padding que has mencionado >_<


Willy_N:
Comprendida tu propuesta, y leído el tema. Tienes razón. He actualizado esa parte del html, pero como bien comentabas el problema no lo arregla
  #6 (permalink)  
Antiguo 30/12/2009, 17:17
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 8 años
Puntos: 18
Respuesta: Problema con margen de las letras

Quizá simplemente poniendo un margin al <p>?

Algo como
Código CSS:
Ver original
  1. #content p {margin:0 5px;}
  #7 (permalink)  
Antiguo 30/12/2009, 23:07
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con margen de las letras

Cita:
Iniciado por Yokorto_Takito Ver Mensaje
Ag666:
No, no funciona. Siguen sin ensancharse el espacio donde deben ir las letras. Reduciendo el width del content hago más pequeño el contenido, pero las letras siguen empezando y terminando en el borde de ese mismo contenido a pesar de cambiarle también el padding que has mencionado >_<
seguro que no hizo ningún efecto? acabo de hacer la prueba y ha funcionado perfectamente... jeje sera que yo ando pensando en otra cosa...

recapitulemos, hasta donde yo entiendo tu problema esta en el texto que se muestra encima del borde de tu imagen de fondo... si es ese tu caso te invito a ver este ejemplo que seria el mismo caso...
Ejemplo: Problema con margen de las letras

Cita:
Iniciado por Willy_N Ver Mensaje
Quizá simplemente poniendo un margin al <p>?

Algo como
Código CSS:
Ver original
  1. #content p {margin:0 5px;}
podría funcionar tu idea pero tendría que aplicar ese estilo a cada elemento que quiera agregar refiriéndome a lista, párrafo, tablas, imágenes, etc.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 31/12/2009, 09:44
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Respuesta: Problema con margen de las letras

Willy_N:
La triunfada, efectivamente con eso se soluciona. He toqueteado más, concretamente borrando los dos últimos valores del margin en el #content .h3, para que también el título se mueva más a la derecha, y funciona

El único 'problema', por ponerle un pero a la solución (aunque ya así sinceramente me vale), es que recorta mucho espacio del lado derecho y ahí se pierde algo. Pero bueno, no se puede tener todo


Ag666:
¿Podría ser un problema de navegador? Quizá se vea así en el Internet explorer, o en algún otro. He de admitir que lo he probado todo en el que uso siempre, el Firefox, y no en los demás, así que igual es por eso que estoy metiendo la pata

Para que veas más claro a lo que me refiero, os subo a Sendspace los tres archivos, que pesan poco, para que puedas hacer la comprobación visual: http://www.sendspace.com/file/2jabgv




En principio con la solución de Willy_N me vale, voy a ir funcionando así de momento, si creeis que el arreglo puede mejorarse sin perder por el lado derecho, pues mejor. En cualquier caso a todos los que habeis posteado aquí aportando y solucionando, implicándoos en el tema, os estoy muy agradecido =)

Estaré pendiente del tema de todas maneras, y continuaré leyendo el foro para continuar aprendiendo
En serio, muchas gracias
  #9 (permalink)  
Antiguo 31/12/2009, 11:54
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 8 años
Puntos: 18
Respuesta: Problema con margen de las letras

Prueba entonces
Código CSS:
Ver original
  1. #content p {margin:0 0 0 5px;}
Recuerda que los 4 valores del margin vienen en el orden Arriba, Derecha, Abajo, Izquierda.
Cuando solo se ponen dos valores, como en mi anterior sugerencia
Código CSS:
Ver original
  1. #content p {margin:0 5px;}
el primer valor es para Arriba y Abajo y el segundo para Derecha e Izquierda.
Si ese valor es 0 no hace falta poner el px detrás del 0, pero si el valor es superior a 0 si se debe poner.
También puedes probar con
Código CSS:
Ver original
  1. #content p {padding:0 0 0 5px;}
para ver si así queda mejor.

Bueno, a ver si así logras mejorar las cosas.
  #10 (permalink)  
Antiguo 31/12/2009, 15:51
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Problema con margen de las letras

Cita:
Iniciado por Yokorto_Takito Ver Mensaje
Ag666:
¿Podría ser un problema de navegador? Quizá se vea así en el Internet explorer, o en algún otro. He de admitir que lo he probado todo en el que uso siempre, el Firefox, y no en los demás, así que igual es por eso que estoy metiendo la pata
no debería ser problema con el explorador, aunque ciertamente un error que tienes es solo usar firefox... te recomiendo uses como mínimo IE y FF... si puedes opera y safari
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #11 (permalink)  
Antiguo 02/01/2010, 07:49
 
Fecha de Ingreso: diciembre-2009
Mensajes: 5
Antigüedad: 8 años
Puntos: 0
Willy_N: Gracias, la verdad es que así queda ya genial ^_^

Ag666: Tienes toda la razón, para qué engañarnos. Debería utilizar como poco el IE porque todavía hay muchísima gente que lo utiliza. Y es cierto que el Opera y el Safari, aunque sean menos populares, también hay mucha gente que los usa. Lo que sí haré será poner un pequeño aviso de que para la correcta visualización de la página se recomienda descargar el Firefox

(Todavía recuerdo cuando el IE, no recuerdo qué versión era, no reconocía las imágenes .PNG y tenía que matarme para hacer las cosas para un navegador y para otro)




En resumidas cuentas, a TODOS muchísimas gracias. Ha sido un placer recibir vuestra ayuda y vuestros consejos, que me han enseñado bastante =)
  #12 (permalink)  
Antiguo 03/01/2010, 04:41
Avatar de Willy_N  
Fecha de Ingreso: diciembre-2009
Ubicación: Cádiz
Mensajes: 334
Antigüedad: 8 años
Puntos: 18
Respuesta: Problema con margen de las letras

Con el programa IEtester que te puedes descargar aquí http://www.my-debugbar.com/wiki/IETester/HomePage puedes instalarte un navegador que te permita visualizar tu página en muchas versiones de IE.

Ten en cuenta que cuando estás haciendo cambios en una página deberías ir mirando muy a menudo cómo queda en los distintos navegadores. Instalarlos todos, abrirlos, abrir la página en cuestión en cada uno de ellos y darle a f5 cada poco tiempo. Así te das cuenta del tirón de cuando te entra un fallo y no tienes que estar revisando un montón de código para encontrarlo.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:07.