Aide: Mise en Page "header" et redimensionnement

Aide: Mise en Page "header" et redimensionnement - HTML/CSS - Programmation

Marsh Posté le 12-02-2013 à 13:06:25    

Bonjour à tous,
 
Cela doit faire 3 heures que je cherche comment aligner mes balises div dans mon "header". J'ai un thème qui selon la dimension de la page se redimensionne.  
 
Voila sur mon site j'ai cette barre de recherche et ce bouton my likes qui permettent de rechercher et en cliquant sur my  likes d'ajouter les choses qui nous ont plues. Ici la mise en page est respectable, mais j'aimerai quand même réduire l'écart entre les deux.
http://nsa32.casimages.com/img/2013/02/12/130212125340654924.png
 
Cependant, si un personne se connecte avec son compte, comme moi avec mon compte administrateur. L'espace n'est pas suffisant et cela fausse donc la mise en page.
http://nsa31.casimages.com/img/2013/02/12/130212125859607404.png
 
Ce que je voudrais savoir c'est s'il existe un moyen d'aligner le module de recherche par rapport à la taille du module ou bouton de droite??
 
Au final quand je redimensionne ma page, cela fausse complètement ma mise en page:
http://nsa32.casimages.com/img/2013/02/12/130212010237340398.png
 
et on voit que mon codage n'est pas bon.
 
Je ne suis de loin pas un expert, j'y suis allé un peu au piff en essayant divers configuration, mais rien de bon.
Je vous laisse mon code contenu dans le header.

Code :
  1. <?php
  2. /**
  3. * Header Template
  4. *
  5. * The header template is generally used on every page of your site. Nearly all other
  6. * templates call it somewhere near the top of the file. It is used mostly as an opening
  7. * wrapper, which is closed with the footer.php file. It also executes key functions needed
  8. * by the theme, child themes, and plugins.  
  9. *
  10. * @package deTube
  11. * @subpackage Template
  12. * @since deTube 1.0
  13. */
  14. ?><!DOCTYPE html>
  15. <!--[if IE 6]>
  16. <html class="ie ie6" <?php language_attributes(); ?>>
  17. <![endif]-->
  18. <!--[if IE 7]>
  19. <html class="ie ie7" <?php language_attributes(); ?>>
  20. <![endif]-->
  21. <!--[if IE 8]>
  22. <html class="ie ie8" <?php language_attributes(); ?>>
  23. <![endif]-->
  24. <!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
  25. <html <?php language_attributes(); ?>>
  26. <!--<![endif]-->
  27. <head>
  29. <!-- Title, Keywords and Description -->
  30. <title><?php dp_document_title(); ?></title>
  31. <?php dp_meta_keywords(); ?>
  32. <?php dp_meta_description(); ?>
  34. <link rel="profile" href="http://gmpg.org/xfn/11" />
  35. <?php if($favicon = get_option('dp_favicon')) echo '<link rel="shortcut icon" href="'.$favicon.'" />'."\n"; ?>
  36. <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  38. <!-- Styles ans Scripts -->
  39. <link href='http://fonts.googleapis.com/css?family=Arimo:400,700|Droid+Serif:400,700|Open+Sans:600,700' rel='stylesheet' type='text/css'>
  40. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
  41. <?php if(get_option('dp_responsive')) { ?>
  42. <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/responsive.css" type="text/css" media="all" />
  43. <?php } ?>
  44. <?php wp_head(); ?>
  45. <?php
  46. // Generate CSS Style based on user's settings on Theme Options page
  47. $css = '';
  49. $bgpat = get_option('dp_bgpat');
  50. $bgcolor = get_option('dp_bgcolor');
  51. if(!empty($bgcolor))
  52. $css .= "body{background-color:$bgcolor;}\n";
  53. if(!empty($bgpat)) {
  54. $preset_bgpat = get_option('dp_preset_bgpat');
  55. $custom_bgpat = get_option('dp_custom_bgpat');
  56. $bgpat = !empty($custom_bgpat) ? $custom_bgpat : $preset_bgpat;
  57. $bgpat = apply_filters('dp_bgpat', $bgpat);
  58. $css .= "body{background-image:url('$bgpat');}\n";
  59. } else {
  60. $css .= "body{background-image:none;}\n";
  61. }
  63. if(!empty($css)) {
  64. echo "\n<!-- Generated CSS BEGIN -->\n<style type='text/css'>\n";
  65. echo $css;
  66. echo "\n</style>\n<!-- Generated CSS END -->\n";
  67. }
  68. ?>
  69. </head>
  71. <body <?php body_class(); ?>>
  73. <div id="page">
  74. <header id="header"><div class="wrap cf">
  75. <div id="header_icons">
  76. <ul>
  77. <li><a href="http://feed." target=_blank alt="Twitter"><img src="http://www.islamictube.fr/wp-content/uploads/2013/02/feed.png" /></a></li>
  78. <li><a href="http://www.twitter.com/islamictube" target=_blank alt="Twitter"><img src="http://www.islamictube.fr/wp-content/uploads/2013/02/twitter.png" /></a></li>
  79. <li><a href="http://www.facebook.com/" target=_blank alt="Twitter"><img src="http://www.islamictube.fr/wp-content/uploads/2013/02/facebook.png" /></a></ul></li>
  80. </ul>
  81. </div>
  83. <div id="branding" class="<?php echo get_option('dp_logo_type', 'text'); ?>-branding" role="banner">
  84.  <h1 id="site-title"><a rel="home" href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1>
  85.  <?php if (get_option('dp_logo_type') == 'image' && $logo = get_option('dp_logo')) { ?>
  86.   <a id="site-logo" rel="home" href="<?php echo home_url(); ?>"><img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
  87.  <?php } ?>
  88.  <h2 id="site-description"<?php if(!get_option('dp_site_description')) echo ' class="hidden"'; ?>><?php bloginfo('description'); ?></h2>
  89. </div><!-- end #branding -->
  90.  
  91. <div id="format" class="mise_en_page">
  93. <span id="top-search">
  94.  <?php get_search_form(); ?>
  95. </span><!-- end .top-search -->
  97. <?php if(is_user_logged_in()) { 
  98.  $user_id = get_current_user_id();
  99.  $current_user = wp_get_current_user();
  100.  $profile_url = get_author_posts_url($user_id);
  101.  $edit_profile_url  = get_edit_profile_url($user_id);
  102.  $current_url = get_current_url();
  103.  ?>
  104.  <span id="account-nav" class="user-nav">
  105.   <a class="dropdown-handle" href="<?php echo $profile_url; ?>">
  106.    <?php echo get_avatar( $user_id, 32 ); ?>
  107.    <span class="display-name btn"><span class="arrow-down"><?php echo $current_user->display_name; ?></span></span>
  108.   </a>
  110.   <div class="dropdown-content">
  111.    <ul class="dropdown-content-inner">
  112.     <li><a class="profile-link" href="<?php echo $profile_url; ?>"><?php _e('Profile', 'dp'); ?></a></li>
  113.     <li><a class="account-link" href="<?php echo $edit_profile_url; ?>"><?php _e('Account', 'dp'); ?></a></li>
  114.     <li><a class="logout-link" href="<?php echo esc_url(wp_logout_url($current_url)); ?>"><?php _e('Log out', 'dp'); ?></a></li>
  115.    </ul>
  116.   </div>
  117.  </span><!-- end #account-nav -->
  118. <?php } elseif(get_option('users_can_register')) { ?>
  119.  <div id="login-nav" class="user-nav">
  120.   <a class="btn btn-green register-link" href="<?php echo site_url('wp-login.php?action=register', 'login'); ?>"><?php _e('Sign up', 'dp'); ?></a>
  122.   <div class="dropdown">
  123.    <a class="dropdown-handle btn btn-black login-link" href="<?php echo wp_login_url(); ?>"><?php _e('Log In', 'dp'); ?></a>
  125.    <div class="dropdown-content"><div class="dropdown-content-inner">
  126.     <?php wp_login_form(); ?>
  127.    </div></div>
  128.   </div>
  129.  </div><!-- end #login-nav -->
  130. <?php } elseif($likes_page_id = get_option('dp_post_likes_page')) { ?>
  131.  <div id="guest-nav" class="user-nav">
  132.   <a class="btn likes-page-link btn-red" href="<?php echo get_permalink($likes_page_id); ?>"><?php echo get_the_title($likes_page_id); ?></a>
  133.  </div><!-- end #login-nav -->
  134. <?php } ?>
  135. </div><!-- end #format -->
  139. </div></header><!-- end #header-->
  141. <div id="main-nav"><div class="wrap cf">
  142. <?php
  143.  $nav_menu = wp_nav_menu(array('theme_location'=>'main', 'container'=>'', 'fallback_cb' => '', 'echo' => 0));
  145.  // The fallback menu
  146.  if(empty($nav_menu))
  147.   $nav_menu = '<ul class="menu">'.wp_list_categories(array('show_option_all'=>__('Home', 'dp'), 'title_li'=>'', 'echo'=>0)).'</ul>';
  149.  echo $nav_menu;
  150. ?>
  151. </div></div><!-- end #main-nav -->
  153. <?php do_action( 'dp_after_header_php' ); ?>


 
et celui contenu dans mon style.css

Code :
  1. /*= Header
  2. *=============================================================================*/
  3. #header .wrap {
  4. position:relative;
  5. padding: 0px 0;
  7. }
  10. /*== Branding
  11. *=================================*/
  12. #branding {
  13. float:left
  14. }
  15. #site-title {
  16. font-size:0px;
  17. line-height:0px;
  18. margin:0;
  19. font-family:"Open Sans",sans-serif;
  20. text-transform:uppercase;
  21. }
  22. #site-title a {
  23. color:#333;
  24. text-decoration:none;
  25. }
  26. #site-description {
  27. margin:0px 0 0;
  28. font-size:0px;
  29. color:#AAA;
  30. text-transform:uppercase;
  31. }
  32. #site-logo {
  33. position: relative;
  34. display:block;
  35. }
  36. #site-logo img {
  37. display:block;
  38. max-width:100%;
  39. height:auto;
  40. }
  41. .image-branding #site-title,
  42. .image-branding #site-description {
  43. display: none
  44. }
  46. }
  47. /*== Social icons
  48. *=================================*/
  50. #header_icons {
  51. float: right;
  52. width: 195px;
  53. height:50px;
  54. margin-top: 10px;
  55. z-index: 1
  57. }
  59. #header_icons img {
  60. float: left;
  61. width: 50px;
  62. padding-left: 10px;
  63. height: 50px;
  64. margin-top: 10px;
  65. margin-left: 0px;
  66. margin-bottom: 0px;
  67. }
  69. #header_icons ul {
  71. height: 10px;
  72. margin: 0px;
  73. padding: 0px 0px 0px 0px;
  75. }
  77. #header_icons ul li{
  78. display: inline;
  79. float: right;
  80. text-align: left;
  81. height: 10px;
  82. margin: 0px;
  83. padding-bottom: 0px;
  84. }
  86. /*== Format
  87. *=================================*/
  89. .mise_en_page {
  90.  float: right;
  91.  width: auto;
  92.  height: 40px;
  94. }
  96. /*== Search Form
  97. *=================================*/
  98. #top-search {
  99. float:right;
  100. width:300px;
  101. margin-right: 120px;
  102. margin-top: 70px;
  103. z-index:1;
  105. }
  106. .searchform {
  107. position: relative;
  108. height:27px;
  109. -webkit-border-radius:3px;
  110. border-radius:3px;
  111. padding-right:10px;
  112. margin:0;
  113. }
  114. .searchform input {
  115. }
  116. .search-text-div {
  117. margin:0 50px 0 0;
  118. }
  119. input.search-text {
  120. float:left;
  121. width:100%;
  122. }
  123. .search-submit-div {
  124. width:50px;
  125. height:27px;
  126. position:absolute;
  127. right:0;
  128. top:0;
  129. overflow:hidden;
  130. -webkit-border-radius:0 3px 3px 0;
  131. border-radius:0 3px 3px 0;
  132. padding:0;
  133. }
  134. input.search-submit {
  135. background:url(images/icon-search.png) no-repeat center center !important;
  136. width:50px;
  137. padding:0;
  138. border:0;
  139. height:27px;
  140. overflow:hidden;
  141. line-height:999em;
  142. display:block;
  143. color: transparent;
  144. }
  146. /*== User Navigation
  147. *=================================*/
  148. .user-nav {
  149. position: absolute;
  150. right: 0px;
  151. padding-right: 0px;
  152. margin-top: 70px;
  153. z-index: 3;
  156. }
  157. .user-nav ul {
  158. list-style:none;
  159. margin:0;
  160. padding:0;
  161. }
  162. .user-nav>ul>li {
  163. float:left;
  164. position:relative;
  165. }
  166. .user-nav a {
  167. font-size: 12px;
  168. }
  170. /* Login navigation for the user is NOT logged in */
  171. #login-nav .register-link,
  172. #login-nav .login-link {
  173. float:left;
  174. }
  175. #login-nav .login-link {
  176. margin-left:10px;
  177. position:relative;
  178. z-index:3;
  179. }
  180. #login-nav .dropdown {
  181. float:left;
  182. position:relative;
  183. z-index:1;
  184. height:29px;
  185. }
  186. #login-nav .dropdown-content {
  187. z-index:2;
  188. position:absolute;
  189. right:0;
  190. top:34px;
  191. background:#FFF;
  192. width:230px;
  193. padding:15px 15px 5px;
  194. border:1px solid #D7D7D7;
  195. -webkit-border-radius:3px 0 3px 3px;
  196. border-radius:3px 0 3px 3px;
  197. visibility:hidden;
  198. opacity:0;
  199. }
  200. #loginform {
  201. margin:0;
  202. }
  203. #loginform p {
  204. margin:0 0 10px;
  205. }
  206. #loginform .login-username label,
  207. #loginform .login-password label {
  208. display:block;
  209. }
  210. #loginform .login-username input,
  211. #loginform .login-password input {
  212. width:220px;
  213. }
  214. #loginform .login-remember label {
  215. line-height:19px;
  216. font-size:12px;
  217. }
  218. #loginform .lost-password {
  219. float:right;
  220. line-height:19px;
  221. font-size:12px;
  222. }
  223. #login-nav .dropdown:hover .login-link,
  224. #login-nav .dropdown:hover .login-link:hover {
  225. padding-bottom:11px;
  226. background:#FFF;
  227. color:#777;
  228. border:1px solid #D7D7D7 !important;
  229. border-bottom:0 !important;
  230. text-shadow:none;
  231. -webkit-border-radius:3px 3px 0 0;
  232. border-radius:3px 3px 0 0;
  233. position:relative;
  234. z-index:4;
  235. }
  236. #login-nav .dropdown:hover .dropdown-content {
  237. visibility:visible;
  238. opacity: 1;
  239. }
  241. /* Account navigation for the user is logged in */
  242. #account-nav {
  243. right:0px;
  244. height:29px;
  245. margin-top: 70px;
  246. z-index:5;
  248. }
  249. #account-nav a{text-decoration:none;}
  250. #account-nav .dropdown-handle {
  251. position:relative;
  252. z-index:3;
  253. }
  254. #account-nav .dropdown-handle .avatar {
  255. width:25px;
  256. height:25px;
  257. padding:1px;
  258. border:1px solid #CCC;
  259. background:#FFF;
  260. -webkit-border-radius:3px;
  261. border-radius:3px;
  262. vertical-align:middle;
  263. float:left;
  264. margin-right:4px;
  265. }
  266. #account-nav .dropdown-handle .display-name {
  267. float:left;
  268. display:inline-block;
  269. vertical-align:middle;
  270. position:relative;
  271. z-index:4;
  272. }
  273. #account-nav .dropdown-handle .arrow-down {
  274. background:url(images/arrow-down.png) no-repeat right 8px;
  275. padding-right:12px;
  276. float:left;
  277. }
  278. #account-nav .dropdown-content {
  279. width:100%;
  280. position:absolute;
  281. z-index:2;
  282. right:0;
  283. top:34px;
  284. opacity:0;
  285. visibility:hidden;
  286. }
  287. #account-nav .dropdown-content-inner {
  288. background:#F7F7F7;
  289. border:1px solid #CCC;
  290. -webkit-border-radius:3px 0 3px 3px;
  291. border-radius:3px 0 3px 3px;
  292. }
  293. #account-nav .dropdown-content ul {
  294. padding:5px 0;
  295. }
  296. #account-nav .dropdown-content li {
  297. padding:2px 10px;
  298. border-top:1px solid #FFF;
  299. border-bottom:1px solid #E7E7E7;
  300. }
  301. #account-nav .dropdown-content li:first-child {
  302. border-top:0;
  303. }
  304. #account-nav .dropdown-content li:last-child {
  305. border-bottom:0;
  306. }
  307. #account-nav:hover .display-name {
  308. padding-bottom:11px;
  309. background:#F7F7F7;
  310. border-color:#CCC;
  311. border-bottom:0;
  312. -webkit-border-radius:3px 3px 0 0;
  313. border-radius:3px 3px 0 0;
  314. }
  315. #account-nav:hover .dropdown-content {
  316. visibility:visible;
  317. opacity: 1;
  318. }


 
 
J'ai essayé d'ajouter un balise div pour contenir le tous dans une même div, mais, il n'y a rien à faire. Après tout mes efforts, je n'ai toujours pas trouver la solution. Peut-être mon sauveur est parmi vous.
 
 
Amicalement.  
 
 

Reply

Marsh Posté le 12-02-2013 à 13:06:25   

Reply

Marsh Posté le 14-02-2013 à 06:26:26    

bon j'ai réussi a faire ce que je voulais faire plus ou moins. J'aime maintenant mon menu déroulant modérateur qui passe dessous la barre de navigation principale.
 
Même avec les z-index je n'arrive pas à faire passé par dessus.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed