Tema: Poner todos los objetos de una cabecera como background
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 02/09/2010, 11:21
Avatar de triqui
triqui
 
Fecha de Ingreso: diciembre-2008
Ubicación: Zaragoza(España)
Mensajes: 624
Antigüedad: 15 años, 11 meses
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