28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je galère pour faire du positionnement en Css, malgrès la lecture des tutoriaux (mon cas étant peut-être spécial ou alors je le prend pas par le bon bout Smiley decu )

Pour que ma page soit centré quelque soit la definition de l'affichage
du visiteur, j'ai créé un tableau de 3 colonnes.

Celle de gauche et droite sont extensible est celle du milieu fixe c'est donc dans celle la que ce situe les différents élements.

La cellule du milieu est donc encadré par les balises <td></td>

J'ai réussi a faire en sorte que le background soit une image avec dans style/css cela :

Code:

#contenu{ 
background-image:url(index.jpg); 
background-position:center center; 
background-attachment:fixed; 
background-repeat:no-repeat; 
width:951px; 
height:560px; 
} 



et dans le html cela :
Code:

<td width="951px" height="560px" ><div id="contenu"> 



Le problème c'est que dans cette même cellule je doit maintenant y mettre des textes et lien et là sa foire complétement.

Toujours pour que l'affichage soit correcte quelques soit la définition d'affichage du visiteur, il faudrait que tous les textes et lien ais une position par rapport à la cellule et pas par rapport au bord de l'écran.

Le problème est donc avec le code suivant :
Code:

td {padding-left: 2cm} 



Sa décale de 2 cm tout ce qui ce trouve dans la cellule donc le background aussi, et ca sa le fait pas !!!

En plus si d'autre chose à afficher à plus de 2cm, comment je fais ???

Merci de votre aide.

@+
Bonjour et bienvenue sur Alsacréations,

J'avoue que tes explications ne sont pas très claires Smiley cligne (une page en ligne serait préférable).

Tu dis que tu suis les tutoriels sur le positionnement CSS, mais tu utilises des cellules de tableau Smiley biggol .

En passant utiliser des centimètre en conception web est une abérration Smiley cligne .

Proposes nous une page en ligne et assimile bien les trois articles d'Openweb sur le positionnement ainsi que le tuto sur le centrage.
Bonjour,

salva57 a écrit :
Pour que ma page soit centré quelque soit la definition de l'affichage
du visiteur, j'ai créé un tableau de 3 colonnes.

Celle de gauche et droite sont extensible est celle du milieu fixe c'est donc dans celle la que ce situe les différents élements.

À vue de nez, c'est un mauvais découpage de ton design.
Peut-on voir le design en question?
Merci pour vos réponses.

La page est visible ici : http://www.pictures-plus.fr/Web2/untitled2.htm

Je débute en CSS et je me suis inspiré du bouquin "Optimisation de sites Web CSS2, RSS, XHTML et XML" édition campus Press.

En fait le problème est il me semble que les CSS ne peuvent pas répondre à tous les problèmes lorsque l'on veut du positionnement dans différente dimensions d'affichage.
(D'après les autres posts que j'ai pu lire)

Dans mon cas il me semblait logique de créer 3 colonnes pour répondre au problème de largeur. La colone du centre étant fixe.
Mais cette même colone doit contenir le graphisme en background et les différents lien par dessus.
Donc il faudrait que le background soit toujours centré dans le <td> et que le positionnement de tous les liens qui seront par dessus le soit par rapport au bord gauche du <td> et pas par rapport au bord gauche de l'écran.
Mais je ne sais pas dissocier les deux. Si je décale un lien le background ce décale aussi. Et comme j'ai d'autre liens à mettre sa va être le bazarre Smiley decu

Je vais replonger dans les liens que vous m'avez proposés.

@+
Je confirme donc ce que je te disais, mieux vaux repartir de zéro.

Une seule div contenant ta "page" est suffisante ici (avec éventuellement d'autres div à l'intérieur pour placer les différents éléments).

Pour centrer ta div dans la page
#Id{width: 900px;
margin:0 auto;}


Pour IE6 il me semble qu'il faut mettre le body en text-align center et rétablir l'alignement dans le div ensuite.

Je ne sais pas ce que vaut ton livre, mais s'ils conseillent d'utiliser un tableau pour le centrage horizontal, il y a un problème.
Modifié par Yasashii (31 Aug 2008 - 12:07)
Merci,

Non le livre ne parle pas de tableau, mais il ne parle pas non plus des problèmes d'affichage dans différentes résolutions. Smiley decu

Je ne comprend pas bien le code que tu as donné :

#Id{width: 900px;
margin:0 auto;}


Avec cela, le site est toujours collé à gauche non ?

@+
salva57 a écrit :
Merci,

Non le livre ne parle pas de tableau, mais il ne parle pas non plus des problèmes d'affichage dans différentes résolutions. Smiley decu

Je ne comprend pas bien le code que tu as donné :

#Id{width: 900px;
margin:0 auto;}


Avec cela, le site est toujours collé à gauche non ?

@+


Il est expliqué dans le tuto sur le centrage dont le lien est dans mon premier message Smiley cligne
Bon j'avance, voilà ou j'en suis :

http://www.pictures-plus.fr/web2/untitled3.htm

avec le code suivant :

pour le style

<style type="text/css">

#global{
background-image:url(index.jpg);
position:relative;
margin-left:auto;
margin-right:auto;
width:951px;
height:560px;
text-align:left;
}
a.lien1:link {color: blue; text-decoration: none; margin-left:150px; }
a.lien2:link {color: blue; text-decoration: none; margin-left:170px; }
a.lien3:link {color: blue; text-decoration: none; margin-left:200px; }
</style>


Pour le html :

<div id="global">
<a class="lien1" href="#">La retouche photos</a>
<a class="lien2" href="#">Qui sommes nous?</a>
<a class="lien2" href="#">Votre partenaire en communication visuelle</a>
</div>


Le problème maintenant c'est que les liens sont collés en haut pas moyen de les mettre ou je veux verticalement Smiley fache
Et aussi le dernier lien est trop long il faudrait qu'il soit sur deux lignes.
J'ai bien essayé de mettre un <br> côté html au milieu du texte du lien mais du coup la seconde ligne se colle à gauche Smiley fache Smiley fache

Ce qui est étrange aussi (mais normal en css) c'est que la position du 1er lien ce fait par rapport au bord gauche de mon image (sa c'est cool) mais les autre lien ce positionne par rapport au lien précédent.
Alors comme je vais avoir plusieurs liens horizontallement et verticallement sa va être une usine à gaz Smiley biggol

A mon avis il faudrait peut-être que je fasse 3 conteneur positionné comme des colonne avec mes lien à l'intérieur.

Je creuse, je creuse Smiley biggrin
Yasashii a écrit :
Pour IE6 il me semble qu'il faut mettre le body en text-align center et rétablir l'alignement dans le div ensuite.

Non, ce n'est pas nécessaire. Cette «astuce» concerne uniquement IE5 (ou IE6 ou 7 ou 8 en mode Quirks, mais personne de sain d'esprit ne travaille en mode Quirks).
salva57 a écrit :
Le problème maintenant c'est que les liens sont collés en haut pas moyen de les mettre ou je veux verticalement Smiley fache

Heu... ce n'est pas le problème qui me saute aux yeux. J'en vois en réalité deux assez flagrants:

- tu places tout un tas de contenus (notamment des textes, dont certains devront être des liens je pense) en image de fond Smiley eek ;
- tu as des lacunes énormes en HTML et CSS.

Mon conseil:
1. apprendre HTML et CSS;
2. abandonner ce design (fort mauvais), et tenter un design peut-être plus simple mais plus efficace et plus lisible (avec des informations mieux agencées);
3. intégrer le nouveau design plus simple avec HTML et CSS (et comme le design aura moins de contraintes étranges, il sera plus simple techniquement à mettre en place Smiley cligne ).
Zut, ils ont vu que j'étais nul Smiley confused

Petite précision, le Background est constitué de la totalité de l'image que l'on voit (les pseudo bouton contact font pour l'instant parti de l'image). Les seules choses rajouté par dessus sont les 3 liens en bleu.

Mais c'est bien cela qui me pose problème j'ai l'impression que l'on ne peut pas travailler en couche avec des CSS.

Alors avant que je ne perde mon temps à essayer de faire un truc impossible (ce que semble dire Florent V.) puis je espérer mettre mes liens bleu ou je veux sur la page par dessus l'image de fond ? et que ce positionnement ne se balade pas en fonction des résolutions d'écran.


Edit : Le graphisme est fait par une amie, si des textes ou bouton font encore partie de l'image actuellement, plus tard ils seront effacé.

Merci
@+
Modifié par salva57 (31 Aug 2008 - 23:56)
salva57 a écrit :
Mais c'est bien cela qui me pose problème j'ai l'impression que l'on ne peut pas travailler en couche avec des CSS.

Si, c'est tout à fait possible. Mais que tu ne le saches pas, cela signifie que tu es passé par la case «je pose une question sur le forum» avant la case «j'apprends les bases de HTML et CSS». Ce qui pose ici un problème, car le but de ce forum est d'accompagner les utilisateurs dans leur apprentissage, pas de se substituer à cet apprentissage. Smiley cligne

salva57 a écrit :
puis je espérer mettre mes liens bleu ou je veux sur la page par dessus l'image de fond ? et que ce positionnement ne se balade pas en fonction des résolutions d'écran.

Oui, tu peux. Par exemple en utilisant le positionnement absolu (par rapport à un conteneur de dimensions fixes positionné en relatif).

Un peu de lecture:
http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
http://openweb.eu.org/articles/initiation_flux
http://openweb.eu.org/articles/initiation_float
http://openweb.eu.org/articles/initiation_absolue
(Notamment ce dernier article.)
Promis, je creuse le truc et reviens avec une page toute belle
Smiley biggrin
Smiley cligne
Modifié par salva57 (02 Sep 2008 - 21:47)