Comunidad de diseño web y desarrollo en internet online

div complete el alto

Citar            
MensajeEscrito el 27 Mar 2014 12:50 pm
hola. tengo un div al 100% de ancho con un fondo pleno. este div arranca a 500 px top y me gustaría que llene en resto de la altura hacia abajo sin sroll si su contenido no lo requiere. gracias por la ayuda

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 27 Mar 2014 02:47 pm
movido a CSS y HTML

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Diseñadora & ilustradora

chrome
Citar            
MensajeEscrito el 28 Mar 2014 11:24 am
alguien me puede ayudar?

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 29 Mar 2014 07:03 pm
Walter, poné tu código, así es más fácil ayudarte.

Ármate un Codepen o un JsFiddle donde podamos ver tu proyecto y así mismo ayudarte.

Slds!

Por jap_solo

21 de clabLevel



Genero:Masculino  

Maquetador Docente Web

chrome
Citar            
MensajeEscrito el 31 Mar 2014 05:19 pm

Código CSS :

body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-image: url(img/fondo.jpg);
   background-repeat: no-repeat;
   background-attachment: fixed;
}
.banner-largo {
   float: left;
   height: 99px;
   width: 100%;
   margin-left: -50%;
   position: absolute;
   left: 50%;
   top: 0px;
   opacity: 0.2;
   filter: alpha(opacity=20);
   background-color: #000;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #999;
}
h1 {
   font-family: "Franklin Gothic Demi";
   font-size: 16px;
   font-weight: lighter;
   color: #28d700;
   text-decoration: none;
   display: block;
   line-height: normal;
   font-variant: normal;
   text-transform: none;
}
p {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #FFFFFF;
   text-decoration: none;
   font-weight: normal;
   display: inline;
   font-style: normal;
   text-align: justify;
}
.banner-content {
   float: left;
   height: 100px;
   width: 1000px;
   margin-left: -500px;
   position: absolute;
   z-index: 2;
   left: 50%;
   top: 0px;
}
.slide {
   float: left;
   height: 400px;
   width: 1000px;
   margin-left: -500px;
   position: absolute;
   left: 50%;
   top: 100px;
   background-image: url(img/slider.png);
}
.contenedor-base {
   background-color: #000;
   float: left;
   height: auto;
   width: 100%;
   margin-left: -50%;
   position: absolute;
   left: 50%;
   top: 500px;
   opacity: 0.9;
   filter: alpha(opacity=20);
}

Código HTML :

[html]<body>
<div class="banner-largo"></div>
<div class="banner-content">
  <table width="1000" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="200" height="100"><img src="img/logo.png" width="200" height="100" /></td>
      <td>&nbsp;</td>
      <td width="200" align="right" valign="bottom"><img src="img/celu.png" width="149" height="35" /></td>
    </tr>
  </table>
</div>
<div class="slide"> </div>
<div class="contenedor-base">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="60" valign="top"><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="40">
      <param name="movie" value="botonera.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="botonera.swf" width="1000" height="40">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
        <div>
          <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="230" height="250" valign="top"><table width="100" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td height="10"></td>
  </tr>
</table>
<table width="220" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="40" valign="bottom"><h1>BIENVENIDOS A PHOTON iluminación y eventos</h1></td>
      </tr>
    </table>
      <table width="220" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="100" valign="top"><p>Vivamus pretium, sapien non faucibus congue, sem odio dapibus purus, eget pellentesque neque magna vel justo. Vestibulum sit amet nisi a ipsum vestibulum condimentum id suscipit nibh.</p></td>
        </tr>
      </table></td>
    <td width="240" valign="top"><object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="240" height="240">
      <param name="movie" value="flash-01.swf" />
      <param name="quality" value="high" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <param name="wmode" value="opaque" />
      <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="flash-01.swf" width="240" height="240">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <param name="wmode" value="opaque" />
        <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
        <div>
          <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></td>
    <td width="250"><object id="FlashID3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="240" height="240">
      <param name="movie" value="flash-02.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="flash-02.swf" width="240" height="240">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
        <div>
          <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></td>
    <td width="250">&nbsp;</td>
  </tr>
</table>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
swfobject.registerObject("FlashID3");
</script>
</body>[/html]

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 01 Abr 2014 03:13 am
Y cual <div> es el que necesitas arreglar ¿? :/

De entrada, para ir ajustando. Todo lo tenes con posicionamiento absoluto, así NO se trabaja. Para eso tenes la flotación. Ahora, si tenes un elemento debajo de otro, ¿para que los pones con position:absolute?

Te recomiendo, antes de que continúes con tu proyecto, que leas sobre el modelo de cajas y flotación de divs, eso te abrirá el espectro mucho más.

También lee esto: bit.ly/P2eZIE - Así encontrarás a futuro una manera en que te puedan ayudar más con tus dudas.

Slds!

Por jap_solo

21 de clabLevel



Genero:Masculino  

Maquetador Docente Web

chrome
Citar            
MensajeEscrito el 01 Abr 2014 02:46 pm
gracias jap,

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 02 Abr 2014 12:19 pm
entendí tu consejo, ahora bien; cómo hago para que un div se superponga a otro. por ejemplo la capa que contiene el logo debe superponese al la del flash. el Zindx no me funciona si no es con posición absoluta :(

Por walter

68 de clabLevel



Genero:Masculino  

chrome
Citar            
MensajeEscrito el 02 Abr 2014 05:57 pm
Para que puedas solapar los divs con el z-index, podes poner el position:relative.

Ahí lo que lográs, es que el elemento con position:relative no salga del todo del flujo natural de elementos pero que sí se pueda solapar encima de otro elemento con el z-index.

Otra cosa que te recomiendo es que trates de usar solo divs, pues vos usas también tablas y así es bastante complejo hacer una web bien hecha.

Slds!

Por jap_solo

21 de clabLevel



Genero:Masculino  

Maquetador Docente Web

chrome
Citar            
MensajeEscrito el 02 Abr 2014 08:57 pm
ya saqué las tablas y voy a colocar divs. gracias una vez más.
pero sigue sin llenarse el resto de la pagina con el div principal, o sea que queda fondo por debajo al terminar la misma

Por walter

68 de clabLevel



Genero:Masculino  

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.