Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

raydern

XHTML + CSS - problema de alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

raydern    0

raydern
Postado

Boa noite!

 

Gente minha dúvida é simples porem ta me deixando com dor de cabeça!

Estou fazendo um site nos seguintes moldes:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <style type="text/css">
      <!--
      @import url("estilo.css");
      -->
    </style>
  </head>
  <body>
    <div id="container">                <!-- abre container -->
      <div id="banner">                 <!-- abre banner -->
        [imagem do banner]
      </div>                            <!-- fecha banner -->
      <div id="conteudo">               <!-- abre conteudo -->
        <div id="contato_text">         <!-- abre campo de texto contatos -->
          <h1>Contato:</h1>
          <br/>
          <p>Para que possamos agilizar a resposta do seu orçamento, favor nos forneça  se possível as seguintes informações:</p>
          <br/>
          <ul>
            <li>Escala desejada:</li>
            <p>Informe a escala ou as medidas aproximadas que deve ser construída a maquete física ou o espaço destinado para a exposição da mesma.</p>
            <br/>
            <li>Detalhamento:</li> 
            <p>Informe os pontos desejados para enfatizar o destaque do detalhamento interno e externo na maquete.</p>
            <br/>
            <li>Fornecer:</li>
            <p>As plantas do projeto a ser executado, maquete eletrônica, material promocional como fotos e folders.</p>
            <br/> 
            <p>Obs.: Para o orçamento podem ser enviados os materiais em arquivos via email e nos programas como: Corel Draw e Auto CAD, etc.</p> 
          </ul>
          <br/>
          <p>O orçamento é baseado numa previsão de horas-trabalhadas e materiais utilizados na confecção da maquete.</p>
          <br/>
          <p>Para envio de arquivos em anexo, favor utilizar o seguinte e-mail:</p>
          <p>email</p>
        </div>                            <!-- fecha campo de texto contatos -->
        <div id="contato_form">           <!-- abre campo formulario-->
          <form method="post" action="#">
            <fieldset>
              <legend>Contato:</legend>

              <br/>
              <legend>Nome:</legend>
              <input type="text" name="" class="campos"/>
              <legend>E-mail:</legend>
              <input type="text" name="" class="campos"/>
              <legend>Assunto:</legend>
              <input type="text" name="" class="campos"/>
              <legend>E-mail:</legend>
              <input type="text" name="" class="campos"/>
              <legend>Assunto:</legend>
              <input type="text" name="" class="campos"/>
              <legend>Mensagem:</legend>
              <textarea name="mensagem" cols="30" rows="8" class="campos">
              </textarea>
              <br/>
              <h4>
                <input type="submit" class="botao" value="Enviar"/>
                <input type="reset" class="botao" value="Limpar"/>
              </h4>
            </fieldset>
          </form>
        </div>                            <!-- fecha campo formulario -->
      </div>                              <!-- fecha conteudo -->
      <div id="rodape">                   <!-- abre rodapé -->
        texto de rodapé
      </div>                              <!-- fecha rodapé -->
    </div>  				  <!-- fecha container -->
  </body>
</html>

com o seguinte css:

 

*{
  margin: 0;
  padding: 0;
}

body{
  width: 1024px;
  height: 100%;
  margin: 0 auto;
  font: 11px verdana, tahoma, arial;
  text-align: justify;
  color: #000000;
}

/* pseudo classes */

h1,h2,h3{
  padding: 10px 0 10px 20px;
}

h4{
  text-align: center;
}

p.adicional{
  font: 10px bold;
}

legend{
  padding: 2px 0;
}

li{
  list-style-position: inside;
  font-weight: bold;
}

.campos{
  border: double 3pt #000000;
  background:#FFF;
  width:380px;
}

.botao{
  border: double 3pt #000000;
  background:#FFF;
  width: 175px;
}
/* formatacao das divs de conteudo */

#container{
  position: relative;
  float: left;
  width: 984px;
  height: 100%;
  background: #FFFFFF url(_img/bg.jpg);
  padding: 0 20px;
}

#banner{
  position: relative;
  float: left;
  width: 984px;
  height: 200px;
  background: #FF6600;
}

#conteudo{
  position: relative;
  float: left;
  width: 984px;
  background:#FFFFFF;
  overflow: auto;
}

#principal_text{
  padding: 40px;
}

#servicos_texto{
  padding: 40px;

}

#contato_text{
  position: relative;
  float: left;
  width: 420px;
  padding: 35px;
  height: 100%;
}

#contato_form{
  position: relative;
  float: right;
  width: 410px;
  padding: 35px;
  height: 100%;

}

#contato_form fieldset{
  border: double 3px #000000;
  padding: 10px;
}

#rodape{
  position: relative;
  float: right;
  padding: 10px;
  display: inline;
}

porem reparei que em navegadores diferentes apresenta um pequeno espaço depois do rodapé.... e gostaria que o bloco container pegasse 100% da página... mas foi sem sucesso....

 

Alguem pode me dizer o que faço de errado?

Grato desde já

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

height com essa funcionalidade só serve para o IE.

 

Deveria ficar assim:

 

#container {
    min-height: 100%;
}

/* IE maldito! */
* html #container {
    height: 100%;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito