A resposta não apareceu!

gpellizzoni wrote:1. A cor está sendo atribuída. Você não a vê pois a altura da div está 0. Defina uma altura para esse elemento.

2. CSS por si só não oferece dinamismo, mas você pode gerar um CSS dinâmico através da linguagem que o servidor está interpretando e depois incluí-lo.

ECO2004 wrote:@antitribus

Não entendi por que não estarão dentro da div. Pelo que sei. uma position absolute coloca os elementos em um posição relativa ao primeiro pai, nesse caso, a div.

antitribus wrote:Todos os seus links estão como:
position: absolute;
logo eles não pertencem à div e não estarão dentro da div
#barraelementosvertical;

Faça um teste e escreva algo dentro da div que não tenha atributo position:absolute;
e você verá a sua área verde.

Escreva código CSS de uma maneira que o arquivo não fique grande, porém legível:

@CHARSET "ISO-8859-1"; #barraelementosvertical { background-color: rgb(106, 128, 57); } a { position:absolute; left:5%; } .auditoria { top:7%; } .cobranca { top:17%; } .compras { top:27% } .financeiro { top:37%; } .controladoria { top:47%; } .juridico { top:57%; } .marketing { top:67%; } .missao { top:77%; } .noticias { top:87%; } .revista { top:97%; } .valores { top:107%; } .visao { top:117%; } a:link { text-decoration:none; color:black; } a:hover { text-decoration:none; color:black; } a:visited { text-decoration:none; color:black; }

Parece que o seu intuito é criar um menu com elementos sobrepostos, para isto utilize as listas de html
Mude a div para
<div id = "barraelementosvertical" style=""> <ul> <li><a class = "auditoria" href = "#">Auditoria</a></li> <li><a class = "cobranca" href = "#">Cobrança</a></li> <li><a class = "compras" href = "#">Compras</a></li> <li><a class = "financeiro" href = "#">Financeiro</a></li> <li><a class = "controladoria" href = "#">Controladoria</a></li> <li><a class = "juridico" href = "#">Jurídico</a></li> <li><a class = "marketing" href = "#">Marketing</a></li> <li><a class = "missao" href = "#">Missão</a></li> <li><a class = "noticias" href = "#">Notícias</a></li> <li><a class = "revista" href = "#">Revista</a></li> <li><a class = "valores" href = "#">Valores</a></li> <li><a class = "visao" href = "#">Visão</a></li> </ul> </div>
E CSS para:
@CHARSET "ISO-8859-1"; /* #barraelementosvertical { background-color: rgb(106, 128, 57); } a { position:absolute; left:5%; } .auditoria { top:7%; } .cobranca { top:17%; } .compras { top:27% } .financeiro { top:37%; } .controladoria { top:47%; } .juridico { top:57%; } .marketing { top:67%; } .missao { top:77%; } .noticias { top:87%; } .revista { top:97%; } .valores { top:107%; } .visao { top:117%; } a:link { text-decoration:none; color:black; } a:hover { text-decoration:none; color:black; } a:visited { text-decoration:none; color:black; } */ #barraelementosvertical ul{background-color: rgb(106, 128, 57);width:200px;} #barraelementosvertical ul a{text-decoration:none;color:black;} #barraelementosvertical ul a:hover {text-decoration:underline;color:white;} #barraelementosvertical ul li{list-style-type:none;}

Qualquer dúvida é nossa dívida!

position: absolute posiciona o elemento em relação ao primeiro pai que tem posição diferente de static (o padrão)

position: relative permite você ajustar a posição dele em relação a posição normal dele

O problema é que quando se usa position: absolute o elemento passa a não influenciar mais os outros elementos, ele sai do fluxo, por isso sua div pai não crescia

Se você botar um elemento como position absolute, o pai não vai crescer automaticamente de nenhuma maneira, você teria q setar o height manualmente

Botando como absolute, o elemento passa a se posicionar de acordo com a página em si, há menos que algum pai desse elemento tenha uma posição diferente de static. O que normalmente se faz quando se quer posicionar um elemento em relação à outro é botar position: relative no pai (oq não altera em nada se vc não mexer no top/bottom/left/right) e o filho com absolute

Mas para oq você quer não use absolute, use o código do antitribus