Jump to content


Photo

Tabelas Como Elementos Decorativos


  • Faça o login para participar
8 replies to this topic

#1 flavio1

flavio1

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado

Posted 21/04/2005, 15:49

saudaçoes a todos do forum

to querendo colocar 2 elementos decorativos (no formato de tabelas). uma ao longo de toda margem esquerda e outra, no topo. para isso ja tentei usar classes parta as duas e nao consegui resultados. alguem poderia me dar uma dica??

grato

#2 Perroud

Perroud

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 21/04/2005, 15:52

Que tipo de elemento decorativo?! Pode elucidar melhor?
[]'s
Perroud

perroud[at]gmail[dot]com

#3 flavio1

flavio1

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado

Posted 21/04/2005, 16:15

Que tipo de elemento decorativo?! Pode elucidar melhor?

claro:

apenas uma especie de coluna colorida, ao longo de toda da margem esquerda e top, sem conteudo: textos ou imagens

como teste, fiz usando as tags de <table> na propia pagina, porem , neste modo existem tags vazias como: <tr>. <td>, e isso sobrecarrega muito a pagina, inutilmente;

na folha de estilo, tentei usar classes para as duas, ms nao obtive resultados!

ficou melhor explicado??/

#4 Perroud

Perroud

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 21/04/2005, 16:31

Caro Flavio,
Você pode ter algo como:

<body>
<div id="barra">
</div>
<!-- seu menu, por exemplo -->
<div>
<ul>
<li><a>dado01</a></li>
<li><a>dado02</a></li>
<li><a>dado03</a></li>
<li><a>dado04</a></li>
<li><a>dado05</a></li>
</ul>
</div>

no css, algo +- assim:

<style type="text/css">
* {margin: 0; padding: 0;}
body {height: 100%;}
#barra {width: 30px; height: 100%; background: #324324; position: relative; float: left; clear: left;} /* o clear serve para vc dar um break e fazer "subir" o menu ao lado do "barra" */
</style>

Espero que eu tenha explicado bem e que você entenda :)
Qualquer coisa, grite novamente.

Edição feita por: Perroud, 21/04/2005, 16:31.

[]'s
Perroud

perroud[at]gmail[dot]com

#5 flavio1

flavio1

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado

Posted 21/04/2005, 16:54

Caro Flavio,
Você pode ter algo como:

<body>
<div id="barra">
</div>
<!-- seu menu, por exemplo -->
<div>
<ul>
<li><a>dado01</a></li>
<li><a>dado02</a></li>
<li><a>dado03</a></li>
<li><a>dado04</a></li>
<li><a>dado05</a></li>
</ul>
</div>

no css, algo +- assim:

<style type="text/css">
* {margin: 0; padding: 0;}
body {height: 100%;}
#barra {width: 30px; height: 100%; background: #324324; position: relative; float: left; clear: left;} /* o clear serve para vc dar um break e fazer "subir" o menu ao lado do "barra" */
</style>

Espero que eu tenha explicado bem e que você entenda :)
Qualquer coisa, grite novamente.

sim, foi bem explicado, agradeço sua atençao, no entanto, vc fez referencia a listas, mas como expliquei no topico anterior, seriam colunas sem texto ou figuras, apenas 2 colunas coloridas (um efeito decorativo apenas). desculpe, mas ainda estou no inicio, e por isso duvidas bobas surgem

eu poderia usar boxe model?

#6 Perroud

Perroud

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 21/04/2005, 18:09

Claro! Aliás, deve usar box model.
O exemplo que eu te dei, é baseado em box model layout.

Esquece os <ul><li> que tem aí. Veja que esta listagem está sob um <div>. E é isto que conta :) Este segundo <div>, basta você dar um ID pra ela... você pode ter uma formatação em css também, assim como existe no primeiro <div>, apenas mudando o que precisar.

Caso você ainda não use, pode baixar o TopStyle 3, no website do Nick Bradbury. Excelente aplicação para (x)html e css.
[]'s
Perroud

perroud[at]gmail[dot]com

#7 flavio1

flavio1

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado

Posted 21/04/2005, 19:03

bem, entendi o que vc explicou, desde já agradeço a sua colaboraçao
irei testar esta sua dica

#8 flavio1

flavio1

    Turista

  • Usuários
  • 32 posts
  • Sexo:Não informado

Posted 21/04/2005, 21:49

Claro! Aliás, deve usar box model.
O exemplo que eu te dei, é baseado em box model layout.

Esquece os <ul><li> que tem aí. Veja que esta listagem está sob um <div>. E é isto que conta :) Este segundo <div>, basta você dar um ID pra ela... você pode ter uma formatação em css também, assim como existe no primeiro <div>, apenas mudando o que precisar.

Caso você ainda não use, pode baixar o TopStyle 3, no website do Nick Bradbury. Excelente aplicação para (x)html e css.

perroud, fiz o que vc me aconselhou
a barra horizontal ficou perfeita

#barraum{
width:100%;
heigth:30px;
background:#003399;
position:relative;
float:top;
margin:0;
padding:0;
}

o problema deu na barra lateral, ela fica com um tamho pequeno, lá em cima no canto esquerdo, mexi na dimensao e nada aconteçe

#barra{
width:30px;
heigth:100%;
background:#003399;
position:absolute;
float:left;
margin-top:20px;
padding:0;
}

onde estou errando?
margin-top:20px - foi para juntar as duas

#9 Perroud

Perroud

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 21/04/2005, 23:14

*{margin: 0; padding: 0;}
body {height: 100%;}
#barraum{
width:100%;
heigth:30px;
background:#003399;
position:relative;
/* float:top;*/ /* isto nao existe!! */
float: left;
margin-bottom: 5px;
}
#barra{
width:30px;
heigth:100%;
background:#003399;
position:relative;
float:left;
clear: left;
}

Veja se isto resolve.
[]'s
Perroud

perroud[at]gmail[dot]com




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq