28173 sujets

CSS et mise en forme, CSS3

Positionnement bizarre

Bonjour,

je suis en train de créer une page d'accueil représentant un livre ouvert avec 2 pages. Mais je n'arrive pas à le faire correctement en CSS, ne pouvant aligner les blocs verticalement, je suis obligé de le faire en 2*3 morceaux (Entete, contenu, footer) mais cela ne marche pas au niveau du centre de la page et je ne vois pas pourquoi !
quelqu'un pourrait-il m'aider je commence à m'arracher les cheveux !

vous pouvez le voir :
http://fcil.free.fr/test/test5.html

avec mes remerciements

FCIL
Bonjour,
a écrit :
m'arracher les cheveux
Je te comprends (-;

Mais une question.
Tiens-tu vraiment à ce que ton design puisse se déformer comme il le fait actuellement ?
 
Modifié par Gihef (26 Aug 2007 - 13:22)
Bonjour fcil et bienvenue sur Alsacreations,

Si je devais réaliser une telle mise en page, je partirais sur la structure suivante : 


<div id="page">
   <div id="haut">
       Eventuellement deux blocs flottants (div ou autres) pour afficher du contenu sur la partie droite et sur la partie gauche 
   </div>
   <div id="centre">
          Deux blocs flottants pour afficher du contenu sur la partie droite et sur la partie gauche 
   </div>
   <div id="bas">
   idem
   </div>
</div>



#page : en background, une image répétée de toute la largeur de l'intérieur + les bordures droite et gauche

#haut : en background, une image de toute la largeur du haut du livre

#bas : en background, une image de toute la largeur du bas du livre

Et de régler tout cela avec les hauteurs, les largeurs et les marges...

Mais avant toute chose, il serait bon de savoir quel sera le contenu réel de chaque partie afin de s'assurer de la pertinence et de la logique des enchainements. Voir Le rendu par défaut des éléments HTML et bien comprendre ce qui suit :

a écrit :

Les documents web sont globalement régis par deux normes de langages : la norme (X)HTML et la norme CSS.

Le langage HTML définit la structure du document à l'aide d'éléments (les balises) porteurs de sens. Le langage CSS apporte le rendu (visuel, auditif, imprimé, ...) sur les différents supports (écran, plage braille, imprimante,...). Les deux entités sont donc complémentaires mais dissociées : la première apporte le sens (la sémantique); la seconde ajoute du rendu d'affichage.


Nota : J'ai utilisé des ID et non des classes.
A lire : la différence entre les deux

Ne pas hésiter à consulter les bases indispensables

Bonne lecture et bon courage. Smiley smile
oui, je voudrais qu'il s'adapte à la résolution de l'écran.

je ne comprends pas pourquoi le bord gauche et droit de chaque page ne se répète pas.

merci pour vos réponses.

FCIL
pour répondre à VERO, comment fais-tu pour le centre qui doit rester centré !

merci.

FCIL
Les trois blocs principaux doivent être centrés (horizontalement)

Pleins de réponses intéressantes se trouvent dans la FAQ

Ceci étant, la largeur de contenu effectif ne devrait pas dépasser 760px afin de rester visible sur un écran 800/600.

Disons que pour un apprentissage du css, tu n'as pas choisi la facilité ... Smiley sweatdrop
rebonjour,

alors il n'y a pas de solution au probleme ?

car je ne vois pas comment avec la solution de VERO, cela va pouvoir s'adapter à la taille de la fenetre, il va y avoir une deformation des images !

non ?

Merci

FCIL
Alors :

1/Concernant le positionnement : c'est soit float, soit relatif ... mais pas les deux.

A lire : Comprendre le positionnement en CSS

2/La solution que je te propose est de découper ton design en 3 parties :
- une image du haut du livre sur toute la largeur dans l'en-tête, avec les bords et les dessins (non répétée donc)
- une image du bas du livre dans le footer, de la même manière (non répétée)
- une image répétée (repeat-y), c'est à dire d'une hauteur de 1px sur toute la largeur, du milieu du livre (avec les bords) dans le conteneur principal (pas celui du centre, afin d'éviter que le motif manque en cas de dépassement du contenu de l'en-tête.

3/ Il sera difficile, je pense, de prévoir une mise en page élastique avec ce projet.

Donc, tes trois images (et donc les conteneurs) vont faire ... admettons 780px de large.
Les images haut et bas aurons la hauteur du motif et ne seront pas répétées.

4/C'est ce que je tenterais, mais je n'ai pas testé ... et on ne sais toujours pas quel sera le contenu du site et comment celui-ci sera structuré ?

5/ Le projet est ambitieux voire périlleux. Ta feuille de style comporte beaucoup d'aberrations. Je t'invite donc à bien comprendre les propriétés CSS avant de les employer ... ce qui peut te conduire à oublier un peu ton projet le temps de parfaire tes connaissances.
Smiley smile
rebonjour,

je continue de creuser (et j'avance ?!), mais je suis tombé sur un problème d'interprétation suivant le navigateur :

pourquoi sur OPéra et firefox, j'ai une ligne centrale transparente que je n'ai pas sous internet explorer ?

alors que la couleur de fond du contenu est marron ! (par dessus le blanc) :
http://fcil.free.fr/test/test8.html

merci pour vos réponses.
Sujet clos
Aller à