Sujet Précédent Sujet Suivant

Nul en html

Fermé
JustBrako Messages postés 152 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 9 mars 2014 - 15 déc. 2009 à 19:49
JustBrako Messages postés 152 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 9 mars 2014 - 19 déc. 2009 à 02:07
Bonjour,
j'essaie de creer mon site internet (du moins de le refaire a l'identique en html au lieu de flash) je suis le truc du zerodunet et des le debut je comprend pas! juste un fond pour commencer et ca s'affiche pas ! voila mon code si on peut me dire pkoi... merci d'avance..

<!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" xml:lang="fr" >
<head>
<title>BRK Online</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<body background="http://brk-lacompagnie.com/brkonline/visuels/page1/fond.png">
</body>
</html>
A voir également:

44 réponses

Précédent
Réponse 41 / 44
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
16 déc. 2009 à 11:59
Bjr

Excellent question ! Et bien en fait c'est facile ... mais comme toujours seulement lorsqu'on sait comment faire !

Pour cibler un élément avec le CSS il existe 2 possibilités :

- attribuer une identifiant unique à l'élément via l'attribut id puis définir un sélecteur CSS indépendant pour cet identifiant.

- utiliser une classe sur l'élément via l'attribut class puis définir un sélecteur CSS pour cette classe.

La première solution est préférable lorsqu'on veut cibler un élément unique car une même classe peut être appliquée à plusieurs éléments HTML.

Voici un ex basique avec 3 div qui se suivent représentant une tête de page (header), un contenu (main) et un pied de page (footer). 


<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <title>Test DIV</title>
</head>
<body>
	<div>
		<p>Header</p>
	</div>
	<div>
		<p>Main</p>
	</div>
	<div>
		<p>Footer</p>
	</div>	
</body>
</html>


Rien de révolutionnnaire et le rendu sur un navigateur non plus : ça donne 3 lignes en noir sur fond blanc


Maintenant je veux que mon entête fasse 100px de haut, le contenu 200px et le pied de page 40 px.
Voici ce que ça donne avec les identifiants "header", "main" et "footer" (l'anglais n'est pas obligatoire lol) et le CSS avec les sélecteurs indépendants.

Note les id uniques ne sont finalement que des chaînes de caractères 

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <title>Test DIV</title>
	<style>
		#header
		{
			height : 100px;
		}

		#main
		{
			height : 200px;
		}	
		
		#footer
		{
			height : 40px;
		}
	</style>
</head>
<body>
	<div id="header">
		<p>Header</p>
	</div>
	<div id="main">
		<p>Main</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>	
</body>
</html>


Note que les sélecteurs indépendants ou encore basés sur les identifiants reprennent le nom de chaque identifiant en le préfixant par #


Avec les classes : 

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <title>Test DIV</title>
	<style>
		.header
		{
			height : 100px;
		}

		.main
		{
			height : 200px;
		}	
		
		.footer
		{
			height : 40px;
		}
	</style>
</head>
<body>
	<div class="header">
		<p>Header</p>
	</div>
	<div class="main">
		<p>Main</p>
	</div>
	<div class="footer">
		<p>Footer</p>
	</div>	
</body>
</html>



cette fois on utilise l'attribut class dans les balises div. les sélecteurs CSS de classe reprennent le nom de la classe préfixé par un point ou encore "*." ce qui revient au même ;-)
Ici la classe peut être appliqué à tous les éléments HTML.
Si on est puriste et qu'on veut la réserver qu'aux seuls éléments div, alors on peut ajouter div devant le point 

		div.header
		{
			height : 100px;
		}


Naturellement le rendu est le même mais il vaut mieux utiliser la version avec les id plutôt que de multiplier les classes pour les rendre uniques.


Maintenant je veux ajouter une bordure rouge à chaque div afin de bien visualiser la région qu'il occupe sur ma page : allez hop CSS in action 

<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
    <title>Test DIV</title>
	<style>
		div {
			border-style : solid;
			border-color : #FF0000;
			border-width : 1px;
		}		
	
		#header
		{
			height : 100px;
		}

		#main
		{
			height : 200px;
		}	
		
		#footer
		{
			height : 40px;
		}
	</style>
</head>
<body>
	<div id="header">
		<p>Header</p>
	</div>
	<div id="main">
		<p>Main</p>
	</div>
	<div id="footer">
		<p>Footer</p>
	</div>	
</body>
</html>


Ici on pourrait bien sûr ajouter les propriétés des bordures dans chaque sélecteur CSS. Mais y'a plus simple : je définie un style directement pour tous les éléments HTML div et en css il suffit de le nommer div pratique ;-) (ça s'apparente à la notion de sélecteur de classe)
Tu noteras que non seulement les formats définis dans le selecteur div sont appliqués mais aussi ceux définis dans les sélecteurs indépendants : hé oui avec le CSS, les formats (ou styles) sont appliqués en cascade : les styles se cumulent ou bien se substituent les uns les autres selon l'ordre dans lequel ils apparaissent dans la page. C'est pas pour rien que ça s'appelle Cascading Style Sheets !

Peut-on mixer sélecteur indépendant et sélecteur de classe ? oui mais ça devient vite complexe !

Pour tout savoir sur les sélecteurs CSS et aller plus loin : http://fr.selfhtml.org/css/formats/global.htm

Pour tout savoir sur le positionnement en CSS : https://openweb.eu.org/articles/initiation_absolue
0
Réponse 42 / 44
JustBrako Messages postés 152 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 9 mars 2014 10
16 déc. 2009 à 20:12
alors j'ai bien eu ton message mais j'ai pas vraiment compris....j'ai reussi a faire ce que je souhaitais quand meme, si tu peux aller voir le resultat et me dire si tout vas bien ce serait sympa:

site d'origine:
http://brk-online.com

site copié:
http://brk-lacompagnie.com

merci
0
Réponse 43 / 44
PhP Messages postés 1767 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
18 déc. 2009 à 20:54
Bsr

Hum !

Error 403 - Forbidden

L'accès au fichier requiert une autorisation.


sur ton lien
0
Réponse 44 / 44
JustBrako Messages postés 152 Date d'inscription samedi 12 décembre 2009 Statut Membre Dernière intervention 9 mars 2014 10
19 déc. 2009 à 02:07
hum
c'est certainement parce que je l'ai balancé en ligne !! lol
sur http:brk-online.com c'est le bon mon site fabriqué de mes doigt et de vos cerveaux !! lol merci a vous et dis moi ce que t'en pense quand meme PhP...
0

Discussions similaires

Espace en HTML
baissaoui -
baissaoui -

0 réponse
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Image cliquable dans html
pau -
efS -

5 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses