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

TheOne

[Ajuda] Site Tableless CSS

5 mensagens neste tópico

Boas pessoal, estou a fazer um site para uma empresa nova que o meu pai criou recentemente. Todos os sites que fiz até agora usavam tabelas, dentro de tabelas e mais tabelas e mais... Já tinha mexido em CSS, mas agora é que comecei a tentar aprender mais qualquer coisa. Este site que estou a criar é tableless, e estou a gostar bastante do CSS embora seja noob ainda e de certeza que há coisas que estou a fazer mal no código ou a ser redundante.

Coloquei o site na net para mais fácil acesso, ainda só tem a página inicial e os textos não serão os finais uma vez que são só para "encher" por agora.

Link para o site

O código CSS que escrevi foi este:

@charset "utf-8";
/* CSS Document */

body {
background:url(Imagens/background.jpg);
width:700px;
height:100%;
margin-bottom:15px;
margin-top:15px;
margin-left:auto;
margin-right:auto
}

.titles {
font-family:"Microsoft Sans Serif";
font-size:16px;
color:#003399;
border-bottom:outset #CC0000 medium;
width:200px
}

.images {
border-width:medium;
border:thin dashed #003399;
border-spacing:5px
}

.text {
font-family:"Microsoft Sans Serif";
font-size:12px;
color:#FFFFFF;
}

.menu {
font-family:"Microsoft Sans Serif";
font-size:14px;
color:#FFFFFF;
background-color:#0066CC;
display:inline;
height:auto;
}

.menu a {
text-decoration:none;
padding-left:15px;
padding-right:15px
}

.menu a:hover {
text-decoration:none;
background:#000066
}

.header {
border-top:thin solid #CCCCCC;
border-left:thin solid #CCCCCC;
border-right:thin solid #CCCCCC;
background-image:url(Imagens/Header.jpg);
height:150px
}

.leftSide {
border-left:thin solid #CCCCCC;
background:#666666
}

.rightSide {
border-right:thin solid #CCCCCC;
background:#666666
}

.top {
border-top:thin solid #CCCCCC;
border-right:thin solid #CCCCCC;
border-left:thin solid #CCCCCC;
background:#666666
}

.bottom {
border-bottom:thin solid #CCCCCC;
border-right:thin solid #CCCCCC;
border-left:thin solid #CCCCCC;
background:#666666
}

.container {
border-left:thin solid #CCCCCC;
border-right:thin solid #CCCCCC;
background:#666666;
padding:20px
}

.menuContainer {
border-right:thin solid #CCCCCC;
border-left:thin solid #CCCCCC;
background-color:#0066CC
}

Acham que escrevi o código bem? Há algo a melhorar? Não percebo porque põem por exemplo "div.menu" ou "li#menu" qual é a difereça para ".menu"? No site usei uma tabela na parte que tem o logo da empresa e o texto ao lado pois não sei como se faz em CSS para conseguir colocar o texto como está, ou seja, no topo em vez de aparecer no sopé da imagem....alguém sabe? E se eu quiser no menu colocar um link para por exemplo o "Site Map" mas alinhado à direita, já experimentei tudo (acho eu xD) mas ficava sempre como os outros elementos do menu...

Obrigado desde já. Cumps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Acham que escrevi o código bem? Há algo a melhorar? Não percebo porque põem por exemplo "div.menu" ou "li#menu" qual é a difereça para ".menu"? No site usei uma tabela na parte que tem o logo da empresa e o texto ao lado pois não sei como se faz em CSS para conseguir colocar o texto como está, ou seja, no topo em vez de aparecer no sopé da imagem....alguém sabe? E se eu quiser no menu colocar um link para por exemplo o "Site Map" mas alinhado à direita, já experimentei tudo (acho eu xD) mas ficava sempre como os outros elementos do menu...

Obrigado desde já. Cumps

a diferença entre div .menu e .menu é a hierarquizaçao. Se queres somente aplicar um estilo à classe menu que esteja dentro de uma div então usas div .menu, se queres aplicar o estilo um estilo global em tudo o que tenha classe menu, usas o .menu.

Quanto ao código em si, acho que satisfaz, como é a primeira vez.

Há optimizações a fazer, como fazer menus em listagens ul numa só linha, isto torna o código mais limpo e eficaz para crawlers. Outra sugestão que tenho a fazer é alterares os estilos das próprias tags <p> e <h1>, por exemplo, em vez de usares classes para estilizar os pontos de texto e headers. Tudo isto vai tornar o teu código mais limpo e ajuda os crawlers a identificar o que realmente é conteúdo, o que são links e quais são os tópicos.

Em termos de tamanho do código, também podias diminui-lo, visto teres muitas propriedades que são partilhadas entre vários elementos.

Espero que me tenha feito entender, e continua.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado pelos conselhos, vou segui-los. E em relação ao alinhamento do texto junto à imagem?

Thanks ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Obrigado pelos conselhos, vou segui-los. E em relação ao alinhamento do texto junto à imagem?

Thanks ;)

Quanto a isso pões a imagem com um float:left e o texto fica logo em cima ;).

Ex

<div id="bla">
     <img style="float:left" src="http://digimpor.no.sapo.pt/Imagens/logo.jpg" alt="" />
     <p>asdasdasd</p>
</div>

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