como hago un apartado o subapartado flotante???

Hola nuevamente amigos de CCTW, necesito me ayuden por favor...
quiero aprender a hacer una hoja dentro de mi pagina, me explico; en la ultima parte de la primera leccion aparecen dos ventanas cada una indica lo que debemos tener escrito "hasta el momento" en la index y en los estilos respectivamente, cada una de estas se mueve de arriba a abajo en forma independiente de la hoja principal (me parece que se llaman apartados y subapartados flotantes, segun lo que mire en el codigo de fuente, pero no estoy segura)...como puedo hacer eso?????
necesito insertarlo en mi pagina por favor expliquenme...
de antemano muchas gracias
hola

intenta ponerle asi en el css

#algo {overflow: auto;}

luego en html

<div id="algo">mucho contenido</div>

saludos
No me resulta, al escribir aparece el texto pero no dentro de una hoja aparte como yo necesito, lo que escribi en la hoja de estilos es esto: (en rojo)

.centrado{text-align:center}
img {border-style: none}
* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}

h1 {font-size: 1.3em; font-family:Arial;color:#8B795E ; font-weight: bold ; text-decoration:
none ; text-align: center; padding-bottom:20px}
h2 {font-size: 0.8em; color:#8B795E ; font-weight: bold ; font-family: New Times Roman;
text-decoration: none ;
text-align: center; padding-top:40px}
h3 {font-size: 0.8em; color: #8B795E; font-weight: bold; font-family: New Times Roman;text-decoration: none;
text-align: center}
h4 {font-size: 0.8em; color: #8B795E; font-weight: bold; font-family: New Times Roman;text-decoration: none;
text-align: center}
h5 {text-align:center; padding-top:100px; padding-bottom:10px; float:center; width:100px}

body {text-align: center }
body {background-color:#8B2323}
#global {width:800px ; margin:4px auto }
#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color:white; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:70px;float:left}
#publicidad {width:400px ; float:center ; margin-top:25px ; font-size: 1.5em;color:brown;
font-family:Algerian; font-weight:bold }
#navegacion {background-color: #DCDCDC ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 30px 0px 30px }
#navegacion ul { margin-left: 60px }
#contenido {background-color:white;border-left: black 1px solid;
border-right: black 1px solid; padding: 40px}
#contenido p {margin: 15px 10px 10px 10px ; text-indent: 20px; font-size: 1.0em; color: #4F4F4F; font-family:Arial; padding-top:5px}
#menu {width: 155px ; float:right ;
text-align:right ; margin: 3px 10px 3px 3px;
background-position:bottom;
padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 8px 4px 6px ; font-size:0.8em;font-family:Comic Sans MS}
#menu h1 {text-decoration:none;font-size:13px; padding:6px;
width:155px;height:20px }


#pie { background-color: white;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid;
height: 65px}
#pieuno {background-color:silver;float:left;width:150px}
#pie li {{list-style:none;font-size:12px}
#piedos {background-color:silver;float:left;width:498px}
#pietres {background-color:silver;float:left;width:150px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: black ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:brown ; text-decoration:underline ; background-color: white}
a:active {}
a.texto {font-weight:bold ; font-sixe:12px ; text-decoration: none ;display:inline }
a.texto:LINK { ;}
a.texto:VISITED { ;}
a.texto:HOVER {color:brown ; background-color:white}
a.texto:ACTIVE {text-decoration: underline ; }
#algo {overflow: auto;}


y en la HTML, esto (tambien en rojo)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Principal</title>
<link rel="stylesheet" href="../estilos-principal.css" type="text/css" media="all">
</head>
<body>
<div id="global">

<div id="curva-superior"></div>
<div id="cabecera">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<div id="logotipo">
<a href="../index.html">
[contenido no disponible]
</a>
</div>

<div id="publicidad">Liceo Polivalente Hernando de Magallanes</div><link rel="stylesheet" type="text/css" href="estilos.css" />
</div>


<div id="navegacion">
<ul>
  • Historia
  • Gestión
  • Actividades
  • Vespertino
  • Himno
  • Personal
    </div>

    <div id="contenido">


    <div id="menu">


    <ul>
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]
    [contenido no disponible]

    </div>

    <h1>Quienes somos</h1>



    El Liceo Polivalente Hernando de Magallanes es un establecimiento educacional mixto, que está al servicio
    de la educación desde el año 1976. Actualmente cuenta con 297 alumnos en la jornada y más de 350 en la jornada
    vespertina.</p>


    Éste ofrece a los estudiantes Educación Científico Humanista y Educación Técnico profesional impartiendo
    actualmente la carrera de Turismo, pensada en suplir la demanda existente en una zona
    tan turística como la nuestra.</p>


    Nuestro Liceo se ha caracterizado por estar a la vanguardia en lo que a tecnología se refiere y por poseer una visión
    muy futurista.</p>


    Dependiente de la Ilustre Municipalidad de Porvenir el Liceo cuenta con 42 profesores los
    que están distribuidos en docentes de aula, de las jornadas diurna y vespertina, y docentes superiores
    que ocupan cargos directivos y/o administrativos, todos dirigidos por su Director, Doctor en Educación
    Don Hugo Gallegos Alvarado.</p>


    Te invitamos a conocer más acerca de nuestro Liceo, de su historia y sus protagonistas,como ha progresado a través
    de los años lo que se está realizando actualmente también a saber lo que esperamos en un futuro cercano. </p>

    <div id="algo">mucho contenido</div>


    <h5>[correo eliminado]</h5>

    <h2>Liceo Polivalente Hernando de Magallanes</h2>
    <h3>Francisco Sampaio #580</h3>
    <h4>Teléfono (061)580007</h4>

    </div>



    <!--<div id="pie">
    <div id="pieuno">
    <ul>
  • Foro
  • Contacto
  • Enlaces

    </div>
    <div id="piedos">Noticias</div>
    <div id="pietres">
    <ul>
  • Directorio
  • TopSite
  • Mapa de la Web

    </div>-->


    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Tal vez es en la ubicación donde me equivoqué, porque no me resulta, ayudenme por favoooorrrr!!!

    GRACIAS
  • en hoja aparte????

    en la pagina que me diste de ejemplo

    es en el mismo documento

    solo que las capas tienen scroll
    si, es dentro de una misma hoja, pero con lo que agregue no me resulta, aparace el texto como si fuera parte del parrafo enterior, pero no dentro del cuadrito como yo quiero, asi con scroll y todo...
    explicame como le hago porfis....
    Muchas Gracias
    hola

    aqui

    #algo {overflow: auto;}

    agregale 20px de alto mas 20px de ancho

    (solo es un ejemplo)

    luego en el html

    <div id="algo">mucho contenido</div>

    debes ponerle mucho contenido, algo como asi

    <div id="algo">mucho contenido mucho contenido mucho contenido mucho contenido mucho contenido mucho contenidomucho contenidomucho contenido mucho contenido mucho contenido mucho contenido mucho contenido mucho contenido mucho contenido mucho contenido mucho contenido</div>

    saludos
    YANETH MUCHAS GRACIAS ERES MI IDOLA, NO SE QUE HARÍA SIN TU AYUDA...
    MUCHAS GRACIAS NUEVAMENTE...
    jeje

    por eso decia

    mucho contenido

    jajajaja

    ya me parecia raro que no funcionara

    saludos
    me sale esto en una plantilla pero no puedo agragar los apartados me ayudan si

    Puedes copiar toda la carpeta 01 y pegarla con el nombre seccion-02, 03, 04 y 05. Haz lo mismo con la carpeta seccion-06, copiala otras 4 veces nombrandolas como seccion-07, 08, 09 y seccion-10. Una vez hecho esto completa el contenido a tu gusto.

    Dentro de cada sección hay apartados y subapartados.

    Para crear una página tipo apartado por ejemplo de la sección 06, simplemente abre la página introducion.html, le pones el contenido que desees y la guardas como "apartado-B", -C", etc. Si la página que has creado corresponde a un subapartado, la guardas con el nombre "subapartado-B", etc, etc.

    Si mirás al principio del código HTML de cada página creada, verás como entre <STYLE> y </STYLE> puedes cambiar el estilo negrita del apartado, sección o subapartado de esa página concreta. Solo cambia las letras a lo que corresponda. Si es la Sección 01, Apartado A, Subapartado D tendrá que quedar así:

    #tema01 A, .apartado-a, .subapartado-a {FONT-WEIGHT: bold}

    Puedes eliminar apartados y subapartados e incluso añadir nuevos. Consulta en Foro si no consigues hacerlo solo. No olvides entrar en el Foro, en la sección "Plantillas" para consultar todo lo que necesites relativo a las plantillas. Allí encontrarás más información para ayudarte en esto.

    Un abrazo y muchos ánimos!