Novato en busca de ayuda

lk2_89 · #1 (**permalink**) 13/09/2010, 09:36

Buenas tardes amigos del foro.

Me he decidido a poner un mensaje en esta comunidad porque no he sido capaz de encontrar una solución alternativa. He leído y releído pero no se donde fallo. Por lo tanto, será mejor empezar de 0. Os cuento un poco...

Soy diseñador web -no de forma profesional, más bien eventual- aunque no con bastantes conocimientos. Un poco de Photoshop y algo de Dreamweaver me sobran para apañármelas. La cosa está en que quiero mejorar en mis diseños y el problema más básico que necesito solucionar es el centrado de mis webs.

Yo suelo diseñar para resoluciones de 1024x768, donde las web quedan perfectamente centradas y vistosas. El problema reside cuando el visitante tiene una resolución distinta, que siempre le sale la web hacia la izquierda. Yo trabajo en DW con las capas "divpa" y hasta ahora no había tenido problemas. Ahora, me ha surgido la necesidad de centrar dichas capas para que las webs no se vayan hacia la izquierda.

Un ejemplo de lo que digo lo podeis encontrar en esta [URL="http://xn--lachirigotadelosnios-l7b.com/principal.html"]web[/URL]. Si la visitais con una resolución distinta a 1024x768 -a 1152, por ejemplo- vais a notar como la web está hacia la izquierda.

Mi pregunta es: ¿hay alguna forma de declarar que la "divpa" que contiene a todas las demas esté siempre centrada? He probado con el código "margin:0px auto;" pero no hay manera.

Aún si me respondeis la pregunta, ¿me podeis recomendar algún libro o manual de internet para aprender CSS desde 0 y de una forma sencilla?

Muchas gracias y perdon por la parrafada

ositoo · #2 (**permalink**) 13/09/2010, 10:30

Bueno a mi me funciona asi:

margin: 15px auto 20px auto;

o en su caso usando:

top: x%;
left: y%;

y jugar un poco con los porcentajes hasta que se centre el div.

daPhyre · #3 (**permalink**) 13/09/2010, 11:34

el problema es que margin:0 auto no funciona con position:absolute. Tendrías que removerlo para que te funcione dicha técnica.

Un detalle que te recomiendo, es que sobre tu página, presiones ctrl+girar rueda de ratón, esto te permitirá ver como se ve tu página en otras resoluciones. Cuando termines, ctrl+0 regresará al tamaño normal. Suerte

lk2_89 · #4 (**permalink**) 13/09/2010, 13:37

Os agradezco a los dos las respuestas, pero como digo en el titulo soy novato...

Podriais explicarmelo? Gracias

kseso? · #5 (**permalink**) 13/09/2010, 16:20

Cita:

Iniciado por lk2_89

Os agradezco a los dos las respuestas, pero como digo en el titulo soy novato...

Podriais explicarmelo? Gracias

Hay quien ya se tomó el trabajo de las explicaciones para iniciarse. Además lo hizo de manera tan clara, lectiva, amena y comprensible como yo nunca seré capaz de hacer.
Mire aquí
Y aquí más literal según sus palabras

lk2_89 · #6 (**permalink**) 14/09/2010, 04:31

He probado a remover el position:absolute de las demas Div, pero me sigue pasando lo mismo... Al cambiar la resolución, se mueve hacia la izquierda.

Este es un código de ejemplo de lo que he hecho:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#apDiv1 {
    margin:0 auto 0 auto;
    width:900px;
    height:600px;
    z-index:1;
}
#apDiv2 {
    
    width:566px;
    height:296px;
    z-index:1;
    left: 511px;
    top: 21px;
}
-->
</style>
</head>

<body>
<div id="apDiv1">
  <div id="apDiv2"><img src="imagenes/web/menu_d.jpg" width="11" height="41" /></div>
</div>
</body>
</html>

lk2_89 · #7 (**permalink**) 14/09/2010, 05:54

Bueno, después de un tiempo leyendo sobre el tema he decidido abandonar la CSS de momento... Tengo que entregar esta web cuanto antes y no puedo pararme a adquirir tantos conocimientos de un solo golpe.

Voy a recurrir a las Div PA que estoy acostumbrado a usar, porque de momento con las CSS las cosas no me quedan donde a mi me gustaria. Entonces mi pregunta es: ¿cómo le indico a la Div PA contenedora que esté centrada siempre?

Para que me entendais, yo pongo las Div PA en Dreamweaver CS3 así: Insertar > Objeto de Diseño > Div PA

EDITO: voy a poner esta pregunta también el el foro de Dreamweaver.

jomaruro · #8 (**permalink**) 15/09/2010, 14:09

Hola:

Debes tener en cuenta una cosa, los Div PA (como los denomina exclusivamente Dreamweaver) son div en position:absolute. Estos divs tienen una posición fija con respecto a su contenedor, es decir, el navegador o otro div con position:relative.

Al estar en position:absolute el margin:0 auto, como ya te indicó daPhyre no funciona, deberás ponerlo como position:relative.

De todas maneras me uno a la recomendación de kseso?

Saludos.

daPhyre · #9 (**permalink**) 15/09/2010, 15:09

¿Será que no funciona por la falta del doctype al inicio del documento?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Igual, el top y el left sin un position:absolute están de más.