28220 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerai avoir un conseil de votre part. Je ne souhaite nullement faire de la publicité pour mon site, j'ai juste besoin de savoir s'il correspond aux nouveaux standards. J'ai essayé au maximum d'éviter l'utilisation de tableaux et de privilégier les feuilles de style css. Voilà l'adresse de mon site : http://www.location-finistere.com

Merci pour vos remarques.
Modifié par pekka (14 Dec 2005 - 17:15)
Administrateur
Salut,

Je ne sais pas trop s'il s'agit du bon lien, mais le site que tu proposes :
- a une architecture intégralement réalisée à base de cellules de tableaux (à part l'entête et le pied de page
- il employe un doctype qui n'est plus mis à jour depuis 1998 si mes souvenirs sont bons (HTML 4.0 transitionel). Il n'est d'ailleurs pas valide dans ce doctype choisi. Pour info, le standard actuel est XHTML 1.1 (mais pour des raisons pratiques, il vaut mieux encore se conformer à XHTML 1.0)
- il utilise des comportements javascript pour les menus par exemple. Ce n'est pas "anti-standard" en soi, mais ce genre de choses est plus simple à mettre en oeuvre en CSS
- il emploie des balises plutôt réservées à la mise en page, comme <br> (et plusieurs de suite d'ailleurs).

Ce sont des pistes à revoir si tu veux coller aux standards actuels.
Attention, rien n'est obligatoire non-plus Smiley cligne
Modifié par Raphael (11 Dec 2005 - 15:54)
Raphael a écrit :
Salut,

Je ne sais pas trop s'il s'agit du bon lien, mais le site que tu proposes :
- a une architecture intégralement réalisée à base de cellules de tableaux (à part l'entête et le pied de page
- il employe un doctype qui n'est plus mis à jour depuis 1998 si mes souvenirs sont bons (HTML 4.0 transitionel). Il n'est d'ailleurs pas valide dans ce doctype choisi. Pour info, le standard actuel est XHTML 1.1 (mais pour des raisons pratiques, il vaut mieux encore se conformer à XHTML 1.0)
- il utilise des comportements javascript pour les menus par exemple. Ce n'est pas "anti-standard" en soi, mais ce genre de choses est plus simple à mettre en oeuvre en CSS
- il emploie des balises plutôt réservées à la mise en page, comme <br> (et plusieurs de suite d'ailleurs).

Ce sont des pistes à revoir si tu veux coller aux standards actuels.
Attention, rien n'est obligatoire non-plus Smiley cligne


Oui oui l'adresse est bien la bonne Smiley cligne
L'architecture est basée de tableaux ?! Il y en a pas beaucoup pourtant! J'en ai utilisé pour le sommaire et pour y insérer une suite d'éléments (c'est un peu fait pour ça les tableaux non ?) Effectivement, je pense que je devrais revoir le sommaire en utilisant des <li> mais j'ai eu du mal à les insérer horizontalement et de mannière à utiliser tout la largeur du div conteneur.
Mais sinon le site repose intégralement sur des div.

Pour le doctype c'est vrai que je n'y ai pas du tout fait attention. J'ai utilisé celui-ci proposé par défaut dans DreamWeaver.

Pour le javascript, je n'ai pas réussi à faire ce que je voulais en CSS. Je vais peut-être revoir ça plus en profondeur et revoir d'ailleurs le sommaire en globalité. A part pour le sommaire je n'utilise pas de JavaScript (juste une petite fois mais là je n'ai vraiment pas le choix, c'est impossible en CSS)

Au sujet de <br/> c'est la seule astuce que j'ai trouvé pour avoir deux div côte à côte paraissant de même longueur. Peut-être as tu quelque chose de meilleur à me proposer ?

N'hésitez pas à continuer vos remarques !

Merci
Modifié par pekka (11 Dec 2005 - 16:12)
Administrateur
a écrit :
Pour le javascript, je n'ai pas réussi à faire ce que je voulais en CSS. Je vais peut-être revoir ça plus en profondeur et revoir d'ailleurs le sommaire en globalité. A part pour le sommaire je n'utilise pas de JavaScript (juste une petite fois mais là je n'ai vraiment pas le choix, c'est impossible en CSS)

Pour le sommaire, tu peux t'inspirer des très nombreux exemples que tu trouveras dans la Galerie de menus en CSS d'Alsa Smiley cligne

Je t'ai fait très rapidement une idée de ce qu'on peut faire en CSS :

<ul id="menu">
	<li><a href="/">Accueil</a></li>
	<li><a href="/">Photos</a></li>
	<li><a href="/">Description</a></li>
	<li><a href="/">Disponibilités</a></li>
	<li><a href="/">Tarifs / Modalités</a></li>
	<li><a href="/">Réservation</a></li>
</ul>

#menu {
list-style-type: none;
width: 720px;
font-family: verdana, arial, sans-serif;
font-size: 0.8em;
}
#menu li {
float: left;
}
#menu li a {
background: #69c;
display: block;
width: 120px;
color: black;
text-decoration: none;
text-align: center;
padding: 1em 0;
}
#menu li a:hover {
background: #fcc;
}


a écrit :
Au sujet de <br/> c'est la seule astuce que j'ai trouvé pour avoir deux div côte à côte paraissant de même longueur. Peut-être as tu quelque chose de meilleur à me proposer ?
Hmm que fais-tu lorsque l'utilisateur (par exemple mal voyant) choisit d'agrandir la police ?
C'ets tout à fait légitime de sa part et ce genre de bidouille qui repose sur une estimation de la taille de police tombe en ruine Smiley decu
Tu as un item de la FAQ qui explique comment faire des "colonnes" de même hauteur.

Mais dans ton cas, je ne pense pas du tout que tu en as besoin.
Je ne vois en fait qu'un seul bloc : il contient du contenu et une image de fond, tout simplement Smiley smile
Tu peux imposer une marge sous le contenu pour que le bloc s'étende un peu, mais il est inutile d'ajouter des balises HTML pour cela Smiley cligne

pekka a écrit :
Effectivement, c'est vrai que la balise alt est obligatoire pour les images. Je crois que je l'ai jamais mise... Je vais corriger ça! Merci
Oui, il s'agit d'une précaution minimale pour les visiteurs non-voyants par exemple.
Nous avons un salon reservé à l'Accessibilité web, qui est également un domaine qui fait partie des Standards actuels Smiley cligne
Modifié par Raphael (11 Dec 2005 - 17:58)
Merci beaucoup je vais tester tout ça !
J'ai déjà commencé à tester un peu le menu mais j'ai un peu mal. J'arrive pas à avoir le même rendu qu'avec un tableau...
Je continue à chercher !
j'y arrive vraiment pas !
Voilà mon code :

#sommaire {
	height: 35px;
	padding: 0;
	}
	
#sommaire ul {
	list-style-type: none;
	width: 100%;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	}

#sommaire li {
	float: left;
	width: 125px;
	height: 100%;
	}

#sommaire li a {
	background: #8EB8D7;
	height: 100%;
	color: black;
	text-decoration: none;
	text-align: center;
	padding: 1em;
	display: block;
	}

#sommaire li a:hover {
	background: #FFD3F0;
	}
<div id="sommaire">
<ul>
	<li><a href="index.php">Accueil</a></li>
	<li><a href="photos.php">Photos</a></li>
	<li><a href="description.php">Description</a></li>
	<li><a href="dispo.php">Disponibilités</a></li>
	<li><a href="modalites.php">Tarifs / Modalités</a></li>
	<li><a href="reservation.php">Réservation</a></li>
</ul>
</div>


Là mon sommaire s'insère pas comme il faut dans mon div. Il "déborde" par le bas. Vous savez comment je peux faire ?
Je vous rappelle que vous pouvez voir le résultat que je souhaite en cliquant sur le lien dans ma signature.

Merci pour votre aide.
Y a t il qq'un pour m'aider ?
Pour rappel, j'essaye de faire mon menu avec des "ul" et "li"
Voilà un lien où se trouve la page où je fais quelques tests :
http://fakhr.free.fr/test/

Ce serait vraiment gentil d'y jeter un coup d'oeil notamment pour :
- déplacer le menu un peu à gauche
- fixer une hauteur de 35 px !

En fait je voudrais exactement le même résultat que sur cette page : http://www.location-finistere.com qui utilise des tableaux au lieu des listes.

Merci beaucoup !

edit : j'ai modifié le titre du topic
Modifié par pekka (14 Dec 2005 - 17:15)
Modérateur
bonjour,
en modifiant ceci
#sommaire ul {
	list-style-type: none;
	width: 100%;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
margin:0;padding:0;
	}

#sommaire li {
	float: left;
	width: 125px;
	height: 15px;
font-size:0.8em;
	}
j'obtient dans firefox avec ma config d'affichage (taille normal et police Serif a 13 pixels). un menu ressemblant a celui du tableau.

j'ai redonné une taille au police pour eviter qu'elles passe sur 2 lignes, donner une dimension en pixel en hauteur a li et surtout mis les marges interieurs et exterieurs par defaut a zero pur ul.

Je doute que cela convienne aussi a IE ou a d'autre configurations, mais tu as deja une piste de la façon dont tu peut agir sur la liste et les textes / liens qu'elles contiennent ... le css est une histoire, de positionnement et dimension pour jouer sur la mise en page visuel d'un document.
....
a plus
Merci beaucoup,
Je vais tester ceci dès ce soir et je reviendrai poster un message pour te dire si ça marche.
Oh je te remercie beaucoup ça semble marcher ! Meme sous IE ! Smiley lol
Par contre c'est vraiment domage d'etre obligé de mettre une petite police alors qu'avec un tableau ne police plus grande passe sans pb...
Et si on fait qqch du genre :
display: table-cell;

ça peut mieux marcher ?

Merci pour votre aide!
Nan ça marche pas avec table-cell ... Smiley decu

Qq'un aurait une idée..? J'ai l'impression qu'il faut mettre le padding dans chaque "li" à zéro mais ça ne fonctionne pas.