28172 sujets

CSS et mise en forme, CSS3

Bonsoir,

Je développe actuellement un site et après moult test, recherche, prise de tête je n'arrive pas à concevoir ma structure xhtml / css.

Mis un temps de coté (je préfère le développement php à l'intégration xhtml :-° ) la mise en place de la structure du design final devient maintenant plus que nécessaire.

Je viens donc vous demander conseil sur la meilleure façon de réaliser ce que je désire. Le design que je souhaite mettre en place doit avoir un layout qui s'adapte à la fenêtre (et donc à la résolution de l'écran) ainsi que bien évidemment à l'ensemble des navigateurs.

Plutôt qu'un long discours je pense qu'une image sera beaucoup plus parlante :

http://hitle.free.fr/bordel/struct.jpg

Cette structure va peut être vous paraitre simple et pourtant je n'arrive pas à faire quelque chose de convenable. N'étant pas passionner de CSS (c'est d'ailleurs mon premier design extensible...) je vous demanderais d'être le plus précis et simple (si possible Smiley cligne ) dans vos propositions et l'aide que vous m'apporterez.

Merci par avance à tous ceux qui lirons mon sujet !
Modifié par hiteule (23 Jun 2008 - 23:11)
Salut hiteule et bienvenue Smiley cligne ,
hiteule a écrit :
N'étant pas passionner de CSS...
Dommage Smiley langue !

Le mieux si tu ne maîtrises pas le positionnement en CSS serait de commencer par le début. Un petit tour sur cet article : comment débuter et trouver l'information ?, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Tu pourrais également jeter un oeil aux modèles de mise en page en CSS pour te donner une base de travail.

Concernant la mise en page que tu souhaites obtenir, tu pourrais par exemple avoir :
- une div qui contiendra les parties rouge et verte avec un width:270px; et un float:left;
- une div qui contiendra tous les autres éléments avec un margin-left supérieur ou égal à 270px
- une div globale qui contiendra les 2 div précédentes avec un margin: 0 auto à laquelle tu pourras éventuellement appliquer un max-width car sur un écran vraiment large (comme mon portable en 16/9) il peut être préférable de limiter la largeur maxi.

Voir également : Faire un site pour toutes les résolutions.

A+
Modifié par Heyoan (22 Jun 2008 - 20:46)
Bonsoir,

Merci à vous deux pour vos réponses qui m'ont beaucoup aidées !

J'ai travaillé là dessus hier-soir et ce soir et je suis parvenue à quelque chose de vraiment bien à mon gout !

Ma structure est maintenant prête à affronter l'ensemble les navigateurs et les résolutions Smiley smile
hiteule a écrit :
Ma structure est maintenant prête à affronter l'ensemble les navigateurs et les résolutions Smiley smile
Bravo Smiley smile !

Tu considères que ce sujet est [Résolu] ? Smiley cligne
Oui exact, j'avais omis de spécifier que le message été résolu, désolé. Je ferais attention la prochaine fois Smiley cligne