site en CSS. Par ou commencer?

**bontempf** · 21/12/2006, 08h20

Bonjour,

Mon site est actuellement en PHP et j'aimerais le reprendre à zéro pour le mettre en CSS.
J'ai parcouru les cours diponibles sur le CSS, mais je ne sais pas par ou commencer:
www.ecologeii.dafun.com

J'utilise actuellement des tableaux, et j'aimerais avoir la même disposition mais en CSS.

Sur mon site actuel, j'ai une bordure noire qui contourne l'ensemble du site. Comment puis-je réaliser ceci en CSS?

Comment est il possible de mettre un espace fixe entre deux menux.
J'ai réaliser plusieurs menu en CSS et je les appels avec div

Merci beaucoup,
Florian

**trotters213** · 21/12/2006, 08h46

et bienvenu,
voici un petit tuto pour débuter avec le CSS et la disposition : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

**bontempf** · 21/12/2006, 17h16

Oui merci, c'est de ce tutorial que je m'inspire.

Mais mon souci, c'est comment faire un cadre autour du site (un contour qui encadre le bandeau, le pied de page, le menu, le contenu etc...(un seul contour)?

Merci d'avoir répondu

**reg64** · 21/12/2006, 17h30

salut,
je me sui inspérer aussi de ce tuto et j ai fais exactement la meme chose que toi(En fin si j ai bien conpris ton problème...)
code css:

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
 
div {
 
	position:relative;
	text-align:center;
 
	}
div#cadre{
	width:915px;
	height:auto;
	border-style:solid; 
	border-width:3px; 
	border-color:black;
	margin-left:auto;
	margin-right:auto;
 
}
 
div#bandeau {
	margin-left:0px;
 
	border-style:solid; 
	border-width:1px; 
	border-color:black;
	width:750px;
	background-color:#eeeeee;
	}
div#menu {
	border-style:solid; 
	border-width:1px; 
	border-color:black;	
	float:left;
	width:140px;
	height:auto;
 
	background-color:#bbbbbb;
	}
div#contenu {
 
	float:left;
	width:600px;
	background-color:#cccccc;
 
	}
 
div#image {
 
	border-style:solid; 
	border-width:1px; 
	border-color:black;
	float:left;
	width:165px;
	height:auto;
	background-color:#bbbbbb;
 
	}
 
div#pied_page {
	clear:both;
	width:850px;
 
	}

puis:
<div id="cadre">
....tes autres div
</div>
ben je balance ca ou cas ou....

**trotters213** · 21/12/2006, 18h02

À noter que tu peux largement diminuer la taille de sa feuille de style :

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
34
35
36
37
38
39
40
41
42
div {	
position:relative;
text-align:center;	
}
 
#cadre{
width:915px;
border:solid 3px #000;
margin:0 auto;
}
 
#bandeau {
margin-left:0px;	
border:solid 3px #000;
width:750px;
background-color:#eee;
}
 
#menu {
border:solid 3px #000;
float:left;
width:140px;
background-color:#bbb;
}
 
#contenu {
float:left;
width:600px;
background-color:#ccc;
}
 
#image {
border:solid 3px #000;
float:left;
width:165px;
background-color:#bbb;
}
 
#pied_page {
clear:both;
width:850px;
}

PS : ceci

Code :

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

1
2
3
4
div {	
position:relative;
text-align:center;	
}

te sert à quoi ?

**reg64** · 21/12/2006, 18h23

salut,
position: relative, sert a positionner mes div, si je met absolute a la place mes div se mettent les un sur les autres, et align-texte:center sert a aligner le contenu des divs (centre).
corrigez moi si je me trompe.

ps: je suis debutant

**trotters213** · 22/12/2006, 09h02

bè étant donné qu'après tu utilises float:left ou clear:both, non ça ne sert à rien

text-align tu peux le mettre dans le body putôt.

**roudoudouduo** · 22/12/2006, 09h55

PHP et CSS n'ont absolument rien à voir dailleurs on ne fait pas un site en "css"
Il y'a le code serveur existant ou non (plutot utilisé pour la consultation de base, la gestion de comptes etc)
Code serveur : php, asp, servlet etc...
La description des pages : HTML, XHTML, DHTML
La présentation des pages : CSS
Le code exécutée sur le navigateur client : Javascript
Ce type de logique est utilisé notammant dans AJAX : http://developer.mozilla.org/fr/docs/AJAX

Identifie bien tes besoins avant de te lancer dans une nouvelle rédaction on ne fait pas un site suivant un langage mais on utilise un langage pour résoudre un problème

**bontempf** · 22/12/2006, 12h22

Bonjour,

Merci pour tes précisions roudoudouduo.

reg64, Oui c'etait ça mon problème, en fait, c'est dans mon code php que je dois appeller le cadre.

J'essai ça ce week-end et vous tiens au courant.

@+

**reg64** · 22/12/2006, 15h58

salut,
Effectivement "position=relative" ne sert a rien...j ai testé est ca marche ...
merci trotters213...

**Zan** · 26/12/2006, 17h45

Ce n'est pas qu'il sert à rien, mais âr défaut, une div est "relative"

c'est différent

**reg64** · 27/12/2006, 14h27

Envoyé par Zan

Ce n'est pas qu'il sert à rien, mais âr défaut, une div est "relative"

c'est différent

Ahhh ok...merci pour la précision...

**trotters213** · 27/12/2006, 17h49

Envoyé par Zan

Ce n'est pas qu'il sert à rien, mais âr défaut, une div est "relative"

c'est différent

Non, c'est faux.
Par défaut une div est dans le flux or les élément en position:relative sont hors du flux donc une div n'est par défaut [edit]PAS[/edit]en position:relative

**Zan** · 28/12/2006, 09h13

Ouaou alors là tu m'apprends un truc !!

merci de m'avoir corrigé

**bontempf** · 03/01/2007, 14h39

Bonjour et bonne année,

Voici ce que j'ai réalisé grace aux tutoriaux:

www.ecologeii.dafun.com

J'ai un souci; je n'arrive pas à centrer les titres des menu dans la hauteur.
Par exemple le titre "Informations" est trop collé au cadre.

J'ai essayé en insérant des margin-... mais sans succès, ça me décalle toujours le cadre ou l'image du cadre.

Comment puis-je procéder?

Merci beaucoup,
Florian

**bontempf** · 04/01/2007, 13h49

ça ne marche pas non plus avec les balise height="" .

Quelqu'un peut-il m'aider?

Merci beaucoup,
Florian

site en CSS. Par ou commencer?

CSS

Discussions similaires

Partager

Partager