position tableau °/ au fond avec css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : position tableau °/ au fond avec css

yukio1

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

Publicité

sibelius

Vous êtes sûr ?

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

yukio1

voila mon script je n'ai pas de marges je crois
<style type="text/css">

</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>

Message cité 1 fois

sibelius

Vous êtes sûr ?

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

yukio1

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

yukio1

et cela resoudra til mon probleme quand je reduis ma fenetre avec le tableau qui remonte

sibelius

Vous êtes sûr ?

Code :

body {
background-image: url(images/photoaccueil.jpg);
background-repeat: no repeat;
background-position: 50% 50%;
margin: 0;
padding: 0;
}

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

yukio1

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%;">

Message cité 1 fois

sibelius

Vous êtes sûr ?

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
voila mon script
<div style="position:absolute; bottom:50px; right:43%;">

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

yukio1

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

Publicité

sibelius

Vous êtes sûr ?

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 :

<ul id="menu>
<li><a href="edito.htm">éditorial</a></li>
<li><a href="advertising.htm">advertising</a></li>
<li><a href="personal.htm">personal works</a></li>
<li><a href="contact.htm">contact</a></li>
<li><a href="links.htm">links</a></li>
</ul>

Avec :

Code :

#menu {
list-style: none;
padding: 0;
width: 400px;
margin: 0 auto;
text-align: center;
}

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

yukio1

merci je l'essai

yukio1

le menu est ok
mais il est tout en haut a gauche et pas centré horizontalement et au deux tiers bas verticalement
desole

sibelius

Vous êtes sûr ?

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

yukio1

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

Message cité 1 fois

sibelius

Vous êtes sûr ?

yukio1 a écrit :

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

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

yukio1

pardon
voila je l'ai mis en ligne en page d'accueil

sibelius

Vous êtes sûr ?

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

yukio1

pardon j'ai recopié un 3 a la place d'un 4 dans width

Message cité 1 fois

sibelius

Vous êtes sûr ?

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

yukio1

624 px

yukio1

voila j'ai fait le copie colle

sibelius

Vous êtes sûr ?

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 :

margin: 0 auto;

par

Code :

margin: 624px auto 0 auto;

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 :

#menu {
list-style-type: none;
padding: 0;
width: 400px;
margin: 624px auto 0 auto;
text-align: center;
}
#menu li {
margin-bottom: 3px;
}
#menu a {
display: block;
width : 300px;
background: black;
border: 1px solid gray;
padding: 5px;
color: white;
text-decoration: none;
}
#menu a:hover {
background: gray;
color: black;
font-weight: bold;
}

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

yukio1

j'ai fait une connerie?

yukio1

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

sibelius

Vous êtes sûr ?

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 :

body {
background : #3C3934 url(images/photoaccueil.jpg) center top no-repeat;
margin: 0;
padding:0;
}

(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

yukio1

c'est super ca marche.
j'ai juste modifie dans margin 624 par 480
merci beaucoup!!!!!!!!!!!!

sibelius

Vous êtes sûr ?

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

yukio1

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

sibelius

Vous êtes sûr ?

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

yukio1

pour le modifier c'est bien la valeur de margin qui est la a 480 qu je dois modifier

sibelius

Vous êtes sûr ?

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

yukio1

voila je l'ai remonte
merci beaucoup pour ton aide je n'ouble pas de prendre le livre conseille
merci

sibelius

Vous êtes sûr ?

... 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

yukio1

je voudrais bien l'utiliser mais ce site n'est pas pour moi et le mec ne veut pas de ce graphisme
desole

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

position tableau °/ au fond avec css

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?
Plus de sujets relatifs à : position tableau °/ au fond avec css

Page générée en 0.055 secondes