28173 sujets

CSS et mise en forme, CSS3

Probleme heritage[Résolu]

Je reformule mon sujet, car c'etait confus. J'ai un problème d'heritage avec une balise a:hover dans mon menu
J'ai bien tenté de changer en 
div.menu a:hover
et le reste en 
.menu1
comme expliqué dans le tutoriel comprendre l'heritage et la parenté. Mais je n'ai plus de menu ainsi !
Bref là je sèche.
Vous pouvez voir ce que cela donne en bas à gauche, sur le site , le lien sur valerie bonneau devrait être après site :
Voici le code de mon menu 

ul{
	position:relative;
	list-style:none;
	padding: 0px;
	margin: 0px;
	width:540px;
	height:400px;
	background: url(dessin1.gif) no-repeat;
}


a{
	position:absolute;
	display:block;
	width:76px;
	height:20px;
	text-decoration:none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}

 
a:hover{
 
  font-size:18px;
  color:#CC3300;
 width:169px;
  height:45px;
}



#menu1{
	top: 376px;
	left: 4px;
	padding: 5px 0px 0px 20px;
	background: #6699FF url(g05/ptm1.gif) no-repeat;
}

#menu1:hover{
  top:370px;
  left:1px;
padding: 14px 0px 0px 15px;
	width:135px;
	background: url(g05/m1.jpg) no-repeat;
}


#menu2{
  top:376px;
  left:112px;
  background: #FFCC00 url(g05/ptm2.gif) no-repeat;
  padding: 5px 0px 0px 20px}

#menu2:hover{
  top:370px;
  left:74px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m2.jpg) no-repeat;
}

#menu3{
  top:376px;
  left:222px;
  padding: 5px 0px 0px 20px;
  background: #CC3333 url(g05/ptm3.gif) no-repeat;
}

#menu3:hover{
  top:370px;
  left:185px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m3.jpg) no-repeat;
}

#menu4{
  top:376px;
  left:334px;
  padding: 5px 0px 0px 20px;
  background: #9966FF url(g05/ptm4.gif) no-repeat;
}

#menu4:hover{
  top:370px;
  left:300px;
  padding: 10px 0px 0px 48px;
  width:135px;
  background: url(g05/m4.jpg) no-repeat;
}

#menu5{
  top:376px;
  left:447px;
  padding: 5px 0px 0px 20px;
  background: #33CC00 url(g05/ptm5.gif) no-repeat;
}

#menu5:hover{
  top:365px;
  left:420px;
  padding: 14px 0px 0px 48px;
  background: url(g05/m5.jpg) no-repeat;
}

#menu6{
  top:1px;
  left:2px;
  padding: 5px 0px 0px 20px;
  background: #00CCFF url(g05/ptm6.gif) no-repeat;
}


#menu6:hover{
  top:0px;
  left:0px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m6.jpg) no-repeat;
}


Le fichier qui contient le copyright est appelé 
<?php include("copyright.php");?>

J'ai deux feuilles de style appelé dans ma page index, celle du menu et celle pour le reste de la page ainsi que pour mon copyright 

body {
	background-color: #BFEBFF;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 30px;
	margin-bottom: 70px;
	position: absolute;
}

.conteneur {
	padding-top: 10px;
	padding-left: 10px;
	width: 950px;
	height: 540px;
	background-color: #00CCFF	
}

.logo {
float: left; /* alignement du logo à droite */
margin-right: 0px;  /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0 ;
}

.phrase {
	letter-spacing: 2px;
	text-align: center;
	font-family: "Courier New", Courier, mono;
	font-size: medium;
	font-weight: bold;
	clear: left;
	padding-top: 5px;
	color: #0066FF;
}

.gauche {
	position: absolute;
	width: 540px;
	left: 10px;
	top: 125px;
	background-color: #FFFFFF;
	float: left;
	}

.frame {
margin-left: 570px; /* on place ce bloc à droite du bloc menu de 180px de large */
width: auto;
height: 420px;
overflow: auto; /* cette propriété va permettre le scroll de ce bloc */

}


.bas {
	float: clear;
	font-size: small;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #3399FF;
	font-weight: bold;
	text-decoration: none;
	display: block;
}


J'espère vraiment que quelqu'un peut m'aider.
Merci

Val
Modifié par valzl (18 Sep 2006 - 17:52)
bonjour

je sais, çà n'à rien à voir, mais en strict, les balises sont en minuscules, les balises à tags uniques sont à fermer correctement

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" CONTENT="Valerie Bonneau">
<meta name="keywords" CONTENT="Nantes, "pays de la loire", pressclub, "club presse", journaliste, photographe, "Saint Nazaire", pigiste">
<meta name="description" CONTENT="">
<meta name="robots" content="index,follow,all">
<link href="index.css" rel="stylesheet" type="text/css" media="all">


il manque les backslashs et content doit être en minuscule.

<SCRIPT LANGUAGE="JavaScript">


invalide en strict

<img src="logo.gif" alt="logo" class="logo" />


il manque les dimensions, ce n'est pas primordial mais il est préférable de les renseigner.

<li><a id="menu2" title="menu2" accesskey="2" href="#">Agenda</a></li>


dans un contexte multi-navigateur, c'est peine perdue.

<br>


<br />, c'est mieux Smiley cligne

et çà :

target="_blank" , <div align="center">


franchement! en strict...pensez à validez vos codes.

http://alexandre.alapetite.net, il vous rendra service.

et çà, je ne crois pas que ce soit souhaité :

Chevallier, 200%


le 200% est, à mon avis, une erreur.
Bonjour,

Et surtout avec un 

a{
	position:absolute;
…


Tu ne vas pas aller très loin. Cela signifie TOUTES les balises <a> en position absolue, oui mais par rapport à quoi ? Il te faut un référerant. Et intégré dans un texte inline comme ta signature, ca va pas être facile.

Si tu restreins tes <a> du menu a son conteneur ca devrait être plus simple.
Ajoute ".conteneur" devant a, a:hover et ul, car c'est ce dernier qui est le point de référence de ton absolute (position:relative)

Voilà
Merci pour ces conseils, je vais déjà changer les erreurs. J'avais testé dans w3c et je ne comprenais pas pourquoi il me soulignait les > des meta. Je croyais être en transitional , pas fait attention. Le mieux c'est de me mettre en transitional, non ? Pour le 200% c'est le début du nom de la boite de celui qui fait le logo Smiley cligne .

Val
Bonjour,

keran a écrit :
je sais, çà n'à rien à voir, mais en strict, les balises sont en minuscules, les balises à tags uniques sont à fermer correctement


Disons plus exactement que c'est en XHTML (qu'il soit strict, transitional ou frameset) que le balisage s'écrit obligatoirement en minuscules, etc. La différence strict/transitional ne porte pas sur ce point, mais sur le "stock" d'éléments et d'attributs disponibles; Voir Les DTD HTML4.01 et XHTML1.0 : comment choisir ?.

keran a écrit :
< valzl
le transitionel devrait être oublier depuis longtemps déjà...


Les DTD HTML et XHTML transitional répondent toutes deux à des besoins biens réels, en attendant notament que ceux-ci puisse être éventuellement gérés via CSS (le target, par exemple).
laurent denis

ok, c'est éffectivement vrai.ce que je veux dire c'est qu'avec un doctype strict, on se doit d'écrire correctement ces codes et de les valider, c'est une question d'attitude et de responsabilité.j'en ai marre qu'ie soit à la traine ,en partie, à cause des codes mal formés.alors j'incite comme je peux à coder propre, même si je me mélange un peu les pinceaux.il reste les gourous pour nous rappellés à l'ordre Smiley lol

quant au target, çà se contourne facilement, même si çà oblige à utiliser javascript ou autre.mais évidement, c'est moins accessible...on à rien sans rien.
Ah... Je vais en remettre une couche, si vous me permettez l'expression Smiley cligne

Justifier la nécessité de valider son code (X)HTML par une sorte d'éthique, ou par une vague (?) relation avec les implémentations dans IE... me semble, pour tout dire, assez fumeux.

Et surtout inutile, la validation se justifiant par ailleurs:
- parce qu'elle réduit les incertitudes de rendu liées au traitement des erreurs par les navigateurs (en text/html)
- parce qu'elle est indispensable au traitement complet du document par le navigateur en application/xhtml+xml
- parce qu'un document valide dans une norme HTML ou XHTML, strict, transitional ou frameset, sera aisément traitable le moment venu par des processus permettant d'évoluer vers un autre format
- parce que, dans le cas du XHTML, le respect de la syntaxe stricte de celui-ci simplifie l'apprentissage en éliminant de nombreuses variantes, incertitudes ou ambiguïtés.

Bref, je ne code pas "propre" parce que c'est "mieux" ou que "ça fera avancer le schmilblick" , mais pour des raisons bassement matérielles, foncièrement égocentriques et ouvertement intéressées Smiley ravi
Modifié par Laurent Denis (16 Sep 2006 - 18:58)
a écrit :
qu'avec un doctype strict, on se doit d'écrire correctement ces codes et de les valider, c'est une question d'attitude et de responsabilité.

C'est gentil de supposer que tous les gens qui utilisent du transitionnal sont des gens irresponsables. Personnellement, mes sites sont en transitionnal, sont codés proprement, validés aussi (puisque c'est ce qui te tiens à coeur). Je ne vois pas en quoi il seraient moins méritoires que des sites en strict...
De plus, si ces DTD existent, je ne vois aucune raison de ne pas les utiliser, il est juste important de choisir le bon doctype adapté à son besoin et de coder en fonction de ce doctype (le transitionnal autorise le target alors que le strict ne l'autorise pas par exemple).
Puisque le validateur ne voulait pas du code javascript, je suis passée en transitionnal et ma page est validée ! Désolée pour les puristes, mais plus envie de passer mes nuits à tout comprendre. Ca doit être l'âge !!!

Du coup j'ai toujours mon problème. Si je transforme "la balise a" 

a{
	position:absolute;
	display:block;
	width:76px;
	height:20px;
	text-decoration:none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}


en position relative ou si je l'enlève, "valerie Bonneau" est bien à sa place mais lorsque le curseur passe dessus il fait un lien rouge identique au menu.
(Et bien sûr les rectangles de mon menu ne sont plus à leurs places).
Quel nom donné à mes balises pour qu'elles soient interprétées juste pour ce menu ? Si ca peut résoudre le problème !?


ul{
	position:absolute;
	list-style:none;
	padding: 0px;
	margin: 0px;
	width:540px;
	height:400px;
	background: url(dessin1.gif) no-repeat;
}



a{
	position:absolute;
	display:block;
	width:76px;
	height:20px;
	text-decoration:none;
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	color:#FFFFFF;
}


a:hover{
 
  font-size:18px;
  color:#CC3300;
width:169px;
  height:45px;
}



#menu1{
	top: 376px;
	left: 4px;
	padding: 5px 0px 0px 20px;
	background: #6699FF url(g05/ptm1.gif) no-repeat;
}

#menu1:hover{
 top:370px;
  left:1px;
padding: 14px 0px 0px 15px;
width:135px;
 background: url(g05/m1.jpg) no-repeat;
}



#menu2{
  top:376px;
  left:112px;
  background: #FFCC00 url(g05/ptm2.gif) no-repeat;
  padding: 5px 0px 0px 20px}

#menu2:hover{
  top:370px;
  left:74px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m2.jpg) no-repeat;
}

#menu3{
  top:376px;
  left:222px;
  padding: 5px 0px 0px 20px;
  background: #CC3333 url(g05/ptm3.gif) no-repeat;
}

#menu3:hover{
  top:370px;
  left:185px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m3.jpg) no-repeat;
}

#menu4{
  top:376px;
  left:334px;
  padding: 5px 0px 0px 20px;
  background: #9966FF url(g05/ptm4.gif) no-repeat;
}

#menu4:hover{
  top:370px;
  left:300px;
  padding: 10px 0px 0px 48px;
  width:135px;
  background: url(g05/m4.jpg) no-repeat;
}

#menu5{
  top:376px;
  left:447px;
  padding: 5px 0px 0px 20px;
  background: #33CC00 url(g05/ptm5.gif) no-repeat;
}

#menu5:hover{
  top:365px;
  left:420px;
  padding: 14px 0px 0px 48px;
  background: url(g05/m5.jpg) no-repeat;
}

#menu6{
  top:1px;
  left:2px;
  padding: 5px 0px 0px 20px;
  background: #00CCFF url(g05/ptm6.gif) no-repeat;
}


#menu6:hover{
  top:0px;
  left:0px;
  padding: 10px 0px 0px 48px;
  background: url(g05/m6.jpg) no-repeat;
}


le site

On m'a suggéré de placer un conteneur. Dans la feuille de style de ce menu, je suppose, mais je mets quoi dedans ?

Merci de votre aide

Val
Sujet clos
Aller à