[Resolvido] Como alinhar isso?

arthurcastro · Julho 2, 2011

É o seguinte gente...

Dentro da tabela principal, eu preciso alinhar os conteúdos, eu quero assim olhem...

Imagem:( http://imageshack.us/photo/my-images/84/contentq.png/ ) [sendo que na imagem há alguns quadrados menores que os outros (ignorem isso. é porque eu fiz mal feito :'(] eu consegui alinhar nos navegadores firefox e google chrome com cellspacing, mas no ie fica tudo torto. -.-. Se vocês puderem me ajudar a alinhar assim em todos os navegadores eu agradeço. Obrigado :)

Thiago Retondar · Julho 2, 2011

Olá Arthur,

seja bem vindo ao fórum.

Seguinte, não use tabelas para estruturar seu site. Use as tags com semântica: <table> apenas para tabelas.

Use <div> para separar os blocos. Organize-os com float:left (CSS - aliás, toda a estilização deve ser feita com CSS).

Da uma olhada nos artigos do Maujor em especial nos de BoxModel, Layout com 3 colunas e Layout CSS passo-a-passo.

:thumbsup: @thiagoretondar

arthurcastro · Julho 2, 2011

Olá Arthur,

seja bem vindo ao fórum.

Seguinte, não use tabelas para estruturar seu site. Use as tags com semântica: <table> apenas para tabelas.

Use <div> para separar os blocos. Organize-os com float:left (CSS - aliás, toda a estilização deve ser feita com CSS).

Da uma olhada nos artigos do Maujor em especial nos de BoxModel, Layout com 3 colunas e Layout CSS passo-a-passo.

:thumbsup: @thiagoretondar

Eu ainda gostaria de uma ajuda por que eu sou péssimo com div xD.

Você pode me ajudar a criar um div igual o da imagem que eu postei?

Thiago Retondar · Julho 2, 2011

Não vou criar o código inteiro para você pois não fui pago pra isso... mas vou ajudar com a base:

<div id="geral">
   <div id="slide">
   	<!-- CONTEÚDO DO SLIDE AQUI -->
   </div><!-- /#slide -->

   <div id="conteudo1">
       <!-- CONTEÚDO DA DIV AQUI -->
   </div><!-- /#conteudo1 -->

   <div id="conteudo2">
       <!-- CONTEÚDO DA DIV AQUI -->
   </div><!-- /#conteudo2 -->

   <div id="conteudo3">
       <!-- CONTEÚDO DA DIV AQUI -->
   </div><!-- /#conteudo3 -->

   <div id="conteudo4">
       <!-- CONTEÚDO DA DIV AQUI -->
   </div><!-- /#conteudo4 -->    
</div><!-- /#geral -->

Definindo um width para div#geral, e aplicando corretamente os float e width, os quadros vão se ajeitar corretamente.

Estude um pouco os links que eu passei.

:thumbsup: @thiagoretondar

arthurcastro · Julho 2, 2011

Não vou criar o código inteiro para você pois não fui pago pra isso... mas vou ajudar com a base:
<div id="geral">
   <div id="slide">
   	
   </div>

   <div id="conteudo1">
       
   </div>

   <div id="conteudo2">
       
   </div>

   <div id="conteudo3">
       
   </div>

   <div id="conteudo4">
       
   </div>    
</div>
Definindo um width para div#geral, e aplicando corretamente os float e width, os quadros vão se ajeitar corretamente.

Estude um pouco os links que eu passei.

:thumbsup: @thiagoretondar

Hahaha :) muito obrigado. to pensando em pagar você lol

Só uma perguntinha a + é o id eu pego o css daqueles sites que você me passo? 0.0

-css- eu vo ficar doido

e mesmo assim obrigado :)

Eu to tentando criar um site pra minha rádio xD ta indo devagar só que eu garrei aí! grrrrrrrrr

Eu tentei aqui mas como colocar a div 3 em baixo da div 1 e 2? 0.0

Thiago Retondar · Julho 2, 2011

Só uma perguntinha a + é o id eu pego o css daqueles sites que você me passo? 0.0

Não entendi o que quis dizer, mas... o id você pega assim no CSS:

#id_do_elemento {


//

}

Pega com o jogo-da-velha (#).

:thumbsup: @thiagoretondar

arthurcastro · Julho 2, 2011

Só uma perguntinha a + é o id eu pego o css daqueles sites que você me passo? 0.0

Não entendi o que quis dizer, mas... o id você pega assim no CSS:
#id_do_elemento {


//

}
Pega com o jogo-da-velha (#).

:thumbsup: @thiagoretondar

Ok...

Não precisa fazer o código pra mim mas só me diz como eu coloco uma div em baixo da div do slide e do conteudo 1.

que é o slide + uma caixa de conteúdo.

[em baixo + 3 caixas de conteudos] como colocar essas 3 em baixo das duas primeiras? 0.0

Seu blog é legal :)

Thiago Retondar · Julho 2, 2011

Então, é como eu te disse.

É só definir o width correto com float que ao atingir o tamanho máximo, os boxes vão se alinhando normalmente. Daí, e só aplicar o margin para ter aquele espaçamento que deseja.

Mostre como está ficando o seu código. Assim dá para auxiliar melhor ;)

:thumbsup: @thiagoretondar

arthurcastro · Julho 2, 2011

Então, é como eu te disse.

É só definir o width correto com float que ao atingir o tamanho máximo, os boxes vão se alinhando normalmente. Daí, e só aplicar o margin para ter aquele espaçamento que deseja.

Mostre como está ficando o seu código. Assim dá para auxiliar melhor ;)

:thumbsup: @thiagoretondar

<style type="text/css">
*{
margin:0px;padding:0px;
}
.tudo{
width:850px;
height:400px;
margin:0 auto;
}
h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:44px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:200px;
height:45px;
margin-left:160px;
margin-top:30px;
}
h2{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:100px;
height:45px;
margin-left:6px;
margin-top:50px;
}
h3{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:100px;
height:45px;
margin-left:30px;
margin-top:40px;
}
h4{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:100px;
height:45px;
margin-left:30px;
margin-top:40px;
}
h5{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:100px;
height:45px;
margin-left:30px;
margin-top:40px;
}
h6{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:lighter;
/**font-weight:bold;*/
color:#FFFFFF;
width:360px;
height:45px;
margin-left:240px;
margin-top:40px;
}
h6 span{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:18px;
}
.bloco1{
width:600px;
height:150px;
background-color:#000000;
float:left;
}
.bloco2{
width:200px;
height:150px;
background-color:#000000;
float:left;
margin-left:5px;
}
.bloco3{
width:265px;
height:120px;
background-color:#000000;
float:left;
margin-left:0px;
margin-top:5px;
}
.bloco4{
width:265px;
height:120px;
background-color:#000000;
float:left;
margin-left:5px;
margin-top:5px;
}
.bloco5{
width:265px;
height:120px;
background-color:#000000;
float:left;
margin-left:5px;
margin-top:5px;
}
</style>
<div class="tudo">

<div class="bloco1">
<h1>SLIDE</h1>
<h6>Se possivel com esses espaocos no meio da tabela <span>-></span></h6>
</div>
<div class="bloco2">
<h2>CONTEUDO2</h2>
</div>
<div class="bloco3">
<h3>CONTEUDO3</h3>

</div>
<div class="bloco4">
<h4>CONTEUDO4</h4>
</div>
<div class="bloco5">
<h5>CONTEUDO5</h5>
</div>

</div>

Mas no Internet explorer o conteudo1 fica errado. :( me ajuda com um hack pro ie? 0.0

Deixa eu explicar se o tamanho do conteudo1 está 150px e do slide tambem funciona no chrome e no firefox, no ie, nao. agora se eu coloco 200px nos dois funciona em todos os navegadores. que isso? 0.0

.bloco1{
width:600px;
height:150px;<- se eu coloco 200px aqui funciona normal inclusive no ie. 0.0
background-color:#000000;
float:left;
}
.bloco2{
width:200px;
height:150px;<- se eu coloco 200px aqui funciona normal inclusive no ie. 0.0
background-color:#000000;
float:left;
margin-left:5px;
}

Acima de 200px funciona normal eu hein!

arthurcastro · Agosto 13, 2011

[Resolvido]

Arquivado

[Resolvido] Como alinhar isso?

Recommended Posts

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

arthurcastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante