28172 sujets

CSS et mise en forme, CSS3

Disposition fixe de blocs

Bonjour,
J'ai un problème pour la disposition de mes blocs :
bandeau
logo
moteur de recherche
bloc (petit-header)

Dès que je change le format de ma fenêtre, certains blocs bougent.
Aussi je n'arrive pas à les disposer correctement.
Je vous joins en image, la maquette de l'en-tête que je souhaite réaliser.

Voici le code Html de mon header :
</head>
<body <?php body_class(); ?>>
<div id="header">
<div id="logo"></div>
<div id="blog-title"><a href="<?php echo home_url() ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></div></a> <?php bloginfo( 'description' ) ?>
<div id="search"><?php get_search_form(); ?></div>
<div id="petit_header"></div>
</div>


code CSS :
div#blog-title{
             margin-left: auto;
              margin-right: auto;
              width: 200px;
             text-align:center;
             }
             
         div#search{
              z-index:1
              position:fixed;
              margin-top:-20px;
              margin-left: 750px;
              /*margin-left: 750px;*/
              width: 200px;            
              }
              
          div#petit_header{
              background: yellow;
              height: 50px;
              margin-top: 30px;
              margin-left: 170px;
              margin-right: 170px;
             }


Merci pour votre aide.

Bonne journée
Essaie de tout mettre tes blocs dans un seul <div> englobant et de lui donner la largeur souhaité. Il ne te restera plus qu'à le centrer:


#global{
  width: 960px;
  margin: 0 auto;
}
Sujet clos
Aller à