Form em div no topo, posicionar à direita

[regina 0]

Olá,

 

tenho um formulário de acesso a área restrita, preciso posicioná-lo à direita do topo, como na imagem

 

o html está assim:

  <div id="topo">
<div id="login_topo">
  <h1>Área restrita</h1>
  <form id="logar_topo" name="logar_topo" method="post" action="logar.php" >
	  <label class="campo_logar" for="codigo">Código de acesso:</label><input type="text" class="data_logar" name="codigo" id="codigo" maxlength="50" tabindex="1" title="Seu código para Acesso"/>
		<label class="campo_logar" for="senha">Senha: </label><input type="password" class="senha_logar" name="senha" id="senha" maxlength="90" tabindex="2" title="Sua Senha" />
	<input type="submit" name="Submit" class="botao" value="OK" tabindex="3"> 
  </form>
     <p><a href="/area_restrita/acesso.php">Primeiro Acesso!</a></p>

</div><!-- login -->
<div id="logo">
  <a href=""><img class="escola" src="/imagens/logo.png" alt="Logo" /></a>
</div><!-- logo -->
<div id="foto">
	  <img src="/imagens/foto_banner.jpg" alt="Foto banner" title="Foto banner"/>
</div>
<div class="menu_superior">
  <ul class="menuh">
	  <li><a href="/servico.php?item=3">A Empresa</a></li>
	  <li><a href="/servico.php?item=1">Produtos</a></li>
	  <li class="ultima"><a href="/servico.php?item=2" >Serviços</a></li>
	<li class="telefone">41 3642-1716</li><li class="contato"><a href="/fale_conosco.php"><img src="../imagens/layout/e_mail.jpg" alt="E-mail Logo" title="E-mail Logo" /></a></li> 
  </ul>
</div><!-- menu_superior -->
 </div><!-- topo -->

Eu tenho uma div com todo o topo, dentro dela tenho uma com a logo, outra com a foto do banner, uma com o form de login, e uma com o menu.

Preciso posicionar o form acima da imagem do banner.

 

O css está assim:

#topo{width:988px;height:258px;margin:0 auto;z-index:10;background:url(imagens/back_topo.png) top right no-repeat}
#logo {width:210px;height:205px;margin:20px 0 0 0;z-index:11;float:left}
#logo img.escola{margin:20px 0 20px 50px}
/*login_topo*/
#login_topo {width:210px;height:90px;z-index:20;font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;position:absolute;float:right;right:80px;top:3px;z-index:50}
#login_topo h1{width:90%;text-align:center;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;margin:0 0 0 20px;color:#C00;clear:left}
#login_topo p{text-align:right;margin:0 2px}
#login_topo a, #login_topo a:link, #login_topo a:visited, #login_topo a:active, #login_topo a:hover{color:#C00;text-decoration:underline;font-weight:bold}
#login_topo a:hover{text-decoration:underline}
/*formulario de login*/
#logar_topo{width:98%;height:auto;float:right;margin:1px 0 0 0;font-size:12px}
#logar_topo fieldset{float:left;width:99%;margin:1px}
#logar_topo label.campo_logar{width:100px;display:block;float:left;clear:left;text-align:right;margin:0 5px 0 0}
#logar_topo input.data_logar, #logar_topo input.senha_logar{width:80px;height:14px;border:1px dashed #C00;background-color:#FFF;margin-bottom:5px}
#logar_topo input.data_logar{clear:right}
#logar_topo input.senha_logar{width:60px;clear:none;margin:0}
.botao {width:20px;height:15px;background-color:#C00;font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#FFF;float:right;cursor:pointer;margin:1px 10px 0 2px}
/*topo*/
#foto{width:740px;height:205px;position:relative;float:right;margin:8px 25px 0 0;z-index:-10;background-color:#FFF}

 

Agradeço a quem puder ajudar ou me passar um exemplo

[regina 0]

Ainda não consegui encontrar uma solução:

O html está assim:

<div id="banner">
<div id="login_topo">
  <h1>Pais - Alunos</h1>
  <form id="logar_topo" name="logar_topo" method="post" action="pais_alunos/logar.php" >
	  <label class="campo_logar" for="codigo">Código de acesso:</label><input type="text" class="data_logar" name="codigo" id="codigo" maxlength="50" tabindex="1" title="Seu código para Acesso"/>
		<label class="campo_logar" for="senha">Senha: </label><input type="password" class="senha_logar" name="senha" id="senha" maxlength="90" tabindex="2" title="Sua Senha" />
	<input type="submit" name="Submit" class="botao" value="OK" tabindex="3" /> 
  </form>
     <p><a href="primeiro_acesso.php">Primeiro Acesso!</a></p>
</div><!-- login -->
<div id="logo">
  <a href=""><img class="escola" src="imagens/logo.png" alt="Imagem" /></a>
  <img src="imagens/imagem.gif" class="ocultar" alt="Imagem" />
</div><!-- logo -->
<div id="photos">
	  <img src="imagens/banner/DSCF0003.JPG" alt="Imagem" title=""/>
</div>
<div class="menu_superior">
  <ul class="menuh">
	  <li><a href="/servico.php?item=2" title="Serviço I" >Serviço I</a></li>
	  <li><a href="/servico.php?item=1" title="Serviço II" >Serviço II</a></li>
	  <li class="ultima"><a href="/servico.php?item=3" title="Serviço III" >Serviço III</a></li>
	<li class="telefone">41 1234-4321</li><li class="contato"><a href="fale_conosco.php"><img src="../imagens/layout/e_mail.jpg" alt="E-mail Imagem" title="E-mail Imagem" /></a></li> 
  </ul>
</div><!-- menu_superior -->
 </div><!-- banner -->

A div login_topo que eu preciso posicionar à direita, no entanto quando tento sem usar o position:absolute ela manda a imagem que está na div photos para baixo e saindo da posição no layout.

A div banner tem como background aquele azul com a curva.

 

Ele precisa ficar à DIREITA em todas as resoluções mas não está, por exemplo em 1024x768 fica mas ao centro devido ao px que eu coloquei.

 

Se alguém puder me indicar um site que tenha o login no topo com imagem em baixo eu agradeço, estão me cobrando e mesmo que não estivessem não acho profissional deixar assim...

 

Grata

[Paulo Mardson 1]

é o seguinte, seu css ta diferente do html, ta meio confuso, no primeiro cód. você pode acrescentar a div topo o position: relative.

#topo{width:988px;height:258px;margin:0 auto;z-index:10;background:url(imagens/back_topo.png) top right no-repeat; position: relative}

remover float right, deve funcionar:

#login_topo {width:210px;height:90px;z-index:20;font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;position:absolute;right:80px;top:3px;z-index:50}

[regina 0]

Olá Paulo,

agradeço a atenção, a diferença aconteceu porque eu fui fazendo tentativas sem sucesso, mas fui tentando.

o css do html acima:

/*topo*/
#banner{width:988px;height:258px;margin:0 auto;z-index:10;position:relative;background:url(imagens/layout/back_topo.png) top right no-repeat}
#logo {width:210px;height:205px;margin:20px 0 0 0;z-index:11;float:left}
#logo img.escola{margin:20px 0 20px 50px}
/*login_topo*/
#login_topo {width:210px;height:90px;font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;position:absolute;float:right;right:80px;top:3px;z-index:50}
#login_topo h1{width:90%;text-align:center;font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;margin:0 0 0 20px;color:#C00;clear:left}
#login_topo p{text-align:right;margin:0 2px}
#login_topo a, #login_topo a:link, #login_topo a:visited, #login_topo a:active, #login_topo a:hover{color:#C00;text-decoration:underline;font-weight:bold}
#login_topo a:hover{text-decoration:underline}
/*formulario de login*/
#logar_topo{width:98%;height:auto;float:right;margin:1px 0 0 0;font-size:12px}
#logar_topo fieldset{float:left;width:99%;margin:1px}
#logar_topo label.campo_logar{width:100px;display:block;float:left;clear:left;text-align:right;margin:0 5px 0 0}
#logar_topo input.data_logar, #logar_topo input.senha_logar{width:80px;height:14px;border:1px dashed #C00;background-color:#FFF;margin-bottom:5px}
#logar_topo input.data_logar{clear:right}
#logar_topo input.senha_logar{width:60px;clear:none;margin:0}
.botao {width:20px;height:15px;background-color:#C00;font:bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#FFF;float:right;cursor:pointer;margin:1px 10px 0 2px}
/*banner*/
#photos{width:740px;height:205px;position:relative;float:right;margin:8px 25px 0 0;z-index:-10;background-color:#FFF}

Mas se eu fizer dessa forma a foto onde estão as pessoas, vai ficar por cima do background e isso também não pode ocorrer :(

 

Grata

[Paulo Mardson 1]

você pode tirar um print da tela toda?? de preferencia com as modificações que te enviei.

 

Pelo que entendi, acho que se você tenta tirar a z-index que você colocou no banner, vai funcionar.

[Evandro Oliveira 331]

estude sobre: box-model, padding, margin e position.