Tabelas Como Elementos Decorativos
#1
Posted 21/04/2005, 15:49
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
Posted 21/04/2005, 15:52
Perroud
perroud[at]gmail[dot]com
#3
Posted 21/04/2005, 16:15
claro:Que tipo de elemento decorativo?! Pode elucidar melhor?
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
Posted 21/04/2005, 16:31
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.
Perroud
perroud[at]gmail[dot]com
#5
Posted 21/04/2005, 16:54
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 surgemCaro 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.
eu poderia usar boxe model?
#6
Posted 21/04/2005, 18:09
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
perroud[at]gmail[dot]com
#7
Posted 21/04/2005, 19:03
irei testar esta sua dica
#8
Posted 21/04/2005, 21:49
perroud, fiz o que vc me aconselhouClaro! 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.
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
Posted 21/04/2005, 23:14
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.
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)