28220 sujets

CSS et mise en forme, CSS3

Bonjour, j'essaie en ce moment de faire un site web concernant les prix nobels...
J'ai cependant un problème, comme vous l'avez compris, avec l'affichage de ma page sous FF et IE... Smiley eek
Voilà donc le page HTML
et le feuille de script

les propriétés qui causent problème:
#menu
{
margin-top:2%; /* marge au dessus */
text-align: left; /*alignement du texte */
float:left; /* place à gauche */
color: #003366; /* couleur des textes par defaut */
background-image: url("images/menu-off.gif"); /* image de fond */
height:100px;
background-repeat: repeat-y;
width: 199px;
}

#principal
{
background-image:url('images/gauche.gif');
position: absolute;
background-repeat: repeat-y;
background-color : #FFFFFF;
text-align: left; /* alignement du texte */
color: #003366; /* couleur des textes par defaut */
width: 70%; /* largeur */
margin-top:3%; /*marge au dessus*/
margin-left: 250px; /*marge à gauche*/
}


Au passage, pourrait-on me dire comment faire pour qu'il n'y ai pas la fin du DIV menu en bas du menu? J'ai beau chercher je ne trouve pas comment résoudre ces 2 problèmes Smiley decu
Modifié par vizigr0u (27 Nov 2005 - 21:55)
Lapin, je les ai mis les liens avec la page test et le CSS, je le remet =D
Voilà donc la page HTML
et la feuille de style

sinon Yyoupla, le problème principal est le margin ,qui sous Firefox réfère au bord de la page, et sous IE réfère à la droite de mon menu (margin-left du div principal) ce qui fait que sous IE mon div principal est trop éloigné du menu (je voudrais une apparence similaire sous FF et IE).

Sinon, je voudrais que la texture de fond du mon menu s'arrête avant, ou pendant l'image en bas du menu, car pour le moment quelque soit la taille de l'image, il y a quelques pixels qui s'affichent en dessous, ce qui fit un peu tache...
Merci =)
Modifié par vizigr0u (27 Nov 2005 - 20:32)
J'ai résolu mon problème d'alignement en appliquant une margin-right: -250px; à mon Div menu, mais il me reste le probleme de l'image de fond qui se répète apres l'image de fin de menu...
en enlevant la heuteur fixe de ton div menu, il devrait s'adapter en hauteur aux éléments intérieurs, et tu n'auras plus la répétition.
Tu peux aussi t''en assurer ainsi:
background: url("images/menu-off.gif") no-repeat;
salut,
Y a un big pb sur ta page, le contenue est sur le titre!!
il doit te manquer un overflow: auto; à ton bloc de titre!!
Smiley cligne
Modifié par stepibou (27 Nov 2005 - 21:08)
Le problème est que sans ce DIV menu qui continue, j'ai un espace entre mon image du haut et la suite, d'où cette idée de continuer le DIV, cependant, si tu as une solution pour coller les 2, sachant que le code est comme ceci:

<div id="menu">
<img src="images/menu-haut.gif" />
<div id="lien" onMouseOver="this.className='actif'" onMouseOut="this.className='inactif'" class="inactif">

(c'est entre l'image et le second DIV qu'il y a un trou, apres c'est bon)

Edit: comment ca le texte est sur le titre?
si tu parle du "Page D'accueil" c'est normal, c'est là qu'il est censé être, si c'est pas ca dans ce cas là dis moi: Tu as quel navigateur, et quel résoltion STP =D
Modifié par vizigr0u (27 Nov 2005 - 21:09)
Je viens de voir le pb sous ie, en effet, mais je pense qui faut que tu revois
ton systeme d'affichage. Que tu repense ton architecture.
en utilisant par exemple des float: left;
tu trouvera ici le modele de mise en page qui te conviens :
http://forum.alsacreations.com/faq/#item32

sinon <center> est deprecié,
utilise plutot margin: auto; en css.
Smiley cligne
Merci beaucoup, il fallait bien mettre un display:block pour que l'image soit collée, désolé j'avoue: j'ai posté ici sans vraiment rechercher sur le site, en effet comme c'est un projet à rendre pour demain matin, j'éspérais que ca irait plus vite en posant ma question sur le forum, c'était le cas.
Merci encore =D
Bonsoir,

Un remarque en passant : je n'ai jamais su pourquoi Eric Meyer, qui avait traité le problème le premier il y a bien longtemps dans un article de DevEdge sur Netscape et les images dans les tableaux, avait privilégié cette solution du display:block au lieu de la solution beaucoup plus naturelle en CSS du vertical-align... Ce qui fait qu'on retrouve aujourd'hui partout des display:block assez incongrus (bien qu'efficaces).

Il y a des petits mystères historiques, comme ça... Smiley ravi