Foros del Web » Creando para Internet » CSS »

Poner todos los objetos de una cabecera como background

 Estas en el tema de Poner todos los objetos de una cabecera como background en el foro de CSS en Foros del Web. Hola tengo una cabecera compuesta por varios objetos: como una imagen como background y un menu con elementos <li> y <lu>. Cuando hago pequeño el ...
  #1 (permalink)  
Antiguo 02/09/2010, 10:32
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 16 años
Puntos: 31
Poner todos los objetos de una cabecera como background
Hola tengo una cabecera compuesta por varios objetos: como una imagen como background y un menu con elementos <li> y <lu>.


Cuando hago pequeño el navegador los elementos se van corriendo a la izquierda de la cabecera, y llega un momento que se van a montonando hacia abajo.

Lo unico que me lo hace correcto es la imagen porque la tengo como en un estilo como background, hay alguna forma de que el resto de elementos se queden quietos o no se superpongan?

Por ejemplo en la cabecera de foros del web al reducir el ancho, el buscador se va ocultando, me gusta esa cabecera !!
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #2 (permalink)  
Antiguo 02/09/2010, 10:49
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Poner todos los objetos de una cabecera como background
no es que se vaya ocultando, lo que pasa es que la imagen del vaso esta en position:absolute; y cuando redimensionas la ventana se coloca encima de los demas elementos.

y el problema que propones no lo entiendo muy bien, tienes algo de codigo o algun link que puedas proporcionar?
  #3 (permalink)  
Antiguo 02/09/2010, 11:15
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Poner todos los objetos de una cabecera como background
Si no hay código, la ayuda es imposible. Sólo se pueden hacer cábalas.
Ponga un enlace a la página del problema y todo será más fácil.

Mientras, puede documentarse sobre el uso de /max-width/ y /min-width/ en diseños variables o adaptativos a la anchura de la ventana para evitar desparrames o colapsos.
  #4 (permalink)  
Antiguo 02/09/2010, 11:19
 
Fecha de Ingreso: septiembre-2010
Mensajes: 60
Antigüedad: 14 años, 3 meses
Puntos: 5
Respuesta: Poner todos los objetos de una cabecera como background
Cita:
Iniciado por triqui Ver Mensaje
Por ejemplo en la cabecera de foros del web al reducir el ancho, el buscador se va ocultando, me gusta esa cabecera !!
Creo que puede ser por min-width. Si miras el código fuente, verás que toda la web está metida dentro de div#gwrapper, que tiene la propiedad 'min-width: 900px'
De este modo, al disminuir el tamaño de la ventana, llega un momento en que llega al mínimo e impide los "saltos de línea" de los elementos que contiene.
  #5 (permalink)  
Antiguo 02/09/2010, 11:21
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 16 años
Puntos: 31
Respuesta: Poner todos los objetos de una cabecera como background
Gracias por intentar ayudar, llevo tiempo con el tema como Html tengo esto:


como html tengo

Código HTML: 
Ver original
  1. <!-- AQUI EMPIEZA LA CABECERA -->
  2.     <div id="encabezado" style="width: 99%;text-align: center">
  3. <div class="bannersmarg" style="float: left">
  4. <!-- Start PureCSSMenu.com MENU -->
  5. <ul class="pureCssMenu pureCssMenum">
  6.  
  7. <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  8.     <ul class="pureCssMenum">
  9.         <li class="pureCssMenui"><a class="pureCssMenui"><asp:LinkButton ID="LnkPerfil" runat="server" onclick="LnkPerfil_Click">Perfil</asp:LinkButton></a></li>
  10.  
  11.     
  12.     </ul>
  13.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  14.  
  15.  
  16. <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Comunidad</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
  17.     <ul class="pureCssMenum">
  18.         <li class="pureCssMenui"><a class="pureCssMenui" href="#">Buscar Usuario</a></li>
  19.  
  20.     </ul>
  21.     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
  22.  
  23. </ul>
  24. </div>
  25.  
  26.         <div class="bannersmarg"
  27.             style="border: thin solid #FFFFFF; float: left; margin-top:5px; width:36px; Height:36px">
  28. <a>    <asp:ImageButton ID="BtnPerfilUsuario" runat="server"  vertical-align="text-top" AlternateText=" " Width="36px" Height="36px" /> </a>
  29. </div>
  30.  
  31. <div class="bannersmarg" style="float: left;text-align: center;vertical-align: middle;padding-left:5px;padding-top:7px">
  32.  
  33. <a style="color: #FFF;
  34.     font-family: Arial, Sans-Serif;
  35.     font-size: 1.1em;text-decoration:none"><b><asp:Label ID="LblUsuario" runat="server"></asp:Label></b>&nbsp<asp:LinkButton ID="LnkCerrarSesion" runat="server" Font-Size="10pt" 
  36.         ForeColor="#FF3300" onclick="LnkCerrarSesion_Click">(Cerrar Sesión)</asp:LinkButton></a>
  37.  
  38. <br />
  39. <a style="color: #FFF;
  40.     font-family: Arial, Sans-Serif;
  41.     font-size: 0.8em;text-decoration:none"><asp:Label ID="LblPuntos" runat="server"></asp:Label> puntos</a>
  42.  
  43.     
  44. </div>
  45.     </div>
  46.     <!-- AQUI FINALIZA LA CABECERA-->


Y como CSS tengo esto:

Código CSS: 
Ver original
  1. html, body {width: 100%;
  2. height: 100%;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #contenido{height: 100%;
  7. background-color: #ffffff;
  8. }
  9. #encabezado
  10. {
  11.      background-image:url(./MenuCabecera/cabecera2.png);
  12.     background-repeat: no-repeat;
  13.     background-color: #3b5998;
  14.     background-position:center;
  15.    height:50px;
  16.     margin-top: 
  17.     5px; margin-left: 2px;
  18.      margin-right: 2px;
  19. }
  20. #pcm{display:none;}
  21. ul.pureCssMenu ul{display:none}
  22. ul.pureCssMenu li:hover>ul{display:block}
  23. ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
  24. ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
  25. ul.pureCssMenu,ul.pureCssMenu ul {
  26.     margin:0px;
  27.     list-style:none;
  28.     padding:0px 2px 2px 0px;
  29.     background-color:#ffffff;
  30.     background-repeat:repeat;
  31.     border-color:#AAAAAA;
  32.     border-width:1px;
  33.     border-style:solid;
  34. }
  35. ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
  36.     display:block;
  37.     float: left;
  38. }
  39. ul.pureCssMenu ul{
  40.     width:153.3px;
  41. }
  42. ul.pureCssMenu li{
  43.     display:block;
  44.     margin:2px 0px 0px 2px;
  45.     font-size:0px;
  46. }
  47. ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
  48. outline-style:none;
  49. }
  50. ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
  51.     display:block;
  52.     vertical-align:middle;
  53.     background-color:#ffffff;
  54.     border-width:0px;
  55.     border-color:#6655ff;
  56.     border-style:solid;
  57.     text-align:left;
  58.     text-decoration:none;
  59.     padding:4px;
  60.     _padding-left:0;
  61.     font:normal 11px Verdana;
  62.     color: #444444;
  63.     text-decoration:none;
  64.     cursor:default;
  65. }
  66. ul.pureCssMenu span{
  67.     overflow:hidden;
  68. }
  69. ul.pureCssMenu li {
  70.     float:left;
  71. }
  72. ul.pureCssMenu ul li {
  73.     float:none;
  74. }
  75. ul.pureCssMenu ul a {
  76.     text-align:left;
  77.     white-space:nowrap;
  78. }
  79. ul.pureCssMenu li.sep{
  80.     text-align:center;
  81.     padding:0px;
  82.     line-height:0;
  83.     height:100%;
  84. }
  85. ul.pureCssMenu li.sep span{
  86.     float:none; padding-right:0;
  87.     width:5;
  88.     height:16;
  89.     display:inline-block;
  90.     background-color:#AAAAAA;   background-image:none;}
  91. ul.pureCssMenu ul li.sep span{
  92.     width:80%;
  93.     height:3;
  94. }
  95. ul.pureCssMenu li:hover{
  96.     position:relative;
  97. }
  98. ul.pureCssMenu li:hover>a{
  99.     background-color:#4792E6;
  100.     border-color:#665500;
  101.     border-style:solid;
  102.     font:normal 11px Verdana;
  103.     color: #ffffff;
  104.     text-decoration:none;
  105. }
  106. ul.pureCssMenu li a:hover{
  107.     position:relative;
  108.     background-color:#4792E6;
  109.     border-color:#665500;
  110.     border-style:solid;
  111.     font:normal 11px Verdana;
  112.     color: #ffffff;
  113.     text-decoration:none;
  114. }
  115. ul.pureCssMenu li.dis a {
  116.     color: #AAAAAA !important;
  117. }
  118. ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:4px;width:16px;
  119. height:16px;
  120. }
  121. ul.pureCssMenu ul img {width:16px;
  122. height:16px;
  123. }
  124. ul.pureCssMenu img.over{display:none}
  125. ul.pureCssMenu li.dis a:hover img.over{display:none !important}
  126. ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
  127. ul.pureCssMenu li:hover > a img.def  {display:none}
  128. ul.pureCssMenu li:hover > a img.over {display:inline}
  129. ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over{display:inline}
  130. ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def{display:none}
  131. ul.pureCssMenu a:hover ul,ul.pureCssMenu a:hover a:hover ul{display:block}
  132. ul.pureCssMenu a:hover ul ul{display:none}
  133. ul.pureCssMenu span{
  134.     display:block;
  135.     background-image:url(./ImagenesEstilos/arrv_anim_1.gif);
  136.     background-position:right center;
  137.     background-repeat: no-repeat;
  138.    padding-right:11px;}
  139. ul.pureCssMenu li:hover>a>span{ background-image:url(./ImagenesEstilos/arrv_anim_1o.gif);
  140. }
  141. ul.pureCssMenu a:hover span{    _background-image:url(./ImagenesEstilos/arrv_anim_1o.gif)}
  142. ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./ImagenesEstilos/arr_double_1.gif)}
  143. ul.pureCssMenu ul li:hover > a span{    background-image:url(./ImagenesEstilos/arr_double_1o.gif);}
  144. ul.pureCssMenu table a:hover span,ul.pureCssMenu table a:hover a:hover span{background-image:url(./ImagenesEstilos/arr_double_1o.gif)}
  145. ul.pureCssMenu table a:hover table span{background-image:url(./ImagenesEstilos/arr_double_1.gif)}
  146.  
  147. .pureCssMenui{}
  148. .pureCssMenum{}
  149. .bannersmarg{}


Mi pagina se ve así:



Cuando la encojo el navegador se me superpone todo, el menu tengo mas elementos pero por claridad de ponerlo aqui lo he puesto cortito, se me colocan un monton de elementos encima de otros.

aqui lo podeis ver:




perdon por la parrafada, pero creo que es mejor explicarlo mucho para que lo entendais.

gracias !!
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #6 (permalink)  
Antiguo 02/09/2010, 11:35
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 6 meses
Puntos: 539
Respuesta: Poner todos los objetos de una cabecera como background
Use un min-width en algún ancestro del elemento que se colapsa, o en el propio elemento, por ejemplo en #contenido

Asegúrese que no haya algún overflow:hidden que evite la aparición del escroll y que el contenido sea inaccesible.
  #7 (permalink)  
Antiguo 03/09/2010, 05:30
Avatar de triqui  
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 16 años
Puntos: 31
Respuesta: Poner todos los objetos de una cabecera como background
Hola min-width funciona pero no quiero restringir el ancho al usuario, lo veo un pequeño apaño.

Cuando dices:

"Use un min-width en algún ancestro del elemento que se colapsa", a que te refieres con ancestro?


Entiendo que se colapsa por eso se me ve asi, pero no logro averiguar porque.
__________________
La nueva red social de quinielas quiniela resultados
Cazaresultados Futbol base en directo
  #8 (permalink)  
Antiguo 04/09/2010, 10:11
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 22 años, 5 meses
Puntos: 361
Respuesta: Poner todos los objetos de una cabecera como background
Hola:

Cita:
Iniciado por triqui Ver Mensaje
"Use un min-width en algún ancestro del elemento que se colapsa", a que te refieres con ancestro?
El Diccionario de la RAE te lo explica.

Saludos.

Etiquetas: objetos, poner, fondo, cabeceras
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:04.