18041 sujets

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

Espace entre les div... également

Bonjour,
Je re-poste mon post au bon endroit cette fois...
Je suis sur la mise en place d'un site, et j'aimerai que pour une fois, il tienne la route visuellement.
J'ai fait des boutons/liens via l'utilisation d'une liste.
Premier soucis, j'utilise des images "ON" et "OFF", donc comme soulever il y a peu, si les images ne se chargent pas, je n'ai pas de liens apparents... Je ne peu vraiment pas utiliser de lien avec du texte et une image de fond, car c'est déjà validé ainsi par mon client...

et donc, autre soucis que je n'arrive toujours pas à régler malgré les multiples solutions proposées sur le net (même dans le précédent post... c'est dire), j'ai toujours un espace qui apparaît entre ma div "top" et ma div "nav" contenant mes boutons/liens.

Ci-après le HTML

</head>

<body>
<div id="container">
    	<div id="top"> </div>
    	<div id="nav">
		<ul><li><a href="accueil.html" class="accueil"></a></li>
            <li><a href="biographie.html" class="biographie"></a></li>
            <li><a href="peintures.html" class="peintures"></a></li>
            <li><a href="contact.html" class="contact"></a></li>
        </ul>
        </div>
        <div id="fond_1"> </div>
        <div id="footer"></div>
    </div>
</body>
</html>


et le CSS


@charset "UTF-8";
/* CSS Document */

body{
	background-color:#3c3a6a;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:9px;
	text-align: center; /* pour résoudre le bug de centrage de IE*/
	margin:0;
	padding:0;
}

#container{
	margin:0 auto;
	padding:0;
	height:860px;
	width:1250px;
	text-align:left; /* pour résoudre le bug de centrage de IE*/
}

#top{
	background:url(images/top.jpg) no-repeat top;
	margin:0;
	padding:0;
	height:93px;
}
/* ////////////////////////////////////////////// BARRE DE NAVIGATION /////////////////////////////*/
#nav{
	background:url(images/nav.jpg) no-repeat top;
	margin:0;
	padding:0;
	height:67px;
}

#nav ul li{
	list-style:none;
	float:left;
	padding:0;
	margin:0;
}

#nav ul li a{
	height:35px;
	display:block;
	margin-top:16px;
	margin-bottom:16px
	background:no-repeat;
	padding:0;	
}

/* ////////////////////////////////////////////// BOUTONS /////////////////////////////*/

/* bouton 1 */
#nav ul li a.accueil{
	background:url(images/bt1-off.png);
	background-position:right;
	width:128px;
	margin-left:300px;
}

#nav ul li a.accueil:hover{
	background:url(images/bt1-on.png);
	background-position:right;
	width:128px;
	margin-left:300px;
}
/* ////////////////////////////////// */

/* bouton 2 */
#nav ul li a.biographie{
	background:url(images/bt2-off.png);
	background-position:right;
	width:162px;
	margin-left:10px;
}

#nav ul li a.biographie:hover{
	background:url(images/bt2-on.png);
	background-position:right;
	width:162px;
	margin-left:10px;
}
/* ////////////////////////////////// */

/* bouton 3 */
#nav ul li a.peintures{
	background:url(images/bt3-off.png);
	background-position:right;
	width:146px;
	margin-left:10px;
}

#nav ul li a.peintures:hover{
	background:url(images/bt3-on.png);
	background-position:right;
	width:146px;
	margin-left:10px;
}
/* ////////////////////////////////// */

/* bouton 4 */
#nav ul li a.contact{
	background:url(images/bt4-off.png);
	background-position:right;;
	width:122px;
	margin-left:10px;
}

#nav ul li a.contact:hover{
	background:url(images/bt4-on.png);
	background-position:right;
	width:122px;
	margin-left:10px;
}

#fond{
	width:1250px;
	height:640px;
	display:block;
	background:url(images/fond.jpg) no-repeat top;
	margin:0;
	padding:0;
}

#fond_1{
	width:1250px;
	height:640px;
	display:block;
	background:url(images/fond1.jpg) no-repeat top;
	margin:0;
	padding:0;
}

#footer{
	background:url(images/footer.jpg) no-repeat top;
	height:60px;
	margin:0;
	padding:0;
}


et une image d'un "soucis" :



upload/20569-PB.jpg



Voilà... J'avoue que je pédale complètement dans la semoule...
Un petit coup de main ne serait pas de refus !
ha, et pour les boutons, j'ai fait de la sorte (une image pour "off" et une pour "on" en pensant régler le problème, mais à part rallonger mon CSS c'est tout ce que ça a fait)...

d'avance merci!
Pour tes bouton, essai avec background-image : url(ton_image);

Mais il me semble que le hover ne fonctionne pas avec IE6.
Merci !
Mais ce n'est pas ce que j'ai déjà ?:


#nav ul li a.biographie{
	background:url(images/bt2-off.png);
	background-position:right;
	width:162px;
	margin-left:10px;
}

#nav ul li a.biographie:hover{
	background:url(images/bt2-on.png);
	background-position:right;
	width:162px;
	margin-left:10px;


En fait, le bouton "off" est un png avec le texte violet (mais intégré sous Photoshop pour utiliser une police plus chouette) et idem pour le "on" avec en plus un effet graphique.
Comme sur l'exemple d'après :


upload/20569-pb-2.jpg


En revanche, si en plus de tout ça, la fonction "hover" risque de ne pas fonctionner, je ne suis pas rendu...

Smiley confus
reaper70 a écrit :
Mais il me semble que le hover ne fonctionne pas avec IE6.


Si. Mais sur <a> uniquement.

Sharivanred, tu n'as pas besoin de répéter de qui est commun entre a et a:hover dans ta CSS. En plus une classe comme "biographie" étant probablement unique, tu n'as pas besoin non plus de dire que ça concerne tel div, ul et li. Et rajoute aussi une couleur sur le hover pour signaler le changement d'état aux utilisateurs sans images. D'autre part je suppose que l'accolade manquante est bien présente ? 

a.biographie:hover{
	background: couleur url(images/bt2-on.png);
}


Enfin pour finir il est préférable de ne charger qu'une seule image et de modifier sa position au hover. Par ex :

a.biographie{
	background: couleur url(images/bt2.png) 0 0;
}
a.biographie:hover{
	background: autrecouleur url(images/bt2.png) 0 50%;
}
Bon, en tout cas, j'essaie !

Concernant reaper70 et le changement de "background" par "background-image", je viens de le tenter, mais non... toujours la même barre... Et pourtant, j'aurai bien aimé que cela fonctionne...

Arsene, la modification de hover, en fait, c'est ce que j'avais fait au début. J'ai suivi un tuto (bien fait et justement pour arrêter le mode un peu barbare de Dreamweaver), et j'avais bien fait un seul visuel pour les deux positions du bouton avec un placement "top" et "bottom" suivant le placement de la souris (pour éviter de recharger les images à chaque fois). Mais j'avais le même problème... Mais je vais refaire ainsi, car ça revient au même du point de vu de mon soucis, mais au moins le CSS est mieux ficelé.

L'accolade est un oubli du copier/coller.

Je pense tout re-faire une nouvelle fois, mais vraiment je ne comprend pas... J'ai rajouté des "vertical-align" comme conseillé sur une des pages "astuces" du site, mais ça ne fonctionne pas non plus. Vraiment, j'ai du mal à comprendre, dès que je met cette liste de lien, ça saute...

En tout cas merci pour vos réponses, je vais continuer de chercher (et dire que je n'ai même pas encore testé sur IE... ça promet...)



Bonsoir sharivanred,

J'ai supprimé ton sujet initial qui n'avait plus d'utilité Smiley cligne
Concernant ton menu :
1- Une page de test en ligne reproduisant ton soucis serait un plus appréciable pour tes interlocuteurs...
2- Ces images n'ont rien à faire dans ta css, elles devraient se trouver directement dans ton code html et le rollover devra quant à lui s'effectuer via javascript (ce qui te permettra en passant de donner une alternative
textuelle pertinente à ces images en cas d'indisponibilité ou de desactivation de ces dernières)

Je te laisse chercher sur le net la meilleure manière de procéder Smiley cligne

Cdt,
Sylvain
Sinon l'espace vient peut-être de tes bouton. Avec un margin : 0px; padding : 0px l'espace peut disparaitre...
Alors, Reaper70, même si mes margin me sont nécessaires pour place mes boutons j'ai tout de même essayé (en me disant que si cela réglait mon problème, je procéderai autrement pour leur placement avec une autre div par exemple), mais non, l'espace reste présent...

Pour Sylvain, merci pour les réponses également.
Je t'envoie par MP une page de test.

Mais je pense m'orienter soit vers ta solution, mais j'avoue que vu le temps que j'ai passé sur ce soucis (d'ailleurs mes fichiers CSS et HTML s'accumulent à force de test Smiley sweatdrop ), je vais peut-être contourné le problème avec une barre de navigation plus basique pour avancer sur le reste de ce projet...

Bon, en tout cas merci pour toute ces infos, et au moins j'ai pas mal appris ces derniers temps !
Donc :

En attendant que l'accessibilité soit à l'ordre du jour Smiley cligne

Remettre les marges à zéro sur l'élément ul pour faire disparaitre ce "vilain espace" :
Rendu par défaut des éléments HTML
Ou, supprimer cette div qui ne sert à rien et modifier la feuille de styles en conséquence :

html :

<ul id="nav">
	<li><a href="accueil.html" class="accueil"></a></li>
	<li><a href="biographie.html" class="biographie"></a></li>
	<li><a href="peintures.html" class="peintures"></a></li>
	<li><a href="contact.html" class="contact"></a></li>
</ul>

css :

ul#nav{
	background:url(images/nav.jpg) no-repeat top;
	margin:0;
	padding:0;
	height:67px;
}

ul#nav li{
	list-style:none;
	float:left;
	padding:0;
	margin:0;
}

ul#nav li a{
	height:35px;
	display:block;
	[#blue]margin:16px 0;[/#]
	background:no-repeat;
	padding:0;	
}
Etc...


Cdt,
Sylvain
Sujet clos
Aller à