Hoja de estilos y tabla

Ya me siento un poco pesada con tanta pregunta jaja pero necesito solucionar esto.

Yo hice una hoja de estilo en la cual definí las tablas... todo perfecto, quedó hermoso.
Ahora el tema es el siguiente... quise hacer una nueva hoja de estilo para definir el asunto de los colores de los links, el espacio, la sangría, tipo de letra, tamaño, etc... lo puse y no me dí cuenta que eso iba a afectar a toda la página, por lo cual la celda de la derecha donde tengo la lista con la información (que en realidad son imágenes), que pueden haber visto si vieron mi web, y con el tema del margen, se me corrían las imágenes y la columna quedaba de un tamaño que yo no quería.

A continuación les muestro mis dos hojas de estilo, la de la tabla, y la de las propiedades:

table.ancho99{width:100%}

td.a1{ background-color: black ; width: 100px}
td.a2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.a3{ background-color: black ; width: 100px}

td.b1{ background-color: black ; width: 100px}
td.b2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.b3{ background-color: black ; width: 100px}

td.c1{ background-color: black ; width: 100px}
td.c2{ background-color: black ; width: 575px ; text-align: justify ; color: #FFFFFF }
td.c3{ background-color: black ; width: 190px ; text-align: center ; color: #FFFFFF }
td.c4{ background-color: black ; width: 100px}

td.d1{ background-color: black ; width: 100px}
td.d2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.d3{ background-color: black ; width: 100px}


----

/* Esto es mi hoja de estilo */

BODY { background-color:black ; }

A:link { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:visited { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:hover { font-weight: bold ; color: green ; }

A:active { font-weight: bold ; color: silver ; }

P { font-family: ae_AlYermook ; font-size: 16px ;

text-align:left : text-indent: 20px ; margin: 7px 8px 7px 8px ; }

/* Fin de mi hoja de estilo */

----



Alguien me ayuda a poner las propiedades de la última hoja, en la hoja de estilo de las tablas para que se apliquen sólo a las columnas que yo quiero y no a toda la página?

Muchísimas gracias.

todo esto solo afecta a los links

A:link { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:visited { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:hover { font-weight: bold ; color: green ; }

A:active { font-weight: bold ; color: silver ; }


en cuanto a esto:

P { font-family: ae_AlYermook ; font-size: 16px ;

text-align:left : text-indent: 20px ; margin: 7px 8px 7px 8px ; }


se lo puedes definir directamente a las tablas que lo desees

asi, controlas a que tablas le cambias el tipo y el tamaño de la letra.

tal como lo pusiste aqui:


td.a2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }


pero no creo que necesites dos hojas de estilo, en una misma puedes hacerlo todo, solo es necesario que separes las cosas, para que las puedas identificar.

saludos

O sea que yo puedo hacer una sola hoja de estilo que quede asi? (en negrita los ajustes):


table.ancho99{width:100%}

td.a1{ background-color: black ; width: 100px}
td.a2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.a3{ background-color: black ; width: 100px}

td.b1{ background-color: black ; width: 100px}
td.b2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.b3{ background-color: black ; width: 100px}

td.c1{ background-color: black ; width: 100px}
td.c2{ background-color: black ; width: 575px ; text-align: justify ; color: #FFFFFF ; font-family: ae_AlYermook ; font-size: 16px ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }
td.c3{ background-color: black ; width: 190px ; text-align: center ; color: #FFFFFF }
td.c4{ background-color: black ; width: 100px}

td.d1{ background-color: black ; width: 100px}
td.d2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF ; font-family: ae_AlYermook ; font-size: 16px ; text-indent: 0px ; margin: 7px 8px 7px 8px ; }
td.d3{ background-color: black ; width: 100px}

A:link { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:visited { font-weight: bold ; color: silver ; text-decoration: underline ; }

A:hover { font-weight: bold ; color: green ; }

A:active { font-weight: bold ; color: silver ; }

asi es, se lo puedes indicar asì a cada una de las tablas
mira, te muestro un ejemplo mio

td.a3 { background:url("objetos/titulo.jpg") white; font: bold 14px Arial; padding: 0px ; background-repeat:no-repeat; }

y si necesitas agregarle aun mas

puedes seguir inicandoselo

saludos

Miles de gracias! has sido de mucha ayuda =D

que bueno que pudiste arreglarlo

cualquier cosa por aqui andamos


saludos

Ya que estamos con el tema de las tablas y los estilos... quiero agregarle algunos espacios más a las tablas, en realidad, dividir las celdas el más columnas y filas, pero que no se genere como si hiciera una nueva... en fin, eso sé cómo hacerlo, lo que no sé cómo hacer es representarlos en la hoja de estilo... porque para la tabla que tenía antes era td.a1 y así con todas, ahora con estos agregados, cómo los ubico en la hoja para cambiarle las propiedades?

Para que vean este es el viejo código:

<tr>
<td class="b1"></td>
<td class="b2"></td>
<td class="b3"><div align="center" class="style3"></div></td>
<td class="b4"><div align="center"></div></td>
</tr>

Y este es el nuevo codigo, cuando le agrego las nuevas divisiones (para que entiendan de lo que hablo=:

<tr>
<td rowspan="2" class="b1"></td>
<td class="b2"><div align="center" class="style3"></div></td>
<td rowspan="2" class="b2"></td>
<td rowspan="2" class="b2"></td>
<td rowspan="2" class="b3"><div align="center"></div></td>
</tr>

Saludos,

Veo que vas bien y rápido! eso está bien. Espero que te esté gustando esto de los estilos. No es genial?

Vamos a ver. Puedes seguir definiendo estilos para esas nuevas celdas. Solo has de decidir qué nombre le vas a poner, y definir las caracteristicas que quieras en la hoa de estilo (en la misma que tenias, pero incluyendo estas nuevas celdas).

Se haría así.

1.- Decides que nombre darle a los estilos de esas nuevas celdas. Recuerda que NUNCA pueden comenzar por un número! Por ejemplo:

<tr>
<td rowspan="2" class="b1"></td> (esta será la b11)
<td class="b2"><div align="center" class="style3"></div></td>
<td rowspan="2" class="b2"></td> (esta será la b21)
<td rowspan="2" class="b2"></td> (esta será la b22)
<td rowspan="2" class="b3"><div align="center"></div></td> (esta será la b31)
</tr>

Le he puesto esos nombres siguiendo más o menos las coordenadas, es decir, las "a" eran la fila de arriba del todo. le "b" la siguiente, etc, etc. Dentro de cada fila le puse un número a cada una y ahora que cada una de esas las has dividido en otras, le pongo un número más.

Pero seguramente, ahora que le vas cogiendo el rollo, quizás prefieras ponerle nombres más apropiados para saber de un solo vistazo qué celdas son. Por ejemplo, en lugar de c1, puedes ponerle de nombre "menu", etc, etc. En ese caso recuerda, siempre en minusculas y sin espacios ni guiones, todo seguido para evitar problemas. Ah, y sin acentos ni simbolos raros...

Seguimos. Imaginando que le has puesto de nombre lo señalado en rojo arriba, bastará con abrir la hoja de estilos y acontinuación de la celda a la que pertenecen (si la nueva está incluida en a1, pones la nueva linea debajo de la definición de a1) pones esto:

table.ancho99{width:100%}
td.a1{ background-color: black ; width: 100px}
td.a2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.a3{ background-color: black ; width: 100px}
td.b1{ background-color: black ; width: 100px}
td.b11 {aqui pones los estilos que quieras}
td.b2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF }
td.b21 {aqui pones los estilos que quieras}
td.b22 {aqui pones los estilos que quieras}
td.b3{ background-color: black ; width: 100px}
td.b31 {aqui pones los estilos que quieras}
td.c1{ background-color: black ; width: 100px}
td.c2{ background-color: black ; width: 575px ; text-align: justify ; color: #FFFFFF ; font-family: ae_AlYermook ; font-size: 16px ; text-indent: 20px ; margin: 7px 8px 7px 8px ; }
td.c3{ background-color: black ; width: 190px ; text-align: center ; color: #FFFFFF }
td.c4{ background-color: black ; width: 100px}
td.d1{ background-color: black ; width: 100px}
td.d2{ background-color: black ; width: 765px ; text-align: center ; color: #FFFFFF ; font-family: ae_AlYermook ; font-size: 16px ; text-indent: 0px ; margin: 7px 8px 7px 8px ; }
td.d3{ background-color: black ; width: 100px}
A:link { font-weight: bold ; color: silver ; text-decoration: underline ; }
A:visited { font-weight: bold ; color: silver ; text-decoration: underline ; }
A:hover { font-weight: bold ; color: green ; }
A:active { font-weight: bold ; color: silver ; }

Tu código html ahora cambia, pues en class="XX" has de poner el nombre del estilo nuevo, es decir, quedaría así:

<tr>
<td rowspan="2" class="b11"></td>
<td class="b2"><div align="center" class="style3"></div></td>
<td rowspan="2" class="b21"></td>
<td rowspan="2" class="b22"></td>
<td rowspan="2" class="b31"><div align="center"></div></td>
</tr>

Haciendolo así, todo ha de funcionar bien. Lo que pasa es que estarás definiendo quizás cosas por duplicado. Es decir, si la celda b1 tiene de propiedad color azul, es absurdo definir el color azul de nuevo a las celdas que pertenecen a b1, pues ya quedan definidas. Solo hay que indicar color a las celdas que pertenecen a b1 cuando sea un color distinto al definido para b1. Me explico mejor...

Si b1 tiene asignado color azul y dentro de b1 tenemos b11 y b12, ambas quedan con color azul. Si nos vale ese color para ambas no es necesario volver a definirlo. Si en cambio la b11 queremos que sea azul y la b12 color rojo, solo será necesario definir en b12 el color rojo.

Se entiende? Si no, me lo dices y lo explico mejor.

Veo que poco a poco vais cogiendo nivel en CSS y creo que las lecciones se os van a quedar cortas! je je je. Voy a tener que hacer más lecciones de CSS más avanzadas... :roll:

Un saludo!

Me ha sido todo de muchísima ayuda! Miles de gracias!

Entendí todo a la perfección. Veremos cómo me sale cuando empiece a modificarlo.


Ya les había agradecido por existir? :wink:

Me estoy volviendo loca y creo que los estoy volviendo locos a ustedes también, pido disculpas. Y hago doble post porque si edito el anterior, entonces nadie notaría mi nueva duda.

Bien... hice todo lo que quería hacer, me quedó hermosa la estructura jaja pude aplicar todas las propiedades que quería... pero necesito saber si hay alguna forma de que una celda no afecte a la otra.

Paso a explicar lo que quiero decir con esto:

Ejemplo 1:

[contenido no disponible]


Ejemplo 2:

[contenido no disponible]


En el primer ejemplo el problema es que lo que escribo no puedo ponerlo más arriba que eso, no sé cómo hacer para que el texto no me quede tan abajo.

En el segundo ejemplo el problema es que al darle enter un par de veces al sector del contenido, el sector de la información de la derecha también se baja.

Hay alguna forma de solucionar estos dos problemas?

Gracias!

ok, no te preocupes tu pregunta toooodo lo que necesites ejejj

en este caso solo basta con ponerte dentro de la tabla que desees,

y abres propiedades, està en la parte de abajo parece una "i" dentro de un circulo ok
dice algo mas o menos asi:

Horiz_
Vert_

donde dice Vert_ ponle Superior

y problema solucionado


saludos

Ahora lo modifico y me fijo como queda... cualquier cosa si no funciona, volveré

Gracias!

Pues ya nos contarás.

Hey, y muchas gracias por colocar un enlace a ComoCrearTuWeb en tu sitio! Gracias gracias gracias! :wink:

Funciona perfecto! Muchas gracias!!

Y cómo no enlazarlos? Ustedes me ayudan, yo los ayudo :wink:

Genial Lucia, sigue así! :wink:

Sigo así y sigo preguntando jaja

Cómo hago para que al pulsar enter no se genere un espacio tan grande? Si se fijan en mi página en site>links entre el nombre de la página y el enlace sólo hay un enter, como si bajara a otro párrafo, y parece como si hubiese dejado un espacio, y no me gusta =S

solo manten pulsada la tecla
shift-enter y listo


saludos

Era más sencillo de lo que creía jaja

Gracias ;)