pb rollover firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : pb rollover firefox

nicomes

Bonjour,

Je suis en train de réaliser une maquette.
J'ai fait un menu sur la gauche dans lequel sur la 1ère rubrique j'ai appliqué un rollover (fait avec Dreamweaver).
Ce rollover fonctionne bien sous IE, mais sous Firefox, il met en plus une petite ligne blanche juste en dessous de l'image.

adresse maquette : http://nicoweb37.ohfr.com/feeling_forest3/

Merci de m'aider à comprendre pourquoi.
Est-ce possible ce genre de rollover en CSS ??

Merci
@+ tard

PS : un avis sur la maquette ??

Publicité

gatsusat

hummm pour les avis graphiques, il faut aller dans la Cat Graphisme>Webdesign

Ici tu auras surtout des avis sur le code HTML et on te dira : ton code est moche puisqu'il est généré à 100% par dreamweaver

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

nicomes

gatsusat a écrit :

Merci, mais l'avis graphique n'était pas ma principal question !
Je sais bien qu'en passant par dremaweaver le code n'est pas beau (je ne suis pas par là que pour le rollover) et je répéte que ce n'est qu'un TEST !!
Donc, j'aimerais vraiment avoir une explication sur le pourquoi du coment ça ne passe pas sous Firefox c'est tout.
Après, je m'occuperais du code pour que cela soit plus prorpre.

Merci

gatsusat

ben là avec du code aussi crade, je dirai plutôt : Firefox il aime po les sites mal conçu.

Enfin doit y avoir un problème de Height quelque part mais bizarre, ya rien qui fait que ca poserait problème

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

nicomes

gatsusat a écrit :

Excuse moi d'insister mais c'est une MAQUETTE !! et le rollover ce n'est qu'un test !!
Je sais que le code n'est pas encore optimisé ! Je demande juste de l'aide par rapport à Firefox.
De plus, dits-moi ce qu'il ne va pas dans le code au lieu balancer qu'il est juste crade, moche...ça m'avance beaucoup etant donne que je le sais déjà.

gatsusat

ben justement étant une maquette arrête toi là, car le code HTML utilisé est obsolète, tu patientes une heure si possible juste le temps que je recolle les morceau de ta maquette charcutée et que je te fasse un truc propre, qui pose pas de soucis avec FF, et ensuite je t'expliquerai comment j'ai fait.

1 indice : yaura aucun tableau utilisé

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

nicomes

gatsusat a écrit :

Ok, sorry, je voulais retravailler le code qu'après.
Je pense que tu ne vas utiliser que des CSS et des div non ? J'y ai pensé également, mais je ne suis pas encore expert dans ce domaine.

J'attends avec impatience tes explications !
Merci bcp c'est super gentil.

PS : désolé de m'être un peu emporté sur le message précèdent.

@+

gatsusat

Nan c'est moi qui m'emporte

tiens voila le lien :
http://gatsu.ftp.free.fr/Modele/fe [...] /page.html

pour tout recuperer go ici : http://gatsu.ftp.free.fr/Modele/feelingforest

à juste titre, on s'arrête au maximum à 5 images, dont une seule image pour le bouton avec effet rollover
et au passage le code HTML devient super propre, et ce code reste léger dans chacune des page :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" title="Principal" href="styles.css">
</head>
<body>
<div id="corps">
<h1 id="header">FeelingForest</h1>
<ul id="menu">
<li><a href="#">Présentation</a></li>
<li><a href="#">Réservation</a></li>
<li><a href="#">Parcours</a></li>
<li><a href="#">Plan d'accès</a></li>
<li><a href="#">Tarifs</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2 class="accueil">Accueil</h2>
<p>
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature nous
permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature nous
permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
</p>
</div>
<div id="bottom"></div>
</div>
</body>
</html>

CSS :

Code :

/*Ensemble des éléments*/
* {
margin:0;
padding:0;
}
body {
background-color:#FFFFCC;
}
/*Corps de la page*/
#corps {
width:762px;
margin:0 auto;
border:1px solid #339933;
background-color:#FFFFFF;
}
/*Entête de la page*/
#header {
height:97px;
background: url(images/header.jpg) no-repeat left;
text-indent:-5000px; /*On fait disparaître le texte du header*/
}
/*Menu*/
#menu {
float:left;
width:173px;
height:307px;
background: url(images/menu.jpg) no-repeat left;
font-family: "Comic Sans MS";
}
#menu li{
list-style:none;
overflow:hidden;
margin: 11px 0 0 0;
}
#menu li a{
display:block;
overflow:hidden;
height:25px;
background: url(images/bouton.gif) no-repeat left top;
text-decoration: none;
color:#339933;
font-size:18px;
padding-top:3px;
padding-left:16px;
}
#menu li a:hover{
background-position: left bottom;
color:white;
}
/*Contenu du site*/
#content{
margin-right:30px;
margin-left:190px;
}
#content h2{
overflow:hidden;
text-indent:-5000px; /*On fait disparaître le texte du H2*/
}
#content h2.accueil{ /*ici on ne va gérer que l'image accueil*/
background: url(images/Soustitre_Accueil.jpg) no-repeat left top;
}
#content p{
background: url(images/fond.jpg) no-repeat left top;
text-align: justify;
}
/*Pied de Page*/
#bottom{
/*On se sert du pied de page pour casser le float ensuite*/
clear:both
}

Je ne vais pas expliquer tout le code CSS mais sur les lignes que tu comprends pas je veux bien t'expliquer exactement

Message cité 1 fois
Message édité par gatsusat le 25-11-2005 à 10:52:11

---------------
Les CSS c'est bon mangez-en

nicomes

gatsusat a écrit :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" title="Principal" href="styles.css">
</head>
<body>
<div id="corps">
<h1 id="header">FeelingForest</h1>
<ul id="menu">
<li><a href="#">Présentation</a></li>
<li><a href="#">Réservation</a></li>
<li><a href="#">Parcours</a></li>
<li><a href="#">Plan d'accès</a></li>
<li><a href="#">Tarifs</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2 class="accueil">Accueil</h2>
<p>
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature nous
permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature nous
permettent de vous proposer un large choix d'activités adaptées à vos envies.
De nombreuses années d'expérience dans le domaine du Tourisme de Pleine Nature
nous permettent de vous proposer un large choix d'activités adaptées à vos envies.
</p>
</div>
</div>
</body>
</html>

CSS :

Code :

/*Ensemble des éléments*/
* {
margin:0;
padding:0;
}
body {
background-color:#FFFFCC;
}
/*Corps de la page*/
#corps {
width:762px;
margin:0 auto;
border:1px solid #339933;
}
/*Entête de la page*/
#header {
height:97px;
background: url(images/header.jpg) no-repeat left;
text-indent:-5000px; /*On fait disparaître le texte du header*/
}
/*Menu*/
#menu {
float:left;
width:173px;
height:307px;
background: url(images/menu.jpg) no-repeat left;
font-family: "Comic Sans MS";
}
#menu li{
list-style:none;
overflow:hidden;
margin: 11px 0 0 0;
}
#menu li a{
display:block;
overflow:hidden;
height:25px;
background: url(images/bouton.gif) no-repeat left top;
text-decoration: none;
color:#339933;
font-size:18px;
padding-top:3px;
padding-left:16px;
}
#menu li a:hover{
background-position: left bottom;
color:white;
}
/*Contenu du site*/
#content{
margin-right:30px;
margin-left:190px;
}
#content h2{
overflow:hidden;
text-indent:-5000px; /*On fait disparaître le texte du H2*/
}
#content h2.accueil{ /*ici on ne va gérer que l'image accueil*/
background: url(images/Soustitre_Accueil.jpg) no-repeat left top;
}
#content p{
background: url(images/fond.jpg) no-repeat left top;
text-align: justify;
}

Je ne vais pas expliquer tout le code CSS mais sur les lignes que tu comprends pas je veux bien t'expliquer exactement

Ouah, et bien un GRAND MERCI !!
j'y vois bcp plus claire maintenant.
C'est cool, je vais re-partir de ça.

Encore merci, et meme si je debute dans les CSS j'ai compri ton code.

@+

gatsusat

J'ai corrigé le code il y avait un petit bug, le menu sortait du bloc sous FF, à cause du positionnement flottant, alors j'ai rajouté un élément Bottom, et lui ai appliqué un clear:both pour dégager le positionnement flottant sur lui.

et j'ai corrigé la couleur que j'avais zappé

DONC je t'invite à récupérer le code.
tu peux aussi récupérer les image et regarder comment j'ai fait.

mais au moins quand tu va rajouter un élément dans ton menu ou des trucs dans tes pages, ça sera super simple

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en

Publicité

nicomes

gatsusat a écrit :

Tu es "the BOSS" !
C'est cool, merci. Avec les explications ça le fait.
Je vais retoucher mon image de fond pour le menu refaire la decoupe, pour que ça soit plus fluide.
Petite question, comme je travaille en php, avec des includes, comment je dois ecrire mes pages que je vais inclure ?

Je m'explique, actuellement dans la balise <p></p> il y a du texte pour la rubrique actualitée, toute cette partie j'aimerais la mettre dans une page "actualitée.php" qui serait inclue uniquement lorsqu'on arrive sur le site. Ensuite, si je clique sur "presentation", j'inclue la page "presentation.php".
Donc, le code de ces pages doit ressembler à quoi ? Elles contiennent juste le texte ???

Merci, merci et encore merci !

gatsusat

ben dans <p></p>

tu fais un <?include("pageconcernee.php" )

Les pages ne contiennent que le texte et bien entendu un peu de HTML tu es libre de faire ce que tu veux

mais imagine si tes pages sont des pages HTML complète et que tu les inclus dans une autre page

tu auras plusieur fois la balise <html> dans la page, ce qu'il ne faut pas faire ar exemple

Ensuite pour ce qui est des titres de chaque page (h2)
je te conseil de faire :

<h2 class="<?echo page?>"><?echo titrepage?></h2>

et dans ta feuille de style tu redéfini les classes correspondantes, comme j'ai fait pour accueil

de toute manière poste ton code on va t'aider, et laisse tout sur le topic

PS : c'est actualité !!!
et puis aucun accent dans les noms de fichiers, ni espaces, ni keudal

Message cité 1 fois
Message édité par gatsusat le 25-11-2005 à 11:12:55

---------------
Les CSS c'est bon mangez-en

nicomes

gatsusat a écrit :

Trop drole,

J'allais te poster en te disant ce que j'ai fait, et c'est exactement ce que tu me conseilles ! YES !!
ça marche nickel, donc ça le fait.
Au faite, t'en pense quoi graphiquement de tout ça ?

Franchement merci, grace à toi, j'ai franchi une marcher pour les CSS !

gatsusat

ben c'est bien fait, sauf qu'il faudrait que tu réexporte tes images qui m'ont l'air un peut de mauvaise qualité, le header il était en gif apparament au départ, enfin bon tu regarde les dimensions de mes images et tu redécoupe ta charte proprement pour le fond du menu et le header

PS : une mise en page ca ne se charcute pas

tu vois ce que je t'ai fais, tu obtiens un truc ultrafluide, et quand tu veux descendre ton menu de 40px, rien t'en empêche en CSS. c'est le bonheur total.

et puis il sera facilement référençable de cette manière

---------------
Les CSS c'est bon mangez-en

FORUM HardWare.fr

Programmation

HTML/CSS

pb rollover firefox

Sujets relatifs
[CSS+HTML]Probleme d'affichage FireFox	problème d'affichage d'image avec firefox
[Résolu] [Firefox] Pourquoi title="" ne marche pas chez moi ?	pb avec Firefox (pixelLeft)
dimension d'image diffrente entre IE et Firefox	Jonglage entre Ie et Firefox !
Sauvegarde auto des favoris avec Firefox	Rendre un javascript compatible sous firefox
ecrire dans la barre d'état (firefox)	Rollover CSS (image) passe pas sur FireFox & Opera
Plus de sujets relatifs à : pb rollover firefox

Page générée en 0.100 secondes