[RÉGLÉ] Comment partir sur de bonnes bases par rapport à mon design ?

[Zubral]

Bonjour à tous,

Ceci est mon premier message, donc merci de m'indiquer s'il n'est pas bien classé et/ou quelles sont les infos habituellement utiles sur ce forum.

Je travaille sous Joomla 2.5. Après avoir défini une trame graphique, je souhaite l'intégrer dans un nouveau template créé à la main sous Joomla.

La trame graphique : (grosso modo, notez que le coin supérieur gauche du contenu principal est au-dessus du coin inférieur droit du logo)

Notes :
Je souhaite avoir le site centré, largeur fixe. Le logo doit être cliquable pour un retour à l'accueil. Menu haut horizontal, menu gauche également et le bouton achat indépendant (du coup, j'imagine qu'il faut le mettre dans un nouveau menu, sinon ça va être chaud à gérer niveau css, enfin...)

Au niveau du CSS, j'ai plusieurs questions :
1 - Utilise-t-on un cadre extérieur (tel que celui indiqué en bleu) ?
2 - Bouton achat dans un div différent de celui de menu gauche ?
3 - Comment positionner mes div ? Je m'explique (et cela dépend un peu de la réponse à la question 1)
3 -- Tous les div en position:absolute ? Ou bien float avec décalage ?

Et puis, j'ai également une autre question. Comment se gère la mise en forme du "contenu principal" ?
Dans le index.php, j'ai cru bon de mettre ce code pour le "contenu principal" :

  <div id="centre">
 	<div id="contenu">
  		<jdoc:include type="component" style="xhtml" />
  	</div>
  </div>

De le relier ensuite avec

<position>contenu</position>

dans le fichier .xml et enfin de gérer la mise en forme avec une balise #contenu dans le .css, mais rien à faire, le texte n'est pas formatté.

Voilà, j'espère avoir été assez clair. Je répondrai demain matin, car il se fait tard maintenant.

Bonne soirée à tous, merci d'avance pour vos réponses.

[Soundboy39]

Re : Comment partir sur de bonnes bases par rapport à mon design ?

Hello,

Apparemment ton fichier joint n'est pas valide

Pour répondre à quelques une de tes questions :

3 - Comment positionner mes div ? Je m'explique (et cela dépend un peu de la réponse à la question 1)
3 -- Tous les div en position:absolute ? Ou bien float avec décalage ?

Pour moi la meilleur façon de faire pour le positionnement des éléments et l'utilisation des marges (margin, padding) et l'utilisation des float (left, right), la valeur "position : absolute" fixe un élément de manière statique, donc ce n'est pas adapté au site dynamique.

Pour l'ajout de la vue du composant normalement tu n'a rien d'autre à faire que de coller "<jdoc:include type="component" style="xhtml" />" dans ton template, les <position> du fichier XML concernent uniquement les postions de module.

[SimonG]

Re : Comment partir sur de bonnes bases par rapport à mon design ?

Bonjour et bienvenue,

Ceci est mon premier message, donc merci de m'indiquer s'il n'est pas bien classé et/ou quelles sont les infos habituellement utiles sur ce forum.

Ton message est dans le bon sous forum, pour les infos utiles, tu peux consulter la FAQ

Pour la création de template sous Joomla 2.5, tu peux consulter ce fil :

http://forum.joomla.fr/showthread.php?151190-Tutoriels-pour-la-création-de-template-Joomla%21-1-6-1-7-2-5

[Zubral]

Re : Comment partir sur de bonnes bases par rapport à mon design ?

Bonjour,

Merci SimonG pour le tuto, celui-ci me semble très bien fait (plus clair que ceux que j'avais pu récupérer jusqu'alors), je suis en train de le suivre à l'heure actuelle.

Soundboy39, mon site a une largeur fixe, et centrée, du coup, ma première question serait surtout de savoir si on doit utiliser un cadre qui englobe tous les autres, ou bien si l'on fixe les éléments les uns par rapport aux autres (et entre autre, par rapport au logo en haut à gauche). Qu'est-ce qui se fait au niveau bonnes pratiques ?
Le tuto de SimonG a l'air d'aborder ce problème, donc j'aurai sûrement ma réponse quand je l'aurai fini.

Et sinon, la trame graphique de mon site (vu que la première image n'a apparemment pas été bien envoyée) :


A bientôt.

[Zubral]

Re : Comment partir sur de bonnes bases par rapport à mon design ?

Bonjour,

J'ai un problème pour positionner mon Menu Haut et mon Contenu (cf. trame graphique).

Voici un aperçu de mon index.php

	<div id="wrapper">	
		<div id="gauche">
			<div id="gauche-logo">
				<a href="index.php"></a>
		  	</div>
		  	
		  	<div class="clr"></div>
		  	
		  	<div id="gauche-menu">
		  		<jdoc:include type="modules" name="gauche-menu" style="xhtml" />
		  	</div>
		  	<div id="gauche-vente">
				<jdoc:include type="modules" name="gauche-vente" style="xhtml" />
			</div>
		</div>
		
		<div class="clr"></div>
		
		<div id="droite">
			<div id="header">
  				<div id="header-menu">
  					<jdoc:include type="modules" name="header-menu" style="xhtml" />
  				</div>
  			</div>

			<div id="centre">
		  		<div id="contenu">
		  			<jdoc:include type="component" style="xhtml" />
		  		</div>
			</div>

		  	<div id="footer">
		  		<div id="mentions-legales">
		  			<jdoc:include type="modules" name="mentions-legales" style="xhtml" />
		  		</div>
			</div>
		</div>
	  			
		<div class="clr"></div>
	</div>

	<jdoc:include type="modules" name="debug" />

J'ai un Div pour la partie de gauche, et un Div pour la partie de droite. Mon problème à l'heure actuelle est que le bloc "header-menu" apparaît en dessous de "gauche-vente" et "gauche-menu".
Quel positionnement CSS dois-je lui indiquer ? (en gros, comment faire pour positionner le bloc "droite" en haut à droite du bloc "gauche" ?)

D'avance merci et bonne journée.

[Zubral]

Re : Comment partir sur de bonnes bases par rapport à mon design ?

Je viens de trouver la réponse à mon problème ("comment positionner le blog "droite" en haut à gauche du bloc "gauche" ?").

J'avais laissé trainer un <div class="clr"></div> entre les deux div "gauche" et "droite", du coup "droite" se mettait en dessous de "gauche".

Sujet clôt. J'avance, j'avance.