• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Clicksharing

Evitar o estilo em certas tabelas

18 mensagens neste tópico

Tenho um .CSS que estou a construir, e coloquei este estilo:

table  { border-collapse: collapse; border-spacing: 0; }

td, th { padding-left: 5px;

padding-right: 5px;

padding-top: 2px;

padding-bottom: 2px;

margin: 50px;

}

Mas não quero que ele se ajuste a 2 tabelas especificas.. Como é que eu impeço que essa tabela tome esses estilos? Como é que lhe posso dar outros estilos sem afectar as demais?  :hmm:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Outra coisa, o comando 'border-spacing' não funciona no IE 6 nem no Firefox 2???

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se queres que o css seja só para algumas tabelas, em vez de teres table definido directamente no css, define uma class e atribui essa class a todas as tabelas que te interessa... as que não tiverem a class ficam com as configurações normais...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

se queres que o css seja só para algumas tabelas, em vez de teres table definido directamente no css, define uma class e atribui essa class a todas as tabelas que te interessa... as que não tiverem a class ficam com as configurações normais...

Não posso fazer isso dessa forma, quero que o design do site esteja dependente somente do .CSS

Uma vez vi uma forma em que podiamos colocar uma identificação nas tags HTML e depois usa-las no CSS pra identificar um determinado objecto e configura-lo sem influênciar os outros.

Ja tentei procurar, mas não sei pelo que procurar. :S

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ou não estou a perceber o que queres ou então foi isso mesmo que eu escrevi...

no css crias, por exemplo, .tabelaformatada { text-align: center; font-size: 1.5em;} e na tag da tabela que queres diferente é só colocares <table class="tabelaformatada">

para alterar as coisas na tabela basta mexeres no css...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois... podes dar um id à tabela e fazer do mesmo processo... de outra forma não tens hipotese...

Podes fazer algo do género se as tables estiverem no mesmo div (ou outro...) mas tables no mesmo div sem diferenças no id ou na class não me parece que as possas diferenciar :thumbsup:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ou não estou a perceber o que queres ou então foi isso mesmo que eu escrevi...

no css crias, por exemplo, .tabelaformatada { text-align: center; font-size: 1.5em;} e na tag da tabela que queres diferente é só colocares <table class="tabelaformatada">

para alterar as coisas na tabela basta mexeres no css...

Ou se o que queres é ter duas tabelas que NÃO são formatadas... usas .tabelaNaoFormatada { }  :thumbsup:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

Eu estou com um problema, semelhante no qual existe a sobreposição de estilos, já ando às voltas com isto à algum tempo, mas com pouco resultados. Se alguém me conseguir ajudar, ou dar ideias para resolver isto, por favor diga-me.

Deixo aqui a situação, tenho um menu horizontal que é "construído" com recurso a uma LIST, e depois tenho um menu vertical que também usa uma List. Acontece que o menu vertical fica com propriedades da Horizontal! o que não é o pretendido.

Aqui fica o código CSS para o menu horizontal:

#navcontainer ul, li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/back.png) repeat-x 140px;
font: 10px verdana, sans-serif;
text-align: center;
line-height: 30px;
}

#navcontainer a
{
color: #ffff00;
text-decoration: none;
display: block;
width: 140px;
}

#navcontainer li#active {
background: url(images/back_hover.png) repeat-x 140px;
}
#navcontainer a:hover {
background: url(images/back_hover.png) repeat-x 140px;
}


e este é o CSS do menu Vertical:

#navcontainer2 { margin-left: 30px; }

#navcontainer2 ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer2 li { margin: 0 0 1px 0; }

#navcontainer2 a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer2 a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

#navcontainer2 ul ul li { margin: 0 0 1px 0; }

#navcontainer2 ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer2 ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}


Para fazer o Menu Horizontal, basta isto:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="index.php" id="current">Principal</a></li>
<li><a href="op1.php">Opcao1</a></li>
<li><a href="op2.php">Opcao 2</a></li>
<li><a href="op3.php">Opcao 3</a></li>
<li><a href="op4.php">Opcao 4</a></li>
</ul>
</div>


E o menu vertical:

 <div id="navcontainer2">
<ul id="navlist2">
<li><a href="#">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

Digam-me se conseguem entender e dar dicas para resolver o problema.

Agradeço desde já as possíveis respostas.

Fiquem bem,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

luboc, no css do menu horizontal, muda a linha #navcontainer ul, li para .ulh, .lih e no html do 1º menu altera para

<ul class="ulh">
<li class="lih" id="active"><a href="index.php" id="current">Principal</a></li>
<li class="lih"><a href="op1.php">Opcao1</a></li>
<li class="lih"><a href="op2.php">Opcao 2</a></li>
<li class="lih"><a href="op3.php">Opcao 3</a></li>
<li class="lih"><a href="op4.php">Opcao 4</a></li>
</ul>

assim já ficam independentes um do outro...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Outra coisa, o comando 'border-spacing' não funciona no IE 6 nem no Firefox 2???

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Outra coisa, o comando 'border-spacing' não funciona no IE 6 nem no Firefox 2???

Evitas de fazer repost. Deve funcionar em todos.

.blas {
border-spacing:13px;
}

EDIT: Pelo que vi aqui, o IE não suporta a propriedade e os browsers da Mozilla recentes suportam todos. :thumbsup:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

luboc, no css do menu horizontal, muda a linha #navcontainer ul, li para .ulh, .lih e no html do 1º menu altera para

<ul class="ulh">
<li class="lih" id="active"><a href="index.php" id="current">Principal</a></li>
<li class="lih"><a href="op1.php">Opcao1</a></li>
<li class="lih"><a href="op2.php">Opcao 2</a></li>
<li class="lih"><a href="op3.php">Opcao 3</a></li>
<li class="lih"><a href="op4.php">Opcao 4</a></li>
</ul>

assim já ficam independentes um do outro...

Obrigado, irei tentar isso.

Cumprimentos,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Olá,

A indicação de marinheiro não funcionou, mas andando às voltas com isto, a solução é:

MENU HORIZONTAL

ul.navcontainer li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/back.png) repeat-x 140px;
font: 10px verdana, sans-serif;
text-align: center;
line-height: 30px;
}

ul.navcontainer a
{
color: #ffff00;
text-decoration: none;
display: block;
width: 140px;
}

ul.navcontainer li#active {
background: url(images/back_hover.png) repeat-x 140px;
}
ul.navcontainer a:hover {
background: url(images/back_hover.png) repeat-x 140px;
}

Depois, na página coloca-se:

<div>
<ul class="navcontainer">
  <li id="active"><a href="index.php">Principal</a></li>
  <li><a href="op1.php">Opcao 1</a></li>
  <li><a href="op2.php">Opcao 2</a></li>
  <li><a href="op3.php">Opcao 3</a></li>
</ul>
</div>

E assim consegue-se que o Menu Vertical também esteja correcto.  :thumbsup:

Cumprimentos,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

aqui foi a unica alteração que fiz e fiquei com os dois menus a funcionar correctamente...

tens aqui o código como eu o tenho e estão os dois menus a funcionar independentes um do outro (só alterei as imagens de background para cores e coloquei uma div com clear:both entre os dois menus para ficar um por baixo do outro)

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<style type="text/css">
.ulh, .lih
{
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: block;
  float: left;
  background-color:#00f;
  font: 10px verdana, sans-serif;
  text-align: center;
  line-height: 30px;
}

#navcontainer a
{
color: #ffff00;
text-decoration: none;
display: block;
width: 140px;
}

#navcontainer li#active {
  background-color:#f00;
}
#navcontainer a:hover {
  background-color:#0f0;
}

#navcontainer2 { margin-left: 30px; }

#navcontainer2 ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer2 li { margin: 0 0 1px 0; }

#navcontainer2 a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer2 a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

#navcontainer2 ul ul li { margin: 0 0 1px 0; }

#navcontainer2 ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer2 ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<div id="navcontainer">
<ul class="ulh">
<li class="lih" id="active"><a href="index.php" id="current">Principal</a></li>
<li class="lih"><a href="op1.php">Opcao1</a></li>
<li class="lih"><a href="op2.php">Opcao 2</a></li>
<li class="lih"><a href="op3.php">Opcao 3</a></li>
<li class="lih"><a href="op4.php">Opcao 4</a></li>
</ul>
</div>
<div style="clear:both">
<div id="navcontainer2">
<ul id="navlist2">
<li><a href="#">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</BODY>
</HTML>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Oi,

Curiosamente comigo não deu! Tenho o IE6.x e o Firefox 2.x, não sei se tem alguma influência.

A única situação que não tinha colocado era: <div style="clear:both">.

Fica então para todos os que visitarem este Tópico duas alternativas para a mesma situação!

Cumprimentos a todos,

LuBoc

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o clear foi só para que o 2º menu ficasse por baixo do outro em vez de ficar ao ladoo :thumbsup:

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora