28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous !

Je galère sur un truc si quelqu'un pouvait m'aider :

J'ai un logo dans une div .header

Je souhaite centrer le logo en hauteur et largeur dans ce header (centrer en largeur pas trop compliqué ça va, mais horizontal j'ai du mal

Je souhaite que le header soit en pleine page lorsque l'on arrive sur le site mais c'est un site parallax, donc le contenu s'affiche ensuite en scrollant. (et une solution responsive, que le comportement soit le meme sur desktop et mobile)

Je ne sais pas si je suis assez clair !
Merci d'avance pour votre aide, je galère bien comme il faut ;( jquery ou css, je ne vais pas faire le difficile.
Merci de ta réponse Smiley cligne Oui je voulais dire verticalement. Par contre c'est un theme Wordpress que je suis en train de faire sur une base de Bones.

<header class="header" role="banner">

				<div id="inner-header" class="wrap cf">

					<a href="<?php echo home_url(); ?>" rel="nofollow"><img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" alt="Logo" id="logo"></a>

					<nav role="navigation">
						<?php wp_nav_menu(array(
    					'container' => false,                           // remove nav container
    					'container_class' => 'menu cf',                 // class of container (should you choose to use it)
    					'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
    					'menu_class' => 'nav top-nav cf',               // adding custom nav class
    					'theme_location' => 'main-nav',                 // where it's located in the theme
    					'before' => '',                                 // before the menu
        			'after' => '',                                  // after the menu
        			'link_before' => '',                            // before each link
        			'link_after' => '',                             // after each link
        			'depth' => 0,                                   // limit the depth of the nav
    					'fallback_cb' => ''                             // fallback function (if there is one)
						)); ?>

					</nav>

				</div>

			</header>


.header {
	background-color: $black;
	height: 30em;
}

	#logo {
		max-width: 20em;
		display: block;
		margin: 0 auto;
	}


(function($){
  $.fn.Center= function(){
    this.css({
      'position' : 'fixed',
      'left' :'50%',
      'top' :'50%'
    });

    this.css({
      'margin-left': -this.width()/2 + 'px',
      'margin-top' : -this.height()/2 + 'px'
    });
  };

  })(jQuery);


jQuery(document).ready(function($) {

  $('.parallax').parallax('50%', 0.2);
  $('#logo').Center();
  loadGravatars();


});
Ca me centre bien mon logo mais en fonction de la page et il est persistant. Je voudrais qu'il se centre par rapport au header.