Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá a todos,
Estou às voltas com este código: https://jsfiddle.net/ededev/f9gvzetz/4/
Ainda não acertei na utilização da propriedade float. Preciso que o header ocupe os 100% da class wrapper mas que no interior do header tenha a tag img encostada ao lado esquerdo e a lista do lado direito.
Da maneira como estou a pensar o header será o pai da tag img e ol. A img irá ocupar apenas 20% da largura do seu pai e a tag ol irá ocupar 40% do lado direito do seu pai.
A questão é que quero que a altura do pai, header, seja em percentagem.
Por isso tenho duas questões:
1-Como consigo colocar a propriedade height em %;
2-Esta é a maneira mais correta de estruturar o DOM?
Obrigado
Já funcionar: https://jsfiddle.net/ededev/f9gvzetz/8/
Sim, o height não é preciso. Apenas o estava a referir pois não sabia da característica da propriedade clear com parametro both.
Esta é a maneira mais correcta de fazer este tipo de layout?
Obrigado
Não que seja errado, mas o float não é para isso, o float geralmente é ensinado errado, o float flutua os elementos, ele é mais usado para imagens no meio de textos, com isso os textos ficam ao redor do elemento, não precisa ser imagens mas qualquer elemento que queira que flutue,
leia mais sobre isso:
https://css-tricks.com/all-about-floats/
Agora para layouts utilize a propriedade display, no seu caso tente algo como nesse exemplo:
Já me tinha apercebido disso! Aprendi a utilizar o float para dividir a página em várias colunas, mas tenho vários problemas.
Pelo que li devemos utilizar o display, certo?
Neste exemplo, https://jsfiddle.net/ededev/rxmynrby/ , utilizei a propriedade display: block e inline no segundo elemento, na tag article. Não deveria ficar em linha?
Uma vez que este tópico já foi aberto, decidi abrir um novo: http://forum.imasters.com.br/topic/551995-problema-com-displayinline-block/
[uPDATE]
Agora é que vi o seu segundo link. Já explorei o flex, mas é a única opção para este efeito, colunas em paralelo (na mesma linha), que a propriedade display disponibiliza?
Actualizado: https://jsfiddle.net/ededev/rxmynrby/1/
Obrigado
Não entendi o que você quer agora :huh:
>
Já funcionar: https://jsfiddle.net/ededev/f9gvzetz/8/
Sim, o height não é preciso. Apenas o estava a referir pois não sabia da característica da propriedade clear com parametro both.
Esta é a maneira mais correcta de fazer este tipo de layout?
Obrigado
Olá codercss,
1-) Em CSS o nome técnico correto do que você chama de parâmetro é valor da propriedade CSS ou simplesmente valor.
Assim o correto é dizer: ..."não sabia da característica da propriedade clear com valor both."
2-) Sim a maneira como você criou o layout em https://jsfiddle.net/ededev/f9gvzetz/8/ usando float, está correta.
Você não precisa usar o DIV adicional <div class="clear"></div> na marcação.
Retire aquele DIV e declare overflow: auto para .header (container dos floats) que você obterá o mesmo efeito.
Obrigado pela correção :)
Parâmetro é para funções ou procedimentos, significa que o local onde é colocado esse valor pode receber vários valores e de outros tipos. (isto é uma explicação empírica, não está by the book) ;)
Então entre a propriedade display com valor flex ;) e a propriedade float com os valores left ou right você sugere a float?
Já está corrigido: https://jsfiddle.net/f9gvzetz/9/
Maujor,
interessante isso do overflow, não entendi o porque o container segue o tamanho dos elementos floats por causa do overflow, poderia me explicar por favor? Já que o overflow serve para o comportamento do elemento caso seu conteúdo ultrapasse seu tamanho
Olá Everson,
Um guia completo sobre comportamento de floats, inclusive o uso de overflow, encontra-se em:
https://css-tricks.com/all-about-floats/
Então entre a propriedade display com valor flex ;) e a propriedade float com os valores left ou right você sugere a float?
As funcionalidades de FlexBox se destinam a criar layouts de componentes de uma página web.
O uso delas é mais intuitivo e mais fácil de se controlar do que o uso de float.
A escolha de um ou outro depende do suporte dos navegadores à FlexBox. Caso haja suporte recomendo o uso de FlexBox.
Muito bom esse artigo. Ainda o estou a ler, mas estou a gostar bastante.
Obrigado a todos pelas dicas, vou voltar aos estudos! Pois o que Everson da Luz falou sobre o overflow ainda é chinês para mim :P
Obrigado
O elemento pai que é o wrapper, irá aumentar o height automaticamente dependendo do tamanho dos elementos filhos, como você está usando float, os elementos flutuam para fora do elemento pai, então para o elemento pai seguir com o fluxo normal do tamanho, coloque um elemento no fim do header com o clear: both, para limpar o float
<div style="clear:both"></div>
Sobre o height em porcentagem, para funcionar você deverá definir um height para os elementos pais mais superiores, como o body e html
html, body {
Mas acho muito dificil a necessidade de colocar height nos elementos pais, algo provavelmente está errado, caso necessário utilize o min-height ao invés de height