Sujet Précédent Sujet Suivant

[CSS] Problème avec les onglets

Fermé
sandykoala - 31 août 2007 à 14:32
 sandykoala - 12 sept. 2007 à 10:01
Cette discussion est dans la continuité de celle-ci:
ajustement automatique taille de la page#0

J'essai de créer des onglets dasn ce genre: http://www.grainedekeupon.fr/ccm/css_menu_onglet.html

Le problème c'est que ma page fonctionne en local mais pas en ligne (www.ateliercalc.com/onglets2.html) J'aimerai que les onglets soient gris et qu'ils deviennent rose au passage de la souris. Une fois en ligne, les images ne s'affichent plus...

32 réponses

Précédent
  • 1
  • 2
Réponse 21 / 32
Serge_La
6 sept. 2007 à 19:15
Wow, Sandy. C'est très bien.
Si ton image est en "background", tu ne peux pas changer sa grandeur en css seul. Il faut du javascript. Tu pourrais, par exemple, créer trois (ou deux) grandeurs de pages standards et tout adapter à ces trois (ou deux) grandeurs. Un javascript détecterais au départ quelle grandeur appliquer (par le css) au fureteur du visiteur. Ça te donnerais un minimum de soucis.

Serge
0
Réponse 22 / 32
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
6 sept. 2007 à 22:15
salut,

effectivement tu as bien bossé !
il y a juste 
<img src="memo/images/BarreBleue.gif">

qui ne devrait pas apparaitre, d'autant qu'elle fait doublon avec le {background-image} du '<div>'

pour l'adaptation de la largeur, est-ce bien utile ?
en gros, plus de 90% des moniteurs ont une résolution supérieure à 800x600.
et la moitié sont en 1024.
pourquoi ne pas partir sur une largeur fixe de 1000 pixels ?
en centrant la page, le rendu passera surement mieux sur les très grosses résolutions.
0
Réponse 23 / 32
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
6 sept. 2007 à 22:34
D'accord avec toi, Dalida. Sauf que Sandy ajuste certains éléments par rapport au côté gauche, il me semble. Ce serait un problème d'essayer d'ajuster avec le centre.

Serge.
0
Réponse 24 / 32
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 778
6 sept. 2007 à 22:59
Et comment s'ajusteront les gif ?
Je suis aussi pour que la taille de l'image reste inchangée.
Ça demande trop d'adaptations pour un résultat pas vraiment utile pour ce genre de site.

Sinon, par CSS, c'est possible (mais pas en background) : http://forum.alsacreations.com/faq/faq-56-Comment-faire-un-arriere-plan-etirable-.html


++
Il me semble que dans http://www.ateliercalc.com/Onglets.html le menu se trouvait dans la BarreBleue ?
Actuellement, Safari affiche les onglets en dessous.

--
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 25 / 32
sandykoala
10 sept. 2007 à 11:22
J'ai du doubler le <img src="memo/images/BarreBleue.gif"> parce que sinon elle ne s'affiche pas correctement.
Du coup, je vais faire mes pages pour 3 types de résolutions (800x600, 1024x768 et 1280x1024).

J'ai un soucis avec ma barre bleu, je met width:100% mais la scrollbarre s'affiche quand même et j'ai une bande noir à droite. Est-ce que ça peut venir de ma barre bleue qui s'insère deux fois?
0
Réponse 26 / 32
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
10 sept. 2007 à 18:26
Bonjour Sandy,
Je ne vois pas tes soucis sur la page http://www.ateliercalc.com/AccueilCSS.html
Je ne comprends pas pourquoi tu ne mets pas ta barre bleue en background. Tes onglets surperposeraient la barre de cette façon.

Serge.
0
Réponse 27 / 32
sandykoala
11 sept. 2007 à 09:43
J'ai fait une fonction qui détermine quelle est la résolution de l'écran mais je ne sais pas comment utiliser les variables en HTML. J'ai créer ma page d'accueil suivant trois résolutions et je voudrais que quand l'internaute clique sur "Entrer", il soit diriger vers lapage d'accueil de sa résolution. 

<script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res_800x600=false;
var res_1024x768=true; //s'affiche par défaut
var res_1280x1024=false;

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res_800x600=true;
		res_1024x768=false;
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res_1280x1024=true;
		res_1024x768=false;
	}
}
</script>
0
Réponse 28 / 32
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 921
11 sept. 2007 à 09:53
salut,

tu peux l'alléger un peu : 
<script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res = new Array(1024, 768);

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res = new Array(800, 600);
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res = new Array(1280, 1024);
	}
}
</script>

et si tu n'as pas besoin des valeurs elles-même : 
<script language='JavaScript' type="text/javascript">
//*************** Récupération de la résolution de l'écran ***************
var res =1024;

function resolution ()
{
	if (screen.width==800 && screen.height==600)
	{
		res = 800;
	}

	if (screen.width==1280 && screen.height==1024)
	{
		res = 1280;
	}
}
</script>

enfin, bref !
quand tu dis J'ai créer ma page d'accueil suivant trois résolutions faut-il comprendre que tu as créé trois fichiers distincts ?
si oui il va falloir faire un 'refresh()' en JS et ce n'est pas très propre.

sinon il faudra activer ou désactiver la feuille de style à utiliser.
bref dis nous comment tu gères tes trois résolutions, stp !
0
Réponse 29 / 32
sandykoala
11 sept. 2007 à 10:16
En effet j'ai créer trois fichiers distincts...
J'ai modifier mon code pour pouvoir récupérer la résolution en HTML (http://www.ateliercalc.com/IndexEssai.html) mais ca ne marche pas. En local, les "alert" s'affiche mais pas en ligne. En tout cas, il récupère la bonne résolution.

Est-ce qu'en mettant: 
window.location.href=lien
et en HTML 
javascript:ClickOnItem(lien)
ca peut marcher?
0
Réponse 30 / 32
sandykoala
11 sept. 2007 à 10:20
en fait le message d'alert ne marche plus...
0
Réponse 31 / 32
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
11 sept. 2007 à 20:38
Bonjour Sandy,
Le message d'alert ne marche plus parceque le code contient une variable non définie: lien. Faut changer ton html pour ceci: 
<a href="javascript: ClickOnItem()">Entrer</a>

Autre erreur, c'est de faire un choix avec des valeurs précises de résolutions. Tu serais beaucoup mieux d'envoyer vers les pages grandes ou petites selon que la résolution est plus grande ou plus petite que certaines valeurs (que tu choisis).

Aussi, tu peux déterminer la résolution avec ton javascript qui se déclenche onload. Ce javascript determine la valeur de "lien" qui est appelée par déclic sur "entrer". Tu n'as qu'à déclarer la variable lien pour quelle soit disponible à la seconde fonction, celle qui navigue vers la page du site.
Je ne vais pas t'écrire le code tout de suite. Il faut que tu travailles un peu quand même. :D

:)
Serge.
0
Réponse 32 / 32
sandykoala
12 sept. 2007 à 10:01
Merci pour tes conseils Serge_La, j'ai réussi à faire ce que je voulais!!

Le plus simple serait que la page s'adapte à la résolution mais ça à l'air assez compliqué, même si pour la maintenance du site ça serait plus simple.
0

Discussions similaires

Comment supprimer les onglets?
VictimeDeLinformatique -
VictimeDeLinformatique -

2 réponses
onglets qui restent ouverts
isabellecharloootte -
Dori@n -

5 réponses
Impossible de trouver l'icône "onglets" sur le J3 2016
epsonette -
epsonette -

4 réponses
Les onglets restent ouverts
Hiriata -
aPr83 -

3 réponses
Supprimer onglets
robertdu16 -
robertdu16 -

4 réponses