Da pra criar sem FLOat?

Dayane Gatinha 15 · Março 22, 2011

Bem é o seguinnte Turma. huahauh tenho um probleminha coisa de gente que iniciou agora no tabless HEUEHU, lah vai

tenho um Layout, e quero alinhar 3 divs sendo q uma usei o float right pra deixala do lado de lah --> que nocaso vai ser a div do login. usei float pq nao coheço outra maneira. procurei em varios foruns duvidas similares com a minha, mais so achei resoluções ocm float, e nao posso usar o float pois ele diexa minha pagina TODA ALINHADA A DIREITA, e quero ela ao centro, mesmo so usando float em uma das opçoes do css, como podem ver meu css ta uma zona mesmo hauhauh, mais eu centralizei minha pagina com Margin e pading 0 que se ajusta automaticamente, como poderia alinhas essas duas jagunças? XD

alguem sabe Oo. (detalhe os codigos q estao ai postados estao so em alguns o float no caso no menu e logo, pq eles ficam separados o menu fica em baixo do logo quando eu tiro o float, e o div do login fica do lado do cabeçalho LOL) e quando uso esse maledeto a pagina fica alinahda a eskerda e o copyright como menu LOOL2 @!#@!#

essa é a index

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link href="inicial.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="corpo">
 <div class="cabdivhome">
   <div class="logo"><img src="img/logo.png" width="111" height="108" align="left" id="logo" /></div>


<div id="menu" >
<ul>
       <li>HOME</li>
       <li>EMPRESA</li>
       <li>PRODUTOS</li>
       <li>CLIENTES</li>
       <li>CONTATO</li>
</ul>
</div>

      <div class="login"> Acesse Sua conta</div>
      <div class="rodape"> COPYRIGHTS</div>
 </div>      
</div>


</body>
</html>

essa aki é o css

* {
margin:0;
list-style:none;
vertical-align:baseline;
padding:0 auto;
}
body {
background-image: url(img/fit.jpg);
background-repeat: repeat-x;
margin:0 auto;
}
#bodydiv {
left:189px;
top:66px;
width:335px;
height:162px;
background-position: center;
text-align: center;
}

.corpo {
float:left;
margin:0 auto;
padding:0 auto;
width:855px;
}

.logo {
height: 110px;
width: 111px;
margin-left: 12px;
float:left;
}
.login {
float:right;
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
height: 82px;
width: 252px;
position: relative;
text-align: left;

}
#menu {
width:350px;
margin:0 auto;
display: inline;
width:300px;
float:left;
}

#menu li {
list-style:none;
font-family:"Agency FB";
font-size:17px;
color: #999;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 0px;
padding-left: 2px;
text-align: left;
display: inline;
margin:0 auto;
}

#menu ul li {
line-height:25px;
}

.cabdivhome {
height: 110px;
width: 855px;
background-image: url(img/cabjog.png);
background-repeat: no-repeat;
background-position: center top;
}
.rodape {
height: 110px;
width: 855px;
margin-right: auto;
vertical-align: middle;
}

a imagem do erro é essa:

CarlosMarx · Março 23, 2011

Não entendi nada, absolutamente nada do que você quer. Mas se você tirar o float da class .corpo, aparentemente ficou organizado aqui.. Layout centralizado com 3 colunas.

o copright indo pra cima: Você tem que usar um elemento com propriedade CSS clear:both para evitar que ele vá lá pra cima

Qualquer coisa posta aí novamente e tente ser mais específica.

Incluas em seu CSS:

.clear {
      clear: both
}

Nessa parte do HTML adcione o clear:

 
      <div class="login"> Acesse Sua conta</div>
<div class="clear"></div> <!-- Oia o clear aqui! -->
      <div class="rodape"> COPYRIGHTS</div>

Dayane Gatinha 15 · Março 24, 2011

Não entendi nada, absolutamente nada do que você quer. Mas se você tirar o float da class .corpo, aparentemente ficou organizado aqui.. Layout centralizado com 3 colunas.

o copright indo pra cima: Você tem que usar um elemento com propriedade CSS clear:both para evitar que ele vá lá pra cima

Qualquer coisa posta aí novamente e tente ser mais específica.

Incluas em seu CSS:
.clear {
      clear: both
}
Nessa parte do HTML adcione o clear:
 
      <div class="login"> Acesse Sua conta</div>
<div class="clear"></div> 
      <div class="rodape"> COPYRIGHTS</div>

o outro problema que esta dando é q o layout esta alinhado completamente a esquerda, pq Usei o FLoat Left para os componentes do cabeçalho ficarem ordenados um ao lado do outro usei float left no menu e no logo, e no rodape , e no login usei float right, so que como nao existe float center huehueh (infelizmente :( ), ai quando deixo margin e pading 0 auto; PARA ALINHAR A dIV CORPO ao centro , ele continua a esquerda, por causa do float q usei nos componentes do cabeçalho, prescisava do corpo centralizada ao meio nao a eskerda , e quando retiro o float o corpo fica no centro (como eu queria), masssssssss ai vem a bomba o cabeçalho fica todo desordenado, o logo fica acima e o menu abaixo do logo e do lado do menu o login que deixei com float right e etc uma tremenda bagunça.

Resumindo, com float ele fica TOTAL A eskerda , e sem float ele nao ordena minhas divs internas do corpo, por isso perugntei se alguem sabia como resolver isso sem float o float ta me dando dor de cabeça >.<, jah li varios posts, e varios tutos, mais alem de conheçer bem pouco, nao conheço tanto os termos para peskisa tentei encontrar topicos para alinhas 3 componentes , encontrei vairos pra alinhar 2, pior vai ser quando colocar a div de conteudo q aidna nem colokei se o cabeçalho ta assim magina o conteudo VIXI, deveria haver o float center seria ta mais facil kkkk

Obg

CarlosMarx · Março 25, 2011

Fiquei na mesma, isso é o que você chama de ser especifica? Jesus do céu!!! peço que nunca, nunca mesmo você poste nada complicado. rsrs. Brincadeiras a parte. Já vi que o seu conhecimento é limitado então taí mais ou menos o que você quer, e já com a div conteúdo incluída, agora vá estudar e comparar os códigos, mudei muita coisa, ainda precisa melhorar muito mas já serve. Estude mais sobre as propriedades CSS, assista umas video-aulas. Boa sorte!

(X)HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link href="inicial.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="corpo">

   <div class="logo"><img src="img/logo.png" width="111" height="108" align="left" id="logo" /></div>


<div id="menu" >
<ul>
       <li>HOME</li>
       <li>EMPRESA</li>
       <li>PRODUTOS</li>
       <li>CLIENTES</li>
       <li>CONTATO</li>
</ul>
</div>

      <div class="login"> Acesse Sua conta</div>
      <div class="conteudo">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac turpis urna, sit amet sagittis turpis. Sed iaculis nulla vel lorem adipiscing pellentesque aliquet urna interdum. Suspendisse ut tellus vitae purus lobortis tempus ut vel justo. Etiam elementum venenatis enim iaculis fermentum. Morbi pellentesque mi ut turpis porttitor eget tempus purus facilisis. Mauris nec sem id nisi viverra ultricies. Nam rutrum auctor sodales. Cras pharetra placerat dolor, quis egestas nunc fermentum sit amet. Sed nunc quam, sodales ac tincidunt molestie, pulvinar eu arcu. Duis ut lacus eros, a hendrerit elit. Ut accumsan libero non lectus malesuada vitae dictum leo vehicula. Donec viverra porttitor fringilla. Vivamus dignissim suscipit leo, nec sollicitudin nibh luctus malesuada. Duis vitae felis turpis. Aenean congue ante ac lacus ullamcorper bibendum.
      </div>
      <div class="clear"></div>

      <div class="rodape"> COPYRIGHTS</div>
 </div>      



</body>
</html>

Css:

* {
       margin:0;
       list-style:none;
       vertical-align:baseline;
       padding:0 auto;
}
body {
       background-image: url(img/fit.jpg);
       background-repeat: repeat-x;
       margin:0 auto;
}

.clear {
   clear:both;
}

.corpo {
       margin:0 auto;
       padding:0 auto;
       width:855px;
       background-color: #80FF80;
}

.logo {
       height: 110px;
       width: 111px;
       margin-left: 12px;
       float:left;
       background-color: green;
}
.login {
       float:right;
       margin-top: 0 10px 20px 10px;
       height: 82px;
       width: 142px;
       color: #FFF;
       text-align: left;
       background-color: blue;

}
#menu {
       width:570px;
       margin:0 auto;
       display: inline;
       float:left;
       background-color: gray;
       margin: 0 5px;
}

#menu li {
       list-style:none;
       font-family:"Agency FB";
       font-size:17px;
       color: #999;
       padding-top: 0px;
       padding-right: 5px;
       padding-bottom: 0px;
       padding-left: 2px;
       text-align: left;
       display: inline;
       margin:0 auto;
}

#menu ul li {
       line-height:25px;
}

.conteudo {
   width: 565px;
   margin-left: 130px;
}

.rodape {
       height: 110px;
       width: 855px;
       margin-right: auto;
       vertical-align: middle;
       text-align: center;
       background-color: aqua;
}

Obs.: Adcionei cores de fundo para identificar as div's, favor retirar.

Entrar

Arquivado

Da pra criar sem FLOat?

Recommended Posts

Dayane Gatinha 15 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CarlosMarx 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dayane Gatinha 15 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

CarlosMarx 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Ajuda em Paginação

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante