Problema con margen de las letras

Yokorto_Takito · #1 (**permalink**) 30/12/2009, 13:32

¡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..

hades87 · #2 (**permalink**) 30/12/2009, 13:40

has probado a ponerle un padding?

ArturoGallegos · #3 (**permalink**) 30/12/2009, 13:46

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;}

Willy_N · #4 (**permalink**) 30/12/2009, 14:29

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.

Yokorto_Takito · #5 (**permalink**) 30/12/2009, 14:51

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

Willy_N · #6 (**permalink**) 30/12/2009, 17:17

Quizá simplemente poniendo un margin al <p>?

Algo como

Código CSS:

Ver original#content p {margin:0 5px;}

ArturoGallegos · #7 (**permalink**) 30/12/2009, 23:07

Cita:

Iniciado por Yokorto_Takito

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

Quizá simplemente poniendo un margin al <p>?

Algo como

Código CSS:

Ver original#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.

Yokorto_Takito · #8 (**permalink**) 31/12/2009, 09:44

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

Willy_N · #9 (**permalink**) 31/12/2009, 11:54

Prueba entonces

Código CSS:

Ver original#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#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#content p {padding:0 0 0 5px;}

para ver si así queda mejor.

Bueno, a ver si así logras mejorar las cosas.

ArturoGallegos · #10 (**permalink**) 31/12/2009, 15:51

Cita:

Iniciado por Yokorto_Takito

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

Yokorto_Takito · #11 (**permalink**) 02/01/2010, 07:49

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 =)

Willy_N · #12 (**permalink**) 03/01/2010, 04:41

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.