Problème de centrage du site web sur petites résolution.

Hustlelion -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention - 24 août 2016 à 20:03

Bonjour!

J'ai créé un site web qui s'alligne parfaitement avec mon écran 27" widescreen.

Par contre, quand on le regarde avec un moniteur aux dimensions différentes (exemple, écran carré) les utilisateurs doivent pousser la fenetre vers la gauche pour que le site soit centré.

J'ai regardé sur openclassroom, mais les explications ne sont pas assez claires et je n'arrive pas à faire centrer le site sur des écrans carrés.

J'aimerais savoir comment je peux faire pour simplement adapter mon site web à toutes les résolutions. J'utilise DreamWeaver, parce que c'est le logiciel que j'ai appris à utiliser pour concevoir des sites web.

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aqua Dan Services</title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:1448px;
height:1202px;
z-index:1;
top: 6px;
}
#apDiv2 {
position:absolute;
width:1696px;
height:842px;
z-index:2;
top: 52px;
font-size: 25px;
color: #165CB1;
left: 83px;
font-family: Arial Black, Gadget, sans-serif;
;
}
#apDiv3 {
position:absolute;
width:629px;
height:251px;
z-index:2;
left: 404px;
top: -72px;
}
#apDiv4 {
position:absolute;
width:342px;
height:465px;
z-index:3;
left: 371px;
top: 409px;
}
#apDiv5 {
position:absolute;
width:202px;
height:182px;
z-index:4;
left: 755px;
top: 566px;
}
#apDiv6 {
position:absolute;
width:334px;
height:462px;
z-index:5;
left: 983px;
top: 412px;
}
body
#apDiv7 {
position:absolute;
width:152px;
height:71px;
z-index:6;
left: 782px;
top: 751px;
}
#apDiv8 {
position:absolute;
width:200px;
height:41px;
z-index:7;
left: 760px;
top: 833px;
}
#apDiv9 {
position:absolute;
width:388px;
height:160px;
z-index:3;
left: 1053px;
top: 0px;
}
</style>
</head>

<body>

<div id="apDiv1">
<div id="apDiv2">
<br />
<br />
<br />
<div id="apDiv9">
Fabricant et entretient
d'aquariums, murs de bulles et chutes d'eau
</div>
<p align="center"><strong><u>Téléphone : 450-935-1490</u></strong>
<p align="center"><strong><u>Télécopieur : 450-935-1480</u></strong>
<br /> <br /> <br />
<br />

<strong>EN CONSTRUCTION - BIENTÔT DISPONIBLE</strong>
<p align="center"><br />

</p>

<div align="center"><a href="mailto:***@***" rel="nofollow" target="_blank"><strong>Contact Courriel</strong></a><strong> </strong><br /></div>
<div id="apDiv3">
<div align="left"><img src="images/LogoLG.png" width="630" height="255" /></div>
</div>
<div id="apDiv4"><img src="images/dauphin gauche.png" width="359" height="469" /></div>
<div id="apDiv5"><img src="images/Requin PC.png" width="196" height="180" /></div>
<div id="apDiv6"><img src="images/dauphin droit.png" width="359" height="469" /></div>
<div id="apDiv7"> <a href="http://www.compteurdevisite.com" rel="nofollow" target="_blank" title="mon compteur"><img src="http://counter1.01counter.com/private/compteurdevisite.php?c=6ba4bb79bae838df3e9a8ebf9020a7f8" border="0" title="Compteur de visite" alt="Compteur de visite"></a></div>
<div id="apDiv8"> <b> <font size="+3" color="#165CB1">VISITEURS</font></b></div>
</div>
</body>
</html>

Merci de votre aide, car je m'arrache les cheveux depuis 2 heures sans qu'aucunes solutions testé ne fonctionne.

J'ai tenté de modifier les pixels en % dans les "width", mais ça ne fonctionne pas car les div s'agrandissent plutot que de s'alligner avec le reste de la page.

Cordialement,

Hustlelion

Afficher la suite

A voir également:

Problème de centrage du site web sur petites résolution.
Site de telechargement - Accueil - Outils
Création site web - Guide
Site comme coco - Accueil - Réseaux sociaux
Web office - Guide
Quel site remplace coco - Accueil - Réseaux sociaux

1 réponse

Réponse 1 / 1

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Salut
Hélas tu es tout a fais mal parti en t'y prenant comme ca
Utiliser dreamweaver ne pourra qu'engendrer ce genre de chose
je te conseille
De ne pas utiliser la position absolute a outrance pour positionner
d'avoir un fichier css externe et de ne pas utiliser la balise <style>
de ne pas utiliser l'attribut align (div align)
d'utiliser le html5
de reflechir au design en prenant en compte les différentes résolution d'ecrans (un site web n'est pas une affiche print)
il existe quelques sites pour apprendre les bases
Donc avant de te lancer apprend un peu les bases du html5 et du css sans vouloir a tout pris faire un site mais avec le but de comprendre.
bon exemple centré (rouge) avec un div en plus en absolute (blanc)

html

<div id="centre">
<div id="carre"></div>
</div>

css (ou style)

#centre {
position:relative;
width:80%;
height:300px;
margin : 10px auto;
background:red;
z-index:1;
}
#carre {
position:absolute;
top:10px;
left:10px;
width:20%;
height:50px;
background:white;
z-index:10;
}

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Hustlelion

D'accord. Je pensais bien que mon structure de base ne devait pas être super. Le problême, c'est que on ne m'a montré que dreamweaver durant mes cours. Autrement je ne sais pas trop comment placer mes images là où je les veux.

Mais bon, je voulais juste être sur de pas tout recommencer à zéro pour rien. Mais vous venez de me convaincre de le faire.

Merci beaucoup de m'avoir répondu. Je vais retourner sur openclassroom et étudier un peu plus. Merci :)

animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention 738

Pas de quoi, bon apprentissage.

Discussions similaires

Chemin Logo du site de la Cité de l'espace

Votre réponse

Discussions similaires