18073 sujets

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

Que me conseillez-vous?

wéooo...wéaaa...

voila je bosse bien plus souvent en InDesign qu'en html, mais un ami m'a demandé de réaliser son site en html, je me suis rendu à cette page:
Modèles de mise en page en CSS, mais j'hésite sur le template à utiliser...

Le site devrait contenir un header, le contenu et le footer, le tout avec une largeur fixe. Le problème se situe au niveau de contenu. Celui-ci n'est pas gérable via un template (ou en colonne comme pour les magazine), chaque page aura son type de mise en forme pour le contenu.

Je pensais utiliser le modèle 1:
Largeur fixe centré (750px), header / contenu / footer

le <div> "contenu" me permettrait d'y inclure d'autres <div> suivant le contenu de chaque page, par ex, une colonne, deux colonnes...

Qu'en pensez-vous ou quel solution serait la plus appropriée à mon problème?

d'avance merci

unlimilove
Modifié par unlimilove (04 Jun 2007 - 20:32)
Benjamin D.C. a écrit :
... c'est quoi le problème déjà? Smiley sweatdrop


bien la mise en forme du contenu sera differente sur chaque page, une fois il y aura trois colonne, une fois une, parfois 2 colonnes et 2 lignes... donc je ne sais pas creer un template unique.
il me faut donc une "base" header, contenu, footer en taille fixe (afin d'obtenir une maquette d'une page) et dont le <div> "contenu" pourrait recevoir differente mise en page suivant le contenu de chaque page.

merci
Ne soyez pas dur. C'est là où le message "standards" révèle sa complète inadéquation actuelle avec les besoins.

Nous devrions vivre dans un monde où les gros mots tels que (X)HTML et CSS resteraient totalement inconnus de la plupart des créateurs de contenus Web. Il est utile de se l'entendre rappeler.

@unlimilove: toutes sortes de gens compétents vont vous expliquer ici comment faire. Ce sera juste assez compliqué, mais vous y arriverez sûrement Smiley cligne
Modifié par Laurent Denis (04 Jun 2007 - 21:03)
Le besoin me semble assez bien ciblé. On commencera par réaliser le gabarit global avec ce fameux conteneur central qui accueillera des contenus aux mises en pages diverses d'une page à l'autre.

Ensuite, dans un deuxième temps, on se penchera sur la mise en forme de ces contenus. Mais autant commencer par le « cadre ».

Pas beaucoup de conseils à donner pour cette étape, si ce n'est :
1) au boulot et
2) on en reparle quand ça sera fait, pour corriger/amender ça si nécessaire.
Modérateur
Salut,

InDesign... Quel bon soft Smiley cool .
Pour te guider un peu, tu vas devoir préparer plusieurs modèles de pages et les lier au site. Certains aspects d'InDesign se rapprochent d'un site web.

Bon courage Smiley smile
++
Modifié par Nolem (05 Jun 2007 - 02:20)
alors voila, je viens de réaliser la maquette de base de toute mes pages visible ici:

http://www.comptoirdesproducteurs.be/index2.php

et le fichier CSS dispo ici:

http://www.comptoirdesproducteurs.be/css/styles.css

j'ai donc utiliser le template "Header, container, footer" que me conseillait votre site. Maintenant voila arriver le temps des question niveau contenu...

Chaque page ayant un lay-out de contenu différent, je devrais donc créer une CSS pour chaque contenu d'ou ma premiere question:

Peut-on inclure plusieurs fois la ligne:

<link href="css/styles.css" rel="stylesheet" type="text/css" />

avec par exemple 2 fichiers differents (un pour le lay-out general de la page, et un second pour les styles du contenu)?

ma seconde question:
si le contenu de la page n'est pas assez important, est-il possible de pousser la footer jusqu'en bas de la fenetre du navigateur? ou poser autrement, est-il possible d'augmenter la hauteur du div "container"?

troisieme question:
pour la page d'acceuil mon pote voudrait une serie de bloc ou serait divisé "en gros" les parties importantes de son site (un peu comme sur ce site: http://www.electrabel.be/homepage/index_FR.asp).
Est-il possible de le faire en CSS (liste inline/div???) en sachant qu'une image doit être apporter a chaque bloc ou bien mieux vaut-il utiliser un <table>?

merci de vos réponse et de votre patience Smiley smile
voila je viens de créer la première ligne avec 3 <div>, pour rappel j'aimerai obtenir 3 lignes contenant pour la premiere 3 blocs et pour la seconde et la troisièmes 2 blocs.
Résultat de la première ligne visible ici (ne pas faire attention a l'aspect graphique):

http://www.comptoirdesproducteurs.be/index2.php

et les 2 feuilles CSS:

http://www.comptoirdesproducteurs.be/css/styles.css
http://www.comptoirdesproducteurs.be/css/SAccueil.css

maintenant j'aimerais rajouter une seconde et troisième lignes avec 2 blocs (au lieu de 3 comme dans la première) mais je n'arrive pas a pousser mes nouveaux <div> à la ligne. J'ai utiliser float:left pour la première ligne, résultat tout les nouveaux <div> que je crée se suivent... comment faire donc pour renvoyer certain <div> à la ligne?

J'ai pas l'impression d'être clair sur ce coup là Smiley ohwell

merci d'avance
Bonsoir,

Utilise un clear:both sur l'élèment qui doit se placer en dessous de tes boîte. Par contre, une boite qui n'a cette règle css ne peut être en même temps flottant.
Super_baloo8 a écrit :
Bonsoir,

Utilise un clear:both sur l'élèment qui doit se placer en dessous de tes boîte. Par contre, une boite qui n'a cette règle css ne peut être en même temps flottant.


en fait ce n'est pas cela que je recherche.
je voudrais obtenir 3 lignes qui pour la premiere contient trois emplacements pour de l'info, la seconde et la troisième lignes 2 blocs.

j'ai donc utilisé 3 <div> avec le float:left pour la premiere ligne maintenant que ma premiere ligne est ok, j'aimerai passé a la ligne pour mettre les blocs de la seconde ligne et de la troisième mais je n'y arrive pas Smiley decu
Modifié par unlimilove (18 Jun 2007 - 23:30)
Super_baloo8 a écrit :
Par contre, une boite qui n'a cette règle css ne peut être en même temps flottant.

Il me semble que si. Smiley confuse

Pour la structure, je conseille fortement de grouper les éléments : faire trois div en width: 100%; overflow: hidden, chacune contenant trois blocs (donc deux flottants) ou deux blocs (donc un flottant).

Rapidement :
[b]HTML :[/b]
<div class="ligne3blocs">
	<div class="premier">...</div>
	<div class="deuxieme">...</div>
	<div class="troisieme">...</div>
</div>
<div class="ligne2blocs">
	<div class="premier">...</div>
	<div class="deuxieme">...</div>
</div>
<div class="ligne2blocs">
	<div class="premier">...</div>
	<div class="deuxieme">...</div>
</div>

[b]CSS :[/b]
.ligne3blocs, .ligne2blocs {
	overflow: hidden; /* empêche le dépassement des flottants dans Firefox, Opera, Safari, IE7... */
	width: 100%; /* théoriquement pas nécessaire... mais empêche le dépassement des flottants dans IE6 et IE7 */
}
.ligne3blocs .premier, .ligne3blocs .deuxieme {
	width: 33%;
	float: left;
}
.ligne3blocs troisieme {
	margin-left: 66%;
}
.ligne2blocs .premier {
	width: 50%;
	float: left;
}
.ligne2blocs .deuxieme {
	margin-left: 50%;
}

Bon, les largeurs en pourcentages ne sont pas forcément ce qu'il y a de plus simple à gérer, mais ça donne une idée.
Sujet clos
Aller à