Pb alignement 2 boutons

Bonsoir,
voila je galere, je n'arrive pas à comprendre la méthodolgie pour placer des boutons autour d'une photo et que cela soit conforme dans le navigateur.

Mon ecran est un 1920*1080
Sous Kompozer, le gabarit est de 1620px > deja, peut on le changer en 1920 ??

Ce qui est bien avec Kompozer, c'est que l'on peut déplacer comme on veut les blocs
mais ici l'Image est centrée dans un tableau et les 2 boutons placés manuellement.

Sous kompozer c'est OK, comme ceci


Sous firefox en 1920px


Sous firefox en 1620px (grace a web developper), là OK


Alors j'ai essayé comme dans pas mal de forums d'inscrire dans le css
body{width:100%;margin:auto;min-width:600px;max-width:2000px}
mais ça n'y fait rien

Sinon, si je place l'image et les boutons manuellement c'est OK, mais si y a du texte au dessus, ce n'est plus centré non plus entre le texte et le reste...bref je galere, car j'ai essayé aussi de placer les 2 boutons dans des cellules et alors là galere à bien placer

Comment bien placer et que le contenu s'adapte à chaque résolution d'écran ??

Merci de votre aide
Max
Modifié par ashtar (26 Nov 2011 - 15:44)

Salut, voir les media queries pour l'adaptation à différentes résolutions d'écran.

J'ai bien peur que les Media Queries soient à mille lieues des compétences actuelles d'ashtar, qui travaille en mode WYSIWYG si j'ai bien compris.

Pas d'aide particulière à apporter pour ma part. Je vois bien quels sont les concepts techniques en jeu: les éléments placés manuellement se voient sans doute affecter par Kompozer des styles CSS à base de positionnement absolu avec des coordonnées définies depuis le coin haut gauche de la fenêtre du navigateur; si on veut garder le positionnement absolu on pourrait avoir un conteneur global de largeur fixe, centré, et positionné en relatif pour servir de nouveau cadre de référence au positionnement absolu. Par contre, comment traduire tout ça en manipulations dans Kompozer ou autre logiciel WYSIWYG, ça m'échappe (et en plus je m'en fiche pas mal).

Bon courage pour la suite.

PS: à tout hasard, je me demande si BlueGriffon (développé également par Daniel Glazman, l'auteur principal de Kompozer, mais plus récent) ne serait pas un outil plus adapté à ce travail.
Modifié par fvsch (24 Nov 2011 - 14:56)

Salut,
j'ai bien lu la réponse de ce matin, en effet les media-queries sont peut etre au dela de mes compétences
Mais à votre avis, le positionnement manuel (sous Kompozer) est une erreur ?
il vaut mieux placer en absolu ?

BlueGriffon ? connais pas...à essayer

Merci
Max

ashtar a écrit :
Mais à votre avis, le positionnement manuel (sous Kompozer) est une erreur ?

Hmm, comment dire...

Comme ce forum est dédié à l'apprentissage des standards du Web en mettant le nez dans le code et en apprenant à maitriser les concepts, on va avoir tendance à te répondre que le fait même d'utiliser un éditeur WYSIWYG est une erreur, et que proposer une assistance à la bonne utilisation d'un outil WYSIWYG n'est pas dans notre domaine de compétence.

Lorsque tu nous parles de «positionnement manuel sous Kompozer», tu es tout à fait hors-sujet sur ce forum. Si tu nous parles de structure HTML et de positionnement absolu en CSS, tu reviens dans le sujet.

Je suis bien conscient que ça ne t'aide pas des masses...

salut,

Ouais ça fait qq jours que j'ai commencé à m'exercer, donc un WYSIWYG est bien adapté pour l'instant et Kompozer permet de voir les codes HTML et CSS, ce qui permet de bien comprendre ce que l'on fait
un jour, je ferais cela les yeux fermés ...

ceci dit, je n'arrive pas à mettre un espace de xxx px entre 2 boutons alignés, en voulant bien sur que ces 2 boutons soient symétriques / l'axe vertical centré comme voulu dans mon screenshot, si vous pouvez m'aider

Merci
Max

salut,
en effet, je me suis résolu à mettre le body en 1024px centré pour que tous les écrans puissent le voir correctement.

Bon voila, comment j'arrive à positionner les 2 boutons en question :



j'ai donc créé une class="contenu" centrée de 460px avec les 2 boutons dedans, le souci avec les 2 boutons c'est que si je veux 5px d'espace entre eux deux ou même plus pour que ça soit joli...si je mets margin:20px alors celui de gauche sera aussi décalé de 20px vers la droite donc au final tout est légèrement décentré

mon code CSS :

body {
width:1024px;
margin:auto;}

.contenu {
width:460px;
margin:auto;}

.bouton a {
  background: transparent url(bouton-noir220.png) no-repeat scroll 0% 50%;
  text-align: center;
  color: white;
  display: block;
  line-height: 73px;
  vertical-align: middle;
  width: 220px;
  text-decoration: none;
float:left;
margin:5px;
}
.bouton a:hover {
  background: transparent url(bouton-noir220-hover.png) no-repeat scroll 0% 50%;
}

comment bien faire pour un positionnement exact ??

Merci
Max