posicionamiento de un div segun tamaño de monitor

[mensajeescrito]

Hola buenas, veran tengo una pregunta:

teniendo 2 monitores, uno pequeño y otro de dimensiones muy grande como un imac.

Sé que existe el posicionamiento de un div mediante coordenadas absolutas o relativas.

Pero....¿ podria el navegador o mediante css o otro lenguaje javascritp, no se, detertar automaticamente si el monitor es pequeño o grande , y segun sea uno u otro representar ese div con unas coordenadas u otras previamente definidas.

explico esto con un ejemplo:

si un div de una web se va a ver en un monitor pequeño

absolute
margin-top:10px;
margin-left:20px;



y si el navegador o mediante programacion se detecta el monitor grande como un imac, pues que se represente mediante:

absolute
margin-top:50px;
margin-left:630px;


logicamente sin usar porcentajes, por que lo que quiero es que segun sea un tamaño u otro del monitor, el div esté en un punto determinado u otro punto determinado concreto.

Espero que se entienda lo que quiero decir,

un saludo a todos.

[pzin]

Lo primero es que hacer la maquetación con posiciones absolutas es un grave error de lógica y te llevará a que en algún momento todo se vea mal. Luego, para usar márgenes, no tienes porqué usar posiciones absolutas.

El mejor consejo es que aprendas a hacer la maquetación y estructuración de un sitio web sin sacar el contenido de su flujo natural, usando floats y posicionamiento relativo a lo sumo.

Y en este sentido, también puede aplicar Responsive Web Design, que es la mejor forma de adaptar el contenido, mediante CSS, a diferentes resoluciones de pantalla.

[mensajeescrito]

Ante todo gracias por ayudarme respondiendome.

Pero puntualizo.

es un grave error de logica usar coordenadas absolutas , depende el caso, y lo que

se pretenda conseguir.

Si fuera un error usar las absolutas ya se habrian desechado de los editores web,

y navegadores como etiquetas en desuso.

yo utilizo relativas o absolutas dependiendo el caso.


lo que no he entendido es lo que me has querido decir con:

"hacer la maquetación y estructuración de un sitio web sin sacar el contenido de su flujo natural".


un saludo.

[pzin]

No depende del caso. Bueno, hay casos muy muy concretos y un tanto complejos en donde si se puede requerir para la estructuración general, pero dudo que sea tu caso. Pero en lo general es una mala práctica.

Iniciado por mensajeescrito

lo que no he entendido es lo que me has querido decir con:

"hacer la maquetación y estructuración de un sitio web sin sacar el contenido de su flujo natural".

Bueno, sino has entendido eso, defiendes el posicionamiento absoluto sin entender sus consecuencias.

Los editores web tipo WYSIWYG generalmente meten mucha basura en el código. Pero esto es desde el primero que existió hasta el más moderno que puedas encontrar. Y es por una razón muy lógica; no es lo mismo diseñar un sitio como si fuese Photoshop que hacer un sitio a mano entendiendo cada cosa.
Dreamweaver concretamente, abusa del uso de posiciones absolutas para cualquier cosa. Ya de por si es un mal editor, pero esto lo agrava bastante. Además está viciando cada vez a más gente para que haga uso de ese tipo de posicionamiento, porque, claro, si lo hace Dreamweaver, estará bien hecho. Lo que tú mismo estás diciendo, vaya.

Cada vez que posicionas algo de forma absoluta, lo estás sacando del flujo del documento, es como si estuviese volando por encima.

Luego realmente tampoco existe nada que se llame "coordenadas" en CSS. Aunque es un error bastante común la alusión a estas.

[mensajeescrito]

Por lo que veo sabes mucho de esto, me gustaria ver ( si puede ser ) alguna web tuya para ver esto que me dices con un ejemplo.

Pero una recomendacion no incurras mas en deducciones de mis palabras acerca de si soy mas de absolutas o relativas o si uso bien o mal una palabra u otra.

Por que no estas acertando ni una en este sentido.

Un saludo.

( y de nuevo mil gracias por las aclaraciones)

[pzin]

Bueno, no te voy a convencer de hacer las cosas bien.

Pero bueno. Si quieres hacerlo como dices, puedes usar la regla @media y añadir algunas queries para el ancho del navegador y cambiar ese posicionamiento, o márgenes, o lo que sea. Siguiendo con tu ejemplo, algo así podría servirte:

Código CSS:

@media screen and (max-width: 1920px) {
  div.loquesea {
    margin: 10px 0 0 20px;
  }
}
 
@media screen and (max-width: 900px) {
  div.loquesea {
    margin: 50px 0 0 630px;
  }
}
 

En cada @media {} puedes agrupar varios selectores, y todo se va heredando.

Para que funcione bien, sobre todo en dispositivos móviles, tendrías que especificar el ancho del viewport, que se suele hacer mediante una meta-etiqueta, al menos hasta que @viewport tenga un soporte más o menos decente.

[mensajeescrito]

Estoy viendo que como no te explique que es lo que estoy intentando hacer no vas a parar de decirme que estoy encabezonado en hacer las cosas como yo mismo creo que tienen que hacerse ( y no es asi) entre otras cosas por que para eso no hubiera pedido ayuda en este foro.

Pero para que te quedes tranquilo te lo explico:

estoy haciendo una web, dicha web tiene en su cabecera un "eslogan" en la parte izquierda de la pantalla y un logo en la parte derecha.

el tema esta en que cuando se vea en una pantalla pequeña debe quedarse a unos 15 pixels del borde de la pantalla el eslogan y a otros 15 pixels el logo por su parte derecha.


el tema esta en que cuando esto se vea en un imac de 2560 px de ancho, pues como que el eslogan y el logo se van a separar muchisimo el uno del otro para ajustarse a esa pantalla , y eso contando tambien con que el ojo humano no abarca tanta pantalla de un solo vistazo, tendria que separarse el usuario de la pantalla mas , para verlo todo en su conjunto, ¿entiendes?.


Por eso necesito unas absolutas para una y para la otra si fueran porcentajes pasaria lo que te digo.

[pzin]

Explicando mejor, siempre hay soluciones mejores.

Yo haría lo siguiente. Supongamos que tenemos una cabecera con ese logo y el eslogan:

Código HTML:

<header>
 
  <div id="eslogan">
    Always Coca-Cola
  </div>
 
  <div id="logo">
    <img src="logo.png">
  </div>
 
</header>
 

Para poner uno a la izquierda y otro a la derecha, realmente sólo tendríamos que flotar div#eslogan a la izquierda y div#logo a la derecha. Para el asunto de los 15 pixeles, podemos ponerle un padding lateral a header.

Código CSS:

header {
  padding: 0 15px;
}
 
div#eslogan {
  float: left;
}
 
div#logo {
  float: right;
}
 

Ahora llegaría el problema de que al verlo en una pantalla grande, obviamente se verá muy separado. Aunque yo tengo un iMac y nunca navego a pantalla completa, aunque, vamos a suponer que la gente está loca .
Entonces lo que se podría hacer, es que header ocupe el 100% —cosa que ya hace por defecto al ser un elemento de bloque, lo que nos ahorramos entonces indicar— y que además tenga un ancho máximo, y una vez alcanzado ese ancho máximo, indicamos que tenga un margen lateral automático para que se centre.

La cabecera al final se quedaría con algo como:

Código CSS:

header {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 15px;
}
 

Como ves no hace falta indicar ninguna posición diferente a la de por defecto; estática.

Puse el ejemplo aquí: http://jsfiddle.net/4YVjc Redimensiona la ventana del resultado y verás que se adapta perfectamente.