Problème Position Panier

[Pims]

Bonjour tout le monde,

 

Je rencontre un problème concernant la position de mon panier, j'ai deux images pour l'explication:

 

 

J'ai positionné le panier en haut de mon site à coté du menu, sauf que le contenu du panier se déroule pas au bon endroit quand on passe la souris, c'est très simple à placer en 'absolute', mais le vrai problème que j'ai, c'est de faire en sorte qu'il se place correctement comme sur l'image en dessus sur toutes les résolutions (ou du moins au dessus de 1024*768)

 

Malheureusement si j'applique une position relative à ce block, bizarrement la transition s'applique à tout le block "header_user" c'est à dire le lien du panier et du bienvenue, identifiez-vous... ils montent, descendent quand on passe dessus en gros

 

Et je ne trouve pas le css qui gère cette animation

 

Je veux empêcher ceci selon la résolution de l'utilisateur:

Edited February 20, 2013 by Pims (see edit history)

[Atch]

Bonjour,

 

Le panier est positionné dans le header avec un position absolute et des coordonner en top / right.

Il suffit d'éditer le css du panier pour modifier la position de ce dernier.

 

le position relative doit être appliqué à #header_right pour que l'aboslute ait toujours le meme origine quelque soit la taille de l'écran.

 

 

V++

 

Atch

Edited February 21, 2013 by Atch (see edit history)

[Pims]

Merci pour cette réponse, j'ai bien compris que si ce bloc du panier est en absolute il aura toujours la même position dans la fenêtre mais je pense que je n'ai pas été assez précis.

 

Mon panier qui affiche le nombre produit est fixé à coté de mon menu dans le #header (en position relative) donc si j’agrandis la taille de la fenêtre le menu reste centré et le panier est donc collé à ce dernier, mais si je passe la souris sur le panier, le bloc qui se déroule en dessous reste toujours dans sa position puisqu'il est en absolute, il ne se déroulera pas en dessous du panier si on change la résolution, je sais pas si c'est assez clair désoler

[Atch]

un lien peut etre ?

[Pims]

Je le fais en local, je vais prendre d'autres screen ça sera plus simple

[Pims]

Voila un exemple de mon panier en 1366 x 768

 

 

Et maintenant en 1024 x 768

 

 

 

 

J'ai envie de dire que c'est normal puisque le bloc qui se déroule en dessous est en 'absolute', mais je ne peux pas le mettre en 'relative' sinon tout est buggé...

 

Donc je ne sais pas comment garder ce bloc en dessous de mon panier quelque que soit la résolution

[Atch]

difficile sans voir la source

[Pims]

Ok, donc voila la structure du header

 

<div id="header" class="grid_9 alpha omega">
 <a id="header_logo" title="Idyllic boutique" href="http://localhost/prestashop/">
 <div id="search_block_top">
 <script type="text/javascript">
 <script type="text/javascript">
 <script type="text/javascript">
 <div id="cart_block" class="block exclusive" style="display: none;">
 <ul id="header_links">
 <div id="header_user">
</div>

 

Ici mon panier(shopping_cart) est dans:

<div id="header_user">
<ul id="header_nav">
			<li id="shopping_cart">
		<a rel="nofollow" title="Voir mon panier" href="http://localhost/prestashop/index.php?controller=order" style="border-radius: 3px 3px 3px 3px;">Panier :
		<span class="ajax_cart_quantity">1</span>
		<span class="ajax_cart_product_txt">produit</span>
		<span class="ajax_cart_product_txt_s hidden" style="display: none;">produits</span>
		<span class="ajax_cart_total" style="display: inline;">28,00 €</span>
		<span class="ajax_cart_no_product hidden" style="display: none;">(vide)</span>
		</a>
	</li>

 

Et le bloc qui s'affiche quand on passe la souris sur le panier est ici: (cart_block)

 

<div class="block exclusive" id="cart_block" style="display: none;">
<p class="title_block">
	<a rel="nofollow" title="Voir mon panier" href="http://localhost/prestashop/index.php?controller=order">Panier</a>
			<span class="hidden" id="block_cart_expand"> </span>
	<span id="block_cart_collapse"> </span>
		</p>
<div class="block_content">
<!-- block summary -->
<div class="collapsed" id="cart_block_summary">
	<span class="ajax_cart_quantity" style="">1</span>
	<span style="display:none" class="ajax_cart_product_txt_s">articles</span>
	<span class="ajax_cart_product_txt">article</span>
	<span class="ajax_cart_total" style="">28,00 €</span>
	<span style="display:none" class="ajax_cart_no_product">(vide)</span>
</div>
<!-- block list of products -->
<div class="expanded" id="cart_block_list">
		<dl class="products">
										<dt class="first_item last_item" id="cart_block_product_8_0_0">
			<span class="quantity-formated"><span class="quantity" style="opacity: 1;">1</span>x</span>
			<a title="Cheval" href="http://localhost/prestashop/index.php?id_product=8&controller=product" class="cart_block_product_name">
			Cheval</a>
			<span class="remove_link"><a href="/prestashop/?controller=cart&delete&id_product=8&ipa=0&token=b8cd2a0a5ad75211cd863b568a73fdb7" rel="nofollow" class="ajax_cart_block_remove_link"> </a></span>
			<span class="price">28,00 €</span>
		</dt>

 

Voila pour l'html (je n'ai pas mis tout le code)

 

Maintenant le css:

 

 

#header_user {
display: block;
height: 35px;
margin: 0 auto;
max-width: 980px;
min-width: 800px;
position: relative;
top: -17px;
}

#header_user #header_nav {
list-style-type: none;
}

#shopping_cart {
float: right;
position: relative;
top: 1px;
width: 125px;
}

#header #cart_block {
background: none repeat scroll 0 0 #674015;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 0 1px 0 #EFE3AF;
color: #FFFFFF;
display: none;
height: auto;
position: absolute;
right: 0;
top: 200px;
width: 210px;
z-index: 10;
}

 

Désoler c'est un peu brouillon tout ça.

Edited February 22, 2013 by Pims (see edit history)

[Atch]

Votre id="header" a t il un position relative ?

[jcandres]

#header{
position:relative
}

 

sans commencer par la ca va être dur

 

ensuite tu positionnes en absolute comme il faut #header #cart_block et cela devrait etre compatible avec toutes les tailles d'ecran

Edited February 22, 2013 by jcandres (see edit history)

[Pims]

Ok je crois avoir compris, je vous tiens au courant si j'y arrive

 

Merci

Edited February 24, 2013 by Pims (see edit history)

[Pims]

Enfaite ça ne fonctionne pas parce que mon header prend toute la largeur avec width:100%

 

Il faudrait que je déplace la div cart_block dans header_user je ne sais pas comment faire

[pierrot69004]

Bonjour,

 

Sur la version mobile de mon site le panier vient se mettre sur le logo, je ne sais pas comment faire pour qu'il reprenne sa place initiale, c'est à dire sur la même ligne que mon menu.

 

Ps : Je ne suis pas développeur.

 

Merci de votre aide

 

Site : www.ferdinand-shop.com (version mobile)