Flux rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Centrer un calque/design

hananedesign, le mercredi 20 février 2008 à 15:33:06
Bonjour,

je voudrai centrer mon design qui est constitué d'un calque de fond et de plusieurs autres alignés au dessus de ce calque.
J'ai essayé de rajouter margin:auto dans le body mais ça ne marche pas. please quelqu'un peut m'aider je débute dans la conception de site !

Voici mon code CSS :
<style type="text/css">
<!--
body {
background-image: url(Images/images/rayures%20oranges%20fonds.jpg);
}
.Style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10;
color: #A05000;
}
body,td,th {
font-size: 11px;
} h1 {
font-size: 11px;
}
.Style12 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #A05000; }
.Style13 {font-size: 10px}
.Style15 {font-size: 12px}
.Style16 {font-size: 11px}
.Style17 {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #A05000; }

#fond {
position:absolute;
left:65px;
top:16px;
width:638px;
height:484px;
z-index:0;
}
#haut {
position:absolute;
left:65px;
top:15px;
width:632px;
height:129px;
z-index:6;
}
#gauche {
position:absolute;
left:65px;
top:143px;
width:126px;
height:345px;
z-index:7;
}
#centre {
position:absolute;
left:191px;
top:143px;
width:326px;
height:345px;
z-index:8;
}
#droite {
position:absolute;
left:516px;
top:143px;
width:180px;
height:345px;
z-index:9;
}
#contenu {
position:absolute;
left:227px;
top:170px;
width:260px;
height:187px;
z-index:10;
}
-->
</style>
</head>

------------------------------------

et maintenant le code HTML :

<body>
<div id="fond"></div>
<div id="haut"><img src="Images/Interface-vert_01.jpg" width="631" height="129" longdesc="Images/Interface-vert_01.jpg" /></div>
<div id="gauche"><img src="Images/Interface-vert_02.jpg" width="126" height="345" longdesc="Images/Interface-vert_02.jpg" /></div>
<div id="centre"><img src="Images/Interface-vert_03.jpg" width="326" height="345" border="0" longdesc="Images/Interface-vert_04.jpg" /></div>
<div id="droite"><img src="Images/Interface-vert_04.jpg" width="180" height="345" border="0" usemap="#MapMapMap" longdesc="Images/Interface-vert_03.jpg" />
<map name="MapMapMap" id="MapMapMap">
<area shape="rect" coords="50,101,109,150" href="hdsiteportfolio.html" />
<area shape="circle" coords="84,202,34" href="hdsitestaff.html" />
<area shape="rect" coords="63,266,91,283" href="mailto:BLABLA@free.fr" />
</map>
</div>
<div id="contenu">
<p align="center" class="Style1"><img src="Images/Accueil.jpg" width="102" height="37" /></p>
<p align="left" class="Style12"><span class="Style13"><span class="Style15"><span class="Style16"><strong>TITRE</strong> BLABLABLABLABLABLA BLABLA BLABLA BLABLA BLABLA BLABLA BLABLA .BLABLA </span></span></span></p>
<p align="left" class="Style17">BLABBLABLA LABLABLA BLABLA BLABLABLABLA BLABLA BLABLA </p>
<p align="left" class="Style17">BLABLA BLABLABLA BLA BLABLA BLABLA BBLABLA BLABLA BLABLA LABLA </p>
</div>
<p> </p>
</body>
</html>


MERCI D'AVANCE !
Configuration: Windows XP
Firefox 2.0.0.12
Répondre à hananedesign  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Darkito, le mercredi 20 février 2008 à 15:40:42
Bonjour,
tu peux créer un style #site par exemple avec les attributs

#site {
margin-left :auto;
margin-right:auto;
}

enuuite, tu mets tout ton code dans cette div

<body>
<div id="site">
....
</div>
</body>

Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?
Répondre à Darkito

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
hananedesign, le mercredi 20 février 2008 à 15:58:25
darkito à la place de #site j'ai reprise #fonds, j'ai rajouté les attributs que tu m'as donné, ensuite ds le body j'ai déplacé le </div> de #fonds et je l'ai mis à la fin avant le dernier </div>.

Résultat : le design s'est déplacé vers la droite mais il n'est tjrs pas centré.

Y-a-t-il un autre moyen pour centrer complètement le design horizontalement et verticalement pour que chaque internautes de résolution différente le lis au centre??

merci de m'avoir renseigné
Répondre à hananedesign

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Darkito, le mercredi 20 février 2008 à 16:04:45
Tu as toujours les indication sur la position pour fonds ? Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?
Répondre à Darkito

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
hananedesign, le mercredi 20 février 2008 à 16:07:31
oui
position:absolute;
left:65px;
top:16px;
width:638px;
height:484px;
z-index:0;
margin-left :auto;
margin-right:auto;

il faut peut être utiliser les % pour que ça soit centrer de la meme maniere sur les differentes resolutions nan???
Répondre à hananedesign

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Darkito, le mercredi 20 février 2008 à 16:14:01
Pour le centrage, les% ne servent pas je crois.
Essaie avec la solution que je t'avais donné au début.
le margin dans une div globale.
Je pense que position absolute et marge auto ne font pas bon ménage. Tøƒ
A quand la matière "Comment faire une recherche Google ?" obligatoire dès la 6ème ?
Répondre à Darkito

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 hananedesign, le mercredi 20 février 2008 à 17:43:58
j'ai fais ce que tu m'as dit au début avec #site.
J'ai rajouté ceci dans body :
<div align="center" id="site" style="position:relative; left:auto; height:500px; top:40px; left:-60px">

RESULTAT : ça marche !!! c'est bien centré horizontalement et verticalement sur firefox et IE sur une résolution écran de 1024X768.

MAIS pour les autres résolutions c'est centré horizontalement seulement. Je vais essayer de trouver une solution pour centrer verticalement sinon c'est pas très important je trouve.


Répondre à hananedesign

Résultats pour Centrer un calque/design

[CSS] Comment centrer un design ? (Résolu) Bonjour J'ai un problème pour centrer mon design. Je ne sais pas quel balise choisir ... Voila ce que je peux mettre dans ma balise body body { width: 760px; margin-top: 20px; margin-bottom: 20px; background-image: url("design/fond.png"); margin:... www.commentcamarche.net/forum/affich-4929845-css-comment-centrer-un-design
Les calques dans Dreamweaver (Résolu) Bonjour, je suis en train de faire un site internet pour une cousine, seulement j'ai un ptit problème avec ces calques : http://users.belgacom.net/hautiergeoffrey/page1.html Selon les écrans vous verez les images tout a fait a gauche ou tout a... www.commentcamarche.net/forum/affich-7819591-les-calques-dans-dreamweaver
Peut on centrer un background? (Résolu) Bonjour tout le monde, j'ai un design dont une partie sera mise en calque et l'autre en background. Pour avoir un calque centré lors d'un changement de résolution d'écran je sais le faire mais peut on également centrer un... www.commentcamarche.net/forum/affich-6714195-peut-on-centrer-un-background

Résultats pour Centrer un calque/design

Désactiver le Centre de sécurité de Windows XPPréambule Avec le Service Pack 2 (SP2) de Windows XP, est apparu un nouvel outil : le Centre de sécurité. Ce dernier est maintenant présent dans les systèmes d'exploitation Windows XP et Windows Vista. Le SP2 est axé sur l'amélioration de la... www.commentcamarche.net/faq/sujet-6916-desactiver-le-centre-de-securite-de-windows-xp
Centrer verticalement une page webPour centrer verticalement une page web, impossible de s'en sortir en css. Une solution bien pratique : JavaScript. 1. Le fichier .js 2. La page .html 3. Utilisation 4. Inconvénients 5. Rappel Merci à Dalida pour la source du fichier... www.commentcamarche.net/faq/sujet-9867-centrer-verticalement-une-page-web
Xpress - Centrer un texte dans un cadre.Dans QuarkXpress, pour pouvoir centrer verticalement un texte dans un cadre (solution A) il faut en plus de la fonction Alignement vertical et centré, effectuer un décalage de la ligne de base (solution B) en utilisant les paramètres : - (taille... www.commentcamarche.net/faq/sujet-10848-xpress-centrer-un-texte-dans-un-cadre

Résultats pour Centrer un calque/design

IE ne centre pas ma page ?! Aide ! (Résolu)Bonjour, J'ai un problème pour centrer ma page sur IE, firefox c'est ok: Le code est très simple en tableau j'ai crée un design sur photoshop et l'est optimiser pour le web inutile de l'afficher, si vous en avez besoin je vous... www.commentcamarche.net/forum/affich-8929532-ie-ne-centre-pas-ma-page-aide
Fonction de réference cercle trigonometrique (Résolu)Bonjour,je cherche à résoudre un exercice que j'ai besoin pour un DM.voici l'énoncer: x désigne un appartenant à ] 0;§/4[ (§ désigne pi) I,A et B sont les points images respectivement de 0,x et 2x sur le cercle trigonométrique C de centre o.... www.commentcamarche.net/forum/affich-5932559-fonction-de-reference-cercle-trigonometrique
Cherche un travail dans un centre d'appel a r (Résolu)salut tout le monde, je suis une fille de 21 ans j'ai un bac scientifique je fais maintenant mes etudes a la faculte des sciences filiere svi mais je cherche un travail au centre d'appel a rabat si vous avez des imformation sur ça aidez moi... www.commentcamarche.net/forum/affich-3918714-cherche-un-travail-dans-un-centre-d-appel-a-r

Résultats pour Centrer un calque/design

Télécharger Roxio Central Roxio Central est programme de démonstration de gravure multimédia de dernière génération en montrant de multiples possibilités pour le nouvel utilisateur. Fabriqué sur la base de la nouvelle venue de Microsoft, Windows Vista, la présentation est plus... www.commentcamarche.net/telecharger/telecharger-34055591-roxio-central
Télécharger DB DesignerDB designer 4 est un logiciel permettant de concevoir visuellement des bases de données. Il possède également des fonctions permettant de créer et de gérer la base de données sous MySQL www.commentcamarche.net/telecharger/telecharger-102-db-designer

Résultats pour Centrer un calque/design

HP DesignJet 500 (42 in)Jet d'encre,couleur,Plusieurs formats acceptés,1200 dpi,Centronics parallel,IEEE-1284-compliant (ECP),USB 1.1 (Windows 98 and 2000).,Vitesse d'impression noir et blanc: ,Vitesse d'impression couleur: ,Connexion:Centronics parallel,IEEE... www.commentcamarche.net/guide-achat/hp-designjet-500-42-in-150026-fiche-technique
HP DesignJet Scanner 4500Ethernet,Divers:With scan speeds up to 3in/76 mm per second color and 10in/253 mm per second black and white,the HP Designjet 4500 Scanner delivers outstanding copy and scan performance and increases efficiency. The output basket will accept scanned... www.commentcamarche.net/guide-achat/hp-designjet-scanner-4500-544462-fiche-technique
Eltax Monitor Centre BlackEnceinte centrale,120-240 W Watt,Active/Passive:Passive,Couleur:Black,Isolement magnétique: ,Nombre d'éléments:2 voies,Type:Enceinte centrale,Aigus:2.5 cm,Bande passante:50-22000,Basses:2x13 cm,Dimensions (LxHxP):45x18x16... www.commentcamarche.net/guide-achat/eltax-monitor-centre-black-1114197-fiche-technique

Résultats pour Centrer un calque/design

Déco et High-tech : 7 objets high-tech design pour le salon(Paris - Relax news) - Alors que le secteur de la décoration est en plein boom, de nombreuses enseignes dédiées aux nouvelles technologies renouvellent leur offre pour permettre aux consommateurs d'acquérir des objets high-tech design à intégrer dans... www.commentcamarche.net/actualites/deco-et-high-tech-7-objets-high-tech-design-pour-le-salon-5847442-actualite.php3
[Brève] Palm CentroDestiné à démocratiser le concept smartphone, le Centro est un appareil qui mise sur son ergonomie et sa simplicité d'utilisation. Il embarque de nombreuses applications pour professionnels, comme un lecteur PowerPoint, Word et Excel, le push mail, un... www.commentcamarche.net/actualites/breve-palm-centro-5846464-actualite.php3

Résultats pour Centrer un calque/design

Centres d'appel (Help Desk / Call center)Introduction aux centres d'appels On appelle Centre d'appel (en anglais Call Center) une plate-forme, hébergée par l'entreprise ou externalisée, chargée d'assister les utilisateurs. Les centres d'appels permettent d'assister des clients dans le... www.commentcamarche.net/contents/entreprise/help-desk.php3
Design PatternsDesign Patterns Les Design Patterns (en français Patrons de conception, Modèles de conception ou encore Motifs de conception sont un recueil de bonnes pratiques de conception pour un certain nombre de problèmes récurrents en programmation orientée... www.commentcamarche.net/contents/genie-logiciel/design-patterns.php3
Web designerWeb designer Le web designer conçoit l'identité visuelle des sites web et définit leur charte graphique (maquette, position des éléments graphiques, choix des images, couleurs, polices, etc.). L'objectif du web designer est de valoriser l'image de... www.commentcamarche.net/contents/metiers-informatique/web-designer.php3