Dúvida de CSS

Vê se resulta melhor como está em cima. Div’s vazios têm um comportamento estranho conforme o browser.

errr… onde?

ah já vi! :great:

bem, em qualquer dos casos, funciona, e já vi o que fazer com o css mobile para passar de ter a camisola com o texto e fotos na mesma linha, para ficar em coluna única.

o problema agora é mudar tudo! Está tudo em nested tables, é uma mudança de estrutura grande, não tenho a certeza que seja possível com replace all em todo o lado… vamos ver.

Isso realmente é uma grande trabalheira, por isso te perguntei no outro dia se já pensaste em utilizar um cms, tipo o Wordpress, já com um template responsive e até eventualmente com versão mobile. É que se vais ter essa trabalheira ficavas com algo actual e principalmente com muita capacidade ao nível de evolução. :great:

Nunoni, acho que o que está a forçar os 15px no branco é o h2 que envolve a imagem do header, experimenta retirá-lo e o
também.

É o H2 do header… experimenta tirá-lo e fica bem, ou meter um H1 com um CSS diferente do H2.

Daí a necessidade de se trabalhar com templates e não código individual para cada página. :stuck_out_tongue:

:stuck_out_tongue:

o verdebranco vai fazer 3 anos daqui por dias, há 3 anos atrás eu percebia tanto de html como de chinês!

Mas já agora; isso dos templates não sei como poderia funcionar, tenho páginas muito diversas, há algumas “chapa 1”, mas mesmo assim não é como no wordpress que tens aquilo e é aquilo, com pouca possibilidade de sair do template. Em princípio do pouco que entendo o equivalente é o css, em que se a página estiver feita para isso mudo o estilo e muda tudo.

Mas o que eu gostava era, para meter uma camisola em vez de por ex. ter este código todo

[b]Texto1[/b]

[b]Texto2[/b]

[b]Texto3[/b]

[b]alt1[/b]
[b]alt2[/b]

Tivesse apenas que meter género

[b]Texto1[/b] [b]Texto2[/b] [b]Texto3[/b] [b]name1[/b] [b]alt1[/b] [b]id1[/b] [b]fig1.jpg[/b] [b]fig2.jpg[/b] [b]name2[/b] [b]alt2[/b] [b]id2[/b] [b]fig3.jpg[/b] [b]fig4.jpg[/b]

nunoni, os templates servem para te facilitar a vida e estabelecer um padrão de coerência ergonómica no site. No caso do wordpress (o wordpress.org e não o .com utilizado nos blogs), ao contrário do que tu pensas, podes criar templates personalizados para cada tipo de conteúdo ou página. Olhando rapidamente para o verde e branco, não tenho dúvidas de que um template de portfolio seria o adequado às tuas necessidades e isto não significa que não pudesses posteriormente criar templates diferentes para páginas específicas. Não existe qualquer limite no que podes construir através do wordpress pois tens o total controlo dos ficheiros que utilizas e um codex poderoso para simplificar as soluções para as tuas necessidades. Apesar de ter partido de um sistema de blogs, o wordpress.org é hoje uma framework para desenvolvimento de websites.

Tenta por exemplo imaginar o teu site neste template (com o aspecto gráfico do verde branco claro):

[url]http://themeforest.net/item/hi-creative-portfolio-wordpress-version/full_screen_preview/1587333[/url]

E falamos de um template responsive. É só um exemplo.

Pode parecer complicado, mas tendo em conta que durante 3 anos andaste às “cabeçadas” com tabelas… :mrgreen:

Além disso, fica muito mais simples de actualizar fruto de um backend muito simples e intuitivo. De resto, se necessitares de ajuda inicialmente, estás à vontade.

Edit: peço desculpa mas o exemplo não era responsive, este sim [url]http://luiszuno.com/themes/wp-simpler/[/url]

não andei às cabeçadas, limitei-me a fazer copy paste de código que não compreendia sem pensar duas vezes!!! :slight_smile:
Agora a questão é optimizar para mobiles, e aí tenho que me ver livre das tabelas!

O Wordpress conheço bem, aliás tenho um site em wordpress (pro, é pago, com acesso às funções todas):

[url]http://empirewithoutemperor.sitedeautor.com/?page_id=171[/url]

o root é um blogue associado, mas em que escrevo muito pouco porque não tenho tempo

Em qualquer dos casos a aparência é de uma página normal da net e não de um blogue.

Transferir o verdebranco é impensável. São umas 420 páginas html, com umas 2300 camisolas (na verdade, metade disso, porque tenho inglês/português e por vezes ainda página de novidade).

Links internos são milhares e milhares.

Demorava meses! Não, neste momento tenho o verdebranco.net e até estou satisfeito, e quando tiver tudo limpinho em CSS, vai-se tornar mais fácil alterar tudo sem demasiado trabalho!

:great: Sendo assim, já cá não está quem falou. 8)

a ajuda aqui tem sido muito importante, espero que quem cá falou continua por cá a ajudar! :beer:

o http://empirewithoutemperor.sitedeautor.com tem um fundo com uma cor linda, fui eu que escolhi :slight_smile:

Claro que sim… para ambas. :great:

btw, interessante leitura (só li as conclusões e dificilmente no próximo “século longo” terei tempo para o resto) :great:

escrito há 13 anos, continua original, e continua correcto tanto quanto eu entenda. Mas é um pincel ler, excepto para profissionais da coisa :slight_smile:
Agora o Long 20th Century do Arrighi, aconselho a quem tiver gosto por história e sua interpretação, dá trabalho a ler mas é muito recompensador!

Nunoni,

Quanto ao site do Empire… acho que poderias adaptar ao verde e branco… com o menu a descer para as várias secções…

Isto era:

Secção 1
1.1
1.2
1.3

Secção 2
2.1
2.2

Seria em vez de secção talvez nas décadas

sim, podia e provavelmente ficava melhor!

O problema é passar milhares de fotos, com milhares de textos, milhares de links milhares de âncoras SEO em todo o lado (alt, title, etc etc). E claro, perder os backlinks todos que o verdebranco já tem!

Simplesmente, ao fim de três anos, é impossível! Ou melhor, possível é, mas era 6 meses de trabalho…

Vou-me ficar pelos div + CSS, acho que não tenho outro remédio! Está “quase” pronto, andei a usar o “replace in all files” que nem um louco, não fez demasiadas asneiras, estou a ver as páginas todas uma por uma, algumas ficaram, desformatadas, em geral é um

aqui ou um
ali fora do sítio, e um ou outro e que sobrou vá-se lá saber como :slight_smile:

Há algumas coisas que ainda não estão muito bem, mas para já assim que tiver a maioria dos erros corrigidos meto a página on line e depois faço o fine tuning.

bem, triplo salto mortal à retaguarda! Estou a fazer o upload to site transformado em div. Não testei tudo, e ainda sobram algumas tabelas, e a parte do mobile hoje descobri que ainda tenho que aprender muita coisa, por causa daqueles telemóveis com ecrâs de 3 polegadas e 1200 de largura…grande chatica, não sei bem o que fazer aí!

ah, ainda não adaptei o CSS mobile aos div!

bem, está tudo a funcionar acho eu, mas um amigo diz que as camisolas ficaram desformatadas no seu desktop, e ontem vi em dois iphones (um 4 e um 5) e as camisolas pura e simplesmente não se vêm! O html é isto:

Texto1

Texto2

Texto3

(logo do clube)
(imagem da camisola)

o css desktop faz com que se veja como antes, ou seja tabela com 3 colunas:

.td_img_all {
width: 100%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
display: table;
}
.td_img_texto {
width: 43%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
display: table-cell;
}
.td_img_logo {
width: 22%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
display: table-cell;
}
.td_img_camisola {
width: 35%;
text-align: right;
vertical-align: middle;
background-color: #93BB40;
display: table-cell;
}

o css mobile devia fazer com que se visse em coluna simples, mas pelo menos nos iphones só se vê o texto, ou seja o

:

.td_img_all {
width: 100%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
}
.td_img_texto {
width: 100%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
}
.td_img_logo {
width: 30%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
margin-right: auto;
margin-left: auto;
padding-bottom: 2%;
}
.td_img_camisola {
width: 100%;
text-align: center;
vertical-align: middle;
background-color: #93BB40;
}

Eu acho que o código em si parece certo! Haverá algum problema específico do OS dos iphones (sendo Apple, é normal ser mau :slight_smile: ) ?!

um amigo meu está a ver assim com o IE 9, já experimentei e onde vi está bom! Poderá ser alguma opção qualquer do IE9?!


VB02Dez12.JPG