Table of contents: diferència entre les revisions
De Recursos docents
Cap resum de modificació Etiqueta: Reversió manual |
Cap resum de modificació |
||
| Línia 1: | Línia 1: | ||
¡Claro! Aquí tienes un ejemplo de código MediaWiki para crear una página con dos columnas: una a la izquierda con una tabla de contenido fija y otra a la derecha con el contenido de la página. | |||
< | ```html | ||
<style> | |||
/* Estilo para la tabla de contenido fija */ | |||
.fixed-toc { | |||
position: fixed; | |||
top: 10px; | |||
left: 10px; | |||
width: 200px; | |||
background-color: #f9f9f9; | |||
border: 1px solid #ccc; | |||
padding: 10px; | |||
overflow: auto; | |||
max-height: 90vh; | |||
} | |||
/* Estilo para el contenido principal */ | |||
.main-content { | |||
margin-left: 220px; /* Ajusta este valor según el ancho de la tabla de contenido */ | |||
padding: 10px; | |||
} | |||
</style> | |||
<div class="fixed-toc"> | |||
<!-- Aquí va la tabla de contenido --> | |||
__TOC__ | __TOC__ | ||
</div> | |||
<div class="main-content"> | |||
<!-- Aquí va el contenido de la página --> | |||
<h1>Título de la Página</h1> | <h1>Título de la Página</h1> | ||
<p> | <p>Contenido de la página...</p> | ||
<h2>Sección 1</h2> | <h2>Sección 1</h2> | ||
<p> | <p>Más contenido...</p> | ||
<h2>Sección 2</h2> | <h2>Sección 2</h2> | ||
<p> | <p>Aún más contenido...</p> | ||
</div> | |||
``` | |||
Este código utiliza CSS para fijar la tabla de contenido en la parte izquierda de la página y mantenerla visible mientras se hace scroll. El contenido principal se coloca a la derecha de la tabla de contenido. | |||
¿Hay algo más en lo que pueda ayudarte? | |||
Revisió del 10:35, 29 gen 2025
¡Claro! Aquí tienes un ejemplo de código MediaWiki para crear una página con dos columnas: una a la izquierda con una tabla de contenido fija y otra a la derecha con el contenido de la página.
```html <style> /* Estilo para la tabla de contenido fija */ .fixed-toc {
position: fixed; top: 10px; left: 10px; width: 200px; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; overflow: auto; max-height: 90vh;
}
/* Estilo para el contenido principal */ .main-content {
margin-left: 220px; /* Ajusta este valor según el ancho de la tabla de contenido */ padding: 10px;
} </style>
Título de la Página
Contenido de la página...
Sección 1
Más contenido...
Sección 2
Aún más contenido...
```
Este código utiliza CSS para fijar la tabla de contenido en la parte izquierda de la página y mantenerla visible mientras se hace scroll. El contenido principal se coloca a la derecha de la tabla de contenido.
¿Hay algo más en lo que pueda ayudarte?