Alinhar botões de midias sociais no header

  • Cled

    (@cled)


    10 anos, 6 meses atrás

    Ajuda da galera:

    Estou fazendo um site em localhost e quero deixar os botões de midias sociais no header em linha reta no canto direito, alinhados com a logo. Acontece que ao alterar o CSS não consigo deixar os botões alinhados. Eles ficam sempre na vertical. Vi um tutorial, mas não consegui, já alterei de várias formas, mas não consigo deixa-los alinhados na horizontal

    Aqui estão as linhas que estou tentando:

    /* Basic Structure
    ————————————————————– */
    #header_icons {
    float:right;
    margin-top:50px;
    width:100px
    padding-left:15px;
    }

    #header_icons ul {
    height:50px;
    width:50px;
    }

    #header_icons ul li {
    display: inline
    float:right;
    height:50px;
    margin:0px;
    padding:0px
    }

    #header_icons img {
    inline:float:right;
    height:50px;
    margin:0px
    padding-left: 15px;
    width:50px;
    }

    #header_icons {
    inline:float:right;
    margin-top:50px;
    width:100px
    padding-right:5px;
    }

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • Paula Bonot

    (@p-bonot)

    10 anos, 6 meses atrás

    se não me engano isso “inline:float:right” não existe…
    ou você põe ‘display: inline;‘ ou usa ‘float: right;‘

    Você pode mandar como ta o html?

    Criador do tópico Cled

    (@cled)

    10 anos, 6 meses atrás

    obrigado Paula. Esta mudança que fiz no código foi apenas uma tentativa de um iniciante que não sabe muito sobre… rsrss

    Aqui está o header do tema, se não é isto me informe quais são que te envio… obrigado por enquanto

    <!DOCTYPE html><!– HTML 5 –>
    <html <?php language_attributes(); ?>>

    <head>
    <meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
    <link rel=”profile” href=”http://gmpg.org/xfn/11&#8243; />
    <link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />

    <?php /* Embeds HTML5shiv to support HTML5 elements in older IE versions plus CSS Backgrounds */ ?>
    <!–[if lt IE 9]>
    <script src=”<?php echo get_template_directory_uri(); ?>/js/html5.js” type=”text/javascript”></script>
    <link href=”<?php echo get_template_directory_uri(); ?>/csss/ie8.css” rel=”stylesheet” type=”text/css” />
    <![endif]–>
    <?php wp_head(); ?>
    </head>

    <body <?php body_class(); ?>>

    <?php themezee_wrapper_before(); // hook before #wrapper ?>
    <div id=”wrapper” class=”hfeed”>

    <?php themezee_header_before(); // hook before #header ?>
    <div id=”header-wrap”>

    <header id=”img src =”” class=”container clearfix” role=”banner”>

    <div id=”<img src =””>

    ” title=”Verbum Conteúdo” rel=”home”>
    <?php // Display Logo Image or Site Title
    $options = get_option(‘zeevision_options’);
    if ( isset($options[‘themeZee_general_logo’]) and $options[‘themeZee_general_logo’] <> “” ) : ?>
    <img class=”logo-image” src=” ?>” alt=”src=” />
    <?php else: ?>
    <h1 class=””> ?>”><img src=”http://localhost/imagens/logo%20verbum%20conteudo%202014.png”<a
    /> </ a>>h1>
    <?php endif; ?>
    <div id=”header_icons”>

    </div>

    <?php if(isset($options[‘themeZee_general_tagline’]) and $options[‘themeZee_general_tagline’] == ‘true’) : ?>
    <h2 class=””><?php echo bloginfo(‘description’); ?></h2>
    <?php endif; ?>
    </div>

    <nav id=”mainnav” role=”navigation”>
    <?php
    // Get Navigation out of Theme Options
    wp_nav_menu(array(‘theme_location’ => ‘main_navi’, ‘container’ => false, ‘menu_id’ => ‘mainnav-menu’, ‘echo’ => true, ‘fallback_cb’ => ‘themezee_default_menu’, ‘before’ => ”, ‘after’ => ”, ‘link_before’ => ”, ‘link_after’ => ”, ‘depth’ => 0));
    ?>
    </nav>

    </header>
    </div>
    <?php themezee_header_after(); // hook after #header ?>

    <?php // Display Custom Header Image
    themezee_display_custom_header(); ?>

    Paula Bonot

    (@p-bonot)

    10 anos, 6 meses atrás

    Hehehe, tranquilo, tem que tentar mesmo ;D
    tente substituir toda aquela parte do css do header icons por:

    #header_icons{
width: 200px;
}

#header_icons img{
float:left;
margin: 0px 5px;
}
    Paula Bonot

    (@p-bonot)

    10 anos, 6 meses atrás

    e aquelas tags <if> entre um icone e outro, acho que pode tirar tambem

    Criador do tópico Cled

    (@cled)

    10 anos, 6 meses atrás

    tentei inúmeras vezes e formas… mas não vai… mudei como disse e nada aconteceu.

    Acredito que não seja exatamente nestes elementos, e sim em alguma outra parte da estrutura do doc. Vi nuns forum alguma coisa relacionado ao functions do tema

    Paula Bonot

    (@p-bonot)

    10 anos, 6 meses atrás

    Ai só inspencionando elemento.. mesmo se definir tudo como important?
    tipo:

    #header_icons{
width: 200px !important;
}

#header_icons img{
float:left !important;
margin: 0px 5px !important;
}

    porque é realmente estranho nada funcionar.. Sempre já um jeito… outra coisa (é apenas uma dica) acho interessante que você coloque as imgs na pasta do seu tema (wp-contente/themes/seutema) dentro da pasta “images” ou “imgs” como for.. e chamar atraves da seguinte linha:

    <img src="<?php bloginfo('template_directory'); ?>/pastadeimagem/imagem.jpg" />

    Assim quando você for exportar e importar seu site não vai precisar mudar os arquivos ;D

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • O tópico ‘Alinhar botões de midias sociais no header’ está fechado para novas respostas.