Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Drewermerc en 10 Junio 2014, 23:07 pm


Título: problema con fondo de sitio web.
Publicado por: Drewermerc en 10 Junio 2014, 23:07 pm
Hola a todos.
Bueno el problema que tengo es que  cree una pagina web y puse un div con una altura de 1650px donde va toda lo demas pero el problema que tengo es que cuando se termina ese div me queda un pedazo muy grande que es el color de fondo del body y quisiera saber como hacer que se quite  o reduzca ese espacio que no ocupo.

Bueno espero que me puedan ayudar.
Saludos.
Drewermerc.

Título: Re: problema con fondo de sitio web.
Publicado por: ZeroVzla en 11 Junio 2014, 16:19 pm
Buen día,

Si quieres hacer que el div te ocupe todo el alto de la página lo que debes es usar porcentajes, pero para que en div obtenga el 100% de altura primero debes colocar las etiquetas html y body con 100% de altura.

Código
  1. html,body{
  2. height: 100%;
  3. }
  4.  
  5. #TU_DIV{
  6. height: 100%;
  7. }
  8.  

Con eso tu div que se le conoce como wrapper tendrá el 100% de la altura de la página y no te quedará ningún espacio por debajo, luego si quieres un espacio pequeño puedes jugar con los margenes del div o colocar el div con 90% de altura y bueno ya de resto es creatividad.

Saludos.

Título: Re: problema con fondo de sitio web.
Publicado por: Drewermerc en 12 Junio 2014, 00:00 am
hola amigo.
gracias pro responder pero no funciona aun tengo el el espacio y estuve intentando redimencionar el body mas grande pero no se hace mas grande se queda del mismo tamaño otra opcion que tengas.
bueno muchas gracias por contestar.

Título: Re: problema con fondo de sitio web.
Publicado por: engel lex en 12 Junio 2014, 00:22 am
intenta con

Código
  1. height=100%;
  2. width=100%;
  3. margin =0;
  4. padding =0;
  5.  

Título: Re: problema con fondo de sitio web.
Publicado por: #!drvy en 12 Junio 2014, 00:38 am
Te recomiendo que uses reseteadores de CSS como el de Yahoo (http://www.cssreset.com/scripts/yahoo-css-reset-yui-3/). Te quita los margenes por defecto que añaden los navegados y otras cosas útiles. Si no, basta con una simple regla.

Código
  1. * { margin:0; padding:0; box-sizing:border-box; }

Saludos

Título: Re: problema con fondo de sitio web.
Publicado por: Drewermerc en 12 Junio 2014, 02:55 am
Gracias a todos por responder pero el problema aun persiste y el problema qu etuve es que cuando hice el reset de los estilo ya no tomo en encuenta los demas lo coloque al principio de los estilos y aun seguia el espacio.

Bueno me puse a usar las herramientas de el navegador la de inspeccionar elemento y me di cuenta que el problema no es el body ni de html por que estan de los tamaños que le asigno asi que  no comprendo cual sea elproblema y por que sobra tanto espacio y el body y html estan bien en tamaños y no se que sea ese espacio.

Bueno espero que me puedan ayudar.
Saludos.
Drewermerc.

Título: Re: problema con fondo de sitio web.
Publicado por: #!drvy en 12 Junio 2014, 03:03 am
Sin mostrar código, imposible. No somos adivinos ...

Saludos

Título: Re: problema con fondo de sitio web.
Publicado por: Drewermerc en 12 Junio 2014, 03:29 am
buen aqui les dejo el codigo y bueno les digo que es una plantilla para blogger la que estoy haciendo con otro amigo por eso deje mucho espacio que lo uso como division de codigo.

Código
  1. html{
  2. height=100%;
  3. width=100%;
  4. margin =0;
  5. padding =0;
  6. }
  7. div.titlewrapper, h1.title{
  8. font-size: 50px;
  9. width: 600px;
  10. height: 60px;
  11. margin-top: 15px;
  12. }
  13. div#lineaazul{
  14. width:301px;
  15. height:4px;
  16. background:#0E83B9;
  17. }
  18.  
  19. .tabs-widget li a {
  20.     color: #000;
  21.     display: block;
  22.     text-decoration: none;
  23.     background: none repeat scroll 0% 0% transparent;
  24.     font: 16px/12px 'Oswald',sans-serif;
  25.     padding: 15px 1px;
  26.     text-transform: uppercase;
  27. }
  28.  
  29. div.item-snippet{
  30.  
  31. color:#000;
  32. }
  33.  
  34. div.status-msg-body{
  35. color:#000;
  36. }
  37. div#titulo-principal{
  38. position:absolute;
  39. margin: 0 auto 0 auto;
  40. height:200px;
  41. width:960px;
  42. background-image:url(http://1.bp.blogspot.com/-Mx5qfSWsl0Y/U5Yw7oGy1DI/AAAAAAAAAOA/RjonipKZLRc/s0/titulo-blogger4.jpg);
  43. top: 0px;
  44. }
  45.  
  46. #header h1 a,#header h1 a:visited{
  47. color:#FEFEFE;
  48. text-decoration:none;
  49. visibility:hidden;
  50. }
  51.  
  52. #content-wrapper{
  53. background: none repeat scroll 0% 0% #FFF;
  54. padding: 15px;
  55.     width:930px;
  56. 	height;800px;
  57. }
  58. #rsidebar-wrapper{
  59. width: 301px;
  60. position: relative;
  61. float: right;
  62. margin: 0px;
  63. padding: 0px 0px 0px 0px;
  64. word-wrap: break-word;
  65. margin-top: 20px;
  66. height: 1600px;
  67. }
  68.  
  69. #header h2{padding-left:5px;color:#FEFEFE;font:14px Arial,Helvetica,Sans-serif}
  70. #header2{
  71. position: absolute;
  72. margin: 0 auto 0 auto;
  73. width: 301px;
  74. top: -35px;
  75. }
  76. #header2 .widget{
  77. position: absolute;
  78. margin: 0 auto 0 auto;
  79. width: 301px;
  80. top: -36px;
  81. }
  82. #search{border:1px solid #535353;background:#393939 url(http://4.bp.blogspot.com/-rav0USyn9qk/USfxoawkPjI/AAAAAAAAD4s/kLYA28R1_0Y/s000/search.png) 99% 50% no-repeat;text-align:left;padding: 8px 150px 6px 6px;}
  83. #search #s{background:none;color:#979797;border:0;width:100%;padding:0;margin:0;outline:none}
  84.  
  85.  
  86.  
  87.  
  88. #body-wrapper{margin:0px;padding:0px;width: 95%;
  89. height: 100%;}
  90.  
  91. /* Header-----------------------------------------------*/
  92. #header-wrapper{width:960px;margin:0px auto 0px;height:62px;padding:20px 0px 20px 0px;overflow:hidden;}
  93. #header-inner{background-position:center;margin-left:auto;margin-right:auto}
  94. #header{margin:0;border:0 solid $bordercolor;color:$pagetitlecolor;float:left;width:60%;overflow:hidden;}
  95. #header h1{color:#FEFEFE;text-shadow:0px 1px 0px #000;margin:0 5px 0;padding:0px 0px 0px 0px;font-family:'Oswald',Arial,Helvetica,Sans-serif;font-weight:bold;font-size:32px;line-height:32px;}
  96. #header .description{padding-left:7px;color:#FEFEFE;text-shadow:0px 1px 0px #000;line-height:14px;font-size:14px;padding-top:0px;margin-top:10px;font-family:Arial,Helvetica,Sans-serif;}
  97.  
  98. div#sidebartab1{
  99. height:100px;
  100. }
  101. .tabviewsection{margin-top:10px;margin-bottom:10px;height:1000px}
  102.  
  103. body{background:#c2c2c2 center top no-repeat fixed;color:#E1E1E1;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;margin:0px;padding:0px;height:300%;}
  104.  
  105. .toolbar{
  106. visibility:hidden;
  107. }
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121.  
  122.  
  123.  
  124.  
  125.  
  126. .clearfix:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}
  127. #container,#header,#main,#main-fullwidth,#footer,.clearfix{display:block}
  128. .clear{clear:both}
  129. h1,h2,h3,h4,h5,h6{margin-bottom:16px;font-weight:normal;line-height:1}
  130. h1{font-size:40px}
  131. h2{font-size:30px}
  132. h3{font-size:20px}
  133. h4{font-size:16px}
  134. h5{font-size:14px}
  135. h6{font-size:12px}
  136. h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}
  137. table{margin-bottom:20px;width:100%}
  138. th{font-weight:bold}
  139. thead th{background:#c3d9ff}
  140. th,td,caption{padding:4px 10px 4px 5px}
  141. tr.even td{background:#e5ecf9}
  142. tfoot{font-style:italic}
  143. caption{background:#eee}
  144. li ul,li ol{margin:0}
  145. ul,ol{margin:0 20px 20px 0;padding-left:40px}
  146. ul{list-style-type:disc}
  147. ol{list-style-type:decimal}
  148. dl{margin:0 0 20px 0}
  149. dl dt{font-weight:bold}
  150. dd{margin-left:20px}
  151. blockquote{margin:20px;color:#666;}
  152. pre{margin:20px 0;white-space:pre}
  153. pre,code,tt{font:13px 'andale mono','lucida console',monospace;line-height:18px}
  154. #search {overflow:hidden;}
  155. #header h1{font-family:'Oswald',Arial,Helvetica,Sans-serif; font-size:60px}
  156. #header .description{font-family:Arial,Helvetica,Sans-serif;}
  157. .post-title {font-family:'Oswald',sans-serif;}
  158. .sidebar h2{font-family:'Oswald',sans-serif;}
  159. #footer-widgets .widgettitle{font-family:Arial,Helvetica,Sans-serif;}
  160. .menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}
  161. .menus ul{position:absolute;top:-999em;width:100%}
  162. .menus ul li{width:100%}
  163. .menus li:hover{visibility:inherit}
  164. .menus li{float:left;position:relative}
  165. .menus a{display:block;position:relative}
  166. .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
  167. .menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
  168. .menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
  169. .menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
  170. .menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
  171. .sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
  172. .menus .sf-shadow ul.sf-shadow-off{background:transparent}
  173. .menu-primary-container{float:left;padding:0;position:relative;height:64px;background:none;z-index:400}
  174. .menu-primary{}
  175. .menu-primary ul{min-width:160px}
  176. .menu-primary li a{color:#979797;padding:26px 15px 25px 15px;text-decoration:none;text-transform:uppercase;font:normal 13px/13px 'Oswald',sans-serif}
  177. .menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#FFF;outline:0;background:none}
  178. .menu-primary li li a{color:#fff;text-transform:none;background:#323232;padding:10px 15px;margin:0;border:0;font-weight:normal}
  179. .menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover > a,.menu-primary li li.current-cat > a,.menu-primary li li.current_page_item > a,.menu-primary li li.current-menu-item > a{color:#fff;background:#1F80AC;outline:0;border-bottom:0;text-decoration:none}
  180. .menu-primary a.sf-with-ul{padding-right:20px;min-width:1px}
  181. .menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:25px 10px 0 0}
  182. .menu-primary li li .sf-sub-indicator{padding:9px 10px 0 0}
  183. .wrap-menu-primary .sf-shadow ul{background:url('http://3.bp.blogspot.com/-vcXX0ocDrCs/USfxpCJ7EXI/AAAAAAAAD48/m0q-7j9gswI/s000/menu-primary-shadow.png') no-repeat bottom right}
  184. .menu-secondary-container{position:relative;height:28px;z-index:300;background:url(http://3.bp.blogspot.com/-K_RYMDoUxUs/USfxpadq-4I/AAAAAAAAD5E/Qy-DD9C3O10/s000/menu-secondary-bg.png) left top repeat-x;padding:6px}
  185. .menu-secondary{}
  186. .menu-secondary ul{min-width:160px}
  187. .menu-secondary li a{color:#FFF;padding:8px 15px 7px 15px;text-decoration:none;text-transform:uppercase;font:normal 13px/13px 'Oswald',sans-serif;margin:0 0 5px 0}
  188. .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(http://3.bp.blogspot.com/-K_RYMDoUxUs/USfxpadq-4I/AAAAAAAAD5E/Qy-DD9C3O10/s000/menu-secondary-bg.png) left -140px repeat-x;outline:0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px}
  189. .menu-secondary li li a{color:#fff;background:#222;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
  190. .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#107CAE;outline:0;-moz-border-radius:0;-khtml-border-radius:0;-webkit-border-radius:0;border-radius:0}
  191. .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
  192. .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:7px 13px 0 0}
  193. .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}
  194. .wrap-menu-secondary .sf-shadow ul{background:url('http://1.bp.blogspot.com/-JcZnopOuPis/USfxphy1c2I/AAAAAAAAD5M/8ypLig_h1Jk/s000/menu-secondary-shadow.png') no-repeat bottom right}
  195. .fp-slider{margin:0 auto 15px auto;padding:0px;width:930px;height:332px;overflow:hidden;position:relative;}
  196. .fp-slides-container{}
  197. .fp-slides,.fp-thumbnail,.fp-prev-next,.fp-nav{width:930px;}
  198. .fp-slides,.fp-thumbnail{height:300px;overflow:hidden;position:relative}
  199. .fp-title{color:#fff;text-shadow:0px 1px 0px #000;font:bold 18px Arial,Helvetica,Sans-serif;padding:0 0 2px 0;margin:0}
  200. .fp-title a,.fp-title a:hover{color:#fff;text-shadow:0px 1px 0px #000;text-decoration:none}
  201. .fp-content{position:absolute;bottom:0;left:0;right:0;background:#111;opacity:0.7;filter:alpha(opacity = 70);padding:10px 15px;overflow:hidden}
  202. .fp-content p{color:#fff;text-shadow:0px 1px 0px #000;padding:0;margin:0;line-height:18px}
  203. .fp-more,.fp-more:hover{color:#fff;font-weight:bold}
  204. .fp-nav{height:12px;text-align:center;padding:10px 0;background:#333;}
  205. .fp-pager a{background-image:url(http://4.bp.blogspot.com/-hDPX-mLjJtM/USfxp3LbApI/AAAAAAAAD5Q/3b5PWlZNTq8/s000/featured-pager.png);cursor:pointer;margin:0 8px 0 0;padding:0;display:inline-block;width:12px;height:12px;overflow:hidden;text-indent:-999px;background-position:0 0;float:none;line-height:1;opacity:0.7;filter:alpha(opacity = 70)}
  206. .fp-pager a:hover,.fp-pager a.activeSlide{text-decoration:none;background-position:0 -112px;opacity:1.0;filter:alpha(opacity = 100)}
  207. .fp-prev-next-wrap{position:relative;z-index:200}
  208. .fp-prev-next{position:absolute;bottom:130px;left:0;right:0;height:37px}
  209. .fp-prev{margin-top:-180px;float:left;margin-left:14px;width:37px;height:37px;background:url(http://1.bp.blogspot.com/-J-W_WGNY6T4/USfxqGWxKLI/AAAAAAAAD5c/9xLk152v3vY/s000/featured-prev.png) left top no-repeat;opacity:0.6;filter:alpha(opacity = 60)}
  210. .fp-prev:hover{opacity:0.8;filter:alpha(opacity = 80)}
  211. .fp-next{margin-top:-180px;float:right;width:36px;height:37px;margin-right:14px;background:url(http://1.bp.blogspot.com/-m--KddaK5-8/USfxqR7tv0I/AAAAAAAAD5k/WEqCsAh9mPY/s000/featured-next.png) right top no-repeat;opacity:0.6;filter:alpha(opacity = 60)}
  212. .fp-next:hover{opacity:0.8;filter:alpha(opacity = 80)}
  213. /* -- number page navigation -- */
  214. #blog-pager {padding:6px;font-size:11px;}
  215. #comment-form iframe{padding:5px;width:580px;height:275px;}
  216.  
  217.  
  218. /*botones para naveggar por tags labels archvos del blog etc que ntes fueron ocultador*/
  219. .tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
  220. .tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
  221. .tabs-widget li:first-child{margin:0}
  222. /*.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#12729E;color:#fff;text-decoration:none}*/
  223. .tabs-widget-content{}
  224.  
  225.  
  226.  
  227.  
  228.  
  229.  
  230.  
  231. #crosscol-wrapper{display:none;}
  232. .PopularPosts .item-title{font-weight:bold;padding-bottom:0.2em;text-shadow:0px 1px 0px #000;}
  233. .PopularPosts .widget-content ul li{padding:0.7em 0;background:none}
  234. .PopularPosts img{background:none repeat scroll 0 0 #2C2C2C;border:1px solid #606060;padding:3px}
  235. div.span-1,div.span-2,div.span-3,div.span-4,div.span-5,div.span-6,div.span-7,div.span-8,div.span-9,div.span-10,div.span-11,div.span-12,div.span-13,div.span-14,div.span-15,div.span-16,div.span-17,div.span-18,div.span-19,div.span-20,div.span-21,div.span-22,div.span-23,div.span-24{float:left;margin-right:10px}
  236. .span-1{width:30px}.span-2{width:70px}.span-3{width:110px}.span-4{width:150px}.span-5{width:190px}.span-6{width:230px}.span-7{width:270px}.span-8{width:310px}.span-9{width:350px}.span-10{width:390px}.span-11{width:430px}.span-12{width:470px}.span-13{width:510px}.span-14{width:550px}.span-15{width:590px}.span-16{width:630px}.span-17{width:670px}.span-18{width:710px}.span-19{width:750px}.span-20{width:790px}.span-21{width:830px}.span-22{width:870px}.span-23{width:910px}.span-24,div.span-24{width:960px;margin:0}input.span-1,textarea.span-1,input.span-2,textarea.span-2,input.span-3,textarea.span-3,input.span-4,textarea.span-4,input.span-5,textarea.span-5,input.span-6,textarea.span-6,input.span-7,textarea.span-7,input.span-8,textarea.span-8,input.span-9,textarea.span-9,input.span-10,textarea.span-10,input.span-11,textarea.span-11,input.span-12,textarea.span-12,input.span-13,textarea.span-13,input.span-14,textarea.span-14,input.span-15,textarea.span-15,input.span-16,textarea.span-16,input.span-17,textarea.span-17,input.span-18,textarea.span-18,input.span-19,textarea.span-19,input.span-20,textarea.span-20,input.span-21,textarea.span-21,input.span-22,textarea.span-22,input.span-23,textarea.span-23,input.span-24,textarea.span-24{border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important}input.span-1,textarea.span-1{width:18px!important}input.span-2,textarea.span-2{width:58px!important}input.span-3,textarea.span-3{width:98px!important}input.span-4,textarea.span-4{width:138px!important}input.span-5,textarea.span-5{width:178px!important}input.span-6,textarea.span-6{width:218px!important}input.span-7,textarea.span-7{width:258px!important}input.span-8,textarea.span-8{width:298px!important}input.span-9,textarea.span-9{width:338px!important}input.span-10,textarea.span-10{width:378px!important}input.span-11,textarea.span-11{width:418px!important}input.span-12,textarea.span-12{width:458px!important}input.span-13,textarea.span-13{width:498px!important}input.span-14,textarea.span-14{width:538px!important}input.span-15,textarea.span-15{width:578px!important}input.span-16,textarea.span-16{width:618px!important}input.span-17,textarea.span-17{width:658px!important}input.span-18,textarea.span-18{width:698px!important}input.span-19,textarea.span-19{width:738px!important}input.span-20,textarea.span-20{width:778px!important}input.span-21,textarea.span-21{width:818px!important}input.span-22,textarea.span-22{width:858px!important}input.span-23,textarea.span-23{width:898px!important}input.span-24,textarea.span-24{width:938px!important}.last{margin-right:0;padding-right:0}
  237. .last,div.last{margin-right:0}
  238. .menu-primary-container{z-index:10 !important;}
  239. .menu-secondary-container{z-index:10 !important;}
  240.  

Título: Re: problema con fondo de sitio web.
Publicado por: Drewermerc en 14 Junio 2014, 06:55 am
Hola a todos.
bueno ya lo resolví el problema no era con css si no con javascript ya que mi amigo había puesto una aparte de post recientes y el espacio de los div's que usaba lo cambiaba con javascript y la solución solo era hacerlos un poco mas grandes para que ocuparan todo el espacio correctamente.
gracias a todos por sus respuestas.
Saludos.
Drewermerc.


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines