maquetacion en horizontal. resolucion o ubicacion?

Citar

Escrito el 15 Feb 2012 12:08 am

hola amigos del foro!
tengo un problema... estoy maquetando un site en horizontal.
lo estoy diagramando primero en photoshop pero el tema es con la resolucion:
no se como hacer que el fondo de una seccion encaje justo en la pantalla que ve el usuario.
oscea si tengo 3 secciones, una con fodo azul, otra con fondo rojo y otra con fondo amarillo, como hacer para que si estoy en la seccion que tiene fondo rojo, no se vea un fragmento del fondo amarillo??
espero que puedan ayudarme u orientarme ya que no se me ocurre como hacerlo

desde ya muchas gracias...

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 15 Feb 2012 06:14 am

imagino usando un ancho al 100%
y navegando con anclas o js... hasta css modificando la posición

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 15 Feb 2012 02:05 pm

Tendrás que detectar el ancho de la ventana del navegador y asignar ese ancho a cada "sección".

Con JQuery es bastante directo:

Código Javascript :

w = $(window).width();

Si no estás usando JQuery, es un poco más complicado por la diferencia entre los navegadores. Una función para ello podría ser:

Código Javascript :

function GetWinWidth() { 
   var w; 
   if (typeof window.innerWidth != 'undefined') { 
      w = window.innerWidth; 
   } else { 
      if (typeof document.documentElement != 'undefined' 
        && typeof document.documentElement.clientWidth !=  
        'undefined' && document.documentElement.clientWidth != 0) { 
         w = document.documentElement.clientWidth; 
      } else {    
         w = document.getElementsByTagName('body')[0].clientWidth; 
      } 
   } 
   return w; 
}

Por DriverOp

Claber

2510 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 15 Feb 2012 06:39 pm

digo algo como esto

Código HTML :

<html>
<head><title>hola</title>
<style type="text/css">
body{
  margin: 0;
  width:200%;
}
#uno, #dos{
  width: 50%;
  height: 500px;
  float: left;
}
#uno{
  background-color: #345;
}
#dos{
  background-color: #AFB;
}
#botones{
  position:fixed;
  left: 20px;
  top: 520px;
}
</style>
</head>

<body>

<div id="uno"></div>
<div id="dos"></div>

<div id="botones">
  <a href="#uno">UNO</a>
  <a href="#dos">DOS</a>
</div>

</body>
</html>

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 15 Feb 2012 11:04 pm

muchas gracias chicos por su ayuda.
ahora... nacho... a esa estructura no tendria problemas de añadirle un plugin jquery para el desplazamiento horizontal no???

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 15 Feb 2012 11:12 pm

y ademas... al agregarle otra seccion, esta aparece debajo. no al lado de las anteriores... intente corregirlo modificando el porcentaje de width pero no funciono

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 16 Feb 2012 12:34 am

en el ejemplo que te puse debes poner

el ancho de body cantidad de secciones x 100%
y cada sección (yo le puse id #uno y #dos) 100% / cantidad de secciones

si fueran 3 sería..
3 x 100 = 300
100 / 3 = 33.3

Código HTML :

body{
  width:300%;
}
#uno, #dos, #tres{
  width: 33.33%;
}

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado

Web Developer

Citar

Escrito el 16 Feb 2012 02:12 am

pero claro! si estamos con porcentajes!!!! perdon no me avive antes!! muchisimas gracias por tu ayuda nasho!!!

Por ignacio85r

31 de clabLevel

Genero:Masculino

Envíale un mensaje privado

diseñoweb moGraph

Citar

Escrito el 16 Feb 2012 06:09 am

Otra opción podría ser utilizar el plugín jQuery-color para cambiar el color del fondo según el usuario navega la página.

Documentación y demo

Saludos

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

maquetacion en horizontal. resolucion o ubicacion?

Escribe una respuesta rapida