18073 sujets

Questions générales et questions de débutants

Probleme de mise en forme

Déjà bonjours à tous, enfin vu l'heure ce serai plutot bonsoir Smiley smile
Alors je debute en XHTML et en CSS mais j'ai essayer de faire mon site sans avoir tout compris et j'ai plusieurs probleme avec l'affichage avec des navigateurs differents et j'aurai aimer avoir des conseil pour bien developpé mon site.
Après cela je voulais aussi dire que je trouve ceux site très intéressant mais pas assez abordable pour des débutants.
Donc d'abord voila le lien vers mon site
probleme: =>avec mozilla firefox : Le menu du milieux n'est pas centré mais imbrigué au milieu de gauche
=>Le texte de l'entête n'est pas sur l image
Général : => Il y a un espace entre le header et le menu header je ne comprend d'ou vient l'erreur bon apres je pense qu'il yen à d autre mais si je corrige celle là je pense que ce sera dejà mieux.i
euh par contre j'ai afficher tout le code donc si cela pose probleme je pourrai rééditer ce post enfin si cela est possible sur ce forum. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<title>Bienvenue sur le site</title>
</head>

<body background= "design-sitev1.png">
<div class="global">
<div class="header"><img src="images/design-sitev1_03.jpg" alt="banniere" width="800" height="90" class="img"/>
  <div class="menuheader">
    <div class="menutitre"> <a href="index.php">Accueil</a> <a href="Forum.html">Forum</a> <a href="taf.html">Taff</a> 
</div>
</div>
</div>
<div class="leftmenu">
<div class="lefttitre"> 
  <div class="titre">Menu
</div>
</div>
<div class="texte">
<a href="banniere.php">Bannieres</a>
</div>
</div>
<div class="rightmenu">
  <div class="righttitre">
  <div class="titre">Partenaires
  </div>
  </div>
  <div class="texte">
 </div>
 </div>
<div class="midmenu">
  <div class="midtitre">
    <div class="titre">
	News
</div>
</div>
<div class="textemid">
<p>Bonjour à tous, voilà mon site perso est enfin ouvert, bon pour l'instant il n'y a pas grand chose mais je débute.
Malgré cela je suis très motivé et mon site s'améliorera en design et en contenu assez rapidement.</p>
  </div>
</div>
<div class="finmenu">Webmaster:<font color="#CC0000"> LABvin13</font><br/>
 © 2004 Tous droit réservés
</div>
</div>

</body>
</html


Et voila mon document CSS



            /* Style general de la page */
body {
text-align: center;
font-family:  Times, Arial, Verdana, serif;
font-size: 0.9em;
margin: 0;
}
              /* Style glabale qui centre la page */
			  
.global {
width: 800px;
height: auto;
margin-right:auto;
margin-left:auto;
text-align:center;
padding-top: 10px;
padding-bottom: 10px;
}

           /* Style des blocs */

.img {
width: 800px;
}

.header {
width: 800px;
border: 1px solid #000000;
}

.menuheader {
background-image: url("images/design-sitev1_06.gif");
width: 800px;
height: 20px;
border-top: 1px solid #000000;
padding: 0px;
}

.leftmenu {
background-image: url("images/design-sitev1_16.gif");
border: 1px solid #000000;
margin-top: 10px;
width:140px;
height: 400px;
float: left;
}

.lefttitre{
border-bottom: 1px solid #000000;
background-image: url("images/design-sitev1_08.gif");
height: 15px
}

.rightmenu {
background-image: url("images/design-sitev1_19.gif");
border: 1px solid #000000;
margin-top: 10px;
width:140px;
height:400px;
float: right;
}

.righttitre{
border-bottom: 1px solid #000000;
background-image: url("images/design-sitev1_12.gif");
height: 15px
}

.midmenu {
background-image: url("images/design-sitev1_18.gif");
border: 1px solid #000000;
margin-top: 10px;
width: 480px;
height: 400px; 
}

.midtitre {
border-bottom: 1px solid #000000;
background-image: url("images/design-sitev1_10.gif");
height: 15px
}

.finmenu {
background-image:url("images/design-sitev1_20.gif");
width: 800px;
height: 20px;
margin-top: 15px;
border: 1px solid #000000;
}


    /* Style du textes */
	
.titre {
text-align: left;
font-weight: bold;
margin-left: 10px;
margin-top: 0px;
}

.texte {
text-align: left;
text-indent: 30px;
height:400px;
overflow:auto;
padding-left:10px;
padding-right:10px;
} 

.textemid {
text-align: justify;
text-indent: 30px;
height:400px;
overflow:auto;
padding-left:10px;
padding-right:10px;
} 

a {
color: #000000;
text-decoration: none;
}

a:hover {
color: #003399;
}
 
p {
text-align: left;
text-indent: 30px;
overflow:auto;
padding-left:10px;
padding-right:10px;
}


voilà donc merci pour toute aide Smiley cligne
Modifié par LABvin13 (07 Dec 2005 - 19:03)
Bonsoir,

Il semblerait que tu sois atteint de Divite chronique et classite aigüe

Je suis un amateur mais je peux essayer de t'aider un peu, et j'aimerai que quelqu'un me corrige afin que je puisse voir mes fautes.

Dans ta page HTML :
<body background= "design-sitev1.png">


Tu peux mettre ton background dans ta feuille de style.

body {
text-align: center;
font-family:  Times, Arial, Verdana, serif;
font-size: 0.9em;
margin: 0;
[b]background : url('design-sitev1.png');[/b]
}


Tu devrais séparer les liens de ton menu horizontal par des caractères tel que | ou - ou encore /

Nettoyer tous les <div> inutiles (et il y en a).
Utiliser des <hn> pour les titres tel que Accueil, News, Partenaires.

En regardant ta page (pas le code) j'utiliserai 5 <div> :
- un conteneur pour la bannière
- un conteneur pour le menu horizontal, un div avec tes liens
- un conteneur pour le menu de gauche
- un conteneur pour le bloc central
- un conteneur pour le bloc de droite

Pour ta feuille de style, il faut l'adapter en conséquence de ce que je n'énumère ci-dessus.

Par exemple pour tes titres, au lieu de :

.lefttitre{

border-bottom: 1px solid #000000;

background-image: url("images/design-sitev1_08.gif");

height: 15px

}

.midtitre {

border-bottom: 1px solid #000000;

background-image: url("images/design-sitev1_10.gif");

height: 15px

}

.righttitre{

border-bottom: 1px solid #000000;

background-image: url("images/design-sitev1_12.gif");

height: 15px

}


Vu que tes titres ont la même mise en forme, alors :

h1 {

border-bottom: 1px solid #000000;

background-image: url("images/design-sitev1_12.gif");

height: 15px

}


Et pour ta page HTML

<div id="menugauche">
<h1>Accueil</h1>
<ul>
<li>Menu1</li>
<li>Menu2</li>
</ul>
</div>

<div id="contenu">
<h1>News</h1>
<p>Tes news</p>
</div>

<div id="menudroite">
<h1>Partenaires</h1>
<ul>
<li>Partenaire1</li>
<li>Partenaire2</li>
</ul>
</div>


Pour la mise en forme, l'héritage de style en CSS allégera ton code. Tu n'as pas besoin de mettre des attributs class à tout tes éléments.

J'espère que ça t'aide un peu Smiley smile
Modifié le 12 Nov 2004 - 03:19
Edit : Oups j'ai fais une citation alors que je voulais éditer mon message précédent, désolé.
Modifié le 12 Nov 2004 - 03:19
Merci bien pour ce début de réponse je vais me mettre a tester vos solutions et aprofondir ma lecture sur le Xhtml et les feuilles de styles, sinon c'est vrai que j'ai beaucoup de div et de class Smiley smile donc je vais essayer d'arranger cela
ais je pense aussi remettre en cause mon design qui pourrai me poser un probleme d'ergonomie plus tard.
Un tag [Résolu] serait bienvenu dans ton sujet si ton problème est réglé.
Modifié le 22 Nov 2004 - 06:40
Smiley biggrin oui , mon probleme est presque résolu , euh j'ai été trè occupé en ce moment mais je posterais un message des que je serais de neauveau bloqué.
Sujet clos
Aller à