Teste seu conhecimento 13
Publicado em: 2010-02-22 — 18.955 visualizacoes
Figuras com textos descritivos
DESAFIO ENCERRADO Confira as soluções.
Leia com atenção o post. Soluções contrariando qualquer item do post não serão consideradas.
Estamos de volta com mais um desafio, o primeiro do ano de 2010. E veio bem a tempo, pois (infelizmente) neste País o ano só começa depois do Carnaval. Como sempre, vamos fazer este desafio focado para um “exercício de aprendizado e lazer”, deixando de lado as considerações de acessibilidade, uso na prática ou mesmo utilidade do exercício. Assim o objetivo é exercitar suas habilidades com CSS, procurando uma solução com uso da marcação HTML fornecida.
Este desafio consiste em posicionar duas imagens de dimensões desconhecidas e suas respectivas descrições, uma ao lado da outra com o respectivo texto descritivo ocupando a largura da imagem (lembre-se: a largura da imagem é desconhecida, ou seja, você não pode medir a imagem e definir a medida do texto). O resultado final deve ser uma renderização como mostrado na figura a seguir.
.
Download do HTML e imagens para o Desafio
Regras gerais:
- A marcação HTML da página é fornecida e nela nada pode ser alterado, acrescentado ou suprimido exceto o texto do elemento
h1. Substitua o texto existente (“Digite seu nome aqui”) pelo seu Nome e Sobrenome (se colocar links, @s, apelidos, etc; será desclassificado); - Considerar que as dimensões das imagens são desconhecidas, isto é se forem inseridas imagens maiores a solução apresentada é válida;
- Use somente regras CSS para obter o efeito proposto;
- A renderização deve ser no Firefox 3.5.8 e IE7+
- Desenvolva sua solução colocando o HTML e as imagens em uma mesma pasta (Não crie subpasta imagens);
- Envie somente o arquivo com Seu_Nome.html (não use .htm e capitalize a primeira letra), não envie as imagens e não zip o arquivo;
- O assunto do email encaminhando a solução deverá ser: desafio13 (exatamente isso: desafio13).
Putz! Cada regra boba Maujor! É, mas elas visam a facilitar meu trabalho de análise e publicação dos resultados. Por exemplo: arquivo com o nome do autor facilita identificar instantaneamente quem enviou. Colocar .html no lugar de .htm facilita montar a navegação pelos trabalhos. Padronizar para facilitar.
Alguma dúvida? Poste nos comentários.
Se você encontrar a solucão mande via email um arquivo gravado com o Seu_Nome.html (por exemplo: Jose_da_Silva.html) para maujorcss[arroba]maujor[ponto]com. E, não poste a solução nos comentários, para que outros possam tentar.
Coloque no Assunto do email que você enviar-me com a solução proposta a palavra: desafio13 (exatamente assim: desafio13).
Dependendo da quantidade de soluções recebidas decidirei quando postar a solução e informar os autores com solução certa.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nesta matéria e assim acompanhar o esclarecimento de eventuais dúvidas surgidas, a publicação dos nomes de autores com solução certa e o resultado final.
Divirta-se!
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2010-02-22 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2010/02/22/teste-seu-conhecimento-13/trackback no seu site.
Muito bom post.
Preciso de um livo sobre html5 simples e completo.
Tem alguma sujestao
Parabens pelo seu blog. esta maravilhoso.
Parabens pelo blog!!
Maujor,
tiro munhas duvidas seu site e blog a muito tempo. Eles têm me salvo muitas vezes com dúvidas sobre CSS.
continue com seu trabalho, da uma visitada no meu blog
Um forte Abraço
Vlw
Estava indo bem mas quando coloquei tudo na mesma pasta o html não econtrou as imagems
Parabens pelo seu blog
Ana
As imagens precisam estar alinhadas dulado das outras
Adorei o blog , muito construtivo e crítico, vou deixar meu site se quizerem dar uma ocnferida:
Pop Radio Mix – Musicas Gratis – Radio Online – Tubarao Santa Catarina – Músicas Grátis
Não acredito que eu não pensei no position:absolute..
Parabens pelo seu blog
Aprendendo mais uma, eu tentei algumas coisas há alguns dias, mas não cheguei na idéia do float:left; bacana. =)
Desafio encerrado.
Tivemos 4 soluções certas.
Publicado o resultado neste link.
Olá Maujor,
acompanho seu site e blog a muito tempo. Eles têm me salvo muitas vezes com dúvidas relativas as CSS. Mas neste momento gostaria de propor um desafio para todos daqui do seu blog. Trata- se de gerar um botão com bordas arredondadas e com uma imagem dentro, imagem que define o propósito do botão. Há soluções na internet usando links, porém creio que o botão deve ser feito utilizando “input button” e “label”, que ao meu ver, mantém a semântica da web.
Espero que tenha gostado da minha sugestão.
Sucesso em seu site. Forte abraço!
Compreendo. Pior que já é mania. Na minha cabeça não tem como ser um designer e não pensar no usuario primeiro. Proxima vez, eu vou cumprir o desafio ao pé da linha. Brigado! P.S: Estou curioso para o resultado. Tá pior que resultado de vestibular.
Juliano
Soluções certas são aquelas em acordo com as regras do desafio.
Observe que no texto da matéria está escrito:
*Como sempre, vamos fazer este desafio focado para um “exercício de aprendizado e lazer”, deixando de lado as considerações de acessibilidade, uso na prática ou mesmo utilidade do exercício.*
Assim, para participar, há que se respeitar as regras do desafio, sejam elas quais forem.
Este é o espírito do desafio!
Falta de atenção somente em relação a renderização. Leve em conta que quando faço qualquer markup penso muito em varias situações como por exemplo resolução da tela da menor a maior. Você irá falar sobre as soluções certas e porque são certas?
Maicon, Matheus e Juliano
As regras não deixam dúvidas.
Regra 4 – A renderização deve ser no Firefox 3.5.8 e IE7+
Nada foi dito de cross-browser, Safari, IE6 etc.
Regra 2 – Não pode definir dimensões de imagem.
Notar que existe um screen-shot mostrando como deve ser a posição das imagens e textos.
As imagens precisam estar alinhadas uma ao lado da outra?
Maujor, a regra número dois não entendi direito.
Pode-se definir tamanho as imagens?
Isso quer dizer que eu posso definir tamanhos maiores para as imagens?
Tem que ser cross-browser ou seja funcionar em todos os browsers tipo ie6, ie7, safari, firefox?
@Jose Henrique
A renderização é igual no Firefox e IE.
Majour você poderia postar screen do resultado renderizado no ie7 também!
Meu resultado foi apenas atingido no firefox!
@Carlos
Leia as regras e em especial a regra 1.
Poço colocar id’s ou class nas tags html?