[Resolvido] Alinhamento

[gremio10 14]

Fala galera, eu estou montando um site que precisa ficar centralizado, mas certos componentes tem de ser infinitos, ou seja, não ficar restrito ao valor dado para que ele fique centralizado...

 

fiz assim:

 

section#1 { width: 100%; background: url(../images/bg-dark.png); height: 460px; margin-top: 120px; }
div#wrap { width: 1000px; margin: 0 auto; }

<div id="wrap">
<section id="1">
 meus valores
<section>

<section id="2">
 meus valores
<section>
</div>

 

na #1, eu preciso que ele fique infinito, mas como fazer se ele está no #wrap ?

 

Obrigado.

[angelorubin 142]

Bom dia,

 

Gostaria de lhe salientar duas coisas:

 

1 - Não coloque números no inicio da nomenclatura de suas regras CSS, isto lhe causará problemas.

 

Como por exemplo:

 

#1 <-- Errado

 

#suaRegra <-- Correto

 

#sua_regra <-- Correto (não é a melhor forma, mas é correto).

 

 

2 - Você esta utilizando uma tag de HTML5, a tag (section), portanto para funcionar corretamente utilize a marcação condizente com o HTML5 - veja aqui ( clique aqui ) os novos elementos de estrutura do HTML5.

 

Quando você fala componente infinito, você se refere a tamanhos variaveis para os elementos?

 

Espero que ajude.

[crf_h0m3r 5]

Componentes infinitos? Como assim, pode explicar melhor?

[gremio10 14]

Desculpa, eu apenas coloquei como exemplo os # com numeros...

 

Componentes infinitos? Como assim, pode explicar melhor?

 

assim, sabe a faixa que fica em todo o site ? eu quero fazer, mas ele está dentro de uma div que está com largura de 1000px e centralizando ele...

    _________
   |       |
-----------------

-----------------
   |       |
   ---------

 

desenho feio em ^^ mas era mais ou menos isso ^^

 

Obrigado.

[William Bruno 1501]

na #1, eu preciso que ele fique infinito, mas como fazer se ele está no #wrap ?

tire ele para fora do wrap.

 

esse é o mais correto.

 

eu criaria mais blocos com classes.

 

<div class="centralizado1000">
</div>
<div id="infinito">
</div>
<div class="centralizado1000">
</div>

[gremio10 14]

esse seria a forma mais correta ? não acha que é um aumento de <div> 's ?

[William Bruno 1501]

sim, é um aumento. Porém é a forma mais simples e q funciona de resolver.

 

aumentei, pq a tua estrutura pediu por isso.

se não fosse assim, o teu #wrap deveria ter position: static

 

e o infinito teria que ter position absolute, width: 100%, left 0, top (valor em px do topo da viewport até onde você quer que fique).

 

ou seja, zuei toda a estrutura do documento, e a visualização, apenas para resolver um afeito, que "criar a div" a mais resolveu.

 

 

 

se preocupe com a estrutura. Se não fizer da forma que falei, você terá muito mais trabalho de manutenção. E o sistema será engessado.

Pense sempre em escalabilidade.

[gremio10 14]

Valeu William, ótima explicação.