Foros del Web » Creando para Internet » CSS »

Novato en busca de ayuda

Estas en el tema de Novato en busca de ayuda en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 13/09/2010, 10:36
 
Fecha de Ingreso: agosto-2007
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 1
Novato en busca de ayuda

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
  #2 (permalink)  
Antiguo 13/09/2010, 11:30
Avatar de ositoo  
Fecha de Ingreso: septiembre-2008
Ubicación: cd del carmen
Mensajes: 43
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Novato en busca de ayuda

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.
  #3 (permalink)  
Antiguo 13/09/2010, 12:34
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Novato en busca de ayuda

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
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 13/09/2010, 14:37
 
Fecha de Ingreso: agosto-2007
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Novato en busca de ayuda

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

Podriais explicarmelo? Gracias
  #5 (permalink)  
Antiguo 13/09/2010, 17:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Novato en busca de ayuda

Cita:
Iniciado por lk2_89 Ver Mensaje
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
  #6 (permalink)  
Antiguo 14/09/2010, 05:31
 
Fecha de Ingreso: agosto-2007
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Novato en busca de ayuda

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>
  #7 (permalink)  
Antiguo 14/09/2010, 06:54
 
Fecha de Ingreso: agosto-2007
Mensajes: 59
Antigüedad: 10 años, 4 meses
Puntos: 1
Respuesta: Novato en busca de ayuda

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.
  #8 (permalink)  
Antiguo 15/09/2010, 15:09
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Novato en busca de ayuda

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.

  #9 (permalink)  
Antiguo 15/09/2010, 16:09
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Novato en busca de ayuda

¿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.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...

Etiquetas: Ninguno
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 22:01.