18041 sujets

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

[Résolu] Aide (X)HTML et CSS

Bonjour Smiley smile

J'ai besoin d'aide dans la conception du design de mon site. J'ai un petit problème avec mes menus et le contenu de mon site. Mon menu et mon bloc contenu ne colle par au header, hors c'est ce que je voudrais. Le fond, n'es pas centrer, hors j'ai mis "margin: auto;". Les couleurs sont les différents blocs avant de mettre les images. Je m'en sert pour savoir quoi superpose quoi. Merci d'avance pour aide Smiley cligne

Code (X)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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>World of Making :: Version 3</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design version 3" href="designv3.css" />
</head>
<body>
<!-- Le header -->
<div id="header"></div>
<!-- Fin du header -->
<!-- Le menu -->
<div id="menu">
  <div class="cadre_menu">
    <h3>Menu</h3>
    <ul>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
    </ul>
  </div>
  <div class="cadre_menu">
    <h3>Menu</h3>
    <ul>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
    </ul>
  </div>
</div>
<!-- Fin du menu -->
<!-- Le contenu -->
<div id="contenu">
  <div class="titre_news">
    <h1>Titre news</h1>
  </div>
  <div class="cadre_news">
    <p>Bonjour et bienvenue sur World of Making [cligne]</p>
  </div>
</div>
<!-- Fin du contenu -->
<!-- Le footer -->
<div id="footer"></div>
<!-- Fin du footer -->
</body>
</html>



Code CSS:

/*
Design V3 pour World of Making
Réalisé par Aelis
 http://www.worldofmaking.com
 
*/

body {
margin: auto;
margin-left: auto;
margin-right: auto;
width: 780px;
background-color: #ececec;
background-image: url("images/background.gif");
background-repeat: repeat-y;
}

#header {
width: 750px;
height: 250px;
background-color: #00FF66;
}

#menu {
float: left;
width: 150px;
}

.cadre_menu {
background-color: #FF0000;
}

.cadre_menu ul {
}

.cadre_menu a {
}

.cadre_menu a:hover {
}

#contenu {
background-color: #FFFF00;
width: 600px;
margin-left: 150px;
}

#footer {
background-color: #0000CC;
width: 750px;
height: 100px;
}


Pour voir le résultat, c'est ici: http://www.worldofmaking.com/v3/
Modifié par Aelis (31 Dec 2006 - 11:43)
Bonjour,

Il y aurait beaucoup de choses à dire, mais je ne vais réagir qu'à ce que tu demandes explicitement:

- pour ce qui est du centrage, c'est le raisonnement qui est faussé: des marges automatiques remplissent un maximum d'espace autour du bloc visé, ayant donc pour effet visuel de centrer celui-ci. Ce n'est donc pas sur le body qu'il faut intervenir, mais au niveau d'une division qui enveloppe ta mise en page. Concrètement:

#conteneur {width:780px; margin:0 auto; background:url(images/background.gif);}

- pour te faciliter la vie, et harmoniser les styles par défaut, je te conseille de remettre ces derniers à zéro, en tout cas au niveau des marges extérieures et intérieures. Généralement, on utilise le sélecteur universel:
* {margin:0; padding:0}
Merci, ca marche parfaitement à présent Smiley cligne

Par contre, il reste un problème pour le bloc menu et le bloc contenu qui ne se colle pas au header, ce qu'il devrait faire normalement Smiley ohwell

Pas la peine de remettre le code à chaque fois.

Par contre, tu me dit qu'il y a beaucoup à dire? Je veux bien t'écouter, j'aimerais que mon site soit parfaitement propre au niveau code pour respecter les normes et la sémantique.

Merci pour ton aide Smiley smile

PS: J'ai mis en ligne la mise à jour du code: http://www.worldofmaking.com/v3/
Modifié par Aelis (30 Dec 2006 - 17:00)
Bonjour,

Il faudrait revoir les fondamentaux ... par quelques tutoriels http://www.siteduzero.com/tuto-3-6-0-apprenez-a-creer-votre-site-web.html

sinon pour te donner une idée

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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" />
<title>TEST</title>
			
<style>

body {

background-color: #ececec;

}



#conteneur {

width: 780px;

margin: 0 auto;

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

background-repeat: repeat-y;
border: 1px solid black;
}

#conteneur p{
margin-left: 25px;
}

#conteneur h1{
margin-left: 125px;
}

#header {


width: 100%;

height: 250px;

background-color: #00FF66;

}

#cadre_menu {

background-color: #FF0000;
float: left;
width: 150px;
overflow: hidden;
border: 1px solid black;
}



.cadre_menu ul {

}



.cadre_menu a {

}



.cadre_menu a:hover {

}



#contenu {

margin-left: 150px;

background-color: #FFFF00;


}

.cadre_news {
margin: 0;
padding: 0;
width: 608px;
overflow: hidden;
}


#footer {
clear: both;
background-color: #0000CC;
height: 100px;

}
</style>

</head>


	<body>
<div id="conteneur">
<!-- Le header -->
<div id="header"></div>
<!-- Fin du header -->
<!-- Le menu -->
<div id="menu">
  <div id="cadre_menu">

    <h3>Menu</h3>
    <ul>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
    </ul>

    <h3>Menu</h3>
    <ul>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
      <li><a href="#">Lien</a></li>
    </ul>

  </div>
</div>
<!-- Fin du menu -->
<!-- Le contenu -->
<div id="contenu">
    

  <div class="cadre_news">
  	<h1>Titre news</h1>
    <p>Bonjour et bienvenue sur World of Making [cligne]</p>

  </div>
</div>
<!-- Fin du contenu -->
<!-- Le footer -->
<div id="footer"></div>
<!-- Fin du footer -->
</div>
	</body>
</html>
Me revoila Smiley smile

Non, désoler, j'ai encore une question Smiley smile

Donc mon design est finit pour le moment, j'ai essayer de l'adapter pour phpBB, ca marche bien pour Firefox, mais mal pour IE.

Si vous pouviez m'aider à trouver la source du problème, merci d'avance Smiley cligne

http://forums.worldofmaking.com/shadow/
Modifié par Aelis (31 Dec 2006 - 10:08)
Sujet clos
Aller à