Nul en html

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

Bsr

Hum !

Error 403 - Forbidden

L'accès au fichier requiert une autorisation.

sur ton lien

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

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

ok j'ai compris ce que tu m'as expliqué. mais je me pose une question: comment dire au css de tenir compte que d'un rectangle en particulier?

une image de fond se place dans le css : elle n'a pas d'existence propre c'est pourquoi on peut facilement écrire par dessus ;-)

tout autre image normalement se place dans le code HTML et se positionne comme tu l'as dit avec le css
sauf qu'en général on ne positionne pas directement l'image mais plutôt son conteneur.

Un conteneur est souvent une balise div. La balise div sert uniquement à délimiter de façon logique un ensemble de balises HTML. Un peu comme si tu dessinais sur une feuille de papier A4 au crayon plusieurs rectangles afin de délimiter l'espace réservé pour l'entête, le pied de page, le corps, le menu etc. A la fin tu te retrouves avec plusieurs rectangles sur ta feuille A4. Et bien en HTML chaque rectangle devient un div et chaque div est positionné via le css
Ensuite tu remplis chaque div avec du contenu c'est-à-dire d'autres balises HTML

Bon c'est simplifié à mort mais on va dire que c'est l'idée ...

ca fait plaisir la petite remarque sur la page que t'as fait !!!! t'as téléchargé les tapes ou pas?
ah wé t'es un bon toi respect !!! moi j'ai regardé le code source mais j'ai rien capté !! NUL EN HTML !!! mais bon j'ai, je crois, reussi a mettre mon fond... bon maintenant faudrait que je mette une banniere, alors dois-je inserer l'image dans le code html ou css? car si je dois la mettre dans le code html je sais pas la caler ou je veux sans le css...

Yes pour mettre du son tu dois intégrer un player mp3 Flash : celui que tu veux fera l'affaire mais il risque de dénoter avec le look de ton site

Par contre je ne vois pas où est le problème avec l'image de fond dans la mesure où sur le site d'origine donc celui avec du Flash l'image de fond c'est déjà de l'HTML : y'a plus qu'à recopier le code ;-)

La preuve :

http://www.nobodysperfect.freesurf.fr/brk/brk.htm

Toute ressemblance avec un site déjà existant ne serait que pure coïncidence !lol

Pour la police de caractère DaFont est ton ami : https://www.dafont.com/fr/aaaiight.font

Voilà t'as plus qu'à continuer

merci bcp de ton aide notobe, bonne nuit mon pote, PHP sache que le webmaster tkt pas quand je vais le recroiser ca va barder pour son matricule.... donc tu me dis que pour mettre du son je dois mettre du flash mais tu crois que je peux inserer un flashplayer comme pour ceux de myspace? car ca je sais les choper et les balancer dans le space..

Le problème d'une seule et unique image de fond : tu ne pourras pas t'adapter à toutes les résolutions : ceux qui ont un écran moins large que 1280px ne verront pas les bords de l'image, ceux qui ont des résolutions plus grandes auront des bords noirs.

Normalement... on évite un seule et même image en fond : on préfère faire un petite en répétition.
Mais bon...

Pour ce soir, ce sera tout pour moi : grosse fatigue et debout de bonne heure demain.
Bon courage ! :)

Bsr

un webmaster m'a fait ca en flash et maintenant que c'est l'heure des actulisations le gars a disparu donc je dois tout refaire ne possedant pas le fichier flash...

"Pas sympa" (<- ou autre qualificatif en fonction de ton humeur envers cette personne lol) ton webmaster il devrait qd même te filer les sources !
Si tu as payé tu aurais dû inclure une clause dans le contrat l'obligeant à te fournir les sources dès que celui-ci prend fin.

Enfin maintenant c'est trop tard ... mais sache que pour mettre du son sur ton site tu vas devoir utiliser du Flash !

ma banniere (et les autres elements d'ailleurs) vont dans le css ou le html?

ok bon je vois un peu le truc, c'est bizar quand mm qu'on puisse pas lui dire de se caler... le fond fait la taille pile expres, c dommage... le tuto que tu m'a donné notobe est pas mal explicite je regarde si je trouve pour centrer ma banniere quand-la-rue.png

Bon, pour que ton image se "déroule" en hauteur, il faut que tu mettes du contenu dans ta page html

Colle ça :

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>

et modifie un peu la CSS

body {
background:black url(images/fond.png) center center no-repeat;
color:white;
}

http://brk-lacompagnie.com

j'ai fais un css avec l'aide de notobe

j'ai changé le code depuis turkishman:

http://brl-lacompagnie.com

Voilà l' erreur :
<!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"> enlève ça stp ( c'est pk ça ? )
<p>écrit ici</p>
</body>
</html>

Il faut créer un css pour mettre ton image en fond ou t' as d'autre technique ...

c'est fait

Tu peux virer ton image de titre quand-la-rue ? on y voit rien, elle recouvre tout.

[edit : les grands esprits se rencontrent... ;) ]

faut ptre que je vire aussi l'image quand-la-rue.png pour le moment?