← HTML + CSS

Ajuda CSS para fazer um alinhamento de imagens

Lida 7280 vezes

Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Com isto:

Código: [Seleccione]
<p align="right"><a class="facebook-icon" href="#"></a> <a class="twitter-icon" href="#"></a> <a class="linkedin-icon" href="#"></a> <a class="google-plus-icon" href="#"></a> <a class="youtube-icon" href="#"></a></p>
E isto:

Código: [Seleccione]
a.facebook-icon {
display: block;
width: 16px;
height: 16px;
background-image: url('_layout/images/social-icons/facebook_black.png');
}

a.facebook-icon:hover {
background-image: url('_layout/images/social-icons/facebook.png');
}

a.twitter-icon {
display: block;
width: 16px;
height: 16px;
background-image: url('_layout/images/social-icons/twitter-2_black.png');
}

a.twitter-icon:hover {
background-image: url('_layout/images/social-icons/twitter-2.png');
}

a.linkedin-icon {
display: block;
width: 16px;
height: 16px;
background-image: url('_layout/images/social-icons/linkedin_black.png');
}

a.linkedin-icon:hover {
background-image: url('_layout/images/social-icons/linkedin.png');
}

a.google-plus-icon {
display: block;
width: 16px;
height: 16px;
background-image: url('_layout/images/social-icons/google-plus_black.png');
}

a.google-plus-icon:hover {
background-image: url('_layout/images/social-icons/google-plus.png');
}

a.youtube-icon {
display: block;
width: 16px;
height: 16px;
background-image: url('_layout/images/social-icons/youtube_black.png');
}

a.youtube-icon:hover {
background-image: url('_layout/images/social-icons/youtube.png');
}

Obtenho este resultado:




O que eu pretendo é alinhar os icons lado a lado, o que tenho de modificar?
Offline

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

.facebook-icon, .google-plus-icon, ... {float:left;}
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

E não te esqueças de adicionar padding.
Offline

Ivo Pereira 
Membro
Mensagens 661 Gostos 1
Feedback +7

Troféus totais: 27
Trófeus: (Ver todos)
Linux User Super Combination Combination Topic Starter Level 5 Level 4 Level 3 Level 2 Level 1 500 Posts

E um clear:left numa div no final  :cool:
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Já ficam lado a lado como pretendo, no entanto, tendo isto:

Código: [Seleccione]
<p align="right"><a class="facebook-icon" href="#"></a> <a class="twitter-icon" href="#"></a> <a class="linkedin-icon" href="#"></a> <a class="google-plus-icon" href="#"></a> <a class="youtube-icon" href="#"></a>
Desenvolvido por: <strong>bla bla</strong></p>

Ele alinha-me os icones à esquerda do espaço e o "desenvolvido por..." à direita, tal como eu pretendo e tenho em cima no align.

Como corto o alinhamento dos icones à esquerda sem inserir espaços ou linhas entre os icones e o texto de baixo?
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Help me, please. :)
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Já ficam lado a lado como pretendo, no entanto, tendo isto:

Código: [Seleccione]
<p align="right"><a class="facebook-icon" href="#"></a> <a class="twitter-icon" href="#"></a> <a class="linkedin-icon" href="#"></a> <a class="google-plus-icon" href="#"></a> <a class="youtube-icon" href="#"></a>
Desenvolvido por: <strong>bla bla</strong></p>

Ele alinha-me os icones à esquerda do espaço e o "desenvolvido por..." à direita, tal como eu pretendo e tenho em cima no align.

Como corto o alinhamento dos icones à esquerda sem inserir espaços ou linhas entre os icones e o texto de baixo?

Explica melhor o que pretendes pois não percebi muito bem.
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Com aquele último código obtenho isto:



Pretendo alinhar os icons à direita, ou seja, colocar junto à linha vermelha.
Offline

Eduardo Santos 
Equipa
Mensagens 1097 Gostos 1
Feedback +4

Troféus totais: 29
Trófeus: (Ver todos)
Tenth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

float: left; ou float: right;

Muito às cegas... :P
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Tens os links dentro de um <p>, altera para uma <div> e coloca uma class dentro da div assim:

Código: [Seleccione]
<div class="social">
<a class="facebook-icon" href="#"></a> <a class="twitter-icon" href="#"></a> <a class="linkedin-icon" href="#"></a> <a class="google-plus-icon" href="#"></a> <a class="youtube-icon" href="#"></a>
<p>Desenvolvido por: <strong>bla bla</strong></p>
</div>

Qualquer coisa assim.

Depois no CSS, colocas .social { float: right; }
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Foi quase, alinhou pelo "D" de desenvolvido, já fica melhor, mas preferia alinhado à ponta.
Offline

rtbfreitas 
Equipa
Mensagens 1497 Gostos 9
Feedback +24

Troféus totais: 30
Trófeus: (Ver todos)
Windows User Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4

Foi quase, alinhou pelo "D" de desenvolvido, já fica melhor, mas preferia alinhado à ponta.

Manda-me o url por MP para eu ver sff
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Voltando a este assunto:

No footer.php tenho:

Código: [Seleccione]
<?php
/**
 *
*/
 
$footer_layout ewf_get_footer_layout();
?>


<div id="footer">

<!-- ///   FOOTER   //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<div class="hr"></div>

<div class="row fixed">
<?php ewf_setSection('zone-footer'); ?>

<div class="col-220">
<?php 
ewf_setZone(220);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-left') ); 
?>

</div><!-- end .col-220 -->

<div class="col-220">
<?php 
ewf_setZone(460);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-center-left') ); 
?>

</div><!-- end .col-220 -->

<div class="col-220">
<?php 
ewf_setZone(460);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-center-right') ); 
?>

</div><!-- end .col-220 -->

<div class="col-220 last">
<?php 
ewf_setZone(220);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-right') ); 
?>

</div><!-- end .col-220 -->

</div><!-- end .row -->

<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

</div><!-- end #footer -->

<?php wp_footer(); ?>

</div><!-- end #wrap -->


</body>
</html>

E no style.css tenho:

Código: [Seleccione]
#footer{ font-size:10px; }


/* =footer-nav
-----------------------------------------------------------------------------------------------*/

.footer-nav-1, .footer-nav-2{  list-style-type:none; list-style-position:outside; margin-bottom:0; float:left; }
.footer-nav-2{ margin-left:20px; }

Este footer tem 4 widgets, mas eu apenas quero ficar com dois e que cada um tenha metade da largura total do "wrap", que é de 940px.
Offline

nandotx 
Membro
Mensagens 1012 Gostos 1
Feedback +9

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Mobile User Windows User Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3

Alguém me consegue ajudar neste novo problema?
Offline

TiagZ 
Membro
Mensagens 10 Gostos 0
Troféus totais: 15
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 10 Posts First Post Karma Seventh year Anniversary Sixth year Anniversary

Viva,

Aproveito para sugerir uma opção diferente às apresentadas acima.

Em vez de floats e clears, basta usares o display: inline-block em todos os <a> num div e depois só precisas de adicionar a margem (se quiseres).

Vê este exemplo: http://jsfiddle.net/HelloTiago/P2ZgN/embedded/result/
Com código: http://jsfiddle.net/HelloTiago/P2ZgN/

A primeira parte do CSS é só para perceberes melhor ;)

Para o outro problema que tens, substitui o código que mostraste no footer por este:

Código: [Seleccione]
<?php
/**
 *
*/
 
$footer_layout ewf_get_footer_layout();
?>


<div id="footer">

<!-- ///   FOOTER   //////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

<div class="hr"></div>

<div class="row fixed">
<?php ewf_setSection('zone-footer'); ?>

<div class="col-220">
<?php 
ewf_setZone(220);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-left') ); 
?>

</div><!-- end .col-220 -->

<div class="col-220 last">
<?php 
ewf_setZone(220);
if ( !function_exists('dynamic_sidebar')  || !dynamic_sidebar('footer-right') ); 
?>

</div><!-- end .col-220 -->

</div><!-- end .row -->

<!-- ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -->

</div><!-- end #footer -->

<?php wp_footer(); ?>

</div><!-- end #wrap -->


</body>
</html>

Mas não é só, onde está .col-220 tens de trocar pela classe certa. Presumo que estejas a usar uma grid, portanto tens de ver qual a classe nessa grid que cabe ai.
Provavelmente será 940px/2 menos a margem que tens entre cada grid. Isso já depende de caso para caso.

Não precisas de mexer no CSS :)

Se tiveres um link é mais fácil para te ajudarmos...

Boa sorte!