Foros del Web » Creando para Internet » CSS »

Franja horizontal al 100%, resto no.

 Estas en el tema de Franja horizontal al 100%, resto no. en el foro de CSS en Foros del Web. Hola a todos. Estoy intentando hacer una cosa en el diseño de una web y estoy aborde del suicidio. Lo he intentado todo. Explico el ...
  #1 (permalink)  
Antiguo 08/05/2015, 10:57
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Franja horizontal al 100%, resto no.
Hola a todos.


Estoy intentando hacer una cosa en el diseño de una web y estoy aborde del suicidio.
Lo he intentado todo. Explico el problema:

1. quiero una web con un ancho de 1024 pixeles.

2. Con una cabecera (una franja negra) con un ancho 100% y un alto de 50 pixeles.

3. Que debajo de la cabecera haya un "div", "container" OLOQUESEA, que tenga un ancho 100% y una altura de 500 pixeles.

4. Quiero meter un video o una foto en ese LOQUESEA. Al meterlo, que no importe que el video o foto tengan más altura que esos 500 pixeles. El LOQUESEA siempre debe medir de alto 500 pixeles y debe tener un ancho 100%. O sea que recorte la imagen o el video para meterlo ahí ajustado.

5. que el resto de la página siga teniendo un ancho de 1024 pixeles.

Adjunto foto que explica lo que estoy intentando.


Imploro ayuda por favor....!!!

Gracias de antemano.
Saludos a todos.
  #2 (permalink)  
Antiguo 08/05/2015, 13:06
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 15 años, 4 meses
Puntos: 19
Respuesta: Franja horizontal al 100%, resto no.
que llevas hecho? porque asumo que debes tener un código html y css para decir que estas al borde del suicidio
  #3 (permalink)  
Antiguo 08/05/2015, 14:17
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Franja horizontal al 100%, resto no.
Quieres esto y lo otro, ¿así sin más? ¿Pedirlo y tenerlo? Es que algunos cobramos por hacer eso, se llama trabajo...

Si no tienes nada hecho previamente (HTML, CSS), entonces deberías aprender.
__________________
¿Te sirvió la respuesta? Deja un +1
  #4 (permalink)  
Antiguo 09/05/2015, 01:39
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Franja horizontal al 100%, resto no.
Gracias NueveReinas por la lección de lo que es trabajo y lo que no. Debes estar ocupadísimo para ir dando tantas lecciones en este foro.

Ya he visto varias respuestas tuyas en el foro y muchas de ellas son con ese mismo tono. Si no tienes vida, cómprate una o en lugar de estar en un foro de diseño web vete a uno de autoayuda.

La diferencia entre tú y la persona que ha comentado antes (JuJoGuAI), es que él presupone que el código lo tengo hecho, tú presupones lo contrario.

Aquí está lo que llevo hecho. Olvidé poner el código, mis disculpas.
Gracias de antemano al quiera ayudar.

CÓDIGO HTML:

Código HTML: 
Ver original
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
  6.  
  7. <head>
  8.  
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  10. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  11. <meta name="viewport" content="width=1024" />
  12. <title>HOME</title>
  13. <link rel="stylesheet" type="text/css" media="screen,print" href="HOME_files/HOME.css" />
  14. <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='HOME_files/HOMEIE.css'/><![endif]-->
  15. <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
  16. <script type="text/javascript" src="Scripts/iWebSite.js"></script>
  17. <script type="text/javascript" src="HOME_files/HOME.js"></script>
  18.  
  19. </head>
  20.   
  21. <body style="background: rgb(255, 255, 255); margin: 0pt; " onload="onPageLoad();">
  22.    
  23. <div style="text-align: center; ">
  24.     
  25. <video id="spotempresa" loop autoplay preload poster="HOME_files/spotempresa.png" class="spotempresa">
  26. <source src="HOME_files/spotempresa.mp4" type="video/mp4" />
  27. <source src="HOME_files/spotempresa.webm" type="video/webm" />
  28. <source src="HOME_files/spotempresa.ogv" type="video/ogg" />
  29. </video>
  30.     
  31. <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: transparent; text-align: left; width: 1024px; " id="body_content">
  32. <div style="float: left; margin-left: 0px; position: relative; width: 1024px; z-index: 0; " id="nav_layer">
  33. <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
  34. <div style="clear: both; height: 0px; line-height: 0px; " class="spacer">*</div>
  35. </div>
  36. <div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 1024px; z-index: 10; " id="header_layer">
  37. <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
  38. </div>
  39. <div style="margin-left: 0px; position: relative; width: 1024px; z-index: 5; " id="body_layer">
  40. <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
  41. <div id="id1" style="height: 100px; left: 0px; position: absolute; top: 0px; width: 1024px; z-index: 1; " class="style_SkipStroke shape-with-text">
  42. <div class="text-content graphic_shape_layout_style_default_External_1024_100" style="padding: 0px; ">
  43. <div class="graphic_shape_layout_style_default"></div>
  44. </div>
  45. </div>
  46.           
  47.  
  48.  
  49. <div id="id2" style="height: 54px; left: 313px; position: absolute; top: 23px; width: 398px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  50. <div class="text-content style_External_398_54 vertical-align-middle-middlebox" style="padding: 0px; ">
  51. <div class="style vertical-align-middle-innerbox">
  52. <p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">CABECERA</p>
  53. </div>
  54. </div>
  55. </div>
  56.           
  57.  
  58.  
  59. <div id="id3" style="height: 100px; left: 170px; position: absolute; top: 654px; width: 697px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  60. <div class="text-content style_External_697_100 vertical-align-middle-middlebox" style="padding: 0px; ">
  61. <div class="style vertical-align-middle-innerbox">
  62. <p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">RESTO DE LA PAGINA</p>
  63. </div>
  64. </div>
  65. </div>
  66.           
  67.  
  68.  
  69. <div id="id4" style="height: 158px; left: 41px; position: absolute; top: 820px; width: 454px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  70. <div class="text-content graphic_textbox_layout_style_default_External_454_158" style="padding: 0px; ">
  71. <div class="graphic_textbox_layout_style_default">
  72. <p style="padding-top: 0pt; " class="paragraph_style_1">Titular uno.<br /></p>
  73. <p style="padding-bottom: 0pt; " class="paragraph_style_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas sit amet dolor eget tristique. Quisque vulputate felis nec leo commodo vehicula. Morbi elementum arcu dictum volutpat placerat. Etiam accumsan fringilla eros, non posuere tortor interdum eu. Suspendisse nunc justo, luctus sit amet placerat at, gravida et justo. Integer vel suscipit ex, non pharetra erat. Aliquam at ultricies enim.</p>
  74. </div>
  75. </div>
  76. </div>
  77.           
  78.  
  79.  
  80. <div id="id5" style="height: 158px; left: 529px; position: absolute; top: 820px; width: 454px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  81. <div class="text-content graphic_textbox_layout_style_default_External_454_158" style="padding: 0px; ">
  82. <div class="graphic_textbox_layout_style_default">
  83. <p style="padding-top: 0pt; " class="paragraph_style_1">Titular dos.<br /></p>
  84. <p style="padding-bottom: 0pt; " class="paragraph_style_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas sit amet dolor eget tristique. Quisque vulputate felis nec leo commodo vehicula. Morbi elementum arcu dictum volutpat placerat. Etiam accumsan fringilla eros, non posuere tortor interdum eu. Suspendisse nunc justo, luctus sit amet placerat at, gravida et justo. Integer vel suscipit ex, non pharetra erat. Aliquam at ultricies enim.</p>
  85. </div>
  86. </div>
  87. </div>
  88.           
  89.  
  90.  
  91. <div id="id6" style="height: 158px; left: 41px; position: absolute; top: 999px; width: 454px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  92. <div class="text-content graphic_textbox_layout_style_default_External_454_158" style="padding: 0px; ">
  93. <div class="graphic_textbox_layout_style_default">
  94. <p style="padding-top: 0pt; " class="paragraph_style_1">Titular tres.<br /></p>
  95. <p style="padding-bottom: 0pt; " class="paragraph_style_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas sit amet dolor eget tristique. Quisque vulputate felis nec leo commodo vehicula. Morbi elementum arcu dictum volutpat placerat. Etiam accumsan fringilla eros, non posuere tortor interdum eu. Suspendisse nunc justo, luctus sit amet placerat at, gravida et justo. Integer vel suscipit ex, non pharetra erat. Aliquam at ultricies enim.</p>
  96. </div>
  97. </div>
  98. </div>
  99.           
  100.  
  101.  
  102. <div id="id7" style="height: 158px; left: 529px; position: absolute; top: 999px; width: 454px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  103. <div class="text-content graphic_textbox_layout_style_default_External_454_158" style="padding: 0px; ">
  104. <div class="graphic_textbox_layout_style_default">
  105. <p style="padding-top: 0pt; " class="paragraph_style_1">Titular cuatro.<br /></p>
  106. <p style="padding-bottom: 0pt; " class="paragraph_style_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum egestas sit amet dolor eget tristique. Quisque vulputate felis nec leo commodo vehicula. Morbi elementum arcu dictum volutpat placerat. Etiam accumsan fringilla eros, non posuere tortor interdum eu. Suspendisse nunc justo, luctus sit amet placerat at, gravida et justo. Integer vel suscipit ex, non pharetra erat. Aliquam at ultricies enim.</p>
  107. </div>
  108. </div>
  109. </div>
  110.           
  111.  
  112.  
  113. <div id="id8" style="height: 100px; left: 0px; position: absolute; top: 2900px; width: 1024px; z-index: 1; " class="style_SkipStroke shape-with-text">
  114. <div class="text-content graphic_shape_layout_style_default_External_1024_100" style="padding: 0px; ">
  115. <div class="graphic_shape_layout_style_default"></div>
  116. </div>
  117. </div>
  118.           
  119.  
  120.  
  121. <div id="id9" style="height: 54px; left: 320px; position: absolute; top: 2923px; width: 398px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
  122. <div class="text-content style_External_398_54 vertical-align-middle-middlebox" style="padding: 0px; ">
  123. <div class="style vertical-align-middle-innerbox">
  124. <p style="padding-bottom: 0pt; padding-top: 0pt; " class="paragraph_style">FOOTER</p>
  125. </div>
  126. </div>
  127. </div>
  128. <div style="height: 3000px; line-height: 3000px; " class="spacer">*</div>
  129. </div>
  130. <div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 1024px; z-index: 15; " id="footer_layer">
  131. <div style="height: 0px; line-height: 0px; " class="bumper">*</div>
  132. </div>
  133. </div>
  134. </div>
  135. </body>
  136. </html>
  #5 (permalink)  
Antiguo 09/05/2015, 01:40
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Franja horizontal al 100%, resto no.
CÓDIGO CSS:

Código CSS: 
Ver original
  1. .style.vertical-align-middle-innerbox {
  2.     padding: 4px;
  3. }
  4. .paragraph_style {
  5.     color: rgb(255, 147, 0);
  6.     font-family: 'ArialMT', 'Arial', sans-serif;
  7.     font-size: 36px;
  8.     font-stretch: normal;
  9.     font-style: normal;
  10.     font-variant: normal;
  11.     font-weight: 400;
  12.     letter-spacing: 0;
  13.     line-height: 50px;
  14.     margin-bottom: 0px;
  15.     margin-left: 0px;
  16.     margin-right: 0px;
  17.     margin-top: 0px;
  18.     opacity: 1.00;
  19.     padding-bottom: 0px;
  20.     padding-top: 0px;
  21.     text-align: center;
  22.     text-decoration: none;
  23.     text-indent: 0px;
  24.     text-transform: none;
  25. }
  26. .style_External_697_100.vertical-align-middle-middlebox {
  27.     height: 100px;
  28.     position: relative;
  29.     width: 697px;
  30. }
  31. .paragraph_style_1 {
  32.     color: rgb(0, 0, 0);
  33.     font-family: 'Arial-BoldMT', 'Arial', sans-serif;
  34.     font-size: 18px;
  35.     font-stretch: normal;
  36.     font-style: normal;
  37.     font-variant: normal;
  38.     font-weight: 700;
  39.     letter-spacing: 0;
  40.     line-height: 27px;
  41.     margin-bottom: 0px;
  42.     margin-left: 0px;
  43.     margin-right: 0px;
  44.     margin-top: 0px;
  45.     opacity: 1.00;
  46.     padding-bottom: 0px;
  47.     padding-top: 0px;
  48.     text-align: justify;
  49.     text-decoration: none;
  50.     text-indent: 0px;
  51.     text-transform: none;
  52. }
  53. .paragraph_style_2 {
  54.     color: rgb(0, 0, 0);
  55.     font-family: 'ArialMT', 'Arial', sans-serif;
  56.     font-size: 14px;
  57.     font-stretch: normal;
  58.     font-style: normal;
  59.     font-variant: normal;
  60.     font-weight: 400;
  61.     letter-spacing: 0;
  62.     line-height: 21px;
  63.     margin-bottom: 0px;
  64.     margin-left: 0px;
  65.     margin-right: 0px;
  66.     margin-top: 0px;
  67.     opacity: 1.00;
  68.     padding-bottom: 0px;
  69.     padding-top: 0px;
  70.     text-align: justify;
  71.     text-decoration: none;
  72.     text-indent: 0px;
  73.     text-transform: none;
  74. }
  75. .style_External_398_54.vertical-align-middle-middlebox {
  76.     height: 54px;
  77.     position: relative;
  78.     width: 398px;
  79. }
  80. .style_SkipStroke {
  81.     background: rgb(66, 66, 66);
  82.     opacity: 1.00;
  83. }
  84. .style_SkipStroke_1 {
  85.     background: transparent;
  86.     opacity: 1.00;
  87. }
  88. .Body {
  89.     color: rgb(88, 77, 77);
  90.     font-family: 'ArialMT', 'Arial', sans-serif;
  91.     font-size: 15px;
  92.     font-stretch: normal;
  93.     font-style: normal;
  94.     font-variant: normal;
  95.     font-weight: 400;
  96.     letter-spacing: 0;
  97.     line-height: 20px;
  98.     margin-bottom: 0px;
  99.     margin-left: 0px;
  100.     margin-right: 0px;
  101.     margin-top: 0px;
  102.     opacity: 1.00;
  103.     padding-bottom: 0px;
  104.     padding-top: 0px;
  105.     text-align: left;
  106.     text-decoration: none;
  107.     text-indent: 0px;
  108.     text-transform: none;
  109. }
  110. .spotempresa {
  111.     width: 100%;
  112.     height: 500px;
  113.     position: absolute;
  114.     top: 100;
  115.     left: 50%;
  116.     -webkit-transform: translate(-50%, 0px);
  117.     -moz-transform: translate(-50%, 0px);
  118.     -o-transform: translate(-50%, 0px);
  119.     -ms-transform: translate(-50%, 0px);
  120.     transform: translate(-50%, 0px);
  121. }
  122. .Free_Form {
  123.     color: rgb(88, 77, 77);
  124.     font-family: 'ArialMT', 'Arial', sans-serif;
  125.     font-size: 15px;
  126.     font-stretch: normal;
  127.     font-style: normal;
  128.     font-variant: normal;
  129.     font-weight: 400;
  130.     letter-spacing: 0;
  131.     line-height: 20px;
  132.     margin-bottom: 0px;
  133.     margin-left: 0px;
  134.     margin-right: 0px;
  135.     margin-top: 0px;
  136.     opacity: 1.00;
  137.     padding-bottom: 0px;
  138.     padding-top: 0px;
  139.     text-align: left;
  140.     text-decoration: none;
  141.     text-indent: 0px;
  142.     text-transform: none;
  143. }
  144. .graphic_shape_layout_style_default_External_1024_100 {
  145.     position: relative;
  146. }
  147. .graphic_shape_layout_style_default {
  148.     padding: 4px;
  149. }
  150. .graphic_shape_style_default_SkipStroke {
  151.     background: rgb(255, 255, 255);
  152.     opacity: 1.00;
  153. }
  154. .graphic_textbox_layout_style_default_External_398_54 {
  155.     position: relative;
  156. }
  157. .graphic_textbox_layout_style_default {
  158.     padding: 4px;
  159. }
  160. .graphic_textbox_layout_style_default_External_697_100 {
  161.     position: relative;
  162. }
  163. .graphic_textbox_layout_style_default_External_454_158 {
  164.     position: relative;
  165. }
  166. .graphic_textbox_style_default_SkipStroke {
  167.     background: transparent;
  168.     opacity: 1.00;
  169. }
  170. .bumper {
  171.     font-size: 1px;
  172.     line-height: 1px;
  173. }
  174. .spacer {
  175.     font-size: 1px;
  176.     line-height: 1px;
  177. }
  178. body { 
  179.     -webkit-text-size-adjust: none;
  180. }
  181. div { 
  182.     overflow: visible; 
  183. }
  184. img { 
  185.     border: none; 
  186. }
  187. .InlineBlock { 
  188.     display: inline; 
  189. }
  190. .InlineBlock { 
  191.     display: inline-block; 
  192. }
  193. .inline-block {
  194.     display: inline-block;
  195.     vertical-align: baseline;
  196.     margin-bottom:0.3em;
  197. }
  198. .inline-block.shape-with-text {
  199.     vertical-align: bottom;
  200. }
  201. .vertical-align-middle-middlebox {
  202.     display: table;
  203. }
  204. .vertical-align-middle-innerbox {
  205.     display: table-cell;
  206.     vertical-align: middle;
  207. }
  208. div.paragraph {
  209.     position: relative;
  210. }
  211. li.full-width {
  212.     width: 100;
  213. }
  #6 (permalink)  
Antiguo 09/05/2015, 01:49
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Franja horizontal al 100%, resto no.
A mí se me queda como en esta imagen:



PROBLEMAS:

1. El video está pegado arriba y yo lo quiero justo después de la cabecera. Lo intento pero no lo consigo.

2. El video ocupa 500 pixeles de alto, pero no el ancho 100%, que es lo que yo busco.

3. Con la cabecera me pasa lo mismo, pero me urge más lo del video.


Gracias por adelantado.
  #7 (permalink)  
Antiguo 09/05/2015, 13:39
Avatar de NueveReinas  
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Franja horizontal al 100%, resto no.
Cita:
Iniciado por mcasasrey Ver Mensaje
Gracias NueveReinas por la lección de lo que es trabajo y lo que no. Debes estar ocupadísimo para ir dando tantas lecciones en este foro.

Ya he visto varias respuestas tuyas en el foro y muchas de ellas son con ese mismo tono. Si no tienes vida, cómprate una o en lugar de estar en un foro de diseño web vete a uno de autoayuda.

La diferencia entre tú y la persona que ha comentado antes (JuJoGuAI), es que él presupone que el código lo tengo hecho, tú presupones lo contrario.
Que yo sepa, has empezado el post diciendo que tienes X problema, diciendo también que estás "al borde del suicidio" y que quieres que la web tenga esto y lo otro, pero no has puesto NADA de código, lo has agregado después [de mi respuesta].

Comprenderás que decir "quiero X y Z" sin una sola línea de código para saber qué tienes y qué no, es como pedir el trabajo ya hecho.

---------------------------------------------

Respecto a lo que tienes y lo que quieres:

Creo que deberías separar los contenedores. Tener por una parte la cabecera (nav, imagino), por otra parte el "inicio" (imagen o video), y por otra parte el cuerpo (o contenido de la página en sí).

Para que el "inicio" no se te pegue a la cabecera (imagino que la tienes como fija), quizá esto te sirva: https://mimentevuela.wordpress.com/2...ivs-relativos/

Saludos.
__________________
¿Te sirvió la respuesta? Deja un +1
  #8 (permalink)  
Antiguo 10/05/2015, 03:54
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Franja horizontal al 100%, resto no.
Cita:
Que yo sepa, has empezado el post diciendo que tienes X problema, diciendo también que estás "al borde del suicidio" y que quieres que la web tenga esto y lo otro, pero no has puesto NADA de código, lo has agregado después [de mi respuesta].

Comprenderás que decir "quiero X y Z" sin una sola línea de código para saber qué tienes y qué no, es como pedir el trabajo ya hecho.
1. LO PRIMERO Y ANTE TODO: Te agradezco el intento de ayudar, aunque no es exactamente lo que yo estoy buscando porque el ejemplo que me envías es de una cabecera autoajustable. Yo lo que busco es que el div donde está el video tenga un ancho de 100% y un alto de 500 pixeles aunque el video se vea cortado. Y al menos yo, con tu ejemplo no lo consigo. Pero repito, gracias por el intento.

2. No tengo intención de iniciar una discusión contigo, pero te lo repito:

- Es verdad que planteo una duda sin poner el código, pero eso no te da derecho a suponer que no he trabajado nada. Sabes lo que es la presunción de inocencia? Tú, NueveReinas, ejerces la presunción de culpabilidad. Y como ya te he dicho antes, no es la primera vez que lo haces.

Aquí una prueba:


Alguien podría echarme una mano, por favor?
  #9 (permalink)  
Antiguo 10/05/2015, 05:04
Avatar de lauser
Moderator Unix/Linux
  
Fecha de Ingreso: julio-2013
Ubicación: Odessa (Ukrania)
Mensajes: 3.278
Antigüedad: 11 años, 5 meses
Puntos: 401
Respuesta: Franja horizontal al 100%, resto no.
NO se si te entiendo correctamente:
Código CSS: 
Ver original
  1. div {
  2.   top: 10px;
  3. }

----> Por el buen funcionamiento del foro, ruego que omitáis los reproches personales. Mas vale callar que con XXXX altercar.
__________________
Los usuarios que te responden, lo hacen altruistamente y sin ánimo de lucro con el único fin de ayudarte. Se paciente y agradecido.
-SOLOLINUX-
  #10 (permalink)  
Antiguo 10/05/2015, 11:48
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 10 años
Puntos: 208
Respuesta: Franja horizontal al 100%, resto no.
Antes que nada, te estas tomando muy a pecho lo de NueveReinas.. tranquilo, con aclarar lo que querías es suficiente.

Siempre postea código si tenes una duda o problema para basarnos en eso y poder darte una respuesta.

Unos consejos, si querés que algo ocupe el 100% de la ventana, no los encierres en un contenedor con ancho fijo porque asignar width:100% hace que el elemento ocupe el 100% de su elemento padre. En ese caso la única forma de sacarlos de ese ancho fijo seria con posición absoluta o fija, y no es eso lo que estás buscando. Yo te recomendaría que coloques esos elementos 100%, fuera del "Resto de la pagina".

En cuanto a la imagen o video que se corta, si colocas a su contenedor overflow:hidden ocultas el contenido que se sale del elemento.

Según lo que yo entendí, estas buscando algo como ésto:

Código HTML: 
Ver original
  1. <header>Cabecera</header>  
  2. <section class="media">
  3.   <img src="http://i58.tinypic.com/27zi13o.png" alt="" />
  4. </section>
  5. <section class="principal"></section>
  6. <footer>Footer</footer>

Código CSS: 
Ver original
  1. body{
  2.   margin:0
  3. }
  4.  
  5. header, footer{
  6.   width:100%;
  7.   height:50px;
  8.   background-color:#161616;
  9.   text-align:center;
  10.   color:orange;
  11. }
  12.  
  13. .media{
  14.   width:100%;
  15.   height:500px;
  16.   overflow:hidden;
  17. }
  18.  
  19. img{
  20.   width:100%;
  21. }
  22.  
  23. .principal{
  24.   width:1024px;
  25.   height:1000px;
  26.   background-color:rgba(43,43,43,.2);
  27.   margin:0 auto;
  28. }

http://codepen.io/anon/pen/WvrXYB

Obviamente no está optimizado para móviles.

Espero que te sirva, saludos
  #11 (permalink)  
Antiguo 10/05/2015, 13:27
 
Fecha de Ingreso: mayo-2015
Mensajes: 6
Antigüedad: 9 años, 7 meses
Puntos: 0
Respuesta: Franja horizontal al 100%, resto no.
Gracias Lauser, pero creo que lo busco es más bien lo que me ha comentado fede5426.

Gracias fede5426, eso es lo que estoy buscando. Ahora voy a intentar hacerlo yo y meter el video sin trastocar "el resto de la pagina". Supongo que metiendo un video en lugar de una foto funcionará igual.

En cuanto a los comentarios/reproches, como he dicho antes no tengo ganas de discutir sólo que después de estar horas y horas intentando hacer algo (quizá porque no soy un experto) pues puede molestar que te digan que quieres el trabajo hecho. Por mi parte, ese tema está zanjado.

Lo dicho, voy a intentar lo que me aconseja fede5426 y si me sale pongo el tema ya como solucionado. Gracias a todos.

Etiquetas: franja, horizontal, página, resto, todo
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 07:25.