[SOLUCIONADO] Sidebar fixed

[Sephys]

Buenas!! A ver si me podéis echar una manito

Tengo un sidebar fixed...el problema es que al hacer mas pequeña la pantalla (para emular resoluciones más pequeñas) aparece el scroll lateral, y esto hace que el contenido de mi contenido principal haga overlap con el sidebar...

Quiero que se pueda desplazar normalmente el sidebar fixed en el desplazamiento lateral sin que haya ese molesto overlapping.

No me vale lo de cambiar el eje-z, lo que quiero es que en horizontal se desplace normalmente manteniendo el fixed en el eje vertical. Con el index-z lo que se hace es que uno quede por delante del otro.

Tiene que ser CSS, nada de javascript ni nada xD.

[pzin]

Bienvenido al foro.

Sin código poco se puede hacer.

[Sephys]

El HTML es el de la pagina de [URL="http://www.csszengarden.com/"]http://www.csszengarden.com/[/URL].El que pone HTML File

Luego mi codigo de CSS

Código CSS:

* {
  margin:0px;
  padding:0px;
}
 
@font-face
{
  font-family:WendyOne-Regular;
  src: url('WendyOne-Regular.ttf');
}
 
@font-face
{
  font-family: SONIC;
  src: url('SONIC.ttf');
}
 
@font-face
{
  font-family:Loveyalikeasister;
  src: url('LoveYaLikeASister.ttf');
}
 
.page-wrapper{
  width:1260px;
  position:absolute;
  background-image:url('fondopaginaprincipal.png');
  background-attachment:fixed;
 
}
 
.page-wrapper p{
  margin-right:20px;
}
 
.page-wrapper a:link{
  color:#0D7094;
}
 
.page-wrapper a:hover{
  color:#9b4e52;
}
 
#zen-intro{
  width:1249px;
  position:relative;
  float:right;
}
 
header{
  width:230px;
  height:110px;
  position:fixed;
  float:left;
  background-color:#F2EAEA;
  top:30px;
  margin:auto;
  border-radius: 25px;
  box-shadow: 0px 0px 6px 0px #0D0D0C;
}
 
header h1{
  margin-top:8px;
  margin-left:15px;
  font-family:WendyOne-Regular;
  font-size:30px;
  color:#9b4e52;
}
 
header h2{
  font-family:SONIC;
  font-size:6px;
  margin-left:12px;
  margin-top:0px;
}
 
#zen-summary {
  width:950px;
  position:relative;
  float:right;
  margin-left:350px;
}
 
#zen-summary p:first-child {
  margin-top:40px;
}
 
#zen-summary p {
  font-family:SONIC;
  font-size:10px;
  color: #0D7094;
}
 
#zen-preamble{
  width:950px;
  position:relative;
  float:right;
}
 
#zen-preamble h3{
  margin-top:30px;
  font-family:Loveyalikeasister;
  font-size:25px;
  color:#9b4e52;
}
 
#zen-supporting{
  width:950px;
  position:relative;
  float:right;
  margin-left:300px;
}
 
#zen-supporting h3{
  font-family:Loveyalikeasister;
  font-size:25px;
  color:#9b4e52;
}
 
#zen-supporting div{
  margin-top:20px
}
 
footer{
  width:250px;
  position:relative;
  margin:auto;
  padding:40px;
}
nav{
  width:200px;
}
.sidebar{
  width:220px;
  position:fixed;
  float:none;
  margin-top:150px;
}
 
.sidebar a:link{
  color:#000000;
}
 
.sidebar a:hover{
  color:#9b4e52;;
}
 
.wrapper{
  position:fixed;
  margin-left:15px;
}
 
.wrapper h3{
  font-family:SONIC;
  font-size:8px;
  color:#9b4e52;
}
 
.wrapper div{
  margin-top:20px;
}
 
.wrapper ul {
  list-style-type:none;
}
 
.wrapper li {
  font-family:Loveyalikeasister;
  font-size:15px;
}
 

Como digo, las modificaciones solo deben ser en CSS, no puedo tocar el HTML, ya que es una practica de CSS, ni poner nada Javascript ni sucedáneo, más que nada porque aún no lo hemos aprendido xD.

Gracias por la bienvenida y la respuesta :D

[pzin]

CSSzengarden sigo vivo.

Bueno, realmente es un problema más bien de #zen-preamble, al que tienes puesto un ancho fijo:

Código CSS:

width: 950px;
 

Tampoco creo que flotar el elemento a la derecha sea lo más ideal. De hecho yo no lo flotaría, y simplemente le indicaría un margen a la izquierda que sea igual al ancho del menú, o un poco más si acaso.

[Sephys]

¿Pero que propones ponerle tu en width?

Le he quitado el width y el float...en vez de eso, le he puesto un margin-left. Pero no me soluciona el problema.

También he probado con hacerlo absoluto...pero tampoco funciona xD

[pzin]

No había visto mucho más el código. Pero tienes por ahí un poco de cacao. Trabajar con posiciones absolutas para elementos estructurales es una muy mala práctica. Nadie que tenga un poco de experiencia hace eso. Si usas posiciones absolutas, entonces el contenido sale del flujo natural del documento y no interactúa ni con los demás elementos ni con la página ni con nada.

[Sephys]

Lo he comentado porque también he probado con ello para ver si podía solucionarme mi problema concreto...pero sé que no tengo que trabajar con ellas xD.

De hecho, no tengo nada en absoluto...sólo en relativo y fixed.

[pzin]

Iniciado por Sephys

De hecho, no tengo nada en absoluto...sólo en relativo y fixed.

Código CSS:

.page-wrapper{
  width:1260px;
  position:absolute;
 

[Sephys]

El .pagewrapper como contenedor si me han dicho que lo use en absolute...me refiero a los divs de contenido.

No sé si también debería modificarlo...pero no tiene sentido ponerle relativo a un contenedor ¿no?

[pzin]

No tiene sentido ponerle una posición absoluta a un contenedor. ¿Para qué?

[Sephys]

Para delimitar los límites de la página.De momento es como me lo han enseñado.

Seguramente luego ya pueda usar relativo para todo, pero de momento es como me lo han dicho que use.

De todas formas, ¿nos podemos ceñir a mi duda? Si hay algo puesto en el código es porque es un apaño ya que todavía no hemos visto soluciones más avanzadas.

Sé que mi problema se puede arreglar con javascript de manera que solo quede fixed en el eje-y y que se desplace de manera normal en el x...pero no puedo usar esa solución. Preguntaba si se puede solucionar sólo con CSS...si no se puede, pos nada.

[pzin]

Uhmm. Realmente no sé muy bien a qué te refieres con fijar un eje. El problema es el contenido ¿o el sidebar? Entendí que querías que el contenido se ciña al ancho de la pantalla, desde donde acaba el menú hasta el final de la pantalla, pero no es eso, ¿o si?

Seguramente pueda solucionarse con CSS, normalmente JavaScript no suele hacer falta.

[Sephys]

Mira...igual que esta página:

http://demo.rickyh.co.uk/css-position-x-and-position-y/

Quiero que se quede igual que la segunda cajita, en la que dice "My position-x is absolute but position-y is fixed."

Al hacer mas pequeña la ventana y hacer que aparezca scroll lateral...la cajita se va a medida que lo muevo, sin embargo...es fijo en la vertical.

No sé si me he explicado xD.

[pzin]

Uhm, pues no. No existe en CSS nada como position-x o position-y. De hecho en ese ejemplo el elemento tiene una posición fija, pero va cambiando el valor de left mediante JavaScript. Si desactivas JavaScript verás que no funciona, y que se queda todo fijo.

PD: Las leches de los enlaces sólo funcionan cuando cumples la regla 30/30 (mensajes y días de antigüedad).

[Sephys]

Jajajaja, vale...ya decía yo xD

Si, por eso decía que conocía una solución con Javascript, pero por desgracia aún no lo puedo usar.

Lástima entonces...tendré que dejarlo así hasta que pueda solucionarlo de otra forma. Gracias por la ayuda :D