Validation CSS

calimo · Message par **calimo** » 13 juil. 2004, 09:32

Ton tableau semble en effet ici pour le mise en forme, ce qui n'est pas le rôle des tables... les documents pointés par Monique devraient te permettre de t'en passer définitivement

pingu · Message par **pingu** » 13 juil. 2004, 15:24

Ben je vois pas trop cmt faire pour avoir ce que je veux sans tableau...

Exemple : http://rocknation.free.fr/adolina/disco/farrago.php
(C'est une ancienne version, je n'est pas encore mis en ligne les changements que j'ai effectué sur le CSS)

calimo · Message par **calimo** » 13 juil. 2004, 16:09

Les tableaux sont prévus à la base pour présenter des séries de données tabulaires. Ils ont été détournés à des fins de mise en page lorsque les border=0 et companie sont arrivés, mais ce n'est pas une raison de continuer à les utiliser.
La mise en page, c'est la feuille de style qui le fait. Théoriquement (en tous cas dans les variantes strictes des doctypes html 4 et xhtml 1.0), il n'est pas sensé y avoir de balises de mise en forme dans le code de la page.$

Pourquoi ne pas utiliser les tableaux ? Parce que c'est lourd, compliqué et que ça rend les pages inaccessibles.

Avec le CSS2 tu peux faire des mises en formes non seulement bien plus précises qu'avec les tableaux, mais aussi beaucoup plus accessibles.
Regarde par exemple http://alsacreations.com/articles/ il y a des modèles de mise en page, mais tu peux aussi créer toi-même ton propre modèle original.
La lecture de ces articles devrait se suffire à elle-même, si tu as d'autres questions n'hésite pas à les poser on est là pour ça

pingu · Message par **pingu** » 13 juil. 2004, 17:17

Chui entrain d'essayé, c'est compliqué pour qqn qui utilise les tableaux depuis tjrs

calimo · Message par **calimo** » 13 juil. 2004, 17:26

C'est sûr !

Ce n'est malheureusement jamais facile de changer ses habitudes, mais c'est comme ça.
Mais ça en vaut la peine. Ton code source sera plus clair, ce sera plus facile de le mettre à jour... je dois te dire que j'apprécie tous les jours de ne plus avoir à me soucier de la mise en page

Je ne sais pas trop où tu te situe, mais je te conseille la lecture de l'article Les feuilles de style. Si ça te parait trivial tant mieux

, les liens en bas de page sont très utile aussi

(et un peu plus avancés)

pingu · Message par **pingu** » 13 juil. 2004, 18:09

Je fais un test pour voir cmt faire pour faire égal ac ce que j'avais fait ac des tableaux. Mais les minutes passe à la deuxième ligne.

Ce que je veux faire

Le CSS

La page de test

calimo · Message par **calimo** » 13 juil. 2004, 18:40

Déjà pour nommer tes classes, utilise quelque chose de plus sémantique que gauche et droite (je pinaille mais c'est déjà de la mise en forme

).
Trouve des noms du genre .image, .playlist, .sortie, .producteur ou .minutes. Sinon le jour où tu voudra mettre tes minutes à gauche ce sera fichu

Ensuite je pense (mais je peux me tromper

) que tu aurais meilleur temps d'utiliser les float:left et float:right. Attention aussi à position: fixed; qui va rester fixé lorsque la page défile.
Attention aussi au doctype qui peut faire basculer le navigateur dans le mode quirk ou standard, ce qui provoque forcément des problèmes.

Tu peux essayer avec quelque chose du genre :
CSS:

Code : Tout sélectionner

#playlist {
	background-color:#9999CC;
}

#image {
	background-color: red;
	float:left;
	width:20%;
}

#minutes {
	background-color: yellow;
	float:right;
	width:10%;
	height:5em;
}

#centre2 {
	background-color:green;
}

#producteur {
	background-color: pink;
	float:left;
	width:20%;
}

HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
<title>ROCKNATION</title>
</head>

<body>
	<div id="image">
	IMAGE
	</div>

	<div id="minutes">
	MINUTES
	</div>

	<div id="playlist">
	playlist (centre)
	</div>

	<div id="producteur">
	producteur
	</div>

	<div id="sortie">
	sortie
	</div>
</body>
</html>

pingu · Message par **pingu** » 13 juil. 2004, 20:49

Wé je sais pour les noms c'été pour le test. J'ai modifié un peu ton code, tout marche, le seul problème c'est que border-spacing marche pu. Alalalala que c'est dur de faire du bon code

Enfin j'aurais appris bcp de chose sur le CSS

Est ce que le border-spacing marche pas ac les div? Il y a un équivalent ou je vais devoir mettre des marges un peu partout?

Le nouveau CSS :

Code : Tout sélectionner

#playlist {
   border: 1px solid #000000;
}

#image {
   border: 1px solid #000000;
   float:left;
   width:200px;
}

#minutes {
   border: 1px solid #000000;
   float:right;
	width:60px;
}

#producteur {
   border: 1px solid #000000;
   float:left;
   width:200px;
}

#sortie {
	border: 1px solid #000000;
	margin-right:60px;
}

div {
	padding: 3px 3px 3px 3px;
	border-spacing: 3px 3px;
}

calimo · Message par **calimo** » 13 juil. 2004, 21:20

Oui, ça n'a aucun sens en dehors des tableaux

Tu peux mettre des margin en effet, par exemple 1px pour chaque bloc

pingu · Message par **pingu** » 15 juil. 2004, 22:41

Ca avançe

pingu · Message par **pingu** » 20 juil. 2004, 14:54

Me revoilà

,
J'ai plus où ce que je voulais au départ, il ne me manque juste qu'un petit truc. Est ce que qqn c'est comment fait t'on pour que les div, qui sont sur la mème ligne, est la mème hauteur?

Ma page :

http://rocknation.free.fr/testdiv.php

Le CSS :

http://rocknation.free.fr/test.css

jv2759 · Message par **jv2759** » 20 juil. 2004, 14:57

Je pense qu'il faut les inclure dans un autre div et lui dire d'ocuper 100% de la place. Et rien indiquer pour le div conteneur.

Ainsi le plus grand des div vas etirais le div conteneur. Et le second div vas lui aucuper tout la place...

pingu · Message par **pingu** » 20 juil. 2004, 15:03

Si j'ai bien compris, je met ma première ligne de div ds un autre div tout simple (conteneur par exemple). Pis je remet le div conteneur ds un autre div (petitpapanoel par exemple) ac comme propriété height: 100%.

C'est ça ou j'ai rien pigé?

pingu · Message par **pingu** » 23 juil. 2004, 01:11

J'ai rien pigé, ça marche pas, j'ai essayé autre chose.

Mettre les div de image, playliste et minutes dans un div, puis mettre le height de image a 100% > marche pas

Mettre les div de image, playliste et minutes dans un div, puis mettre le height de image a 400px (par exemple) > marche pas, le div image dépasse, je croyais qu'il aller rester a la meme hauteur que les autres mais non

DJiK · Message par **DJiK** » 23 juil. 2004, 10:08

http://openweb.eu.org/articles/initiation_float/

Geckozone

Validation CSS

Qui est en ligne ?