Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde amigos ...
Estou tentando montar um layout assim:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.osabetudo.com.br/css/layout.JPG&key=274a5907c9fb9dc1c5d8e27e7ae3f5f253be6589d11f3786b3decfbf921eaded" alt="Imagem Postada" />
Oque eu consegui fazer está neste link. O Css esta aqui:
body {
background-color: #7F7F7F;
text-align: center;
}
#container {
margin: 20px auto 20px;
width: 769px;
text-align: justify;
background: #EAEAEA;
}
#top {
height: 100;
width: 765px;
background-color: #447093;
border: 1px solid #EAEAEA;
border-width: 2px 2px 0 2px;
}
#middle {
text-align: justify;
border-width: 0 2px 0;
float: left;
}
#menu {
width: 160px;
border: 1px solid red;
float: left;
}Ola amigo, valeu pela dica ...
dei uma alterada no meu css. agora ele ficou assim:
body {
background-color: #7F7F7F;
text-align: center;
}
#container {
position: relative; /*isso naum tinha antes*/
margin: 20px auto;
width: 769px;
background: #EAEAEA;
}
#top {
height: 100;
width: 765px;
background-color: #447093;
border: 1px solid #EAEAEA;
border-width: 2px 2px 0 2px;
}
#middle {
text-align: justify;
border-width: 0 2px 0;
margin-left: 200px; /*Isso naum tinha antes*/
border: 1px solid red;
}
#menu {
width: 160px;
top: 30px;
left: 30px;
position: absolute; /*Isso naum tinha antes*/
border: 1px solid red;
background: #000;
color: #fff;
}Tem alguma forma de fazer com que o #container aumentasse o seu height em relacao ao height do #menu ???
funcionaria legal se eu setasse um height pra #container, so q isso naum seria uma forma interessante, pois todas as paginas variam por causa da diferenca no conteudo ....
Tem alguma forma de fazer com que o #container aumentasse o seu height em relacao ao height do #menu ???
Ah... não sabia desse detalhe :unsure: Bom, ai vamos ter que mudar o position do #menu... pois com o absolute, ele SAI do container, não empurrando ele.
Fiz as seguinte alterações e funcionou aqui:
#menu {
float: left; /* para o middle, poder ficar do lado do menu */
top: -30px; /*agora o posicionamento é outro, fiz negativo pra ele "subir */
position: relative; /*Isso naum tinha antes, agora relative para que o menu continue no container */
}
#middle {
float: left; /* vai testando, ai você entende */
margin-left: 190px; /*agora é 160px+30px */
}
#container {
text-align: left; /*pra corrigir o text align center do body, pois no IE isso alinha elementos tb*/
}
#top {
height: 100px; /*faltou a unidade de medida aqui */<!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"](http://www.w3.org/1999/xhtml) xml:lang="pt" lang="pt">
<head>Vai substituindo essas coisas que eu postei, e vendo oque acontece... no final, fica certinho, só postei assim separado, pra tentar explicar oque é cada coisa que eu fiz.Só agora fui ver no FireFox, adiciona isso para rodar certo..
#plataforma {
clear: both;
} </div><!-- fecha #middle -->
<div id="plataforma"></div>
</div><!-- fecha #container -->Muito obrigado irmão ...
funcionou perfeitamente ...
Pela imagem, basta você posicionar o #menu, com um absolute em vez de usar o float.
E a DIV middle, já está com o background #eaeae, na verdade, ela está pegando essa cor da DIV pai, que está por tras a #container. Para posicionar no centro, use "margin: 0 auto", ou 50%left e uma margem negativa... essa do "text-align: center", é só um "bug" para fazer nos IE5.x
o position:absolute, retira o elemento do fluxo, e o posiciona apartir da primeira ancestral com position.