Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Sidebar fixed

Estas en el tema de Sidebar fixed en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/01/2014, 11:49
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Pregunta Sidebar fixed

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.
  #2 (permalink)  
Antiguo 29/01/2014, 13:06
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

Bienvenido al foro.

Sin código poco se puede hacer.
  #3 (permalink)  
Antiguo 29/01/2014, 13:22
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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:
Ver original
  1. * {
  2.   margin:0px;
  3.   padding:0px;
  4. }
  5.  
  6. @font-face
  7. {
  8.   font-family:WendyOne-Regular;
  9.   src: url('WendyOne-Regular.ttf');
  10. }
  11.  
  12. @font-face
  13. {
  14.   font-family: SONIC;
  15.   src: url('SONIC.ttf');
  16. }
  17.  
  18. @font-face
  19. {
  20.   font-family:Loveyalikeasister;
  21.   src: url('LoveYaLikeASister.ttf');
  22. }
  23.  
  24. .page-wrapper{
  25.   width:1260px;
  26.   position:absolute;
  27.   background-image:url('fondopaginaprincipal.png');
  28.   background-attachment:fixed;
  29.  
  30. }
  31.  
  32. .page-wrapper p{
  33.   margin-right:20px;
  34. }
  35.  
  36. .page-wrapper a:link{
  37.   color:#0D7094;
  38. }
  39.  
  40. .page-wrapper a:hover{
  41.   color:#9b4e52;
  42. }
  43.  
  44. #zen-intro{
  45.   width:1249px;
  46.   position:relative;
  47.   float:right;
  48. }
  49.  
  50. header{
  51.   width:230px;
  52.   height:110px;
  53.   position:fixed;
  54.   float:left;
  55.   background-color:#F2EAEA;
  56.   top:30px;
  57.   margin:auto;
  58.   border-radius: 25px;
  59.   box-shadow: 0px 0px 6px 0px #0D0D0C;
  60. }
  61.  
  62. header h1{
  63.   margin-top:8px;
  64.   margin-left:15px;
  65.   font-family:WendyOne-Regular;
  66.   font-size:30px;
  67.   color:#9b4e52;
  68. }
  69.  
  70. header h2{
  71.   font-family:SONIC;
  72.   font-size:6px;
  73.   margin-left:12px;
  74.   margin-top:0px;
  75. }
  76.  
  77. #zen-summary {
  78.   width:950px;
  79.   position:relative;
  80.   float:right;
  81.   margin-left:350px;
  82. }
  83.  
  84. #zen-summary p:first-child {
  85.   margin-top:40px;
  86. }
  87.  
  88. #zen-summary p {
  89.   font-family:SONIC;
  90.   font-size:10px;
  91.   color: #0D7094;
  92. }
  93.  
  94. #zen-preamble{
  95.   width:950px;
  96.   position:relative;
  97.   float:right;
  98. }
  99.  
  100. #zen-preamble h3{
  101.   margin-top:30px;
  102.   font-family:Loveyalikeasister;
  103.   font-size:25px;
  104.   color:#9b4e52;
  105. }
  106.  
  107. #zen-supporting{
  108.   width:950px;
  109.   position:relative;
  110.   float:right;
  111.   margin-left:300px;
  112. }
  113.  
  114. #zen-supporting h3{
  115.   font-family:Loveyalikeasister;
  116.   font-size:25px;
  117.   color:#9b4e52;
  118. }
  119.  
  120. #zen-supporting div{
  121.   margin-top:20px
  122. }
  123.  
  124. footer{
  125.   width:250px;
  126.   position:relative;
  127.   margin:auto;
  128.   padding:40px;
  129. }
  130. nav{
  131.   width:200px;
  132. }
  133. .sidebar{
  134.   width:220px;
  135.   position:fixed;
  136.   float:none;
  137.   margin-top:150px;
  138. }
  139.  
  140. .sidebar a:link{
  141.   color:#000000;
  142. }
  143.  
  144. .sidebar a:hover{
  145.   color:#9b4e52;;
  146. }
  147.  
  148. .wrapper{
  149.   position:fixed;
  150.   margin-left:15px;
  151. }
  152.  
  153. .wrapper h3{
  154.   font-family:SONIC;
  155.   font-size:8px;
  156.   color:#9b4e52;
  157. }
  158.  
  159. .wrapper div{
  160.   margin-top:20px;
  161. }
  162.  
  163. .wrapper ul {
  164.   list-style-type:none;
  165. }
  166.  
  167. .wrapper li {
  168.   font-family:Loveyalikeasister;
  169.   font-size:15px;
  170. }

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

Última edición por Sephys; 29/01/2014 a las 13:25 Razón: Error en el link
  #4 (permalink)  
Antiguo 29/01/2014, 13:54
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

CSSzengarden sigo vivo.

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

Código CSS:
Ver original
  1. 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.
  #5 (permalink)  
Antiguo 29/01/2014, 14:01
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

¿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
  #6 (permalink)  
Antiguo 29/01/2014, 14:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

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.

Última edición por pzin; 29/01/2014 a las 14:19 Razón: faltó una palabra
  #7 (permalink)  
Antiguo 29/01/2014, 14:13
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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.
  #8 (permalink)  
Antiguo 29/01/2014, 14:20
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

Cita:
Iniciado por Sephys Ver Mensaje
De hecho, no tengo nada en absoluto...sólo en relativo y fixed.
Código CSS:
Ver original
  1. .page-wrapper{
  2.   width:1260px;
  3.   position:absolute;

  #9 (permalink)  
Antiguo 29/01/2014, 14:21
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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?
  #10 (permalink)  
Antiguo 29/01/2014, 14:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

No tiene sentido ponerle una posición absoluta a un contenedor. ¿Para qué?
  #11 (permalink)  
Antiguo 29/01/2014, 14:50
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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.
  #12 (permalink)  
Antiguo 29/01/2014, 14:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

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.
  #13 (permalink)  
Antiguo 29/01/2014, 15:03
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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.

Última edición por Sephys; 29/01/2014 a las 15:04 Razón: No sé como leches funcionan los links aquí xD
  #14 (permalink)  
Antiguo 29/01/2014, 15:40
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años
Puntos: 2111
Respuesta: Sidebar fixed

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).
  #15 (permalink)  
Antiguo 29/01/2014, 15:51
 
Fecha de Ingreso: enero-2014
Mensajes: 11
Antigüedad: 5 años, 6 meses
Puntos: 0
Respuesta: Sidebar fixed

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

Etiquetas: css3, fixed, html5, sidebar
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 14:03.