Problema con cargar 2 css

cabbav · #1 (**permalink**) 19/10/2010, 08:24

Hola tengo problemas con 2 css, me explico

en mi pagina cargo un css para un formulario hecho con una tablas y mas abajo tengo un include de una tabla que tiene su propio css, el problema es que el css que esta en la pagina que llamo me afecta al formulario hecho con tabla en mi pagina.
como puedo hacer para que esto no pase.

cristian_cena · #2 (**permalink**) 19/10/2010, 08:52

[I]Hola cabbav,

Las hojas de estilos en cascada trabajan con herencia de estilos. Por lo tanto, seguro que se te están superponiendo estilos.

lo mejor y mas rápido que puedes hacer es dar clases e id para no tratar los estilos de modo general como lo vienes haciendo:

entonces, veamos:

donde tenias:
HTML: <table>...
CSS: table{...estilos...}

debes poner:

HTML: <table id="mitabla">... ( o bien: <table class="mitabla">...)
CSS: #mitabla{... estilos ...} ( o bien: .mitabla{... estilos ...} ...)

¿y para que tomarse este trabajo?

porque de este modo tratamos con una id a un elemento en particular o bien con una class a un grupo de elementos, he aquí la ventaja ya que dejamos de tratar a las etiquetas html de modo general (p.ej: table{...estilos...}) para hacerlo de modo particular (p.ej: #mitabla{... estilos ...}). Y con ello controlas que no se te solapen los estilos.

Espero haber sido claro, si no fue así me avisas jeje.

cabbav · #3 (**permalink**) 19/10/2010, 13:36

hola cristian cena gracias por la respuesta, pero no funciono yo ya estoy llamando de esa forma a los css

voi a poner mi codigo
css
miestilo.css
.headerazul {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: small;
color: #FFFFFF;
background-color: #006699;
border: thin solid #003399;
font-weight: bold;
}
.tabla {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: small;
background-color: #EFE6CE;
border: 2px solid #666666;
font-weight: bold;
}

y lo llamo a mi pagina de esta forma

<style type="text/css">

</style>

y lo agrego en mi formulario así

<table width="690" height="167" border="0" class="tabla">

mas a bajo tengo un include

include('consultapie.php')

que llama a tabla.css

<link rel="stylesheet" type="text/css" href="../css/tabla.css" />

y lo agrega a la tabla asi

<div id= table>

codigo de tabla.css

#table { background:#FFFFFF;
border: 0px solid gray;
border-collapse:collapse;
color:#fff;
font:normal 12px verdana, arial, helvetica, sans-serif;
}
caption { border:1px solid #000000;
color:#000000;
font-weight:bold;
letter-spacing:20px;
padding:6px 4px 8px 0px;
text-align:center;
text-transform:uppercase;
}
td, th { color:#363636;
padding:.4em;
}
tr { border:1px dotted gray;
}
thead th, tfoot th { background:#045FB4;
color:#FFFFFF;
padding:3px 10px 3px 10px;
text-align:left;
text-transform:uppercase;
}
tbody td a { color:#363636;
text-decoration:none;
}
tbody td a:visited { color:gray;
text-decoration:line-through;
}
tbody td a:hover { text-decoration:underline;
}
tbody th a { color:#363636;
font-weight:normal;
text-decoration:none;
}
tbody th a:hover { color:#363636;
}
tbody td+td+td+td a { background-image:url('bullet_blue.png');
background-position:left center;
background-repeat:no-repeat;
color:#03476F;
padding-left:15px;
}
tbody td+td+td+td a:visited { background-image:url('bullet_white.png');
background-position:left center;
background-repeat:no-repeat;
}
tbody th, tbody td { text-align:left;
vertical-align:top;
}
tfoot td { background:#5C443A;
color:#FFFFFF;
padding-top:3px;
}
.odd { background:#fff;
}
tbody tr:hover { background:#99BCBF;
border:1px solid #03476F;
color:#000000;
}

y es el tabla.css del include que afecta al formulario de mi pagina cualquier cosa espero una solucion ;)

cristian_cena · #4 (**permalink**) 19/10/2010, 15:14

Hola cabbav:

Cita:

Iniciado por cabbav

y lo llamo a mi pagina de esta forma
<style type="text/css">

</style>

Es mejor que uses <link rel="stylesheet" type="text/css" href="../css/miestilo.css" /> prueba con eso.

Cita:

Iniciado por cabbav

y lo agrega a la tabla asi

<div id= table>

(Entiendo que al include lo metes dentro de <head><head>)
No olvides las comillas en <div id= "table"> ... ni el punto y coma final en include("...");

Si con esto no te funciona recuerda que existe "!important" para pisar estilos.
De esta manera, si siguen superponiéndose los estilos nada mas vas al estilo que desees que se imponga por sobre los demás y le aplicas !important.

Ejemplo:

#miId{color:red !important;}
<p id="miId">texto rojo</p>

Te pido disculpas por no leer en detalle el mensaje, es que ando con poco tiempo, espero te sirva la respuesta, un abrazo.

cabbav · #5 (**permalink**) 20/10/2010, 06:56

cristian_cena gracias por responder pero aun no me resulta, ahora puse el css dentro de la pagina que llamo y tampoco no se que pasa!!

cristian_cena · #6 (**permalink**) 20/10/2010, 08:41

Colga tu trabajo, mostranos la url y lo vemos.