Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde, estou apanhando aqui para alinhar 3 listas da seguinte forma.
LISTA-ESQUERDA IMAGEM-NO-CENTRO LISTA-DIREITA
LISTA-EMBAIXO-DA-IMG
Meu html está assim:
<div id="localizacao">
<div class="titulo_pagina">Onde estamos ?</div>
<ul class="local_esq">
<li>
<p class="borda_localizacao">Distribuidora Rio Branco</p>
<p>Av. Rio Grande, 5000</p>
<p>Distrito Industrial III</p>
<p>Uberaba-MG</p>
<p>+ 34 3336-5394</p>
</li>
<li>
<p class="borda_localizacao">Escritório Administrativo</p>
<p>R. Dr. José Ferreira, 197</p>
<p>Jd. Alexandre Campos</p>
<p>Uberaba-MG</p>
<p>+ 34 3322-2836</p>
</li>
<li>
<p class="borda_localizacao">Escritório Araxá</p>
<p>Av. Senador Montandon, 999</p>
<p>Centro</p>
<p>Araxá-MG</p>
<p>+ 34 3661-8077</p>
</li>
</ul>
<ul class="local_dir">
<li>
<p class="borda_localizacao">Filial Uberlândia</p>
<p>Rua do Prata, 1443</p>
<p>Chácaras Bonanza</p>
<p>Uberlândia-MG</p>
<p>+ 34 3225-0149</p>
</li>
<li>
<p class="borda_localizacao">Filial Senador Canedo</p>
<p>Rua Niteroí com Copacabana, S/N</p>
<p>Condomínio Pool Petroball</p>
<p>Senador Canedo - GO</p>
<p>+ 34 3512-2363</p>
</li>
<li>
<p class="borda_localizacao">Filial Betim</p>
<p>Av. Senador Montandon, 999</p>
<p>Centro</p>
<p>Araxá-MG</p>
<p>+ 34 3661-8077</p>
</li>
</ul>
<img src="img/MAPA.png" class="mapa_localizacao" alt="Área de atuação." />
<ul class="local_bottom">
<li>
<p class="borda_localizacao">Rio Branco Logística</p>
<p>Rua Cézar Boareto, 343</p>
<p>Bairro Pq. das Gameleiras</p>
<p>Uberaba - MG</p>
<p>+ 34 3336-4397</p>
</li>
<li>
<p class="borda_localizacao">Rio Branco Derivados</p>
<p>Rio Grande, 5000</p>
<p>Distrito Industrial III</p>
<p>Uberaba - MG</p>
<p>+ 34 3336-5394</p>
</li>
<li>
<p class="borda_localizacao">Rio Branco Derivados</p>
<p>Rua Antônio Joaquim de Miranda, 43</p>
<p>Planalto</p>
<p>Patos de Minas - MG</p>
<p>+ 34 3814-2882</p>
</li>
<li>
<p class="borda_localizacao">Filial Paulínia</p>
<p>Rua Hum, 125 Sala 04</p>
<p>Bairro Cascata</p>
<p>Paulínia - SP</p>
<p>+ 34 3933-2868</p>
</li>
</ul>
</div>
Utilizo float pra esquerda e direita nas listas laterais, mas a lista pra ficar embaixo da imagem, ela nao fica. E ainda deve estar oo display: inline para mostrá-la na horizontal.
Obrigado desde já!
William, defini apelas float e o display inline,
.local_esq {
float:left;
}
.local_dir {
float:right;
}
.local_bottom {
display:inline;
list-style-type:none;
clear:both;
}Precisa definir tb, como eu disse, uma largura fixa em px (width)
você pode jogar a terceira lista para baixo da imagem, usando margin-left, da mesma grandeza da primeira lista da esquerda.
o display: inline; é desnecessário ai, pelo teu 'desenho'..
Se tiver um link, ficaria mais fácil, pois até agora só tô imaginando como você queria, e como ficou.
Também é bom usar o CSS Reset:
* {
margin: 0;
padding: 0;
}
Como está o CSS?
você definiu width para as listas ?