Jump to content

Recommended Posts

Bonjour tout le monde,

 

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

 

167738panierproblme2.png

 

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) :mellow:

 

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 :blink:

 

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

 

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

540679panierproblme1.png

Edited by Pims (see edit history)

Share this post


Link to post
Share on other sites

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 by Atch (see edit history)

Share this post


Link to post
Share on other sites

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 :unsure:

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Voila un exemple de mon panier en 1366 x 768

 

mini_899258panierproblme3.png

 

Et maintenant en 1024 x 768

 

mini_114496panierproblme4.png

 

 

 

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

Share this post


Link to post
Share on other sites

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 by Pims (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

#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 by jcandres (see edit history)

Share this post


Link to post
Share on other sites

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 :(

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More