Discussion :

[GogNav]

Ca l'air tellement simple quand on lit les tutoriaux mais quand il s'agit de le faire soi-même

Voici ce que j'ai pour l'instant :


Les couleurs moches, c'est voulu hein

Voici le code :

Code :

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
24
25
26
27
28
div {
  	width: 259px;
  	/* height: 500px; */
  	border: 1px solid black;
  	background-color: yellow;
}
 
div#menuhaut p {
	text-align: center;
  	color: black;
  	width: 35px;
	float: left;
}
 
div#menubas {
	clear:both;
	background-color: #33FF00;
}
 
div#date {
	clear:both;
	background-color: #FF0000;
}
 
div#basdepage {
	clear:both;
	background-color: #FF33CC;
}

Code :

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
<div>
	<div id="menuhaut"> 
		<p>lun</p>
		<p>mar</p>
		<p>mer</p>
		<p>jeu</p>
		<p>ven</p>
		<p>sam</p>
		<p>dim</p>
	</div>
	<div id="menubas">
		<p>hello world</p>
	</div>
	<div id="date">
		<p>hello world</p>
	</div>
	<div id="basdepage">
		<p>hello world</p>
	</div>
</div>

Pourquoi c'est tout moche? L'idée est suivante :
Dans la première case, j'aimerais les nom des jours sur une ligne, et la ligne suivante, un "<form>". Ils doivent être mis dans 2 divs différentes? Pourquoi la bordure supérieure est moche?

C'est juste l'utilisation des <p> ? Dans la partie rouge, je vais ajouter les dates des jours... et pour chaques date je l'aurais encadré comme pour les jours de la semaine. C'est correct?

L'espoir fait vivre... mais j'aimerais arriver à ça :



Facile à faire en tableau... en div beaucoup moins

[Bisûnûrs]

Tu devrais commencer par mettre

Code :

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

1
2
3
4
* {
   margin:0;
   padding:0;
}

tout en haut de ta feuille de style.

[Candygirl]

Perso l'utilisation d'un tableau me semble adaptée pour la présentation de ton calendrier. Tu as des colonnes qui représentent les jours de la semaine avec le libelé en en-tête du tableau et chaque ligne représente une semaine = ce que j'appellerais un tableau à double entrée.

Par contre je sortirais du tableau la partie qui permet de changer de mois, de même que le bas.

[GogNav]

Je pensais aussi ... le problème, c'est que j'essaie de mettre à jour le calendrier par ajax, et que dans mon td, j'avais mis par exemple <div id=...>

et quand je met à jour... bah les dates s'affichent tout en haut de la page, je pensais donc que je devais tout faire en div car il me semblait que le div s'affichait "avant" les tables, td, ...

Code :

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
<div>
	<p>lun</p>
	<p>mar</p>
	<p>mer</p>
	<p>jeu</p>
	<p>ven</p>
	<p>sam</p>
	<p>dim</p>
	<div id="menu2">
	   <form> 
                .........
               </form>
             </div>
	<div id="calendar">
	</div>
	<div id="basdepage">
	<p>hello world</p>
	</div>
</div>

Code :

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
24
25
26
27
28
29
30
31
32
33
div {
  	width: 259px;
  	border: 1px solid #FF6600;
	margin:0;
   	padding:0;
} 
 
div p {
	text-align: center;
	color: black;
	width: 35px;
	float: left;
	background-image: url(cellpic3.gif);	
	border: 1px solid white;
}
 
div#menu2 {
	clear: both;
	width: 257px;
	text-align: center;
	background-color: #33FF00;
	background-image: url(cellpic3.gif);	
}
 
div#calendar p {
	clear:both;
	background-color: #FF0000;
}
 
div#basdepage {
	clear:both;
	background-color: #FF33CC;
}

Pourquoi c'est différence? Pourquoi le blanc autour des jour? Pour le hello world est en dehors du div principale ?


EDIT : Ok j'ai mis ta proposition tout en haut et pas dans le div, c'est déjà beaucoup mieux. Je n'avais pas pensé aux marges. Merci.

Je suis plus proche de la solution avec IE que FF... un comble

EDIT : ta manip enlève les marges de mes select... et donc ils sont un peu tronqué. Y'a moyen de modifier cela ?

[GogNav]

Super, j'avais oublié les <td> autour de ma div et c'est pour ça que cela ne marchait pas jusqu'à maintenant.

Mais maintenant que je suis lancé, continuons ! J'aimerais comprendre une fois pour tout le positionnement des div.

Lorsqu'on a ceci :

<div>
<div id="toto">
<p>hello world</p>
</div>
<div id="tutu">
<p>hello world</p>
</div>

</div>

et que dans notre css, on a

div {

}

div#toto p {

}

div#tutu p {

}


J'ai l'impression que le 2ème <p> prend toutes les configs, du div, div toto et div tuto. Je me trompe? Comment séparer?

[blueice]

Petit rappel (peut toujours servir) :

Ecrire les sélecteurs 'class' et 'id' sans le nom de l'élément

Quand vous écrivez un sélecteur qui pointe sur un élément avec une certaine "classe" ou "id", vous pouvez omettre l'élément devant le ( . ) ou ( # ).

Donc à la place d'avoir :

Code css :

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

1
2
div#contenu { ... }
fieldset.details { ... }

vous avez :

Code css :

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

1
2
#contenu { ... }
.details { ... }

ainsi vous allez économiser quelques octets pour chaque sélecteur.

C'est particulièrement utile pour les sélecteurs "id" puisqu'ils sont uniques dans un document, ce qui réduit le risque de conflits avec les autres. les "class" peuvent être utilisées autant de fois que l'on veut dans un document et différents types d'éléments peuvent avoir la même "class". Pour styler différement des types d'éléments avec la même "class", vous aurez besoin de spécifier chaque type dans le sélecteur.

Mais attention que ces règles ne sont pas identiques. Si vous écrivez une règle avec un type d'élément et une sans, la règle qui utilise le type d'élément sera prioritaire.