Discussion :

[dasilva]

Bonjour !

J'ai un problème sur le site que je suis en train de développer !
Il me reste plus qu'une erreur "W3C", mais impossible de la régler, je ne comprends pas où est le problème !

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="portfolio.php"><div id="acces"></div></a>

Je sais qu'il ne faut jamais mettre un <a> tout seul sans rien autour mais je ne trouve pas d'autre solutions !
En sachant que le div "acces" est une image avec un effet rollover!

Merci beaucoup d'avance !
Bonne journée !

[Bisûnûrs]

Un élément a ne peut pas contenir un élément div.

[dasilva]

Un élément a ne peut pas contenir un élément div.

Oui, je l'avais bien compris, mais comment puis-je faire dans ce cas ?
Je tiens beaucoup à mon effet rollover...

Merci pour votre réponse !

[Bisûnûrs]

Tu peux toujours remplacer ton div par un span, en lui donnant les propriétés CSS de ton div.

[dasilva]

C'est valide, en effet, mais maintenant mon image n'apparaît plus! (cf lien dans le premier message)

[Bisûnûrs]

Lui donner les propriétés du div signifie aussi lui conférer les propriétés par défaut, comme display:block.

[dasilva]

Parfait, ça marche !
Merci beaucoup Bisûnûrs !

En revanche, je travaille sous Firefox, et je viens de me rentre compte que mon footer se balade à droite à gauche sous Chrome ou sous Opéra...

Vois-tu quelque chose qui te choque dans mon code CSS ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.footer
{
background: url(images/footer.png) no-repeat;
width:1037px;
height:154px;
display: block;
margin: 69px 422px;  
}

Merci encore pour ton aide !

[Bisûnûrs]

Vois-tu quelque chose qui te choque dans mon code CSS ?

Oui :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin: 69px 422px;

[dasilva]

C'est le "margin" qui te dérange ? Pourquoi dont ?

[Bisûnûrs]

Surtout la valeur que tu lui donnes. Tu as déjà un élément qui fait 1037px de large, et en plus, tu lui dis de faire une marge gauche et une marge droite de 422px. Un margin:69px auto 0; irait sans doute beaucoup mieux.

[dasilva]

En effet, merci bien, c'est uniforme sur tous les navigateurs maintenant !
Par contre il me reste 2 pixels de décalage que je ne peux pas régler à cause de l'attribut "auto". Tu as une idée ?

[Bisûnûrs]

Ca vient juste de ton image de fond haut.png qui est mal découpée (pas centrée).

[dasilva]

Yes, en effet, nickel, ça marche !
Par contre il y a toujours un bug sur les petites résolutions d'écrans (je viens d'essayer sur un PC portable 17 pouces et il y a un espace entre le corps et le footer)
Là je suis vraiment bloqué !

As-tu une solution ? Existe-il des hack pour les plus petites résolutions ?

Merci beaucoup d'avance !

[Bisûnûrs]

Il faut y penser au moment de la conception. Et si tu fais un site à largeur fixe, elle ne devrait pas dépasser les 960px.

[Candygirl]

Par contre il y a toujours un bug sur les petites résolutions d'écrans (je viens d'essayer sur un PC portable 17 pouces et il y a un espace entre le corps et le footer)

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#acces {
    background:url(images/acces.jpg);
    width:399px;
    height:44px;
	margin: -3% 53%; 
	display: block;
}
 
#acces:hover {
    background:url(images/acces_h.jpg);
    width:399px;
    height:44px;
		margin: -3% 53%; 
}
 
.footer
{
background: url(images/footer.png) no-repeat;
width:1037px;
height:154px;
display: block;
margin:69px auto 0; 
}

C'est à cause de ton margin de -3%. Cela devrait être un nombre en pixels correspondant à la hauteur de ton image. Ton margin-top sur le footer deviendra inutile et ton id access devrait être attribué directement au a.

Après, comme la relevé Bisûnûrs, le comportement de la page doit être pensé lors de la conception. Ton design est assez typique d'un designer "papier" qui ne prend pas en compte l'extensibilité d'un site web

[dasilva]

Ok, ça marche parfaitement, merci pour vos réponses !
Concernant la résolution d'écran, en effet j'ai pas fait gaffe, il y a 40 ou 50 px en trop...

Bonne journée !