Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;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;background: -moz-linear-gradient(top, #DDE9B9,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 50%, from(#DDE9B9), to(#FFFFFF));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;background: -moz-linear-gradient(top, #DDE9B9,#fff,#fff,#fff) repeat-X;
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#DDE9B9), to(#FFFFFF));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 ?
É 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
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:
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.
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 ...
Ok, qualquer coisa volte a postar :thumbsup:
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
Verdade, utilize div para oque ela foi feito, principalmente layout.
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 ....
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:
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
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:
Legal ...
Obrigado a todos ...
Achei até que estava errando feio ...
Mas vou continuar estudando, pesquisando e principalmente testando ...
Obrigado
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:
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 ?