site en CSS. Par ou commencer?

Version imprimable

21/12/2006, 08h20
bontempf

[Résolu] site en CSS. Par ou commencer?

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
21/12/2006, 08h46
trotters213

:salut: et bienvenu,
voici un petit tuto pour débuter avec le CSS et la disposition : http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/
21/12/2006, 17h16
bontempf

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

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:

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....:roll:

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

Code:

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:

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

te sert à quoi ?

21/12/2006, 18h23
reg64

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
22/12/2006, 09h02
trotters213

:salut:
bè étant donné qu'après tu utilises float:left ou clear:both, non ça ne sert à rien :D
text-align tu peux le mettre dans le body putôt.
22/12/2006, 09h55
roudoudouduo

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
22/12/2006, 12h22
bontempf

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.

@+
22/12/2006, 15h58
reg64

salut,
Effectivement "position=relative" ne sert a rien...j ai testé est ca marche ...
merci trotters213...
26/12/2006, 17h45
Zan

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

c'est différent :)
27/12/2006, 14h27
reg64

Citation:

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...
27/12/2006, 17h49
trotters213

Citation:

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 ;)
28/12/2006, 09h13
Zan

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

merci de m'avoir corrigé ;)
03/01/2007, 14h39
bontempf

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
04/01/2007, 13h49
bontempf

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

Quelqu'un peut-il m'aider?

Merci beaucoup,
Florian