Diseño y maquetación

[garymontesu]

Saludos señores y admins. Soy nuevo en esto de los foros y tbm estoy sumergiéndome recién en el mundo del HTML5. Mi duda es la siguiente.

Hay un diseño que deseo realiza, les dejo la pagina de referencia http://piscolablanco.com/home.html#wrapper-nosotros ... al darle click en la pestaña PROCESOS, ubicada al lado derecho de la pantalla, llama a otro div. Si se dan cuenta no hay scroll. No tengo idea de como realizar ese efecto. Por favor agradecería alguna orientación

[pzin]

Bienvenido al foro.

Con CSS puedes usar :target para, entre otras cosas, mostrar/ocultar contenido según la URL.

Para el caso que pones, podría ser algo así:

Código CSS:

#wrapper-nosotros {
  display: none;
}
 
#wrapper-nosotros:target {
  display: block;
}
 

[GusleonP]

Hola...si te das cuenta en la dirección que envias, termina con #wrapper-nosotros, ese (#) indica que son enlaces ancla....básicamente es un solo un archivo html que tiene toda la información, cada sección esta dentro de elemento con un ID, los enlaces superiores o laterales llaman al mismo archivo html mas el identificador del elemento que quiere mostrar (pagina.html#identificador). Al body se le quita el scroll horizontal con CSS y listo. Te pego el codigo que hace justo lo que tu dices:

PRIMERO EL CSS

ul{width:100%; list-style:none; margin:0px; padding:0px; width:200%}
ul li{float:left}
ul li#uno{background:#666; height:100%; width:50%}
ul li#dos{background:#ccc; height:100%; width:50%}
body{overflow-x:hidden}

AHORA EL HTML

<ul>
<li id="uno"><a href="prueba.html#dos">IR A DOS</a></li>
<li id="dos"><a href="prueba.html#uno">IR A UNO</a>
</li>
</ul>

Crea un HTML guardalo como prueba.html y veras como funciona el tema. Si quieres agregar mas LI o "pantallas" a tu diseño solo agrega un nuevo LI y modifica el ancho del UL, en este ejemplo esta en 200% por que solo hay dos LI, si son 3, el ancho del UL sera 300% y así sucesivamente.

Es bastante simple, si tienes alguna duda con gusto te ayudo!!!