Mettre en forme mes menus

[Lilil]

Bonjour,

J'aimerai savoir si vous pouvez m'aider à mettre en forme mes menus.
En fait, je voudrais que la colonne droite monte depuis le haut du site. (voir image)
Je ne sais pas trop ou bidouiller pour que ça marche,
pouvez-vous m'aider ?

Merci

[Lilil]

J'ai réussi à mettre en forme tout ca en rectifiant les tailles du header et menu de navigation.
Par contre pour que la colonne de droit monte en haut de la page, j'ai du passé par la négative !

#right_column {
margin-top:-300px;
padding-left:0;
width:190px;

J'espère que ça ne posera pas de soucis par rapport aux différents navigateurs ?!
S'il y a une meilleure solution, je suis preneuse !

[Lilil]

Bon, je continue à parler toute seule (espérant un peu d'aide.... et au fur et à mesure que je trouve des réponses, aider un peu ceux qui chercheraient la même chose que moi)

J'ai réussi à mettre en forme mon menu, maintenant j'aimerai que mes différents produits apparaissent deux par deux dans les différentes catégories... (voir image)

Si quelqu'un à une idée, je suis preneuse, sinon, je continue ma traversée du désert ;-P

[jeckyl]

et pourquoi ne pas encapsuler le header, le contenu dans un div en float left et extraire la colonne de droit qui sera elle aussi en float left et le tout dans une div pour limiter la largeur et centrer le tout ?

[Lilil]

Oui, je veux bien, mais je fais comment ??
Peux-tu m'expliquer le bout de code à changer et celui qu'il faut mettre ?
Merci beaucoup

[jeckyl]

#page, #footer {
margin : 0 auto;
}

#main, #colonne {
float:left
}

[Lilil]

Bonjour,
Je te remercie de ta réponse mais je dois avouer que quelques explication supplémentaires seraient les bienvenues... Parce que des lignes de codes comme ça, je ne sais pas vraiment quoi en faire !
Merci

[jeckyl]

L'explication est au dessus.

et si je change la présentation ?

ton entête
ton contenu

la colonne de droite

le bas de page

[Lilil]

Je vais supposer que je dois changer ça dans le global.css .......... ?
Je suis désolée mais je ne suis pas du tout pro du css, je bidouille en m'aidant beaucoup de Firebug
Merci pour ton aide

[jeckyl]

ceci n'est pas du css mais de l'html, donc il faut reprendre la structure des pages en inscrivant convenable ces éléments dans le fichier header.tpl et footer.tpl.

Puis travailler sur le css pour la mise en page.

[Lilil]

Je suis désolée mais je n'y arrive pas :down:

N'y a t-il pas un moyen, tout en gardant la présentation "d'origine"
d'indiquer que les "boites" au centre de la colonne doivent être côte à côte (2 par 2) et non pas en colonne
J'ai rectifié leur taille, elles sont plus petites afin qu'elles se mettent pas deux mais ça ne suffit pas

Je ne sais pas comment faire.
Tout le reste de ma présentation est Ok, il ne me manque que ça :-S

EDIT =>
Au niveau de ma list de produits dans le global.css, j'ai ça :

/* product-list.tpl */
ul#product_list{ margin-top:0em; list-style-type:none; }
ul#product_list li {
background: transparent;
border: solid 1px #5595a6;
padding: 2px;
width: 300px;
height:225px;
clear:float;
margin-bottom:2em;
}
ul#product_list li a {
text-decoration:none;
color:#888;
}

ul#product_list a.product_img_link{
border: dotted 1px #5595a6;
float:left;
margin-right:0.6em;
}

ul#product_list a.product_img_link img{
vertical-align:bottom;
}
ul#product_list li h3{ margin:0.4em 0; }
ul#product_list li .new{
background:transparent url(../img/flag_new_bg.jpg) repeat-x scroll 0%;
border:1px solid #5595a6;
color:red;
font-size:0.6em;
font-weight:bold;
margin:0pt 1em 0pt 0pt;
padding:0pt 0.4em;
text-transform:uppercase;
vertical-align:0.3em;
}
ul#product_list li p.product_desc{ font-size:0.92em; }
ul#product_list li div.center_block{
float:left;
width:74%;
}
ul#product_list li div.right_block{
float:left;
width: 10em;
text-align:left;
margin-left:1em;
margin-top:0;
}
ul#product_list li .discount{
color:#5595a6;
text-transform:uppercase;
font-weight:bold;
display: block;
}
ul#product_list li .on_sale{
color:#5595a6;
text-transform:uppercase;
font-weight:bold;
display: block;
}
ul#product_list li .reduction {
display: block;
margin-bottom: 0.3em;
}
ul#product_list li .price{
display: block;
font-size: 1.5em;
margin-bottom: 0.2em;
}
ul#product_list li span.availability{
float: right;
color:#5595a6;
font-size:0.9em;
}
ul#product_list li a.button{ margin-top:0.5em; }