28221 sujets

CSS et mise en forme, CSS3

Thème Xoops (CMS) XHTML + CSS...

Bonjour à tous !

voilà, je connais un peu le HTML mais je ne suis pas pro, je connais un peu les CSS, mais suis plutôt débutant, et je souhaiterai créer un thème pour le CMS Xoops, pour mon site http://www.SpeedAirMan.com (très moche et absolument incompatible avec les dernières normes du W3C...) afin qu'il soit + joli, + facile à modifier, + clair et compatible XHTML + CSS .

Les thèmes Xoops sont habituellement représentés sous cette forme : http://www.alsacreations.com/articles/modeles/g_d_haut_fixe.htm

J'aimerai un peu "casser" le système des 3 blocs (bloc gauche, bloc centre et bloc droite) pour réaliser un thème sans bloc droites ni gauche (ou plutôt, si, mais ceux ci seront au centre...)
Et donc je m'appui sur cet exemple ci : http://www.alsacreations.com/articles/modeles/contenu_haut_fixe.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">

  <title></title>
<style type="text/css">
/* CSS issu des tutoriels  www.alsacreations.com/articles  */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#centre {
background-color:#9999CC;
}
#pied {
height: 30px;
background-color: #99CC99;
}
p {margin: 0;}
#cotes {
position: relative;
width: 100%;
}
#gauche {
position: absolute;
left:0;
width: 375px;
}
#droite {
position: absolute;
right:0;
width: 375px;
}
</style>
  </head>
  <body>

<div id="conteneur">

	  <div id="header">
    header <a href="http://www.alsacreations.com/articles/modeles">(voir tous les mod&#269;les)</a> - <a href="http://www.alsacreations.com/articles/modeles/contenu_fixe.css">(voir
    la feuille de style CSS)</a>
    </div>

	  <div id="centre">
  	  <p>partie centrale</p>

  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>

  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>
  	  <p>partie avec du contenu occupant le reste de la largeur</p>

  	</div>
	  
	  <div id="gauche">
    <p>GAUCHE GAUCHE GAUCHE GAUCHE</p>
    <p>GAUCHE GAUCHE GAUCHE GAUCHE</p>
    <p>GAUCHE GAUCHE GAUCHE GAUCHE</p>
    <p>GAUCHE GAUCHE GAUCHE GAUCHE</p>
    </div>

    
	  <div id="droite">
    <p>DROITE DROITE DROITE DROITE</p>
    <p>DROITE DROITE DROITE DROITE</p>
    <p>DROITE DROITE DROITE DROITE</p>
    <p>DROITE DROITE DROITE DROITE</p>
    </div>
	  
	  <div id="pied">

    pied de page
    </div>
	  
	  
	  
</div>

  </body>
</html>


(dans mon exemple il n'y a pas le menu pour le moment...)

Mon site devra et sera découpé de la sorte : un header, un menu + quelques infos, le contenu, un bloc droite et gauche "centrés", un footer.
Comme vous pouvez le constaté dans le code que j'ai mis, il y'a un problème d'affichage... je n'obtiens pas ce que je souhaiterai avoir.
--> Les blocs droites et gauche sont sur le footer... (alors que je souhaiterai qu'ils soient avant... Smiley rolleyes )
Comment faire ?!

à préciser également :
- certaines balises (les < div >) ont un "id" pour le moment.
à savoir que sous Xoops, les blocs doivent pouvoir être répétés puisqu'ils seront recréés autant de fois qu'il y'aura de bloc. J'utiliserai donc probablement des "class" . Comment fait alors pour que ces "blocs" soient correctement repetés ?! (sans qu'ils soient mal replacés, l'un sur l'autre, ou pire, l'un à côtés de l'autre ?! (ils doivent s'afficher l'un au dessous de l'autre : bloc droite 2 sous le bloc droite 1 qui lui sera à la droite du bloc gauche 1...)
- j'aurai probablement d'autres questions à vous poser plus tard, j'espère que vous pourrez m'aider. On m'a indiqué votre site, j'y ai trouvé beaucoup d'infos interressantes, je me suis instruit, y ait appris beaucoup (et j'ai lu les recommandations avant de poster, j'ai donc lu tous les articles que vous avez indiqué)

Merci d'avance !
Modifié le 02 Feb 2005 - 17:29
Sujet clos
Aller à