Problema con calidad de imagen.

[anonimo12121]

Hola tengo un problema con la web que estoy haciendo en la parte visual me falla la calidad de imagen y hace que se vea mal, no se a que se debe. alguna idea? aquí pongo una imagen.

Información adicional:
las imágenes son en formato png.
estoy usando para hacer el cuadro cargando la imagenes como background. cabecera con no-repeat. pie con no-repeat, y el medio que es donde va todo el contendio repeat-y.
y una etiqueta div. y dentro de ella todo usando h1 modificado.

Código (css) [Seleccionar] Expandir

.entradabody {
margin-left:15%;
margin-top:0px;
height: auto;
width: 650px;
background-image: url(images/contenidobody.png);
background-repeat: repeat-y;
}
.entradabody h1  { /* texto */
margin-left:10px;
font-size:12px;
font-family: tahoma;
font-weight:100;
color: #a0a0a0;
}


EDITO: OTRA IMAGEN CREO QUE DEBERIA DE SOLUCIONAR ESO.

[EFEX]

Parece que sea el texto("pulsa el boton escape..."), puedes poner lo que falta ?

[WifliX]

Yo la calidad de la imagen quí en el foro la veo bien, donde no la veo bien es en imageShack que se ve más pequeña.

¿Como se debería de ver?

¿O te refieres a la raya de la derecha? Creía que era así aposta xD

Salu2

[anonimo12121]

Supongo que todavía no se mucho de organizacion de css. pero aquí pongo el códe que usa eso.
Estoy retocando.
La raya de la derecha hombre xD deberia de verse igual que la de la izquierda xD es un marco xdd

Código (html4strict) [Seleccionar] Expandir

<div class="entradahead">
<h1><span>¡Liberada la versión 1.0a de sudöku!</span></h1>
<h2><span>Xafi</span><span>16/4/2012</span></h2>
</div>

<div class="entradabody">
<div><h1>Si pulsas el boton escape aparece un menu<br>Si pulsas el boton escape aparece un menu<br>Si pulsas el boton escape aparece un menu<br></h1></div>
</div>

<div class="entradafooter">
<h1><span>categoria: <a href='index.php?page_id=<?php echo $_SESSION['ID'];?>'><?php echo $_SESSION['ID'];?></a></span></h1>
</div>

Código (css) [Seleccionar] Expandir

.entradahead {
margin-left:15%;
margin-top:10px;
height: 50px;
width: 650px;
background-image: url(images/contenidohead.png);
background-repeat: no-repeat;
}
.entradahead  h1 span { /* titulo */
font-size:22px;
font-family: Ace Futurism;
margin-left:10px;
color: #ffffff;
}
.entradahead h2{
margin-left:24px;
}
.entradahead  h2 span{ /* autor y fecha */
max-width: 100px;
text-transform: uppercase;
font-size:16px;
font-family: Ace Futurism;
color: #ffffff;
margin-left:5px;
padding-left:4px;
padding-right:4px;
padding-top:1px;
padding-bottom:2px;
background-color: #98020e;
}
.entradabody {
margin-left:15%;
margin-top:0px;
height: auto;
width: 650px;
background-image: url(images/contenidobody.png);
background-repeat: repeat-y;
}
.entradabody div {
width:600px;
height:auto;
}
.entradabody h1  { /* texto */
margin-left:10px;
font-size:12px;
max-width:500;
font-family: tahoma;
font-weight:100;
color: #a0a0a0;
}
.entradafooter {
margin-left:15%;
margin-top:0px;
height: 50;
width: 650px;
background-image: url(images/contenidofooter.png);
background-repeat: no-repeat;
}
.entradafooter h1{
margin-left:30px;
padding-top:30px;
}
.entradafooter h1 span{ /* categoria */
text-transform: uppercase;
font-size:14px;
font-family: Ace Futurism;
color: #ffffff;
margin-left:5px;
padding-left:4px;
padding-right:4px;
background-color: #98020e;
z-index: 1;
}

[EFEX]

Código (php) [Seleccionar] Expandir


<div><h1>Si pulsas el boton escape aparece un menu<br>Si pulsas el boton escape aparece un menu<br>Si pulsas el boton escape aparece un menu<br></h1></div>


No uses la propiedad H1, para el parrafo, se utiliza para los encabezados/titulos.

Código (html4strict) [Seleccionar] Expandir


<h1>Titulo</h1>
<p>Texto</p>


Mejor quedaria usar p.

Código (html4strict) [Seleccionar] Expandir


<div>
<p>Si pulsas el boton escape aparece un menu</p>
<p>Si pulsas el boton escape aparece un menu</p>
<p>Si pulsas el boton escape aparece un menu</p>
</div>


Propiedades texto
http://www.mclibre.org/consultar/amaya/css/css_texto.html

[anonimo12121]

Ok me pongo a ello maquina, gracias y a ver si soluciono esto

He probado a poner espacios y se ve mal X(
he probado a hacer nada mas.

Código (css) [Seleccionar] Expandir

.entradabody {
margin-left:15%;
margin-top:0px;
height: 100px;
width: 650px;
background-image: url(images/contenidobody.png);
background-repeat: repeat-y;
}
y sigue dandome el mismo problema.

DISCULPAD ERA QUE TENIA PUESTO ZOOM EN EL NAVEGADOR...

[EFEX]

No uses porcentaje en una hoja de estilo fixed, en css liquid se utiliza casi todo en porcentaje(%) y fixed en pixeles(px), la diferencia esta en el tamaño de la pantalla, si achicas el navegador veras como los div sea ajustan al tamaño.

Ejemplos Fixed
http://www.code-sucks.com/css%20layouts/fixed-width-css-layouts/

Ejemplos Liquid
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Podes probar en firefox(ctrl+mayus+i) o en chrome(ctrl+mayus+j) y podes desactivar las propiedades css(margin, padding, etc), ver los espacios que ocupan, etc.
Si queres mover los 3 bloques div utilizando margin-left:15%;, es mejor que crees otro div que utilize margin pero en pixeles...

Código (html4strict) [Seleccionar] Expandir


<div id="box">
                <div class="entradahead">
...
</div>
<div class="entradabody">
...
</div>
<div class="entradafooter">
...
</div>
</div>


Código (css) [Seleccionar] Expandir


#box{
            margin-left:50px;
}


[anonimo12121]

gracias tio modificaré el code.