Jump to content
Carlos Rocha

float right não funcionou

Recommended Posts

Carlos Rocha

Olá pessoal.

Estou aqui tentando aprender CSS do inicio.

Tenho a pagina abaixo, e pelo que já li, a div com id menu2 deveria flutuar à direita.

Porque não esta acontecendo isso?

<html>
<head>
  <style>
    body
    {
     margin:0 auto;
     pading:0 auto;
     background: #ddd; 
     color: green;
    }
    #tudo
    {
     margin:0em auto;
     width: 1000px;
    }
    #topo
    {
      width: 1000px;
    }
    #menu1
    {
      width: 1000px;
    }
    #corpo
    {
      width: 300px;
      float: left;
    }
    #menu2
    {
      width: 300px;
      float: rigth;
    }
    #base
    {
 clear:both;
      width: 1000px;
    }
 </style>
 </head>
 <body>

   <div id="tudo" class="tudo">

    <div id="topo" class="topo">Topo
    </div>

    <div id="menu1" class="menu1">Menu 1
    </div>

    <div id="corpo" class="corpo">Corpo
    </div>

    <div id="menu2" class="menu2">Menu 2
    </div>

    <div id="base" class="base">Base
    </div>

   </div>

 </body>
</html>

Edited by carcleo

Share this post


Link to post
Share on other sites
I-NOZex

ingles mal escrito ;)

tens float: rigth; e devia ser float: right; :cheesygrin:

o pior, é que no titulo escreveste bem :P acontece

Edited by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
I-NOZex

nao precisas!

Eu detectei ao usar o firebug, vi q ele nao tava a atribuir a propriedade do float, e vi porque estava mal escrito a value;)


B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
Carlos Rocha

Ok.

Porem, estou tendo enorme dificuldade em montar o layout abaixo:

site.png

Pode me ajudar?

Estou fazendo da forma abaixo mas o quadro que esta em cima da parte colorida no desenho, só fica abaixo da parte colorida.

* {	 margin:0 auto; }

#topo
{
 position:absolute;
 width:1000px;
 left:50%;
 margin-left:-500px;
}
#tarja
{
 top:100px;
 height:358px;
 background-image:url(../../img/fundo.jpg);
 background-repeat:repeat-x;
}

#cabecalho
{
 position:absolute;
 top:120px;
 width:1000px;
 left:50%;
 margin-left:-500px;
}
 #formBox
 {
    width:250px;
    float:left;
    text-align:center;
 }
     #formTopo
     {
     }
     #form
    {
       width:240px;
       background-color:#424242;
    }
#banner
 { 
    float:right;
 }
#mensagem
{
 clear:both;
}
#portais
{
}
#imagens
{
}
 #destaques
 {
 }
 #galeria
 {
 }
 #midiaSocial
 {
 }
#anuncios
{
}
#base
{
}

Edited by carcleo

Share this post


Link to post
Share on other sites
Carlos Rocha

dá um f5

Outra coisa.

Meu codigo esta identado mas quando colo aqui ele perde a identação

Acertei a identação.

Deseja o HTML?

Edited by carcleo

Share this post


Link to post
Share on other sites
Carlos Rocha
<!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>
<link rel="stylesheet" type="text/css" href="global/css/body.css" /></link>
<title>Minha Página</title>
</head>
<body>
 <div id="topo"> </div>
 <div id="cabecalho">
<div id="tarja"></div>
<div id="formBox">
  <div id="formTopo"></div>
  <div id="form"> </div>
</div>
<div id="banner"></div>
 </div>  
 <div id="mensagem"></div>
 <div id="portais"></div>
 <div id="destaques"></div>
 <div id="galeria"></div>
 <div id="midiaSocial"></div>
 <div id="anuncios"></div>
 <div id="base"></div>
</body>
</html>

Edited by carcleo

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.