position tableau °/ au fond avec css
position tableau °/ au fond avec css - HTML/CSS - Programmation
Marsh Posté le 19-09-2005 à 13:50:38
Hello,
Je pense que le mieux serait de commencer par supprimer les marges (margin, padding) par défaut dans le conteneur de document <body>, car ces marges sont différentes selon les navigateurs, ce qui entraîne des différences d'affichages.
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 14:30:46
voila mon script je n'ai pas de marges je crois
<style type="text/css">
<!--
body {
background-image: url(images/photoaccueil.jpg);
background-repeat: no repeat;
background-position: 50% 50%;
}
a:link {
color: #FF3900;
text-decoration: none;
}
a:visited {
color: #FF3900;
text-decoration: none;
}
a:hover {
color: #FF3900;
text-decoration: underline;
}
a:active {
color: #FF3900;
text-decoration: none;
}
-->
</style>
<body>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div align="center">
<p> </p>
<p> </p>
<table width="14%" border="0">
<tr>
<td><div align="center"><a href="edito.htm">éditorial</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="advertising.htm">advertising</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="personal.htm">personal works</a> </div></td>
</tr>
<tr>
<td><div align="center"><a href="contact.htm">contact</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="links.htm">links</a></div></td>
</tr>
</table>
</div>
Marsh Posté le 19-09-2005 à 14:34:33
| yukio1 a écrit : voila mon script je n'ai pas de marges je crois |
Oui justement.
Donc chaque navigateur applique les marges qu'il veut (et elles sont souvent différentes)
Il faut donc les mettre à zéro pour être sûr qu'elles soient appliquées à l'identique partout 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 14:39:13
comment je les mets a zero
je dois mettre ca dans ma balise alors
margin: 0px 0px 0px 0px;
de meme pour padding?
merci beaucoup
Marsh Posté le 19-09-2005 à 14:46:05
et cela resoudra til mon probleme quand je reduis ma fenetre avec le tableau qui remonte
Marsh Posté le 19-09-2005 à 14:50:35
Code :
|
Pour l'histoire du "tableau qui remonte" : ça va déjà régler l'espace par défaut qui sera alors identique sur tous les navigateurs.
Par contre, vu que ton tableau est positionné complètement au hasard (à grand renforts de <p> </p> ), la réponse est non : puisque ton positionnement dépend de la taille de caractère sur le navigateur du visiteur 
Il faudrait donc éviter les bidouilles aléatoires comme des <p> </p> et placer ton tableau proprement en lui indiquant une position définie (en CSS puisqu'il s'agit de mise en forme)
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 15:28:11
merci c'est parfait sur IE mais sur camino mon tableau est super a gauche et sur safari il est plus bas. il n'a pas la meme position selon le navigateur. c'est dur
voila mon script
body {
background-image: url(images/photoaccueil.jpg);
background-repeat: no repeat;
background-position: 50% 50%;
margin: 0px;
padding: 0px;
}
</style>
<body>
<div style="position:absolute; bottom:50px; right:43%;">
Marsh Posté le 19-09-2005 à 15:39:18
| yukio1 a écrit : merci c'est parfait sur IE mais sur camino mon tableau est super a gauche et sur safari il est plus bas. il n'a pas la meme position selon le navigateur. c'est dur |
Bon, je crois qu'il y'a beaucoup de choses à revoir :-/
A quoi sert ce div ?
A quoi sert ce right: 43% ? Si c'est pour essayer de centrer quelque chose, ça va être complètement différent selon les résolutions.
On va faire plus simple : que veux-tu obtenir exactement ?
A quoi te sert un tableau dans ton cas ?
Message édité par sibelius le 19-09-2005 à 15:40:55
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 15:42:35
mon tableau je veux le centrer en dessous de la photo qui est elle dans le background
ce tableau est mon menu dans le site
voila
j'ai tant a apprendre
Marsh Posté le 19-09-2005 à 15:47:58
Bon, on est bien d'accord qu'il n'y a pas de données tabulaires (stats etc.) donc le choix d'un tableau ne s'impose pas.
Je te propose une solution plus courte et plus propre à la place du tableau :
Code :
|
Avec :
Code :
|
Je n'ai pas testé, je te laisse essayer. J'ai peut-être oublié des choses.
Message édité par sibelius le 19-09-2005 à 15:59:18
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 15:58:10
le menu est ok
mais il est tout en haut a gauche et pas centré horizontalement et au deux tiers bas verticalement
desole
Marsh Posté le 19-09-2005 à 16:02:50
Je peux voir en ligne s'il te plaît ? Ça facilitera les choses.
C'est vrai que pour l'instant je n'ai pas positionné le menu.
Petite erreur dans le code :
<ul id="menu> à remplacer par <ul id="menu">
Pour l'alignement vertical, on va le placer juste en dessous de l'image parce que 2/3 bas, ça veut pas dire grand chose : sur les petites résolutions, le menu va alors s'afficher par dessus l'image.
Quelle est la hauteur du titre + image de fond ?
Message édité par sibelius le 19-09-2005 à 16:04:44
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:08:09
voila le site www.ericdeniset.com
il est place comme il doit l'etre si tu est sur IE voila
mais sur les autres nav
Marsh Posté le 19-09-2005 à 16:12:23
| yukio1 a écrit : voila le site www.ericdeniset.com |
Euh là tu n'as rien changé par rapport à ce que je t'ai donné.
Il y'a toujours le tableau donc je ne vais pas pouvoir continuer à te dépanner.
Message édité par sibelius le 19-09-2005 à 16:13:12
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:18:30
Le CSS ne correspond pas à ce que je t'ai donné, donc il ne fonctionne pas
PS : il faudrait aussi que tu répondes à ma question sur la hauteur de l'image.
Message édité par sibelius le 19-09-2005 à 16:19:27
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:20:03
Reply
Marsh Posté le 19-09-2005 à 16:21:35
| yukio1 a écrit : pardon j'ai recopié un 3 a la place d'un 4 dans width |
non je parle surtout des marges automatiques que j'ai dans le CSS et que tu n'as pas dans le tien.
Fais un copier-coller du code, ce sera moins risqué.
Message édité par sibelius le 19-09-2005 à 16:23:01
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:34:55
624px ? hmm moi je veux bien, mais tes visiteurs en 800x600 ne verront même pas le menu Il vont devoir scroller pour le trouver
Bon pour placer ton menu, il suffit de modifier :
Code :
|
par
Code :
|
comme ça les 4 marges seront renseignées (haut, droit, bas, gauche)
Si tu veux t'amuser un peu et aller plus loin, voici un exemple que tu peux copier pour voir :
Code :
|
On peut aller beaucoup, beaucoup plus loin bien sûr
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:37:34
merci beaucoup je l'essai tout de suite
je peux agrandir l'image
en effet sur um grand ecran il y a des problemes comme le fond qui ne prend pas la bonne taille
Marsh Posté le 19-09-2005 à 16:42:00
Si tu agrandis l'image, ce sera encore pire pour les utilisateurs en 800x600
De plus, je ne comprend pas trop l'utilité du repeat-x dans ton cas, ça fait assez moche sur les grands écrans.
Il est plus simple de mettre une couleur de fond derrière l'image.
Essaye ça pour le fond du body :
Code :
|
(je rajoute aussi les marges à zéro que tu avais oublié)
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:42:02
c'est super ca marche.
j'ai juste modifie dans margin 624 par 480
merci beaucoup!!!!!!!!!!!!
Marsh Posté le 19-09-2005 à 16:43:28
N'oublie pas de tester la variante que je t'ai donné (ça va te plaire), et le code pour le background aussi.
PS : chez moi (en 1024x768) le menu est encore à moitié coupé. Il faudrait encore le remonter.
Message édité par sibelius le 19-09-2005 à 16:45:44
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:50:01
j'ai teste le code pour le background
c'est super tu peux aller voir
tu peux me dire si pour ta resolution d'ecran tout est ok
merci beaucoup
Marsh Posté le 19-09-2005 à 16:53:07
Comme je l'ai dit, le menu est encore coupé en partie.
Je ne vois pas les deux derniers liens sans scroller, alors que je suis en 1024x768.
Imagine ce que doivent avoir les utilisateurs en 800x600
Le reste est ok. Ça sera encore mieux avec la variante je pense 
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 16:58:01
pour le modifier c'est bien la valeur de margin qui est la a 480 qu je dois modifier
Marsh Posté le 19-09-2005 à 17:03:02
oui la première valeur de margin est la marge haute.
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 17:06:03
voila je l'ai remonte
merci beaucoup pour ton aide je n'ouble pas de prendre le livre conseille
merci
Marsh Posté le 19-09-2005 à 17:13:33
... mais pourquoi ne veux-tu pas essayer la variante du code que je t'ai donné ?
---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Marsh Posté le 19-09-2005 à 19:26:46
je voudrais bien l'utiliser mais ce site n'est pas pour moi et le mec ne veut pas de ce graphisme
desole
Sujets relatifs:
- [CSS] Adieu tableau, à moi la puissance du css [MAJ]
- [Javascript]Comment faire un retour chariot dans une chaîne de tableau
- Inserer les valeurs d'un tableau dans une base de données ?
- recherche tableau
- Petit soucis sur mon tableau CSS
- Modification dynamique tableau HTML
- Demande d'aide VBA : tableau dynamique et importation de données
- Alignement horizontal d'un tableau dans une cellule
- CSS prob position:absolute
- [Resolu]creer plusieurs graph a partir du meme tableau excel?
Marsh Posté le 19-09-2005 à 13:24:26
salut
j'ai un probleme avec la position de mon tableau par rapport au fond d'ecran dans la page d'accueil.
en effet celui ci remonte selon la taille de la fenetre du navigateur ou selon le navigateur.
il est plus haut sur camino ou safari.
sur IE il remonte si l'écran est tres grand ou bien si je reduit la taille de la fenetre
merci de m'aider
le site www.ericdeniset.com