18073 sujets

Questions générales et questions de débutants

Bouton qui disparait celon la taille d'écran

Bonjour,
Voici mon menu très largement inspiré des tuto d'alsacréations.
Le problème est qu'en réduisant horizontalement la taille de la fenêtre, le premier bouton dispait je ne sais où Smiley confus
Avez-vous une solution ?

Merci d'avance
et Bonne journée Smiley lol
Modifié par joeyinbox (03 Aug 2005 - 22:18)
Bonjour joeyinbox,

La cause immédiate est :

a écrit :

/* Alignement des 3 composants du menu */
#gauche {
float: left;
width: 233px;
position: relative;
right: 600px;
...
}


qui "chasse" ton élément de menu hors de la zone d'affichage si celle-ci se réduit en largeur.

Mais pour tout dire :
- tu travailles sur un document HTML invalide : première chose à corriger avant de passer à la présentation, car des erreurs HTML peuvent avoir des conséquences sur ton rendu, même si ce n'est pas le cas pour la disparition de ce lien
- ton code HTML, en dehors de l'invalidité, est assez surprenant : que viennent faire les liens invisibles en début de page ?
- ton schéma de positionnement CSS est... à peu près incompréhensible et inutilement compliqué. La position relative ci-dessus en est un bon exemple.

Si tu veux éviter les pertes de temps, je te conseille de reprendre entièrement cette page, morceau par morceau, en validant chaque étape et passant ensuite à sa présentation... avec des solutions simples. Pour ton menu, float suffit.
Modifié par Laurent Denis (03 Aug 2005 - 09:32)
Laurent Denis a écrit :

- tu travailles sur un document HTML invalide : première chose à corriger avant de passer à la présentation, car des erreurs HTML peuvent avoir des conséquences sur ton rendu, même si ce n'est pas le cas pour la disparition de ce lien

Comment savoir ce qui est invalide et donc à changer ?
Laurent Denis a écrit :
- ton code HTML, en dehors de l'invalidité, est assez surprenant : que viennent faire les liens invisibles en début de page ?

J'ai bidouillé ça pour qu'un menu soit affiché avec un lecteur d'écran.
Laurent Denis a écrit :
- ton schéma de positionnement CSS est... à peu près incompréhensible et inutilement compliqué. La position relative ci-dessus en est un bon exemple.

Si tu veux éviter les pertes de temps, je te conseille de reprendre entièrement cette page, morceau par morceau, en validant chaque étape et passant ensuite à sa présentation... avec des solutions simples. Pour ton menu, float suffit.

Je reprend donc tout depuis 0 Smiley confus

Merci encore
re,
Pour la validation HTML, cela m'affiche des erreurs d'espaces inexistant...
Je ne comprend pas. Smiley confus

Voir les résultats de validation

PS: La page top est incluse dans toutes mes pages... C'est pour cela que certaines balises ne sont pas fermées. Smiley biggrin
Modifié par joeyinbox (03 Aug 2005 - 09:51)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" [b]content="fr"[/b]>


Supprime ce content=fr, probablement une confusion avec :

<html lang="fr">
<meta http-equiv="Content-Language" content="fr">


Ensuite :
<script [b]language=[/b]"JavaScript" src="script.js"></script>


L'attribut valide n'est pas language, mais type. Donc:
<script type="text/javascript" src="script.js"></script>


Ensuite :
<li id="tableaux"><a href="#2" [b]alt=[/b]"Tableaux" title="Tableaux"></a></li>


L'attribut alt n'existe pas pour les liens <a...>. Tu confonds avec les images <img>. En revanche, tu peux écrire :
<li id="tableaux"><a href="#2" [b]title=[/b]"Tableaux"></a></li>

(Ce qui ne sera pas pris en compte par défaut par un lecteur d'écran, la lecture des attributs title étant une option)

joeyinbox a écrit :

PS: La page top est incluse dans toutes mes pages... C'est pour cela que certaines balises ne sont pas fermées. Smiley biggrin


aucun problème, tant que tu ne testes pas la page top seule Smiley cligne
Modifié par Laurent Denis (03 Aug 2005 - 10:07)
Merci beaucoup !
Maintenant que le HTML est valide, je vais regarder pour simplifier mes divs. Smiley cligne

Je te tiens au courant...
Voila la nouvelle page de test.

Par contre, je ne sais pas où appliquer un align="left" de sorte que le div menu reste "collé" au premier bouton...
Et je ne sais pas pourquoi la barre de défilement horizontale s'active alors que rien ne dépasse. Smiley confus

PS : http://www.w3.org/Icons/valid-html401 et http://jigsaw.w3.org/css-validator/images/vcss huhuhuuu... lol Smiley lol

Bon, je vais me coucher...
@ ce soir Smiley langue


EDIT : Résolus sous FF... La faute à un position:relative; au lieu de absolute...
Par contre, l'affichage sous IE n'est pas trop bien... Avez-vous une solution pour que le menu soit collé au premier bouton ?

Merci d'avance ! Smiley lol
Modifié par joeyinbox (03 Aug 2005 - 22:21)
Sujet clos
Aller à