Problema Rodapé + Linhas Vertical

[Zhero 0]

Olá, estou com um problema no rodapé que montei, e não consigo arrumar, se puderem dar um help..

 

css

 

 

 

.copyright{
position:relative;
background-color:#CCC;
width:100%;
height:40px;
left:0;
bottom:0;
display:inline-block;
}

.risco_h_final{
background-image: url(intranet02.png);
background-repeat:repeat;
width: auto;
height:1px;
margin:0;
}

.texto_copyright{
color: #606060;
letter-spacing: 2px;
font:Arial;
font-size: 14px;
margin-left:5px;
vertical-align:15px;
}

 

 

 

html

 

 

   </div> <!-- conteudo -->
<!-- final conteudo -->

<div align="center">
<div class="risco_h_final"></div>    
<div class="copyright">
	<img src="intranet06.png" border="0"> <a class="texto_copyright">Todos os direitos reservados © 2010 CCE / DSI </a>
</div>
</div>


</body>

 

 

 

Eu queria saber também como eu faço uma linha vetical, eu tentei algumas formas mas não deu muito certo, nem usando borda :/

qual a melhor maneira de se fazer ?

 

e por último, os "padrões" de menus são por lista ou não "há padrão" e por div também estão "certo" ?

 

desde já grato.

[Evandro Oliveira 331]

Tem como explicar com imagens o efeito desejado? Veja que eu não sei como são as imagens 'intranet02' e 'intranet06' e teria que imaginar o conteúdo, dimensão, para chegar próximo do que você vê e ainda julgar o que penso que deseja.

 

Desde já, adianto que estude um pouco mais de CSS.

 

Div's são elementos de nível bloco, dessa forma, width: auto e width: 100% têm o mesmo valor, ou seja, nenhum, pois este é o comportamento padrão de elementos bloco. A menos que você tenha definido uma modificação de medida genérica - o que é um erro - que seria herdada, não há a necessidade de modificar o width de elementos bloco.

 

<div align="center">

 

Alinhamento é uma propriedade, não um atributo. Deve ficar a cargo do CSS.

 

        <div class="risco_h_final"></div>

 

Isso pode ser substituído por uma <hr>

 

<div class="copyright">
               <img src="intranet06.png" border="0"> <a class="texto_copyright">Todos os direitos reservados © 2010 CCE / DSI </a>
       </div>

 

A renderização em nível inline-block neste contexto não faz sentido algum, não altera em nada caso o elemento fosse renderizado como bloco, que é seu padrão.

 

Procure fazer uso da cascata e não precisaria definir uma classe para o link interno.

 

Agregando um pouco de semântica, tudo isso

<div align="center">
       <div class="risco_h_final"></div>    
       <div class="copyright">
               <img src="intranet06.png" border="0"> <a class="texto_copyright">Todos os direitos reservados © 2010 CCE / DSI </a>
       </div>
       </div>

 

se resumiria a apenas isso

<hr>
<p class="rodape"><img src="intranet06.png" alt="imagem ilustrativa><a href="#">© 2010 - CCE / DSI. Todos os direitos reservados.</a></p>

 

e o CSS para tudo aquilo

.copyright{
       position:relative;
       background-color:#CCC;
       width:100%;
       height:40px;
       left:0;
       bottom:0;
       display:inline-block;
       }

.risco_h_final{
       background-image: url(intranet02.png);
       background-repeat:repeat;
       width: auto;
       height:1px;
       margin:0;
       }

.texto_copyright{
       color: #606060;
       letter-spacing: 2px;
       font:Arial;
       font-size: 14px;
       margin-left:5px;
       vertical-align:15px;
       }

 

vira isso

.rodape{
       position:relative;
       text-align: center;
       background-color:#CCC;
       height:40px;
}

.rodape a{
       color: #606060;
       letter-spacing: 2px;
       font: 14px Arial, sans-serif;
       margin-left:5px;
       vertical-align:15px;
}

 

Quanto à dúvida da lista, não há uma forma certa de se fazer. Montar com DIV também é válido, mas existe a questão da semântica.

DIV não tem valor semântico, é uma tag de estilização e posicionamento, a nível de marcação, ela não faria a menor falta, criar um documento com a div, ou sem a div, teria o mesmo valor textual.

 

A recomendação quanto à listas é exatamente para agregar significado à marcação. Quando um processador de hipertexto passa pelo seu documento, ele de alguma forma "sabe" que aquela série de links como 'home','contato','quem somos', fazem parte de uma lista em comum. A forma que ele tem de saber são as tags. Utilizando tags corretas, você passa a um interpretador o que aquele conteúdo textual realmente significa.

 

Tomemos um exemplo clássico:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, Atenção: leia a partir do começo do texto. but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Creio que, se você tem plenas habilidades visuais e leitoras, a palavra 'atenção' lhe chamou a atenção e continua a lhe incomodar enquando estiver dentro do seu raio de visão. Isso porque ela é dotada de propriedades especiais. É escrita em vermelho e em tamanho superior. Uma pessoa com dificuldades visuais não sabe sequer que a palavra está em vermelho, ainda mais que seu tamanho é superior aos demais. Perceba, então, que máquinas não possuem 'olhos', e tratam tanto o caractere 'a' quanto o caractere 'A' como simples caracteres. Blocos de informação caracterizados por um código binário. O que os diferencia, são suas propriedades. A forma de fazer com que máquinas diferenciem conteúdo nas páginas HTML é através da marcação correta do conteúdo, tentando passar o máximo de informação ao interpretador. Daí vêm os conceitos de semântica.

 

Procure sempre identificar que tipo de conteúdo você está tentando passar ao usuário. Somente se não encontrar uma tag apropriada faça uso de <div> e <span>

[Zhero 0]

 

 

Tem como explicar com imagens o efeito desejado? Veja que eu não sei como são as imagens 'intranet02' e 'intranet06' e teria que imaginar o conteúdo, dimensão, para chegar próximo do que você vê e ainda julgar o que penso que deseja.

 

Desde já, adianto que estude um pouco mais de CSS.

 

Div's são elementos de nível bloco, dessa forma, width: auto e width: 100% têm o mesmo valor, ou seja, nenhum, pois este é o comportamento padrão de elementos bloco. A menos que você tenha definido uma modificação de medida genérica - o que é um erro - que seria herdada, não há a necessidade de modificar o width de elementos bloco.

 

<div align="center">

 

Alinhamento é uma propriedade, não um atributo. Deve ficar a cargo do CSS.

 

        <div class="risco_h_final"></div>

 

Isso pode ser substituído por uma <hr>

 

<div class="copyright">
               <img src="intranet06.png" border="0"> <a class="texto_copyright">Todos os direitos reservados © 2010 CCE / DSI </a>
       </div>

 

A renderização em nível inline-block neste contexto não faz sentido algum, não altera em nada caso o elemento fosse renderizado como bloco, que é seu padrão.

 

Procure fazer uso da cascata e não precisaria definir uma classe para o link interno.

 

Agregando um pouco de semântica, tudo isso

<div align="center">
       <div class="risco_h_final"></div>    
       <div class="copyright">
               <img src="intranet06.png" border="0"> <a class="texto_copyright">Todos os direitos reservados © 2010 CCE / DSI </a>
       </div>
       </div>

 

se resumiria a apenas isso

<hr>
<p class="rodape"><img src="intranet06.png" alt="imagem ilustrativa><a href="#">© 2010 - CCE / DSI. Todos os direitos reservados.</a></p>

 

e o CSS para tudo aquilo

.copyright{
       position:relative;
       background-color:#CCC;
       width:100%;
       height:40px;
       left:0;
       bottom:0;
       display:inline-block;
       }

.risco_h_final{
       background-image: url(intranet02.png);
       background-repeat:repeat;
       width: auto;
       height:1px;
       margin:0;
       }

.texto_copyright{
       color: #606060;
       letter-spacing: 2px;
       font:Arial;
       font-size: 14px;
       margin-left:5px;
       vertical-align:15px;
       }

 

vira isso

.rodape{
       position:relative;
       text-align: center;
       background-color:#CCC;
       height:40px;
}

.rodape a{
       color: #606060;
       letter-spacing: 2px;
       font: 14px Arial, sans-serif;
       margin-left:5px;
       vertical-align:15px;
}

 

Quanto à dúvida da lista, não há uma forma certa de se fazer. Montar com DIV também é válido, mas existe a questão da semântica.

DIV não tem valor semântico, é uma tag de estilização e posicionamento, a nível de marcação, ela não faria a menor falta, criar um documento com a div, ou sem a div, teria o mesmo valor textual.

 

A recomendação quanto à listas é exatamente para agregar significado à marcação. Quando um processador de hipertexto passa pelo seu documento, ele de alguma forma "sabe" que aquela série de links como 'home','contato','quem somos', fazem parte de uma lista em comum. A forma que ele tem de saber são as tags. Utilizando tags corretas, você passa a um interpretador o que aquele conteúdo textual realmente significa.

 

Tomemos um exemplo clássico:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, Atenção: leia a partir do começo do texto. but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Creio que, se você tem plenas habilidades visuais e leitoras, a palavra 'atenção' lhe chamou a atenção e continua a lhe incomodar enquando estiver dentro do seu raio de visão. Isso porque ela é dotada de propriedades especiais. É escrita em vermelho e em tamanho superior. Uma pessoa com dificuldades visuais não sabe sequer que a palavra está em vermelho, ainda mais que seu tamanho é superior aos demais. Perceba, então, que máquinas não possuem 'olhos', e tratam tanto o caractere 'a' quanto o caractere 'A' como simples caracteres. Blocos de informação caracterizados por um código binário. O que os diferencia, são suas propriedades. A forma de fazer com que máquinas diferenciem conteúdo nas páginas HTML é através da marcação correta do conteúdo, tentando passar o máximo de informação ao interpretador. Daí vêm os conceitos de semântica.

 

Procure sempre identificar que tipo de conteúdo você está tentando passar ao usuário. Somente se não encontrar uma tag apropriada faça uso de <div> e <span>

 

 

 

 

Opa, obrigado pelas dicas, eu comecei a mecher com html/css faz pouco tempo, aprendi mais fuçando e testando, então não tenho muita teoria, por isso acabo colocando algumas coisas "sem sentido". Eu dei uma lida no w3school faz tempinho, você teria alguma indicação de leitura mais teórica pra indicar ?

 

Desculpe, esqueci de postar as imagens.

 

 

Esse seria o rodapé, o maior problema é a linha que fica depois dele, não consigo resolver. Tentei várias coisas já, mas ainda não deu certo, quando ficou no final, não mostrava o fundo cinza. No caso o intranet06.png seria a logo, o intranet02.png seria um traço vertical pra fazer a repitição do bg, que pode ser substituído só pela cor no caso, mas só com a cor também não deu muito certo tentei de outro jeito depois de um tempo.

 

A linha que eu gostaria de fazer seria igual essa:

 

[Evandro Oliveira 331]

Suponhamos que as colunas laterais sejam de 150px cada uma.

 

O que pode ser feito é fazer uma imagem de 1x1pxl na cor da borda, colocá-la como plano de fundo do <BODY> posicionado ao topo e a 150px da esquerda, repetindo verticalmente. Feita a borda da primeira coluna.

 

A segunda coluna seria feita colocando o mesmo background posicionado ao topo e à direita da <DIV> que compõe a coluna do meio, também repetindo verticalmente.

 

Você teria algo, a princípio, assim:

 

    |
    |
    |                |
    |                |
    |                |
    |
    |

 

Porém, o restante do conteúdo (como cabeçalho, menu e rodapé) ocultariam essa margem esquerda sobressalente.

[Zhero 0]

Suponhamos que as colunas laterais sejam de 150px cada uma.

 

O que pode ser feito é fazer uma imagem de 1x1pxl na cor da borda, colocá-la como plano de fundo do <BODY> posicionado ao topo e a 150px da esquerda, repetindo verticalmente. Feita a borda da primeira coluna.

 

A segunda coluna seria feita colocando o mesmo background posicionado ao topo e à direita da <DIV> que compõe a coluna do meio, também repetindo verticalmente.

 

Você teria algo, a princípio, assim:

 

    |
    |
    |                |
    |                |
    |                |
    |
    |

 

Porém, o restante do conteúdo (como cabeçalho, menu e rodapé) ocultariam essa margem esquerda sobressalente.

 

Opa, funcionou certinho os riscos, valeu Evandro, mas ainda estou com o problema no rodapé =/

 

Dei uma olhada em outros tópicos tentei igual mas ainda não me acertei com ele ainda. Não faço idéia do que seja... não sei se ajuda, mas eu upei aqui as imagens com o html pra ajudar a me ajduar (rs), se possível claro.

 

Desde já grato.