Dreamweaver:Probleme de page WEB non centrer
hajduk
Messages postés
18
Statut
Membre
-
olibouc Messages postés 8 Statut Membre -
olibouc Messages postés 8 Statut Membre -
Bonjour à tous!
Voila, j'ai un site WEB à moi que j'ai faite avec le logiciel DREAMWEAVER MX 2004.
le site se trouve ici: http://hajduk.free.fr/
Voila, j'ai un probleme, il n'est pas centrer du tout.
Jje ne sais meme pas le faire pour que ca soit bien centrer, quelque soit le PC.Or je l'ai fait avec mon PC et mon ecran, il est centrer chez moi....
Regarder ici: http://hajduk.free.fr/Naslo.html
ou bien ici :
http://hajduk.free.fr/Galerija.html
Voila, ce sont ces deux sites que j'aimerai les centrer comme il faut...
Est ce qu'il y a quelqu'un qui peut m'expliquer ou rectifier a ma place?
Merci à l'avance
Voila, j'ai un site WEB à moi que j'ai faite avec le logiciel DREAMWEAVER MX 2004.
le site se trouve ici: http://hajduk.free.fr/
Voila, j'ai un probleme, il n'est pas centrer du tout.
Jje ne sais meme pas le faire pour que ca soit bien centrer, quelque soit le PC.Or je l'ai fait avec mon PC et mon ecran, il est centrer chez moi....
Regarder ici: http://hajduk.free.fr/Naslo.html
ou bien ici :
http://hajduk.free.fr/Galerija.html
Voila, ce sont ces deux sites que j'aimerai les centrer comme il faut...
Est ce qu'il y a quelqu'un qui peut m'expliquer ou rectifier a ma place?
Merci à l'avance
A voir également:
- Dreamweaver:Probleme de page WEB non centrer
- Dreamweaver - Forum Gestion et lecture audio
- Telecharger dreamweaver ✓ - Forum Webmastering
- Ou telecharger gratuitement dreamweaver ? - Forum Logiciels
- Dreamweaver pdf - Forum Webmastering
- Dreamweaver linux - Forum Ubuntu
10 réponses
Salut.
Dans les deux cas, je pense que ceci conviendra :
webmaster adapter un site a toutes les resolutions le centrer
Tu devras peut-être revoir ton menu à la baisse pour qu'il prenne moins de place.
Dans les deux cas, je pense que ceci conviendra :
webmaster adapter un site a toutes les resolutions le centrer
Tu devras peut-être revoir ton menu à la baisse pour qu'il prenne moins de place.
Oh merci à toi pour quelque explication.
Donc le probleme est des le debut.
body{width:100%;}
Je suis aller voir quel effet ca fait....
Mais je ne connais rien a ca.
Est ce que tu sais faire quelque chose aec dreamweaver?
Tu peux le faire a ma place ou pas?
mets le sur un FTP pour que je puisse ensuite le telecharger et le voir.
Merci à toi.
Donc le probleme est des le debut.
body{width:100%;}
Je suis aller voir quel effet ca fait....
Mais je ne connais rien a ca.
Est ce que tu sais faire quelque chose aec dreamweaver?
Tu peux le faire a ma place ou pas?
mets le sur un FTP pour que je puisse ensuite le telecharger et le voir.
Merci à toi.
Vive les CSS ils nous facilites la vie, adopte cette solution c'est le meilleur conseil que tu puisse recevoir, quand a demander que quelqu'un fasse ton taff la c'est limite quand même...comment feras tu lorsque tu sera seul ???
Je sais que cela demande du temps l'apprentissage mais quand on aime on ne compte pas c'est bien connu, lolll
Je sais que cela demande du temps l'apprentissage mais quand on aime on ne compte pas c'est bien connu, lolll
J'ai la manière la plus simple au monde...
Tu fais CTRL A, ensuite tu peux faire soit EDIT TAG pis tu fais center ou sinon toujours en CTRL A, tu vas dans aling et puis CENTER... et ça marche... après m'avoir cassée la tête pendant des heures... c'était très simple et ça fonctionne...
Bonne chance
Tu fais CTRL A, ensuite tu peux faire soit EDIT TAG pis tu fais center ou sinon toujours en CTRL A, tu vas dans aling et puis CENTER... et ça marche... après m'avoir cassée la tête pendant des heures... c'était très simple et ça fonctionne...
Bonne chance
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Le mieux pour centrer ta page, c'est de créer une div "global" (qui englobe toutes tes div) puis de créer une div "fond" (qui sera le fond d'écran de ton site) :
- dans la page html ça donne ça par exemple :
<body>
<div id="global">
<div id="fond">
/tous tes éléments/
</div>
</div>
</body>
-
body
{
background-color: #949494;
font-family: Georgia, "Times New Roman", Times, serif;
}
#global
{
width: 1024px;
margin-right:auto;
margin-left:auto;
}
#fond
{
background-image: url(images/accueil/fondaccueil.jpg);
background-repeat: no-repeat;
height: 764px;
width: 1024px;
position: absolute;
top: 0px;
}
- dans la page html ça donne ça par exemple :
<body>
<div id="global">
<div id="fond">
/tous tes éléments/
</div>
</div>
</body>
-
dans la feuille css:
body
{
background-color: #949494;
font-family: Georgia, "Times New Roman", Times, serif;
}
#global
{
width: 1024px;
margin-right:auto;
margin-left:auto;
}
#fond
{
background-image: url(images/accueil/fondaccueil.jpg);
background-repeat: no-repeat;
height: 764px;
width: 1024px;
position: absolute;
top: 0px;
}
Quelque un saurait-il dire pourquoi mon site ne se centre pas. Voici le fichier modèle .dwt :
<!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">
<wrapper><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
#nav {
}
#nav a:link {
color: #000;
font-family: Arial, Helvetica, sans-serif;
display: block;
float: left;
height: 20px;
width: 152px;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
background-color: #000;
}
#nav ul {
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
}
#nav li {
display: inline;
list-style-type: none;
}
#wrapper {
width: 760px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 760px;
text-align: center;
}
#center {
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
}
</style>
</head>
<body>
<div id="center">
<div id="wrapper"><img src="../images/obg communication graphisme.jpg" width="760" height="200" />
<div id="nav">
<ul>
<li id="bt-accueil">
<a href="index.html">Accueil </a></li>
<li id="bt-print"> <a href="print.html">Print </a></li>
<li id="bt-signaletique"> <a href="signaletique.html">Signalétique </a></li>
<li id="bt-multimedia"> <a href="multimedia.html">Multimédia </a></li>
<li id="bt-contact"> <a href="mel.php">Contact </a></li>
</ul>
<div>
<!--TemplateBeginEditable name="EditRegion3" -->
<pre>EditRegion3</pre>
<!-- TemplateEndEditable --></div>
</div>
</div>
</div>
</body>
</html>
<!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">
<wrapper><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css">
#nav {
}
#nav a:link {
color: #000;
font-family: Arial, Helvetica, sans-serif;
display: block;
float: left;
height: 20px;
width: 152px;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
background-color: #000;
}
#nav ul {
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
}
#nav li {
display: inline;
list-style-type: none;
}
#wrapper {
width: 760px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 760px;
text-align: center;
}
#center {
width: 760px;
margin-right: auto;
margin-left: auto;
position: relative;
}
</style>
</head>
<body>
<div id="center">
<div id="wrapper"><img src="../images/obg communication graphisme.jpg" width="760" height="200" />
<div id="nav">
<ul>
<li id="bt-accueil">
<a href="index.html">Accueil </a></li>
<li id="bt-print"> <a href="print.html">Print </a></li>
<li id="bt-signaletique"> <a href="signaletique.html">Signalétique </a></li>
<li id="bt-multimedia"> <a href="multimedia.html">Multimédia </a></li>
<li id="bt-contact"> <a href="mel.php">Contact </a></li>
</ul>
<div>
<!--TemplateBeginEditable name="EditRegion3" -->
<pre>EditRegion3</pre>
<!-- TemplateEndEditable --></div>
</div>
</div>
</div>
</body>
</html>
Salut
Très sérieusement tu t'y est très mal pris pour faire ton site et c'est normal quand on utilise DW en mode création wysiwyg
en fait il faut séparer le contenu (html) et le style (css)
et surtout ne jamais utiliser les fonctions de DW pour changer les couleurs, polices, tailles etc .... ou pour ajouter des cadres (layer)
Le style se fait dans une feuille de style séparée de la page html et la feuille de style css est chargée grâce la balise link. Les layer (div) doivent se faire en mode code avec une ID ou class bien structurée
http://www.w3.org/Style/Examples/011/firstcss.fr.html#externe
Le jour ou tu voudra modifier une couleur, une taille, etc au lieux de te perdre dans un foutoir de css intégré et d'id layer, ce pour chaque page de ton site tu n'auras qu'a modifier deux outrois ligne dans le css et la modification s'appliquera à tout le site de plus tu devrais aussi faire tes pages en .php et intégrer tout ce qui est commun a tout le site (menu, footer etc ...) avec php include.
https://www.alsacreations.com/actu/lire/254-le-point-sur-la-fonction-include-php.html
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.
Très sérieusement tu t'y est très mal pris pour faire ton site et c'est normal quand on utilise DW en mode création wysiwyg
en fait il faut séparer le contenu (html) et le style (css)
et surtout ne jamais utiliser les fonctions de DW pour changer les couleurs, polices, tailles etc .... ou pour ajouter des cadres (layer)
Le style se fait dans une feuille de style séparée de la page html et la feuille de style css est chargée grâce la balise link. Les layer (div) doivent se faire en mode code avec une ID ou class bien structurée
http://www.w3.org/Style/Examples/011/firstcss.fr.html#externe
Le jour ou tu voudra modifier une couleur, une taille, etc au lieux de te perdre dans un foutoir de css intégré et d'id layer, ce pour chaque page de ton site tu n'auras qu'a modifier deux outrois ligne dans le css et la modification s'appliquera à tout le site de plus tu devrais aussi faire tes pages en .php et intégrer tout ce qui est commun a tout le site (menu, footer etc ...) avec php include.
https://www.alsacreations.com/actu/lire/254-le-point-sur-la-fonction-include-php.html
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.
Merci de ta réponse animostab. Effectivement j'ai zappé la création du fichier css.
J'ai fait des modifs mais mon site est toujours excentré. Ca donne ça:
<!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">
<wrapper><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css"></style>
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="center">
<div id="wrapper"><h1>obg graphisme nantes </h1>
<img src="../images/obg communication graphisme.jpg" width="760" height="200" />
<div id="nav">
<ul>
<li id="bt-accueil">
<a href="../index.html">Accueil </a></li>
<li id="bt-print"> <a href="../print.html">Print </a></li>
<li id="bt-signaletique"> <a href="../signaletique.html">Signalétique </a></li>
<li id="bt-multimedia"> <a href="../multimedia.html">Multimédia </a></li>
<li id="bt-contact"> <a href="../mel.php">Contact </a></li>
</ul>
<div>
<!--TemplateBeginEditable name="EditRegion3" -->
<pre>EditRegion3</pre>
<!-- TemplateEndEditable --></div>
</div>
</div>
</div>
</body>
</html>
Fichier .css:
@charset "utf-8";
#nav li {
display: inline;
list-style-type: none;
}
#nav {
}
#nav a:link {
color: #000;
font-family: Arial, Helvetica, sans-serif;
display: block;
float: left;
height: 20px;
width: 152px;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
background-color: #000;
}
#nav ul {
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
}
#wrapper {
width: 760px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 760px;
text-align: justify;
}
h1 {
height: 200px;
width: 760px;
display: none;/*pour avoir txt en referencement sans le voir*/
}
h2 {
font-size: 24px;
}
#center {
width: 760px;
margin-right: auto;
margin-left: auto;
}
J'ai fait des modifs mais mon site est toujours excentré. Ca donne ça:
<!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">
<wrapper><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css"></style>
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="center">
<div id="wrapper"><h1>obg graphisme nantes </h1>
<img src="../images/obg communication graphisme.jpg" width="760" height="200" />
<div id="nav">
<ul>
<li id="bt-accueil">
<a href="../index.html">Accueil </a></li>
<li id="bt-print"> <a href="../print.html">Print </a></li>
<li id="bt-signaletique"> <a href="../signaletique.html">Signalétique </a></li>
<li id="bt-multimedia"> <a href="../multimedia.html">Multimédia </a></li>
<li id="bt-contact"> <a href="../mel.php">Contact </a></li>
</ul>
<div>
<!--TemplateBeginEditable name="EditRegion3" -->
<pre>EditRegion3</pre>
<!-- TemplateEndEditable --></div>
</div>
</div>
</div>
</body>
</html>
Fichier .css:
@charset "utf-8";
#nav li {
display: inline;
list-style-type: none;
}
#nav {
}
#nav a:link {
color: #000;
font-family: Arial, Helvetica, sans-serif;
display: block;
float: left;
height: 20px;
width: 152px;
text-align: center;
text-decoration: none;
}
#nav a:hover {
color: #FFF;
background-color: #000;
}
#nav ul {
margin: 0px;
padding: 0px;
height: 20px;
width: 760px;
}
#wrapper {
width: 760px;
}
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 760px;
text-align: justify;
}
h1 {
height: 200px;
width: 760px;
display: none;/*pour avoir txt en referencement sans le voir*/
}
h2 {
font-size: 24px;
}
#center {
width: 760px;
margin-right: auto;
margin-left: auto;
}
J'ai trouvé une solution en mettant le body à 100% comme suit:
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 100%;
text-align: justify;
}
mais je pense qu'un problème persiste.
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
width: 100%;
text-align: justify;
}
mais je pense qu'un problème persiste.
C'est normal, en utilisant "width:100%", la page prend toute la place.
Est-ce que tu as bien lu ca :
""
Avec ce code la page prendra 100% de la fenêtre, quelle que soit sa taille.
On peut évidemment définir la largeur que l'on veut (90%, 80%, etc.)
Si l'on définit une plus petite largeur, on peut centrer avec "margin:auto".
""
Mais dreamweaver utilise des "position:absolute;", ce qui rend invalide ma solutuion...
Il faut que tu enlèves ces positions inutiles dans l'attribut "style" de chaque div.
Ensuite, tu pourra centrer le corps.
Est-ce que tu as bien lu ca :
""
Avec ce code la page prendra 100% de la fenêtre, quelle que soit sa taille.
On peut évidemment définir la largeur que l'on veut (90%, 80%, etc.)
Si l'on définit une plus petite largeur, on peut centrer avec "margin:auto".
""
Mais dreamweaver utilise des "position:absolute;", ce qui rend invalide ma solutuion...
Il faut que tu enlèves ces positions inutiles dans l'attribut "style" de chaque div.
Ensuite, tu pourra centrer le corps.
tiens par exemple:
<style type="text/css">
<!--
body {
background-color: #6ca6cd;
}
.Style2 {
color: #F0B500;
font-weight: bold;
font-size: 18px;
}
.navcell {font-size: 15px}
.Style16 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
}
.Style3 {color: #4A79D6; font-weight: bold; }
.navbar {color: #333}
.Style18 {font-size: 14px}
.Style20 {
color: #FFFFFF;
font-weight: bold;
}
.Style22 {font-size: 13px}
.Style23 {font-size: 12px}
.Style27 {color: #FFFFFF}
.Style29 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.Style30 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Style31 {font-size: 15px; font-weight: bold; }
-->
</style>
Je fais quoi ici?
<style type="text/css">
<!--
body {
background-color: #6ca6cd;
}
.Style2 {
color: #F0B500;
font-weight: bold;
font-size: 18px;
}
.navcell {font-size: 15px}
.Style16 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
}
.Style3 {color: #4A79D6; font-weight: bold; }
.navbar {color: #333}
.Style18 {font-size: 14px}
.Style20 {
color: #FFFFFF;
font-weight: bold;
}
.Style22 {font-size: 13px}
.Style23 {font-size: 12px}
.Style27 {color: #FFFFFF}
.Style29 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
.Style30 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.Style31 {font-size: 15px; font-weight: bold; }
-->
</style>
Je fais quoi ici?
