[Duda] Sobre el tutorial del tablón de anuncios en el template

Hola, acabo de hacer el experimento de colocar ese tablón de anuncios con los últimos temas, y al inicio quedó todo perfecto. Pero al momento que quise ampliar las dimensiones del tablón para adaptarlas al ancho del foro y modificar el asunto de las columnas, se me empezó a descuadrar todo.

Mi idea inicial era generar dos columnas para el menú rápido y el staff, por lo que para ir viéndole la ubicación, lo primero que hice fue reduplicar el código en el template.

Spoiler:

Lógicamente, esto me iba a generar dos columnas divididas, así que intenté unirlas para que quedaran bajo el mismo recuadro, pero mientras más intentaba modificar el HTML, peor quedaba. Se me descuadró todo unas diez veces y ya no supe cómo encuadrar ambas columnas bajo el mismo recuadro. Anteriormente, cuando practicaba con tablillas había podido lograr ese efecto, pero en el Template se me complica mucho porque me pierdo.

Así las tengo ahora, con el código como mostré más arriba:

Spoiler:

¿Cómo hago para modificar a gusto ese HTML en el template?

Gracias de antemano por leer.

Hola Shiki, primero que nada, como dice el tutorial, debiste hacer tu esqueleto o tabla HTML antes que cualquier cosa, dependiendo cuantas columnas necesites así añades o quitas, y después vas 'rellenando' cada una con la info que necesitas. Te recomiendo empezar de cero, y te paso un tip para editar de forma independiente cada columna que te puede servir.

Ejemplo:

Código:

<div class="Tablonsin">
<table><tbody><tr>
  <td class="Green">COLUMNA UNO</td>
  <td class="Green">COLUMNA DOS</td>
  <td class="Red">COLUMNA TRES</td>
  <td class="Blue">COLUMNA CUATRO</td>
  <td class="Red">COLUMNA CINCO</td>
</tr></tbody></table>
</div>

Código:

.Tablonsin {
  width:700px;
  height:200px;
  background:#fff;
  padding:10px;
  font-size:10px;
  font-family: arial;
}

td.Green { width: 100px; height:200px; padding:10px; background:#579743;}
td.Red { width:150px; height:200px; padding:10px; background: #E02130;}
td.Blue { width:200px; height:200px; padding:10px; background: #00CFEF;}

¡Hola de nuevo! Antes que nada, muchas gracias por responder mi duda. Debo admitir que me costó mucho trabajo y otros 20 mil intentos lograr adaptar el tablón a la nueva fórmula, ya que manejar códigos desde el template y CSS es algo distinto de lo que estoy acostumbrada.

Intenté elaborar primero el HTML, como sugeriste, pero no lo logré. No pude porque la forma en la que lo trabajo habitualmente es como se trabaja cualquier tablilla, pero en este caso al tener que repartir el código entre el CSS y el template directamente no me salió algo funcional. No sé si es por falta de práctica o porque para estos casos el HTML se trabaje de otra forma, pero tuve que editar directamente desde el template para medio acomodarlo.

Para el desastre que había hecho en un inicio, conseguí medio armar un tablón, pero ahora tengo otro problema.

Para colocar una barrita por encima de cada sección con el nombre de la misma, tuve que crear el siguiente código:

Spoiler:

El cual en el template coloqué así:

Spoiler:

Y se ve así:

Spoiler:

Pero para colocar la misma barrita sobre las otras secciones ya no supe cómo seguir, porque al querer usar el mismo método me salió esto:

Spoiler:

Lo único que cambié fue en el template, que dupliqué el código encima de la sección sobre la que debía mostrarse:

Spoiler:

En fin... no sé si lo de ahora se deba a que el código que hice para la barrita haya sido una aberración total, o si directamente me equivoqué en todo. Intenté ver dónde estaba el problema incluso trabajando desde el inspeccionador de elementos y tampoco pude hacer la gran cosa, así que ya no sé qué hacer. No puedo identificar el problema

De nuevo, gracias por la infinita paciencia que me dedican.

Vale, después de muchos intentos fallidos, finalmente descubrí la forma para acomodar el tablón más o menos como quería. El asunto principal logré resolverlo, el problema es que por algún motivo mi widget de últimos temas no tiene fondo y el texto dentro del mismo tampoco está centrado. Lo único que puedo modificar son los valores de la barrita del título, pero no el contenido como tal:

Spoiler:

El código lo tengo así para esa parte:

Código:

/* Ultimos temas */
.Rehab {
   width:240px;
   background:#ddd;
   color:#000;
   text-align:center;
   padding:5px;
   margin-top: -27px;
}

¿Qué puedo hacer ahora para añadirle un fondo y centrar el texto dentro del widget?

Hola respondiendo el primer post, la barrita que querias esta mal porque la pusiste afuera del tablon, por eso te sale encima y solo un pedacito porque tiene un width pequeño y lo pusiste encima de la tabla. Te paso este tutorial sobre tablas que podria servirte para entender mejor como estan compuestas y así usarlas en los tablones y demás códigos donde necesites hacer estructuras más fijas.

Y para el segundo post tienes que revisar que no estes repitiendo elementos con el mismo nombre y que quieras cambiarle cosas como color de fondo, etc a cada uno, para ese caso entonces necesitaras cambiarle el nombre a los divs poniendole uno diferente para cada cosa que quieres hacer.

Te recomiendo usar JSFiddle o Codepen para hacer tu código 'en vivo' y ver como lo vas modificando hasta que tome la apariencia que deseas.

Gracias por las observaciones De hecho, estos últimos cambios los pude hacer gracias a que trabajé en Codepen para no deformar el foro, y para hacer mejor la prueba esta vez copié y pegué únicamente el CSS y el HTML perteneciente al código del tutorial, tal cual lo has puesto como modelo, e incluso así me pasa lo mismo en Codepen. No hay forma de colocarle un fondo al widget de los últimos temas.

Spoiler:

Incluso revisé de nuevo el CSS previo que tenía para fijar el widget, que trabajaba en conjunto con los códigos del tutorial del tablón de anuncios, pero ningún cambio que le haga parece surtir efecto en el tablón como tal. Y en el resto de mi CSS en el foro tampoco tengo otra etiqueta con el mismo nombre del código de los últimos temas, así que realmente ya no sé qué más hacerle.

Me da pena tenerte respondiendo tanto rato una duda, pero ya no sé qué más intentar para que esto funcione ;---; ¿Qué me recomiendas para arreglar el tema del fondo del widget? Rehice de cero el tablón como cuatro veces, y desde la primera he notado que no aparecía el fondo. Pensé que ese era un "detalle" que se podía arreglar al final cuando terminara de montarlo, pero nada de lo que intenté funcionó. También intenté resaltando la propiedad de los últimos temas en el CSS como "!important", pero ni así lo tomó