28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

Je viens de créer un site dont voici l'adresse : http://www.lespersonnesjazzy.net

Le résultat me va mais le contenu des pages ne s'adapte malheureusement pas aux variations de tailles de la fenêtre du navigateur. Il s'agit sans doute d'un problème d'un niveau quasi débutant, ce que je suis vous vous en doutez. J'ai beau chercher sur Internet à la recherche du bout de code magique à insérer dans mon HTML, je ne trouve rien que je puisse faire fonctionner, et il n'y a même pas d'onglet "centrer" dans les propriétés de page!

Je remercie par avance toute personne susceptible de bien vouloir prendre du temps afin de m'aiguiller dans ma recherche.
Salut,

Avant toute chose, vu l'intitulé du sujet (« Centrage des pages sous Dreamweaver CS3 »), je crains que tu aies créé ton site en WYSIWYG, autrement dit en n'utilisant que le « mode création », d'après l'appellation de Dreamweaver.

Sache que l'utilisation d'un outil WYSIWYG, quel qu'il soit, n'est pas la meilleure solution pour progresser dans la maîtrise du HTML et des CSS.

Puisque tu reconnais que tu es débutant, tu gagneras beaucoup en parcourant les tutoriels et articles d'Alsacréations, parmi lesquels celui-ci, qui te fournira des éléments de réponse pertinents.
Merci Victor de ta réponse rapide,

je me sert effectivement du mode création, je fais mes sites à l'arrache et utilise Dreamweaver
uniquement parce que les sites conçus avec Iweb ne fonctionnent pas très bien sous Internet Explorer!

J'étais déjà tombé sur ce tuto que tu as la gentillesse de m'indiquer, il m'avait un peu rebuté, ne sachant pas très bien comment insérer ces codes. lors de mes recherches, j'étais tombé sur un autre qui me paraissait plus abordable, penses-tu que je puisse en tirer quelque chose? :

http://www.commentcamarche.net/faq/4613-webmaster-adapter-un-site-a-toutes-les-resolutions-le-centre

Merci et bonne soirée
Pascal
Le lien que tu mentionnes ne me semble pas vraiment à jour, voire ne tient pas compte de certains comportements CSS par défaut. Bref, je ne te le conseille pas.

Si tu ne sais pas comment insérer des bouts de code, c'est qu'il te faut vraiment apprendre les bases depuis le début. Si tu as des sous à dépenser, je te conseille d'acheter le livre Réussir son site Web avec XHTML et CSS et de commencer par le lire. Ensuite, tu pourras te perfectionner en parcourant les tutoriels d'Alsacréations.
Bonjour,
Victor BRITO a écrit :
Si tu ne sais pas comment insérer des bouts de code, c'est qu'il te faut vraiment apprendre les bases depuis le début.

Vu le profil de filsector et son besoin, je ne conseille pas vraiment cette approche. L'apprentissage de HTML et CSS (bases et techniques de niveau intermédiaire) est un investissement en temps conséquent, et n'est intéressant que pour des personnes désirant réaliser plusieurs sites web... voire évoluer dans ce milieu professionnel.

Les outils de création visuelle pour le Web, dont Dreamweaver (en mode création) ou iWeb sont relativement bons pour réaliser des sites web simples, sans grandes prétentions graphiques ou complexité de mise en page. Autant les utiliser. Par contre, on sera limité assez vite aux capacités de ces outils, et si Dreamweaver ne propose pas de fonction «centrage», bah voilà, c'est plié, pas de centrage. Smiley smile

Par ailleurs, je précise que ce forum est destiné à accompagner l'apprentissage des langages HTML et CSS (entre autres), qu'il a pour règle qu'on ne propose jamais de code prêt à l'emploi, et que même si on donnait un code tout prêt il faudrait encore avoir des bases correctes en HTML et CSS pour pouvoir l'insérer dans le site et, si nécessaire, l'adapter au code existant.

On peut tenter quand même (tant pis pour la règle Smiley cligne ) pour rappeler la principale technique de centrage horizontal. Il s'agit d'avoir un élément conteneur (par exemple un élément DIV qui englobe l'ensemble du contenu, ou encore l'élément BODY lui-même), de lui donner une largeur précise, et d'utiliser la valeur "auto" pour les marges latérales. Ce qui peut donner:
body {
  max-width: 600px;
  margin: 1em auto;
}
Cher fvsch,

je ne désire effectivement pas passer un temps monstre sur les sites que je réalise, ils me servent de carte de visite et ne sont en aucun cas des exercices de style!
Merci pour cette entorse à "la règle", tout cadre ne mérite t'il pas d'être exploré?
j'ai essayé de coller votre proposition dans mon code mais cela n'a malheureusement rien donné, sans doute l'ai-je disposé en un endroit non approprié, je vous montre l'affaire tenté sur le début de ma page contact (j'espère que je ne vous mets pas dans l'embarras...)
Merci à tous 2 en tout cas de votre intérêt envers un modeste bidouilleur.


<!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>Document sans nom</title>
<style type="text/css">
<!--
body { max-width: 600px;

margin: 1em auto;
background-color: #000000;
}
.Style13 { color: #FFFFFF;
font-weight: bold;
}
Salut,

Attention quand même de mettre un titre à ta page.
Smiley cligne

Dans le code il manque une balise de fermeture du style:

</style>

Modifié par jmlapam (21 Oct 2011 - 02:44)
Bonjour Jmlapam,

Je n'avais mis que le début du code de ma page, la balise dont tu parles est plus bas, voici le code intégral avec l'ajout recommandé (mais malheureusement non opérationnel)par fvsch :

<!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>Document sans nom</title>
<style type="text/css">
<!--
body {max-width: 600px;

margin: 1em auto;
background-color: #000000;
}
.Style13 { color: #FFFFFF;
font-weight: bold;
}
.Style5 {font-family: Arial; color: #999999; }
#apDiv2 { position:absolute;
left:242px;
top:23px;
width:101px;
height:42px;
z-index:2;
}
#apDiv { position:absolute;
left:359px;
top:23px;
width:90px;
height:42px;
z-index:1;
}
#apDiv10 { position:absolute;
left:471px;
top:24px;
width:127px;
height:41px;
z-index:2;
}
#apDiv3 { position:absolute;
left:607px;
top:23px;
width:104px;
height:42px;
z-index:3;
}
#apDiv4 { position:absolute;
left:708px;
top:23px;
width:89px;
height:42px;
z-index:4;
}
a:link {
color: #999999;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #999999;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.Style14 {color: #FFFFFF}
#apDiv1 {
position:absolute;
left:363px;
top:176px;
width:354px;
height:319px;
z-index:5;
}
#apDiv5 {
position:absolute;
left:332px;
top:163px;
width:554px;
height:462px;
z-index:5;
background-color: #FFFF00;
}
#apDiv6 {
position:absolute;
left:357px;
top:209px;
width:306px;
height:209px;
z-index:6;
background-color: #FFCC66;
}
#apDiv7 {
position:absolute;
left:356px;
top:453px;
width:471px;
height:138px;
z-index:7;
}
.Style22 {
color: #FFCC66;
font-family: "Comic Sans MS";
font-size: 14px;
font-weight: bold;
}
#apDiv8 {
position:absolute;
left:353px;
top:129px;
width:224px;
height:56px;
z-index:8;
}
.Style25 {font-family: "Comic Sans MS"; font-size: 24px; color: #FFCC66;}
.Style31 {
color: #FFCC66;
font-weight: bold;
font-family: "Comic Sans MS";
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div class="Style5" id="apDiv2">
<div align="center" class="Style13"><a href="index.html">Accueil</a></div>
</div>
<div class="Style5" id="apDiv">
<div align="center"><a href="projeter.html">Projeter</a></div>
</div>
<div class="Style5" id="apDiv10">
<div align="center"><a href="changerdair.html">Changer d'airs</a></div>
</div>
<div class="Style5" id="apDiv3">
<div align="center"><a href="ecouter.html">Ecouter</a></div>
</div>
<div class="Style5" id="apDiv4">
<div align="center" class="Style14">Contact</div>
</div>
<div id="apDiv6"><img src="ressources/photos/untitled.jpg" width="300" height="204" /></div>
<div id="apDiv7">
<p class="Style22">Pascal VIOSSAT</p>
<p class="Style22">Tel : 06 75 13 24 33</p>
<p class="Style31">Courriel : <a href="mailto:viossat.pascal@wanadoo.fr">viossat.pascal@wanadoo.fr</a></p>
</div>
<div class="Style25" id="apDiv8">Contact</div>
</body>
</html>
Bonjour,

Je n'avais pas pris la peine d'inspecter le code de la page.
Vu la manière dont les éléments sont positionnés, à savoir que chaque élément (chaque petit bloc) est positionné en absolu par rapport au coin haut gauche de la page, aucune technique de centrage horizontal n'est applicable. Le centrage horizontal est donc impossible à moins de refaire l'essentiel du code de la page, ce qui n'est je pense pas prévu ou souhaité.
Bonjour et merci de votre réponse,

Je commence à y voir plus clair et je n'ai rien contre un peu de retouche dans mon code, il vas falloir que je m'y mette!
Je peux recommencer en changeant les propriétés des css, sur cette copie écran on peut voir plusieurs options de réglages, laquelle est la + appropriée poumon problème : fixed,
, relative, static et inhérit ; faut il également en profité pour régler le width en pourcentage sur 100 au passage?


upload/36364-Capture-de.jpg
filsector a écrit :
laquelle est la + appropriée poumon problème : fixed,
, relative, static et inhérit ; faut il également en profité pour régler le width en pourcentage sur 100 au passage?

Ce qui serait approprié ce serait d'apprendre HTML et CSS, et de travailler le positionnement CSS. Mais c'est un investissement en temps conséquent, comme déjà dit.

Je déconseille de toucher à quoi que ce soit qui concerne le positionnement (et donc le centrage ou non-centrage) sur le site existant.
Bien, je viens de parcourir vos excellents tutoriaux, il me semble sage en effet d'en rester là pour le moment... ou bien de demander à ADOBE un petit correctif sur dreamweaver : copier le modeste "Frontpage" en incluant une fonction "Centrer" sur les propriétés de page!

Je vous remercie pour vos réponses et vos précieuses indications,
bonne journée,
Pascal Viossat