Publicado em 7 de jul.

Div dentro de outra Div

Oi!

eu criei uma div dentro de outra div, so q ela não fica no lugar certo de jeito nenhum... olha ai:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>SGFB3</title>
</head>
<STYLE type="text/css">
#layout {

/ largura / width: 800px; / altura /

height: 100%;
position:fixed;
}

#noticias {

/ cor do fundo / background-color: #0E070E; / largura / width: 557px; / altura /

height: 100%;
position:fixed;
}

#ads {

/ cor do fundo / background-color: #0E070E; / largura / width: 168px; / altura /

height: 608px;
position:fixed;
float: left;
margin:10px;
left:0;
top:0;
}
</STYLE>
<body bgcolor="#150B14" topmargin="0">
<div id="layout">
 <p style="margin-top: 0; margin-bottom: 0">
 <img border="0" src="banner.jpg" width="800" height="440"></div>
<div id="noticias"></div><div id="ads"></div></body>

</html>

elas teriam que ficar nessas posições: http://i11.photobucket.com/albums/a181/sgfb/lay02.jpg

alguem pode me ajudar??

Discussão (20)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Thiago Retondar· 7 de jul.

Como criar um tópico para o seu problema

Não entendi... E você quer que as divs fiquem uma ao lado da outra? Se for isso, trabalhe com float.

:thumbsup:

Spice Boy· 7 de jul.

eu ja coloquei FLOAT, mas não vai, você pode ver isso ai no codigo

Thiago Retondar· 7 de jul.

Está bem bagunçado o código... Tente algo assim:

#layout {/ largura /width: 800px;/ altura /height: 100%;position:fixed;}#noticias {/ cor do fundo /background-color: #0E070E;/ largura /width: 557px;/ altura /height: 100%;float: left;}#ads {/ cor do fundo /background-color: #0E070E;/ largura /width: 168px;/ altura /height: 608px;float: right;margin:10px;}Pra que tanto position:fixed?

:thumbsup:

Spice Boy· 8 de jul.

Tiago, eu fiz do jeito que você me mandou esse codigo agora, mas ficou assim:

http://www.spicegirlsforeverbrasil.com.br/teste/

Thiago Retondar· 8 de jul.

E como é pra ficar? Estou entendendo nada da sua dúvida... /applications/core/interface/imageproxy/imageproxy.php?img=http://forum.imasters.com.br/public/style_emoticons/default/tongue.gif&key=8d11c3c7c03c7a5a294e250694d100848a0423dc34ef2af8d774f49d1b969fde" alt="Imagem Postada" />

:thumbsup:

Spice Boy· 8 de jul.

é pra ficar assim: http://i11.photobucket.com/albums/a181/sgfb/lay02.jpg

cada "retangulo" representa uma div, ai teria q ficar todas na msm posição que a da figura do layout http://i11.photobucket.com/albums/a181/sgfb/lay02.jpg

tendeu?

Thiago Retondar· 8 de jul.

Nossa... Está uma zona... @_@

Recomendo fazer a leitura desse tópico: Série de Video Tutoriais sobre Webstandards - CSS

Coloque uma div que englobe todas as outras. Fica mais fácil de manipular a estrutura.

:thumbsup:

Spice Boy· 8 de jul.

cara eu sou novato em divs...

eu ja vi alguns tutos e codigos diferentes de divs, so q nada tem dado certo...

eu to precisando resolver isso com uma urgência, ja tentei de tudo oq eu ja aprendi...

tem como você me dar um super help?

Thiago Retondar· 8 de jul.

Veja as vídeo aulas que eu passei no link! Não demora e você vai entender um pouco mais como funciona.

Por hora, coloque todas as suas divs dentro da div#layout que é a que me parece ser a div global.

:thumbsup:

Spice Boy· 8 de jul.

perece q quanto mais eu mexo, pior fica

http://www.spicegirlsforeverbrasil.com.br/teste/teste1.htm

Thiago Retondar· 9 de jul.

Viu as vídeo aulas? Veja elas e mais esses tópicos:

:seta: http://forum.imasters.com.br/index.php?/topic/222275-layout-fixo-3-colunas/

:seta: http://forum.imasters.com.br/index.php?/topic/223799-layout-fixo-2-colunas-menu-vertical/

:seta: http://forum.imasters.com.br/index.php?/topic/225340-propriedades-border-padding-margin/

Não é má vontade de ajudar, mas é que fica difícil se você não tiver uma base.

:thumbsup:

Evandro Oliveira· 10 de jul.

Pense de maneira linear e em caixas, blocos.

Comece dividindo o lay-out verticalmente, depois horizontalmente. Fica mais fácil compreender a estrutura e posicionamento dos elementos.

Depois, em cada divisão horizontal, procure encontrar novas divisões verticais, e consequentemente, divisões horizontais, sempre tentando compreender o que é cada pedaço que você está dividindo.

http://img4.imageshack.us/gal.php?g=parte1b.jpg

Spice Boy· 11 de jul.

cara, eu tinha fatiado o site todo dessa maneira ai, mas cada hora alguem diz que seria melhor eu recortar o banner ocmum e tals, e msm com o layout todo fatiado, ainda tenho problemas com as divs...

angelorubin· 11 de jul.

Bom dia,

Da uma olhada na estrutura (código da página) deste exemplo e tenta entender a lógica da montagem.

LAYOUT WEBSTANDARDS

Qualquer duvida é só postar.

Espero que ajude.

Spice Boy· 11 de jul.

humm, entendi + ou -, mas meu layout as divs tem uns espaços, e estão em posições meio opostas umas das outras...

você viu a figuda do lay?

ai eu entendi esse codigo, mas o problema realmente esta sendo é q quando eu coloco pra vizualizar, fica tudo bagunçado, mas quando eu estou no editor, aparece tudo no lugar

Thiago Retondar· 11 de jul.

Não visualize o resultado pela IDE que usa! Até por que, nenhum cliente vai ver o site por lá. Quando eu estava iniciando em meus estudos de CSS, testava no Firefox, Chrome - Safari, Opera e os IEs. Isso no começo, pois não sabia ao certo como o CSS ia se comportar com a minha marcação HTML.

Depois de bastante treino, você começa a pegar o jeito de ir mais rápido e saber como a página ficará em cada browser.

No seu caso, faça isso, veja os links que eu passei, e teste nos browsers a cada atualização que fizer. Esse é outro ponto.

Você fazendo o projeto inteiro visualizando em apenas um browser terá mais problemas para arrumar quando achar um erro no IE, por exemplo.

:thumbsup:

André Severino· 11 de jul.

Cara você quer começar a criar um projeto muito grande para quem não tem muito conhecimento em css, estruture seu site em tabelas mesmo para você ter uma noção de quantas colunas(blocos) você teve que usar, após isso, crie ele em css, não precisa importar as imagens de cara apenas coloque cor de background para cada lugar, ex: Banner: background-color: orange, e crie alguns layouts pequenos que usa apenas (banner+menu+conteudo+rodapé+sidebar) que você vai pegando o jeito.

Começe do começo, um portal desse tem que ter bastante conhecimento de css+html, pois vai usar float e position.

angelorubin· 12 de jul.

Bom dia,

Discordo da afirmação:

"Estruture seu site em tabelas mesmo para você ter uma noção".

Desnecessário isso ao meu entendimento.

É preciso começar certo, ou seja, comece pelo começo, parece redundante, mas é a melhor opção.

Estruture sempre seu trabalho com padrões, bom para você e bom para o seu cliente, ambos ganham.

Não tenha medo de tentar, testar, errar, contestar, pois é assim que se aprende, colocando a mão na massa.

Espero que ajude.

IvanNildo· 12 de jul.

Realmente isso tá me parecendo meio complicado de se fazer... acho que se você está encontrando dificuldade nisso deveria começar por algo mais simples e depois com experiência passar a tentar montar esse portal!

Spice Boy· 12 de jul.

gente, eu to quase conseguindo, mas quando muda as resoluções de tela as divs so ficam no canto...

ai o print com a resolução 800x600

http://img59.imageshack.us/img59/7561/printie.jpg

FIREFOX

http://img153.imageshack.us/img153/9581/printmozila.jpg

so q se eu vizualizar com a resolução 1024x768 as divs fican no canto:

http://img641.imageshack.us/img641/4001/printie2.jpg

FIREFOX

http://img269.imageshack.us/img269/3474/printmozila2.jpg

Eu usei tabelas dentro da div, olha ai o code:

<html>

<head>
<meta http-equiv="Content-Language" content="pt-br">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nova pagina 3</title>
</head>
<STYLE type="text/css">
#layout {

/ largura / width: 800px; / altura /

height: 100%;
position:fixed;
}

#noticias {

/ cor do fundo / background-color: #0E070E; / largura / width: 557px; / altura /

height: 100%;
float: left;
}

#ads {

/ cor do fundo / background-color: #0E070E; / largura / width: 168px; / altura /

height: 608px;
float: right;
margin:5px;
}

#enquete {

/ largura /
width: 553px;
/ altura /

height: 100%;
float: left;
margin:3px;
}

</STYLE>
<body topmargin="0" bgcolor="#150B14">
<center>
<p>
<img border="0" src="banner.jpg" width="800" height="440"></p>

</center>

<div id="noticias">
 <p align="left" style="margin-top: 6">
 <img border="0" src="noticias.png" width="566" height="36"></div>
<center>
<div id="ads"></div><div id="enquete">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="553" id="AutoNumber1" height="291">
 <tr>
 <td width="275" height="291" bgcolor="#0E070E" valign="top" rowspan="3">
 <p style="margin-top: 5"> <img border="0" src="enquete.png" width="177" height="33"></td>
 <td width="8" height="303" rowspan="3"> </td>
 <td width="270" height="207" bgcolor="#0E070E" valign="top">
 <p style="margin-top: 5"> <img border="0" src="fadomes.png" width="177" height="33"></td>
 </tr>
 <tr>
 <td width="270" height="3"></td>
 </tr>
 <tr>
 <td width="270" height="98" bgcolor="#0E070E" valign="top">
 <p style="margin-top: 5"> <img border="0" src="top.png" width="177" height="33"></td>
 </tr>
</table>
</div></body>
</center>
</html>

agora so falta eu saber como q eu faço para q as divs se adpitem a qualquer resolução de tela ^^

e ai gente, ta certinho os codes???

ajuda???