Tava pensando em abusar de position (relative e absolute) para deixar tudo nos devidos lugares, mas estou postando justamente pra ver se alguém tem uma sugestão melhor, pois vai ser um tanto quanto chato fazer desta forma (eu acho).
Na SS anexa, segue o modelo de como mais ou menos será. Ao deixar o mouse acima do nome, é aberta uma foto em miniatura abaixo da plaquinha.
arvore.jpg 57.42KB 35 downloads
Qualquer sugestão é bem-vinda
RESOLVIDO - Tava procurando cabelo em ovo... A estrutura ficou bem básica, e apenas trabalhei com margins e float:right. Bem simples. Ficou assim a estrutura:
<div class="arvore"> <h5>Árvore genealógica:</h5> <!-- BISAVOS --> <div class="main_bisavos"> <div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos1"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="bisavos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> </div> <!-- AVOS --> <div class="main_avos"> <div class="avos1"><a href="">123</a></div> <div class="avos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="avos3"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> <div class="avos2"><a href="">Ch.Am. Ann-Dean's Mag-Wheels</a></div> </div> <!-- PAIS --> <div class="main_pais"> <div class="pais1"><a href="">Nome do pai</a></div> <div class="pais2"><a href="">Nome da mãe</a></div> </div> <!-- FILHO --> <div class="main_filho"> <div class="filho1"><a href="">Nome do pai</a></div> </div> </div>
Edição feita por: Firehalk, 03/11/2008, 11:10.