Nunoni, já pensaste em adoptar um sistema com cms para o teu site? Tipo wordpress ou similar? Arranjavas um template responsive para o mesmo, e ficavas preparado para todas as plataformas modernas, sem precisares de grandes conhecimentos. Ah e com div’s em vez de tabelas.
Assim é muito confuso, estás a usar tables onde devias estar a usar apenas e só divs… e não é complicado no teu caso. Portanto o meu conselho é que refaças a estrutura toda… apenas com divs, esquece as tables, reserva-as apenas para partes do conteúdo principal das páginas.
pois, as tables têm que sair, só não sei ainda como, mas vou aprender! No entretanto, gostava de meter o site refeito online, estive a verificar e que se lixe, vou meter, é capaz de ter páginas com erros! Mas está muito mais limpo que antes. Cada página tinha 6 table para fazer o layout, passou a 3, e está tudo (ou quase) em css, quando antes era só inline styles, e estava tudo em px agora em %. E meti um style para handheld devices, não tenho um desse aifones nem tabuletas portanto não sei se fica bem, mas espero que sim 
Vai para o ar daqui a pouco
Obrigado a todos pelas ajudas, um velhote como eu tem muitos truques novos para aprender 
bem, claramente não percebo nada de como usar dimensões em percentagens em CSS; quando meto a resolução original que tinha fica tudo bem, assim que reduzo (para dispositivos móveis) fica tudo errado
Porque nao é essa a logica dos dispositivos moveis. Tu queres meter o teu site em escala para a parte móvel mas devias era reorganizar os conteúdos para que sejam apresentados de modo correcto e logico do ponto de vista de um smartphone. Por exemplo, múltiplas colunas num desktop devem passar a coluna unica numa skin para um dispositivo móvel, etc e etc.
Experimenta por aqui:
[url]http://alistapart.com/articles/return-of-the-mobile-stylesheet/[/url]
sim, isso é verdade sem dúvida! Mas quando tenho coisas em %, devia funcionar… em qualquer dos casos, é necessário ter em %, por causa do tamanho das imagens, para não ficaram maiores que o ecrã, etc etc!
Mudar radicalmente o estilo para handheld devices terá que ser um dos passos seguintes, mas primeiro tenho que perceber o que estou a fazer
Então começa por dominar os divs e deixares as tabelas de lado ;D… só com isso consegues também esquecer muito do que são percentagens e ficares-te por wrappers correctamente posicionados.
já precebi porque é que os meus widths estão a ser ignorados, é devido a palavras grandes demais (nomes de links, género “”), que são mais largos que a largura de uma coluna, e o que acontece é que a coluna expande para acomodar a palavra! Fui procurar e encontrei isto
word-wrap: break-word;
mas não funciona! Aliás, no Notepad++, a palavra “word-wrap” não muda de cor no ficheiro css, quando todas as outras palavras válidas ficam azul bold… o que estou a fazer mal?!
bem, a página de teste está toda em
, não ficou muito mal mas tem uns problemazitos, a camisola deixou de estar numa linha, ficou cada coisa no seu lugar, suponho que é o género de coisa que tenha de ser feito com css 
há mais problemas, como falta uma barrinha branca no topo, e os créditos no fim ficaram fora de sítio
bem, o site todo está reorganizado, com 3 tabelas a fazer o layout, e uma tabela a 3 colunas por cada camisola. Acho que está a funcionar correctamente também para os mobiles, mas não fui ver 400 e tal páginas! E só “vi” em simuladores, porque não tenho um desses telefones maricas, eu uso o telefone para telefonar
Isso de div, vamos ver, a minha primeira tentativa não resultou grande coisa, e pelo que vi não sei se será muito fácil passar de table para div com substituições automáticas, vamos ver.
No entretanto, a minha pergunta é se numa linha de uma tabela com 3 elementos lá dentro (ou seja, uma camisola; os 3 elementos são o texto, o emblema, e a camisola), que normalmente fica tudo na mesma linha, se é possível com css passar para cada um dos 3 elementos não na mesma linha mas sim uns por cima dos outros (para ficar só uma coluna!)
O código actual é este (simplificado):
Phichit FC
No fundo, há maneira de transformar uma linha de uma tabela com 3 colunas, para coluna simples?! Sem mexer na tabela em si, claro, para continuar a funcionar normalmente nos ecrãs normais.
bem, lentamente lentamente está a melhorar; já consigo fazer uma camisola com
não consigo é alinhar o texto verticalmente!
como sempre no mesmo sítio:
vertical-align não funciona em texto em divs! Só funciona em texto se for em tables!
Não percebo… onde está o erro?
o texto
Sporting Clube de Portugal
De 1955/56 a 1964/1965. Camisola do Sporting alternativa. Era comum camisolas passarem de jogador para jogador de ano para ano. Esta acabou com o Bastos, mas possivelmente não foi usada por ele, mas sim por jogadores dos anos 50 e 60
Com agradecimentos à Sra. D. Joana Pessoa
não está alinhado ao centro da caixinha, está alinhado ao topo; aqui, como é muito texto nota-se pouco, mas quando é só o nome do clube e ano ou assim, fica muito feio, tudo em cima e espaço verde na parte de baixo! Eu queria alinhar o texto de modo a ficar no centro (vertical) na caixa verde. O vertical-align, como disse, não funciona!
Experimenta ver aqui:
[url]http://webdev-il.blogspot.se/2011/04/how-to-make-multiple-div-columns-expand.html[/url]
Ah, e experimenta usar o clear:both no div imediatamente abaixo desse das 3 colunas.
fixe, tem umas ideias boas! Mas não ajuda a centrar verticalmente o texto, a não ser talvez o 4. The CSS display:table method que não funciona nos IE antigos, coisa que não me preocupa, acho que neste momento o verdebranco já não funciona bem no IE7! Quem tiver que mude :mrgreen:
Paracelsus, resultou! E até funciona no IE8!!! 
[url]verde branco - Sporting Clube de Portugal - camisolas
Só falta resolver um problema, que é no topo, entre o header e a linha verde de cima é para ficar uma tirinha branca, enquanto que agora está tudo a verde! E não devia ^-^
Por baixo da bandeirinha nunoni?
Já agora coloca a imagem do header também dentro de um div.
Fazeres horizontal rule com css:
div.horizontalRule {
min-height: 1px;
clear:both; width:100%;
border-bottom:1px solid #d1d1d1;
height:1px; padding-top:5px;
margin-top:5px;
margin-bottom:5px;
}
Crias um div com a class.
Obrigado!!!
resulta mas por forma indirecta! Meti
.td_h1_white{
width: 100%;
height:1px;
background-color: #FFFFFF;
}
nota o height 1 pixel! A barrinha que agora fica a branco, antes estava a verde! Sem este pixel, volta a ficar verde. Metendo 15px, fica com 30 px a branco, 15 que estão lá sempre mais os 15 que dou. Ou seja, não sei porquê, há sempre 15 px, que são verdes se não meter mais nada, e brancos se meter um bocadinho de branco.
mas resulta :great: