Css

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.

As respostas não estão aparecendo!

gpellizzoni:

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.

Não entendi o que você quis dizer com altura. É o atributo height?

As âncoras estão dentro dessa div. Assim, ela não é espandida conforme os seus elementos internos são espandidos?

Dá para você me dar um exemplo para eu entender melhor?

Obrigado!

Nao precisa do seletor div …somente o #id ja funciona.

Quanto ao height , e uma opcao , tente seta-lo com um default .

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!

Recebo e-mails de resposta, mas quando abro a página, não estão sendo mostradas…

@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.

Position:absolute;

Diz que o elemento tem a sua posição absoluta nas coordenadas do navegador, neste caso você teria de usar

position:relative;

ECO2004:

@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:

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!

Tem como você me fazer o favor de me explicar como funciona então as posições absolute e relative?

Pelo que sei: absolute coloca o item em uma posição relativa ao primeiro elemento pai.
relative: item colocado em relação ao fluxo normal de carregamento da página.

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

Usando ainda o absolute, para que a cor aparecesse, eu deveria colocar a div como também position absolute?

Se eu coloco qualquer elemento em uma página como position:absolute, eu devo colocar todos (os demais elementos) senão corro o risco de não vê-los na tela?

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

Segue a explicação com exemplo:

http://maujor.com/tutorial/absrel.php

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

Mas quando eu estou criando uma página com elementos em posições complexas, muitas das vezes eu tenho que usar uma posição em relação ao pai.

Se eu colocar o elemento pai como relative (posição com relação ao fluxo normal) e colocar o filho como absolute, o que muda?

Olha bem o código abaixo:

<html>
    <head>
        <title>CGM-WEB | </title>
    </head>
    <body style="background:#000;">
        <div style="background:red;width:50px;height:50px; position:absolute;left:20px;top:20px">
			DIV 1
		</div>
        <div style="background:green;width:50px;height:50px; position:relative;left:20px;top:40px">
			DIV 2
		</div>
    </body>
</html>

A div1 está 20px da esquerda e topo
A div2 está 20px da esquerda e 40px do topo

Se você colocar o valor de topo da div2 igual ao da div1 verá que a div2 ficará exatamente no lugar da div1
É por isto que a posição é absoluta, e não depende de elemento pai nenhum.

ECO2004:

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

Mas quando eu estou criando uma página com elementos em posições complexas, muitas das vezes eu tenho que usar uma posição em relação ao pai.

Se eu colocar o elemento pai como relative (posição com relação ao fluxo normal) e colocar o filho como absolute, o que muda?

Correção antitribus

A posição absolute depende sim do pai, contanto que exista algum pai com posição sem ser static (por ex: relative)

Experimenta criar um pai com position: relative e botar um filho com position: absolute e top: 0; left: 0. O filho vai estar no canto superior esquerdo do elemento pai e não da página

De fato você está certo!

victorcosta:

Correção antitribus

A posição absolute depende sim do pai, contanto que exista algum pai com posição sem ser static (por ex: relative)

Experimenta criar um pai com position: relative e botar um filho com position: absolute e top: 0; left: 0. O filho vai estar no canto superior esquerdo do elemento pai e não da página

Pessoal, olha a minha dúvida...

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>Cadastro de usuário - Parte 1/3</title>
		<link rel = "stylesheet" type = "text/css" href = "CSS/cadastro.css"/>
	</head>
	
	<body>
		<form method = "post" action = "" enctype = "multipart/form-data">
			<div class = "cadastro">
			
				<!-- Usuário -->
				
					<p class = "labelusuario">Usuário</p>
					<input class = "inputusuario" type = "text" name = "usuario" size = 40 maxlength = 40/>
				 
				<!-- Senha -->
				
					<p class = "labelsenha">Senha</p>
					<input class = "inputsenha" type = "text" name = "senha" size = 40 maxlength = 40/>				
			</div>
		</form>		
	</body>
</html>

@CHARSET "ISO-8859-1";

div.cadastro{ position:relative; left:0em; top:0em; width:23em; height:23em; background-color:rgb(192,192,192)}

.labelusuario{display:inline; position:absolute; left:0em; top:0em;}
.inputusuario{position:absolute; left:0em; top:0em;}

Eu coloquei o label Usuário com position:absolute e fiz o mesmo com o input. Pelo que sei e me foi explicado, esses dois elementos saem do fluxo normal da página e o seu posicionamento fica em relação ao seu sucessor que não tenha position:static (nesse caso, é div). Esperava com esse teste que o label e o input se sobrepusessem, mas isso não ocorre. O input está sempre uma linha acima do label. Por quê?

Por padrão elementos

tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

margin: 0; z-index: 10

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

victorcosta:

Por padrão elementos

tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

margin: 0; z-index: 10

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

Victor…na verdade, quero o label na frente do input, mas isso não está acontecendo…sempre o label fica embaixo do input. É por causa dessa barra vertical do p? A posição top:0 e left:0 foi só um teste…

Aqui o label ficou na frente

Vc usou o z-index? Ele serve pra isso, quem tem z-index maior fica na frente

victorcosta:

Aqui o label ficou na frente

Vc usou o z-index? Ele serve pra isso, quem tem z-index maior fica na frente

O z-index serve mesmo para colocar um elemento na frente do outro, mas o que mostrei no exemplo foi que o label e o input ficam em linhas separadas. É só vc mudar a ordem do left, deixando o top fixo que você irá ver que não ficam na mesma linha, mesmo distanciando os dois…mas quando eu coloco position:relative, consigo colocar os dois lado a lado.

Por que com position:absolute não dá certo?

victorcosta:

Por padrão elementos

tem uma margin vertical, e essa margin tá fazendo eles não sobreporem

Adiciona isso ao labelusuário que acho q vai fazer oq vc quer, apesar de que pelo que to entendendo da sua tela, não é algo que eu faria

margin: 0; z-index: 10

Pra ver coisas desse tipo e descobrir que o problema era a margem, ideal era vc usar o Chrome ou Firefox com Firebug, que ai era só clicar no element e clicar: Inspect Element

@victorcosta

Muito boa essa sua dica do firebug. Pude ver o envoltório vertical que o elemento p tem. Mesmo assim, gostaria de uma ajuda sua, ou de outras pessoas que estão lendo. Eu consegui arrumar, fazendo com que o elemento input ficasse 1em do topo (ainda usando position:absolute). Como a posição é absoluta com relação ao div, uma colocação de left:0em e top:0em faria com que esse elemento ficasse bem no canto superior esquerdo da div (representada por um retângulo cinza). Como o elemento p possui o envoltório vertical, o início do envoltório está realmente onde deveria estar: no topo esquerdo da div de fundo cinza. Quando mudo position para relative, p inicia no topo da página. Mas pelo que sei, um elemento posicionado relativamente irá ter uma posição relativa à posição que deveria estar no fluxo. Assim, eu esperaria que esse label, junto com o envoltório vertical, ficasse com o seu limite superior dentro da div. Por que isso não acontece?