No funciona mi overflow

gVenom · #1 (**permalink**) 17/12/2008, 10:11

Curioso, le acabo de pasar en este mismo foro a Mario como insertar este efecto en en un div o un td, y a mi no me funciona el mio. Ahi lo pongo por si ven porque no funciona el overflow.

Código HTML:

<td height="500" colspan="19" rowspan="4" style="overflow:auto; width: 100%; height: 100%"> 
    
      <div class="style6" id="dos">Listen to:</div>
      <div id="uno"><img src="http://www.forosdelweb.com/images/wapn.jpg" alt="wapn radio" /></div>
      <div class="style3" id="tres">Fridays 7: 00 P.M<br />
        &quot;Voice of Blessed Hope Series&quot;<br />
        A Prophetic Reflection<br />
        Speaker Devon A. Jones
      </div>
               <br />
      <div align="center" >
          Ormond Beach Seventh-day Adventist<br />
          Mission<br />
          Invites you to: &quot;Worship, Bible Encounter<br />
          And Fellowship.&quot;<br />
          Saturdays at 10:00 A.M<br />
          For more Information<br />
          Call: 386-451-0934<br />
          Visit us at:<br />
          54 South Ridgewood Ave<br />
          Ormond Beach FL. 32174   <br />
          <a href="map.html" target="_blank" width="500px" height=500px">Map of the area                </a>
           </div>
          <iframe src="http://wikimapia.org/s/#lat=29.2642378&lon=-81.0498977&z=16&l=0&m=m&v=2" width="350" height="350" frameborder="0"></iframe>
    </td>

Mikmoro · #2 (**permalink**) 17/12/2008, 12:57

Lo iba a mirar mejor, pero en la primera línea ya me encuentro que declaras dos veces el alto:

Cita:

gVenom · #3 (**permalink**) 17/12/2008, 14:52

Que tal Mikmoro.

Tienes razon, pero ya se lo quite(al td) y nada

willyfc · #4 (**permalink**) 17/12/2008, 16:31

en el algo falta una comilla

Código HTML:

<a href="map.html" target="_blank" width="500px" height=500px">

Mikmoro · #5 (**permalink**) 17/12/2008, 17:22

Cita:

Iniciado por gVenom

Que tal Mikmoro.

Tienes razon, pero ya se lo quite(al td) y nada

No quería decir que fuera eso, sino que era la primero que se veía a simple vista, y que primero arreglaras eso y luego veríamos ver.

Ahora, no sé que quieres que ocurra exactamente. Pon lo que falta de tabla y así, porque si no al menos yo no lo entiendo.

gVenom · #6 (**permalink**) 18/12/2008, 08:35

Ah, solamente que necesito que cuando se pase del tamaño del td, me aplique el scroll, nunca habia tenido problema con eso hasta ahora.
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blessed Hope - Services</title>
<meta name="author" content="gVenom" />
<meta name="subject" content="Church" />
<meta name="Description" content="We believe that the coming of Jesus is immanent and the whole world need a Revelation of Hope. Jesus commands us to go into all world and make disciples of al nations, baptizing them in the name of the Father and of the Son and of the Holy Spirit. Teaching them to observe all things that I have commanded you, and lo, I am with you always even to the end of the age" />
<meta name="Classification" content="Christian Church" />
<meta name="Keywords" content="church,hope,God,Jesus,Crhist,vision,bible ,faith,holy,Spirit,gospel,nations,international,Bl essed hope " />
<meta name="Geography" content="Georgia" />
<meta name="Language" content="English" />
<meta http-equiv="Expires" content="never" />
<meta name="Revisit-After" content="21 days" />
<meta name="distribution" content="Global" />
<meta name="Robots" content="INDEX,FOLLOW" />
<meta name="country" content="U.S.A." />

<style type="text/css">
.style1 {
font-family: Tahoma;
font-weight: bold;
font-size: 11px;
color: #1E8357;
}
.style2 {
font-family:Tahoma;
font-weight: bold;
font-size: 14px;
color: #1E8357;
}
.style3 {
font-style:italic;
font-family:Tahoma;
font-size:12px;
}
.style6 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
}
.style8 {
color: #000000;
font-weight: bold;
font-family: Tahoma;
}
.img.wap {
margin:5px 50px 200px 50px;
}
#scroll {
width:300px;
height:170px;
background-color:#F2F2F2;
overflow:auto;
}

#uno {
position:relative;
width:236px;
top:-20px;
left:160px;
bottom:300px;
}
#dos {
position:relative;
width:70px;
top:-20px;
left:80px;
bottom:300px;
}
#tres {
position:relative;
width:190px;
top:-10px;
left:180px;
bottom:300px;
text-align:center;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

gVenom · #7 (**permalink**) 18/12/2008, 08:39

<body bgcolor="#FFFFFF">
<table id="Table_01" width="779" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="30"><img src="images/services_01.jpg" width="778" height="3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="3" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/services_02.jpg" width="148" height="29" alt="" /></td>

<td colspan="2"><img src="images/services_03.gif" width="45" height="29" alt="" /></td>
<td colspan="4"><img src="images/services_04.gif" width="52" height="29" alt="" /></td>
<td><img src="images/services_05.gif" width="40" height="29" alt="" /></td>
<td colspan="17" rowspan="3"><img src="images/services_06.jpg" width="492" height="201" alt="" /></td>
<td rowspan="2"><img src="images/services_07.gif" width="1" height="162" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="29" alt="" /></td>
</tr>
<tr>
<td colspan="12" rowspan="2"><img src="images/services_08.jpg" width="285" height="172" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="133" alt="" /></td>
</tr>
<tr>
<td><img src="images/services_09.jpg" width="1" height="39" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="30"><img src="images/services_10.jpg" width="778" height="35" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="35" alt="" /></td>

</tr>
<tr>
<td colspan="10"><img src="images/services_11.jpg" width="242" height="32" alt="" /></td>
<td colspan="6"><img src="images/services_12.gif" width="145" height="32" alt="" /></td>
<td colspan="2"><img src="images/services_13.jpg" width="36" height="32" alt="" /></td>
<td colspan="4"><img src="images/services_14.gif" width="140" height="32" alt="" /></td>
<td colspan="2"><img src="images/services_15.jpg" width="67" height="32" alt="" /></td>
<td colspan="3"><img src="images/services_16.gif" width="110" height="32" alt="" /></td>
<td colspan="3"><img src="images/services_17.jpg" width="38" height="32" alt="" /></td>

<td><img src="images/spacer.gif" width="1" height="32" alt="" /></td>
</tr>
<tr>
<td colspan="30"><img src="images/services_18.jpg" width="778" height="4" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="4" alt="" /></td>
</tr>
<tr>
<td colspan="9" rowspan="2"><img src="images/services_19.jpg" width="234" height="60" alt="" /></td>
<td colspan="6"><img src="images/services_20.jpg" width="141" height="50" alt="" /></td>

<td colspan="2" rowspan="2"><img src="images/services_21.jpg" width="40" height="60" alt="" /></td>
<td colspan="4"><img src="images/services_22.jpg" width="140" height="50" alt="" /></td>
<td colspan="2" rowspan="2"><img src="images/services_23.jpg" width="39" height="60" alt="" /></td>
<td colspan="3"><img src="images/servives_24.jpg" width="142" height="50" alt="" /></td>
<td colspan="4" rowspan="2"><img src="images/services_25.jpg" width="42" height="60" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="50" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/services_26.jpg" width="117" height="10" alt="" /></td>

<td><img src="images/services_27.jpg" width="24" height="10" alt="" /></td>
<td colspan="3"><img src="images/services_28.jpg" width="114" height="10" alt="" /></td>
<td><img src="images/services_29.jpg" width="26" height="10" alt="" /></td>
<td colspan="2"><img src="images/services_30.jpg" width="114" height="10" alt="" /></td>
<td><img src="images/services_31.jpg" width="28" height="10" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="10" alt="" /></td>
</tr>
<tr>
<td colspan="2"><img src="images/services_32.jpg" width="31" height="20" alt="" /></td>

<td colspan="4"><img src="images/services_33.jpg" width="119" height="20" alt="" /></td>
<td colspan="24"><img src="images/services_34.jpg" width="628" height="20" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="20" alt="" /></td>
</tr>
<tr>
<td rowspan="5"><img src="images/services_35.jpg" width="5" height="481" alt="" /></td>
<td rowspan="4"><img src="images/services_36.jpg" width="26" height="305" alt="" /></td>
<td colspan="7" rowspan="2"><img src="images/services_37.jpg" width="203" height="228" alt="" /></td>
<td colspan="2" rowspan="5"><img src="images/services_38.jpg" width="11" height="481" alt="" /></td>

<td colspan="19"><img src="images/services_39.jpg" width="533" height="34" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="34" alt="" /></td>
</tr>
<tr>
<td height="500" colspan="19" rowspan="4" style="overflow:auto; width: 100%; height: 100%">

<div class="style6" id="dos">Listen to:</div>
<div id="uno"><img src="images/wapn.jpg" alt="wapn radio" /></div>
<div class="style3" id="tres">Fridays 7: 00 P.M<br />

"Voice of Blessed Hope Series"<br />
A Prophetic Reflection<br />
Speaker Devon A. Jones
</div>
<br />

</td>
<td><img src="images/spacer.gif" width="1" height="194" alt="" /></td>
</tr>
<tr>

<td rowspan="2"><img src="images/services_41.jpg" width="4" height="77" alt="" /></td>
<td colspan="5"><img src="images/services_42.jpg" width="170" height="64" alt="" /></td>
<td rowspan="2"><img src="images/services_43.jpg" width="29" height="77" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="64" alt="" /></td>
</tr>
<tr>
<td colspan="5"><img src="images/services_44.jpg" width="170" height="13" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>

<tr>
<td colspan="8"><img src="images/services_45.jpg" width="229" height="176" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="176" alt="" /></td>
</tr>
<tr>
<td colspan="30"><img src="images/services_46.jpg" width="778" height="16" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="16" alt="" /></td>
</tr>
<tr>

<td colspan="4" rowspan="2"><img src="images/services_47.jpg" width="70" height="25" alt="" /></td>
<td colspan="9"><img src="images/services_48.jpg" width="249" height="12" alt="" /></td>
<td colspan="6"><img src="images/services_49.jpg" width="165" height="12" alt="" /></td>
<td><img src="images/services_50.jpg" width="45" height="12" alt="" /></td>
<td colspan="8"><img src="images/services_51.jpg" width="238" height="12" alt="" /></td>
<td colspan="2" rowspan="2"><img src="images/services_52.jpg" width="11" height="25" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="12" alt="" /></td>
</tr>
<tr>

<td colspan="24"><img src="images/services_53.jpg" width="697" height="13" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="13" alt="" /></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="5" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="26" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="4" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="35" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="78" height="1" alt="" /></td>

<td><img src="images/spacer.gif" width="2" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="43" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="3" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="34" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="32" height="1" alt="" /></td>

<td><img src="images/spacer.gif" width="24" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="12" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="28" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="61" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="45" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="26" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="31" height="1" alt="" /></td>

<td><img src="images/spacer.gif" width="36" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="78" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="28" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="4" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="27" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="10" height="1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td></td>
</tr>

</table>
</body>
</html>
[/HTML]

gVenom · #8 (**permalink**) 18/12/2008, 08:40

ahi puse el css de una vez, la <td> que tiene el scroll es la que no esta trabajando. Use el css que esta arriba también y nada.

A proposito Mikmoro, el tutorial de pasar de tablas a div esta buenisimo, aqui como vez ya comence a tratar de irlo aplicando, aunque sea en una celda pero ahi voy, aunque como vez no me ha ido muy bien jeje. A ver si logro quitar esas estupideces que tiran las tablas del photoshop como el cierrre de mi tabla:

Código HTML:

 <td><img src="images/spacer.gif" width="5" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="26" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="35" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="78" height="1" alt="" /></td>

    <td><img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="43" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="12" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="29" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="40" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="34" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="32" height="1" alt="" /></td>

    <td><img src="images/spacer.gif" width="24" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="12" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="28" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="61" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="45" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="26" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="8" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="31" height="1" alt="" /></td>

    <td><img src="images/spacer.gif" width="36" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="78" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="28" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="4" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="27" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="10" height="1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" alt="" /></td>

por favor

willyfc · #9 (**permalink**) 18/12/2008, 09:30

no coloques el overflow en el td, quita todo el style del td del contenido, ponlo de esta manera y veamos como se ve:

Código HTML:

<td height="500" colspan="19" rowspan="4"> 
<div style="overflow:auto; width: 100%; height: 100%">
<div class="style6" id="dos">Listen to:</div>
<div id="uno"><img src="http://www.forosdelweb.com/images/wapn.jpg" alt="wapn radio" /></div>
<div class="style3" id="tres">Fridays 7: 00 P.M<br />

&quot;Voice of Blessed Hope Series&quot;<br />
A Prophetic Reflection<br />
Speaker Devon A. Jones
</div>
mete mucho contenido aqui para ver si estira
</div>
</td>

avisas como te va

Mikmoro · #10 (**permalink**) 18/12/2008, 11:25

Buf, yo me mareo con ese código. ¿Tienes un enlace donde verlo? Photoshop hace aberraciones para mantener los gráficos donde tu los has colocado, pero estoy seguro de que hay una forma de hacerlo 3 veces más sencilla.
Si puedes súbelo a alguna parte para que se puedan ver los gráficos y eso.

gVenom · #11 (**permalink**) 18/12/2008, 11:41

Cita:

Iniciado por Mikmoro

Buf, yo me mareo con ese código. ¿Tienes un enlace donde verlo? Photoshop hace aberraciones para mantener los gráficos donde tu los has colocado, pero estoy seguro de que hay una forma de hacerlo 3 veces más sencilla.
Si puedes súbelo a alguna parte para que se puedan ver los gráficos y eso.

Ja, no slolo tu. Aqui esta la página. Ocupo el overflow porque el cliente le va a meter mas info abajo de lo que hay:
http://beholdhecometh.net/services.html

Cita:

no coloques el overflow en el td, quita todo el style del td del contenido, ponlo de esta manera y veamos como se ve:

voy a probar a ver que.

A proposito, ya encontre como generar codigo css desde photoshop, voy a ponerlo como tutorial. Ahora mismo lo estoy escribiendo en el foro xhtml, a ver si dejo de batallar con lo viejo y empiezo con lo nuevo.

Mikmoro · #12 (**permalink**) 18/12/2008, 11:54

Es mucho más sencillo que pongas el overflow al div que contiene la celda que a la propia celda.

willyfc · #13 (**permalink**) 18/12/2008, 12:02

Cita:

Iniciado por Mikmoro

Es mucho más sencillo que pongas el overflow al div que contiene la celda que a la propia celda.

Es lo que yo le digo, de esa manera se lo puse en lo anterior que postee, o me equivoqué?

Mikmoro · #14 (**permalink**) 18/12/2008, 12:26

Sí, es cierto, debía haber dicho: "confirmo lo que te está diciendo willyfc", lo que pasa es que no me había parado a leer tu código.

gVenom · #15 (**permalink**) 18/12/2008, 13:11

si ya lo he hecho y no funciona, como ven arriba en el css hay un #scroll, ese fue el que use con el div y no funciona. Aparte que me manda los otros div para arriba

gVenom · #16 (**permalink**) 18/12/2008, 13:24

Cita:

Iniciado por willyfc

no coloques el overflow en el td, quita todo el style del td del contenido, ponlo de esta manera y veamos como se ve:

Código HTML:

<td height="500" colspan="19" rowspan="4"> 
<div style="overflow:auto; width: 100%; height: 100%">
<div class="style6" id="dos">Listen to:</div>
<div id="uno"><img src="http://www.forosdelweb.com/images/wapn.jpg" alt="wapn radio" /></div>
<div class="style3" id="tres">Fridays 7: 00 P.M<br />

&quot;Voice of Blessed Hope Series&quot;<br />
A Prophetic Reflection<br />
Speaker Devon A. Jones
</div>
mete mucho contenido aqui para ver si estira
</div>
</td>

Este casi funciono, solo que mando los div de arriba un poco mas arriba, y cuando hace el scroll, se lo pasa por debajo a los div de arriba y se ven montados

avisas como te va