5568 sujets

Sémantique web et HTML

Probléme de mise en page avec CSS

Bonjour à tous,

Je suis un petit newbie dans le domaine du XHTML et du CSS et je me suis lancé dans cela hier une fois mon design fait sous photoshop.

Voici le design général du site :
upload/8075-DesignArkil.jpg

Pour infos chaque block est découpé en 3 images :

- le haut du block
- le contenu du block (sur 2 px de hauteur pour le rendre extensible)
- le bas du block

Donc comme vous pourrez le constater j'ai deux problémes, le premier, un espéce de menu c'est recréer entre mais 2 blocs (celui qui representera le menu et le plus gros le contenu principal du site.
Je ne m'éxplique pas ce phénoméne ?????

Le 2iéme probléme vien du fait que le Menu de gauche s'agrandit en même temps que le gros bloc de contenu (lorsque je saisi du texte), j'aimerai savoir si il existe une solution pour le bloquer ? ou lui donner une taille maximale ?

Voici le code HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Titre</title>
<link rel="stylesheet" href="./styleold.css" type="text/css" />
</head> 
<body>
<!-- Ici commence le bloc du header -->
<div id="headertop">&nbsp;</div>
<div id="headermidle">&nbsp;</div>
<!-- Ici commence le bloc menu du header -->
<div>
  <div class="headermenu"></div>
  <div class="headermenu1"><a class="headermenu1" href="lien.htm">Menu1</a></div>
  <div class="headermenu2"><a class="headermenu2" href="lien.htm">Menu2</a></div>
  <div class="headermenu3"><a class="headermenu3" href="lien.htm">Menu3</a></div>
  <div class="headermenu4"><a class="headermenu4" href="lien.htm">Menu4</a></div>
  <div class="headermenu5"><a class="headermenu5" href="lien.htm">Menu5</a></div>
  <div class="headermenu6"><a class="headermenu6" href="lien.htm">Menu6</a></div>
</div>
<br />
<!-- Ici fini le bloc menu du header -->
<!-- Ici fini le bloc du header -->
<!-- Ici commence le bloc Sous menu 1 -->
<div class="menu1top"><div class="contenutop"></div></div>
<div class="menu1contenu"><div class="contenucontenu"><br />jkdbsqbdkjbsq<br />eyg ezfguyg ze<br />hsdshqdhsq<br />sgdsqudsuiq<br />ushdsdh<br />qshdygysgd</div></div>
<div class="menu1foot"><div class="contenufoot"></div></div>
<!-- Ici Fini le bloc Sous menu 1 -->
<br />
<!-- Ici commence le bloc Sous menu 2 -->
<div class="menu1top"></div>
<div class="menu1contenu"></div>
<div class="menu1foot"></div>
<!-- Ici Fini le bloc Sous menu 2 -->
<br />
<div class="footer"></div>


</body>
</html>


Et voici le CSS

/* CSS Document */
body
{
   width: 924px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 10px;
}
/* HEADER */
div#headertop {
  background-image: url(images/InterfaceV2Fini_03.jpg);
  background-repeat: no-repeat;
  width: 924px;
  height: 20px;
  padding: 0;
}
div#headermidle {
  background-image: url(images/InterfaceV2Fini_05.jpg);
  background-repeat: no-repeat;
  width: 924px;
  height: 153px;
  padding: 0;
}
.headermenu {
  background-image: url(images/InterfaceV2Fini_06.jpg);
  float: left;
  width: 285px;
  height: 24px;
}  

.headermenu1 {
  background-image: url(images/InterfaceV2Fini_07.jpg);
  float: left;
  width: 102px;
  height: 24px;
  text-align: center;
}

/* MENU */
.menu1top{
  background-image: url(images/InterfaceV2Fini_14.jpg);
  background-repeat: no-repeat;
  width: 184px;
  height: 42px;
}
.menu1foot{
  background-image: url(images/InterfaceV2Fini_23.jpg);
  background-repeat: no-repeat;
  width: 184px;
  height:32px;
  clear:left;
}
.menu1contenu{
  background-image: url(images/InterfaceV2Fini_18.jpg);
  width: 184px;
  height: 2px;
  text-align: center;
}
/* CONTENU */
.contenutop{
  background-image: url(images/InterfaceV2Fini_16.jpg);
  background-repeat: no-repeat;
  width: 733px;
  height: 41px;
  margin-left: 190px;
}
.contenucontenu{
  background-image: url(images/InterfaceV2Fini_21.jpg);
  width: 733px;
  height: 1px;
  text-align: center;
  margin-left:190px;
}
.contenufoot{
  background-image: url(images/InterfaceV2Fini_30.jpg);
  background-repeat: no-repeat;
  width: 733px;
  height: 32px;
  text-align: center;
  margin-left: 190px;
}
.footer{
  background-image: url(images/InterfaceV2Fini_33.jpg);
  background-repeat: no-repeat;
  width: 924px;
  height: 26px;
  padding: 0;
}

J'ai enlevé une bonne partie du CSS concernant le Header.

Merci par avance pour l'aide que vous pourrez m'apporter.
Modifié par arkilon (17 Aug 2006 - 20:51)
Bonjour arkilon et bienvenue sur Alsacréations Smiley smile ,

Le plus simple serait de fournir aux membres du forum un exemple en ligne, tu augmenterais grandement tes chances de réponse positives, ainsi qu'en trouvant un titre plus explicite pour ton sujet.

Personnellement je ne comprend pas ce que tu veux dire Smiley biggol :
a écrit :
un espéce de menu c'est recréer entre mais 2 blocs (celui qui representera le menu et le plus gros le contenu principal du site.
Merci pour ta réponse bon pour l'explication c'était pas trés clair en effet.

Alors j'ai mis une screen de l'écran tel qu'il l'est sous IE.

Mon design ce découpe en quatre partie :

1)Le Header, j 'ai pas eu de probléme avec lui.
2)Les menus toutes à gauche de la photo, chaque menu est découpé en 3 images, 1 representant le haut du menu, 1 representant le contenu (c'est ici que j'insére mon texte) et la derniere qui représente le "pied" du menu.
3)Le gros bloc de contenu établit sur le même principe que les menus de gauche soit en 3 Images.
4) Le footer, pas de problème avec lui.

Mon problème ce situe au niveau de la 2iéme et 3 iéme partie et plus précisement entre le menu en haut à gauche et le gros bloc de contenu, si on regarde bien l'image entre les 2 blocs (dans le sens horizontal) j'ai un espéce de bout de menu qui c crée?

Et pour le 2iéme problème juste le fait que le menu haut gauche s'étend en hauteur en même temps que le bloc contenu, et j'aimerai trouver une solution qui me le bloc en gros qu'il ne grandisse pas comme le bloc contenu.

Pour la mise en ligne désolé mais je ne le peux pour le moment.

En esperant avoir était clair Smiley smile
Modifié par arkilon (17 Aug 2006 - 20:53)
Voila le design est en ligne je viens de l'héberger vite fait Smiley smile

Site ARkiV2

Je vous conseil de le regarder sous IE et Firefox, sous Firefox c'est encore pire.

Merci d'avance.
Modifié par arkilon (17 Aug 2006 - 21:30)
Voila j'ai rajouté un peu de texte c'est encore plus explicite Smiley smile

Désolé je vien de m'apercevoir qu'une section CSS et mise en forme existé, je viens de recréer mon sujet vraiment désolé pour les modos. Milles excuses.
Modifié par arkilon (17 Aug 2006 - 23:00)
Sujet clos
Aller à