Foros del Web » Creando para Internet » CSS »

confucion de styles en tablas

 Estas en el tema de confucion de styles en tablas en el foro de CSS en Foros del Web. h tengo un problema de styles no se como hacer que no afecten a otras tablas como por ejemplo tengo mi header y quiero ponerle ...
  #1 (permalink)  
Antiguo 25/07/2008, 17:39
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Pregunta confucion de styles en tablas
h tengo un problema de styles no se como hacer que no afecten a otras tablas como por ejemplo tengo mi header y quiero ponerle un celendario en un lado y lo pongo pero el css afecta mi head se hace grande y desacomoda el texto no habra un asolucion como un table o body o uso de estos escripts pero no se como van son los
<--?--> copie una pagina y vi su scrypt y tenia de estos para acomodar sus tablas y sus diceños lo digo porque le quite ese scrypt y se revolvio todo o hay otra manera de que el css no afecte mis otras tablas??
  #2 (permalink)  
Antiguo 25/07/2008, 18:16
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años
Puntos: 292
Respuesta: confucion de styles en tablas
Dices que el JS modifico los CSS ?

Cada elemento del mismo tipo o distinto (p, span, table, etc) puede ser identificado asi:

con id=" " (para casos particulares)
con class=" " (para casos generales)

Supongo que ese JS debe de tocar las tablas que tienen determinado class (ej: class="tablita")
Si queres que no toque una tabla, no uses la clase que hace que se vean afectadas.
__________________
Salu2!
  #3 (permalink)  
Antiguo 25/07/2008, 23:42
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: confucion de styles en tablas
no queda sigue afectando
  #4 (permalink)  
Antiguo 25/07/2008, 23:53
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: confucion de styles en tablas
muestra tu codigo men, para ver en donde ay que corregir...

como te dijo ITALICO lo mas logico es usar id o class para que solo modifique areas seleccionadas y no todo mmm algo deve aver que estas dejando pasar jeje
  #5 (permalink)  
Antiguo 26/07/2008, 13:21
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: confucion de styles en tablas
este es el headr

<html>
<style>
body{
background:url(carp/fund.png);
}
</style>
<body>
<tr><td>
<title>mi page</title>
<body>
<table width="90%" align="center" style="background:#F2F5FD; padding:4px; font-size:100%; margin-top:0.5em; border:1px solid #C7D0F8; -moz-border-radius:10px">
<tr>
<td width="58%" valign="middle">
<p><span style="font-size: 170%;line-height:1.1; margin-left:5px">Bienvenidos a <a href="" title="Wikipedia">iozk</a>,</span></p>
<p style="font-size:90%;margin-left:5px">hdfudn sdfifuspi spi</p>
<div class="plainlinks" style="margin-left:5px;font-size:90%"><a href="" title="Libro de visitas">Libro de visitas</a> <a href=".png" class="image" title=".png"><img alt="" src=".png" width="7" height="7" border="0" /></a> <a href=".png" class="image" title=".png"><img alt="" src=".png" width="7" height="7" border="0" /></a> <a href="" title="Contacto">Contacto</a> <a href=".png" class="image" title=".png"><img alt="" src=".png" width="7" height="7" border="0" /></a> <a href="" class="extiw" title="Donaciones">Donaciones</a></div>
</td>
<td align="right" valign="top" style="font-size:95%">
<p>dfds<br />
<b><a href="#" title="gf"><big></big>hfg</a></b>ghg</p>
</td>
</tr>
</table>
</body>
</td></tr>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link href="estilo.css" rel="stylesheet" type="text/css" />
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/menu8.css" type="text/css" />
<!--[if IE 6]><style>#menu ul li.nivel1 {margin-bottom:-1px}</style><![endif]-->
<!--[if IE 7]><style>#menu ul li.nivel1 {margin-bottom:-2px}</style><![endif]-->
</head>
<table width="90%" border="0" align="center" cellpadding="2" cellspacing="2" bgcolor="blue">
<div id="menu">
<ul>
<li class="nivel1 primera"><a href="#" class="nivel1">contacto</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">registrar</a></li>
<li><a href="#">login</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">foro</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">foro1</a></li>
<li><a href="#">foro2</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">galeria</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">videos</a></li>
<li><a href="#">musica</a></li>
<li><a href="#">fotos</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">computadoras</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">proging</a></li>
<li><a href="#">diseño</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">web</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->
<ul>
<li class="primera"><a href="#">verciones</a></li>
<li><a href="#">iozk</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</table>
<body class="">
<div id="globalWrapper">
<div id="column-content">
<div id="content">
<a name="top" id="top"></a>
<h2 class="firstHeading">bienvenidos a iozk</h2>
<div id="bodyContent">
<h3 id="siteSub">fd</h3>
<div id="contentSub"></div>
<table width="95%" align="center" style="background:#F2F5FD; padding:4px; font-size:100%; margin-top:0.5em; border:1px solid #C7D0F8; -moz-border-radius:10px">
<tr>
<td align="center" bgcolor="white" background='carp/fondz.png'><a href="InboxLight.aspx.htm">Bienvenido a iozk</a></td>
</tr>
</table>

</body>
</html>


este es el calendario

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Calendar</title>
<link href="calend.css" rel="stylesheet" type="text/css" />
</head>

<body>


<table id="calendar" cellspacing="0" cellpadding="0" summary="This month's calendar">
<caption><a href="#" title="previous month">&laquo;</a> March <a href="#" title="next month">&raquo;</a></caption>

<tr>
<th scope="col" abbr="Sunday" title="Sunday">S</th>
<th scope="col" abbr="Monday" title="Monday">M</th>
<th scope="col" abbr="Tuesday" title="Tuesday">T</th>
<th scope="col" abbr="Wednesday" title="Wednesday">W</th>
<th scope="col" abbr="Thursday" title="Thursday">T</th>
<th scope="col" abbr="Friday" title="Friday">F</th>
<th scope="col" abbr="Saturday" title="Saturday">S</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td class="today"><a href="#">6</a></td>
<td>7</td>
<td>8</td>
<td>9</td>
<td><a href="#">10</a></td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td><a href="#">13</a></td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
<td><a href="#">23</a></td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
<tr>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

<p><a href="styles2.css">&rarr; download stylesheet</a></p>


</body>
</html>

y el css del calendario

<style type="text/css">
body {
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
}

a {
color: #DF9496;
}

#calendar {
width: 141px;
padding: 0;
margin: 0;
border-left: 1px solid #A2ADBC;
font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
text-align: center;
background-color: #fff;
}

.nav, .nav a {
font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
}


caption {
margin: 0;
padding: 0;
width: 141px;
background: #A2ADBC;
color: #fff;
font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

th {
font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #616B76;
background: #D9E2E1;
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
border-top: 1px solid #A2ADBC;
}

.today, td.today a, td.today a:link, td.today a:visited {
color: #F6F4DA;
font-weight: bold;
background: #DF9496;
}

td {
border-right: 1px solid #A2ADBC;
border-bottom: 1px solid #A2ADBC;
width: 20px;
height: 20px;
text-align: center;
background: url(images/bg_calendar.gif) no-repeat right bottom;
}

td a {
text-decoration: none;
font-weight: bold;
display: block;
}

td a:link, td a:visited {
color: #608194;
background: url(images/bg_calendar.gif) no-repeat;
}

td a:hover, td a:active {
color: #6aa3ae;
background: url(images/bg_calendar.gif) no-repeat right top;
}
</style>
  #6 (permalink)  
Antiguo 27/07/2008, 10:55
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: confucion de styles en tablas
ps veamos amigo

Código HTML:
</body>
</td></tr>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link href="estilo.css" rel="stylesheet" type="text/css" />
<!DOCTYPE dentro de una trabla??? eso se define una sola vez y es lo primero que aparece en tu html

Código HTML:
<html>
<style>
body{
background:url(carp/fund.png);
}
</style>
<body>
body no lo definas mas de una vez no te que aparece dos veces en lo que pusiste y no dudo que aparesca mas en los css que no pusiste

Código HTML:
<table[B] width="90%" [/B]align="center" style="background:#F2F5FD; padding:4px; font-size:100%; margin-top:0.5em; border:1px solid #C7D0F8; -moz-border-radius:10px">
<tr>
<td [B]width="58%" [/B]valign="middle">
bien amigo tu estas usando porcentajes y notese que son muy amplicos 90% wow no culpes el css sino a ti que lo pusiste usa preferentemene para este tipo de areas valores absolutos como pixeles digamos unos 600px por decir un numero

y efectivamente como ya aviamos dicho debes usar id o class dentro de tu tabla del calendario tu lo tienes muy general el css de tu calendario dice
td{} y th{} si lo dejas asi siempre afectara a todo

pon en la tabla de tu calendario algo como <table class="calendario"> y en tu css define .calendario td{} con eso solo afectaras a tu calendario

otra amigo no te agarres a llamar hojas css a diestra y siniestra por todo el codigo aslo mas o menos a si:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<link href="estilo.css" rel="stylesheet" type="text/css" />
<head>
<title>Menu desplegable CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/styles1.css" type="text/css" />
<link rel="stylesheet" href="css/styles2.css" type="text/css" />
<link rel="stylesheet" href="css/styles3.css" type="text/css" />
para que puedas consultar mas rapido y sepas cual tiene prioridad asi no te complicas en estar vuscando en todo el codigo
  #7 (permalink)  
Antiguo 27/07/2008, 14:59
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: confucion de styles en tablas
sorprendente gracias Ag666
  #8 (permalink)  
Antiguo 27/07/2008, 15:20
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: confucion de styles en tablas
un incomveniente mas el calendario lo quiero debajo el menu css y va a dar a un lado y expande la pagina y no quiero que se vea asi como reparo ese error
  #9 (permalink)  
Antiguo 27/07/2008, 17:02
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: confucion de styles en tablas
no veo como pueda el calendario expander tu pagina, mmm que te parece si en lugar de poner el codigo aqui deja un link a tu sitio para poder ver como lo tienes montado.

si lo quieres abajo del menu solo pon un <br /> entre el menu y el calendario
  #10 (permalink)  
Antiguo 28/07/2008, 15:39
 
Fecha de Ingreso: mayo-2008
Mensajes: 499
Antigüedad: 15 años, 11 meses
Puntos: 1
Respuesta: confucion de styles en tablas
se ve asi mire http://i254.photobucket.com/albums/hh93/iozk/pg.png
  #11 (permalink)  
Antiguo 29/07/2008, 12:26
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: confucion de styles en tablas
mmm por como veo esa imagen tu no tienes nada que lo contenga lo tienes todo bolando ai jeje


1.-crea un <div> con ancho fijo unos 700px por decir
2.-dentro de este coloca cada elemento separado en <div>, el baner y el menu al 100% de ancho y tu calendario al mismo ancho de la tabla

no olvides ponerles float:left al baner y menu a tu calendario float:right

Ps: esto yo lo aria con <div> pero igual es cuestion de gustos y facilidad que tengas para usarlos .... talves puedas acer algo similar con una tabla cada elemento en una celda en lugar de un div
Última edición por ArturoGallegos; 29/07/2008 a las 12:48
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:53.