Posicionamento DIV - absolute

[sfonseca45 0]

Bom Dia

 

Estou desenvolvendo um projeto para clinica de fisioterapia e estou procurando não utilizar tabelas no layout, porem ao tentar usar flooter nas DIVs acabei me atrapalhando e como tinha pressa para apresentar ao cliente usei position: absolute - ai eu me ferrei - porque largura são fixas em % porem o comprimento (hight) é flexível, então o que acontece quando uma DIV tem um conteudo maior fica por baixo da outra.

 

vejam o layout aqui

 

o código css dos boxes:

 

/* Boxes */

#tudo {
width: 100%;
height:auto;
margin-top:1%;
margin-bottom: 1%;
}

#grupotopo {
position: absolute;
width: 100%;
height:200px;
/* Para Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #FFF,#fff,#fff,#DDE9B9)/* repeat-X*/;
/* Para WebKit (Safari, Google Chrome etc) */
   background: -webkit-gradient(linear, 0% 74%, 0% 100%, from(#FFFFFF), to(#DDE9B9));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 

StartColorStr='#00FFFFFF', EndColorStr='#50DDE9B9');
background-image: -o-linear-gradient(top,RGB(255, 255, 255),RGB(255, 255, 255),RGB(237, 

248, 209));
}

#logo {
position: absolute;
background-image:url(../imgs/logo.gif);
background-repeat: no-repeat;
top: 2%;
width:20%;
height:180px;
margin-left:10%;
}

#player {
position:absolute;
top:2%;
left: 78%;
width:200px;
height:20px;
}

#login {
position:absolute;
top:36%;
left:62%;
width:400px;
height:20px;
color:#090;
}

#menu {
position:absolute;
top:61%;
left:29%;
width:auto;
height:auto;
}


#grupobanner {
position: absolute;
top: 32%;
width:100%;
height:300px;
/* Para Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #DDE9B9,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#DDE9B9), to(#FFFFFF));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 

StartColorStr='#50DDE9B9', EndColorStr='#00FFFFFF');
background-image: -o-linear-gradient(RGB(237, 248, 209),RGB(255, 255, 255));
background-color:#FFF;
}

#banner {
width: 98%;
height: 290px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
background-image:url(../imgs/fundo_banner.png);
background-repeat:no-repeat;
background-position: center;
}

#grupocentral {
clear:both;
position:absolute;
top: 81%;
width:100%;
height:500px;
}

#grupoesquerdo {
position:absolute;
top: 1%;
left:4%;
width:25%;
height:auto;
}

#grupocentro {
position:absolute;
top:1%;
left: 32%;
width:35%;
height:auto;
}
#grupodireito {
position:absolute;
top:1%;
left: 70%;
right:3%;
width:25%;
height:auto;
}

#esquerdocabecalho {
height: 100%;
background-image:url(../imgs/corpo.gif);
background-repeat:no-repeat;
display:table-cell;
line-height:30px;
font-family:Cambria, Tahoma, "Trebuchet MS";
font-size:24px;
padding-left:30px;
color:#090;
font-weight: bolder;
text-transform: none;
font-variant: small-caps;
vertical-align:middle;
}

#esquerdoconteudo {
margin-top:5%;
padding-top:10px;
padding-left:5px;
padding-right:5px;
width:100%;
height:auto;
text-align:center;
margin-bottom: 5%;
background: #DDE9B9;
/* Para Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(top, #DDE9B9,#fff,#fff,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#DDE9B9), to(#FFFFFF));
/*filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, 

StartColorStr='#50DDE9B9', EndColorStr='#00FFFFFF');*/
background-image: -o-linear-gradient(RGB(237, 248, 209),RGB(255, 255, 255),RGB(255, 255, 

255));

-pie-background: linear-gradient(#DDE9B9,#FFFFFF, #FFFFFF);
behavior: url(htc/PIE.htc);
}

#rodape {
position: absolute;
top: 185%;
left:2%;
width:96%;
display:table-cell;
line-height:30px;
vertical-align:middle;
text-align:center;
font-variant:normal;
font-weight: bold;
}

 

Qual a melhor solução ?

[NetBoy16 72]

Nao deu pra entender direito a explicacao, soh entendi que uma div fica emcima da outra, tentou usar margin nessa div? ou um padding na div pai? Pq nao deixa o position no default e alinha as divs a base de floats e margins ?

[sfonseca45 0]

É esse o problema ... quando fui usar floats eu não consegui posicionar as DIVS e na pressa para mostrar o layout use position:absolut ...

você chegou a ver o layout?

Obrigado pela resposta

[NetBoy16 72]

Sim, vi o layout, vi que ali em baixo o inovacao ta um pouco desalinhado, mas fora isso nao vi nada fora do normal.

 

Mas deixa o position default e tenta alinhar nao soh com float, mas tb com margin, esse é o jeito semanticamente correto, se precisar de ajdua soh dar um tok :thumbsup:

[Giovani 104]

sfonseca45, explique exatamente qual e onde é o seu problema.

E vai uma dica - não se ofenda, por favor - faça todo o seu código novamente, não está legal.

[sfonseca45 0]

Não me ofendo não ...

Já arrumei usando float/margin ... deu uma dorzinha de cabeça para acertar tudo ... só o grupocentral que ficou desalinhado ... mas vou tentar resolver ...

 

Veja se estou errando:

 

Crio uma div para tudo ...

Crio uma div para o topo -> dentro dela vai:

div logo

div player

div login

div menu

-> fecha div topo

crio uma div banner -> dentro vai imagem de fundo + um banner -> fecha div banner

crio uma div grupocentral -> dentro dela vai:

-> div esquerdo -> dentro div cabeçalho/div conteudo (2x) -> fecha div esquerdo

-> div central -> dentro div cabeçalho/div conteudo (2x) -> fecha div central

-> div direita -> dentro div cabeçalho/div conteudo (2x) -> fecha div direita

-> fecha div grupocentral

->crio div rodape - dentro texto -> fecha div rodape

-> fecha div tudo

 

estou fazendo o layout assim ...

[NetBoy16 72]

Ok, qualquer coisa volte a postar :thumbsup:

[Giovani 104]

QUe bom :thumbsup:

Não me ofendo não ...

 

Cara, por que tanta div?

Logo, é imagem? Vai ter link? Coloca num a ou img.

Login, inputs? Coloca num form.

Menu, lista? um ul .... e assim por diante.

Veja se estou errando:

 

div logo

div player

div login

div menu

[NetBoy16 72]

Verdade, utilize div para oque ela foi feito, principalmente layout.

[sfonseca45 0]

Fiquei triste (rs) ...

Mas tudo que você disse eu fiz mas dentro das divs

Por exemplo:

div logo -> tem a imagem do logo

div player -> tem um player em flash

div login -> um form para login

div menu -> um menu feito com imgs no Fireworks

 

Se não for com divs como vou posicionar isto no layout ?

 

Obrigado pela aula ....

[NetBoy16 72]

você até pode colocar coisas dentro de divs, mas só se estas fazem parte do seu layout, exemplo:

 

 

<div id="container">
<div id="topo"><img src="imgtopo.png" alt="bannertopo" /></div>
<div id="menu"><ul><li>menu 1</li></ul></div>
<div id="conteudo"><p>texto aki</p></div>
<div id="rodape"><a href="creditos.html">Feito por alguem</a></div>
</div>

 

 

Como você viu ali, tem lista, img e link dentro de div, mas por estas serem parte do layout, agora se você kiser fazer algo fora desse escopo, o melhor mesmo é você fazer sem usar div, e você nao precisa de div pra alinhar, você pode alinhar uma simples img por exemplo, #fikdik :thumbsup:

[sfonseca45 0]

Desculpe a ignorancia ...

Mas não foi o que eu fiz ...

Apenas, e não sei se é correto, usei por exemplo na "div logo" o logo como background e na "div banner" uma imagem com sombra como bakground ...

Veja uma parte do html ->

<div id="grupotopo">
 <div id="logo"></div>
 <div id="player">
   <object type="application/x-shockwave-flash" data="dewplayer.swf"   width="200" height="20" id="dewplayer" name="dewplayer">
     <param   name="movie" value="dewplayer.swf" />
     <param name="flashvars"   value="mp3=musicas/musica1.mp3&autostart=1&showtime=1&volume=80" />
     <param name="wmode" value="transparent"   />
   </object>
 </div>
 <div id="login">Agende sua consulta. <a href="#">Cadastre-se</a> ou faça seu <a href="#">login</a></div>
 <div id="menu"><img src="imgs/menu.png" width="705" height="35" /></div>
</div>

 

Desculpem se esou sendo chato, mas quero me aperfeiçoar ...

 

Obrigado

[NetBoy16 72]

Tranquilo, o forum serve principalmente pra isso, tirar suas duvidas e aprender, sim, em certas partes você fez certo, criou uma div topo(logo) pra ter a img, nao disse que você estava errado e concordei com oque o giovani disse, mas é aquilo ali, e quanto a sua nova pergunta, varia com oque você vai querer, no caso se você soh quer mostrar a img pode até ser como fundo, mas se essa img vai ter algum dinamismo(Ex:link) o ideal é colocar como img mesmo, espero ter ajudado :grin:

[sfonseca45 0]

Legal ...

Obrigado a todos ...

Achei até que estava errando feio ...

Mas vou continuar estudando, pesquisando e principalmente testando ...

 

Obrigado

[NetBoy16 72]

Fica tranquilo, as vezes a gente tem que cair(errar) pra aprender.

E sim, estude e pratique e se dedique muito pra melhorar e se aperfeicoar cada vez mais.

Qualquer coisa estamos aqui :thumbsup: