Sujet Précédent Sujet Suivant

Integrer une css dans un code html

Fermé
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011 - 27 oct. 2009 à 18:30
ARMAND3 Messages postés 115 Date d'inscription jeudi 14 février 2013 Statut Membre Dernière intervention 26 décembre 2015 - 12 déc. 2015 à 16:41
Bonjour,
Depuis le Faso Natal, je m'aventure dans les langages de progammation (HTML, CSS, PHP) que j'aime découvrir et apprendre. J'ai appris gentillement HTML avec le site du zéro et bien d'autres tutoriels. Je comprends un peu. J'ai abordé CSS...J'ai telechargé notepad++ et j'ai pu codé et affiché ma première page web. Génial WAOUUH!!

Seulement avec des photos je ne peux pas les afficher, en lieu et place y a un petit carré avec ce (x) au milieu avec du texte tapé en ALT. J'ai besoin de vos aides:

-1 Où tirer l'adresse URL d'une photo (SRC où???) afin de l'importer sur mon éditeur notepad++ ??
-2 Est t il possible de le faire sans publier le site et comment publier un site fait avec notepad++???? par ftp? comment possible pour parametrer sur notepad???
Je signale que les photos sont sur mon pc ( exemple:D:\mes photos fin 2008\école..)
-3 comment faire des liens relatifs entre les pages sur notepad++??BESOIN DE VOS AIDES AH OUI ...

En plus selon bcp de tutoriels on utilise css pour mieux pésenter les contenus HTML...Voilà ce que j'ai codé sur ma page css entre les balises <head> et </head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1-0 strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> mon exploit css </title>
<link rel="stylesheet" style="text/css" href="styles_div.css" medias="all/>
div{text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
}
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="contenu">Ceci est le contenu</div>
<div id="piedpage">Ceci est le pied de page</div>
</body>
</html>

Malgré tout tout ce blablabla je croyais avoir des bandeaux mais sur cette page je vois seulement ça:
Ceci est le bandeau
Ceci est le contenu
Ceci est le pied de page

Pouvez vous m'aider à trouver des solution à mes problèmes ou connaissez-vous des logiciels qui pouraient m'être utiles ???

Comment dois je procéder SVP!

Merci pour vos aides nombreuses et rapides

Bonne soirée!
A voir également:

9 réponses

Réponse 1 / 9
Utilisateur anonyme
27 oct. 2009 à 19:58
Il faut créé un fichier .css et tu mets dedans tous ce qui est css
Pour ftp, utilise Filezilla
1
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
27 oct. 2009 à 22:24
Hello pyl159,
Merci pour ta réponse si rapide mais je m'excuse peux tu m'approfondir ta réponse STP?
Pour créer ce fichier.css dont tu parles est ce qu'on doit taper des codes HTML sur Notepad++ et après on choisit css dans le menu langage?? Si oui j'ai procédé comme cela main en vain.. Pourrais tu me mettre une capture d'écran?? cela m'aiderait bien plus....

Est ce que tu peux aussi me guider sur le codage des photos via mon pc vers notepad++??

Merci de ton aide si précieuse

Bonne soirée!
0
Réponse 2 / 9
moroccovich Messages postés 97 Date d'inscription vendredi 19 décembre 2008 Statut Membre Dernière intervention 24 avril 2010 16
28 oct. 2009 à 00:19
First:
choisi le chemin de fichier "CSS" :

<head>

<link rel="stylesheet" type="text/css" href="chemin"/>

</head>

puis : tu va mettre ton code css au sein de fichier "CSS"
1
Réponse 3 / 9
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
28 oct. 2009 à 04:59
le fichier css est un fichier comme les autres, sauf que tu n'a pas besoin de rajouter des balises html, head et body

tu met seulement ceci (par exemple) 
div{text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#contenu {
width:600px;
height:400px;
background-color:#FFCC00;
}
div#piedpage {
width:600px;
height:50px;
background-color:#33FF99;
}


et ensuite dans tes pages html pour l'appeler tu met cette ligne 

<link rel="stylesheet" style="text/css" href="le_chemin_vers_ton_fichier_styles_div.css" medias="all/>


le code css n'est pas a proprement parler un langage, tu le tape comme tu taperais du html avec notepad
quelques precisions :
les elements commençant par # correspondent à des ID, ils doivent etre unique dans ta page

les elements commençant par . correspondent à des class, il peut y en avoir plusieurs

en ce qui concerne tes images verifie que le chemin que tu utilse est le bon,parfois il manque un ../ ou alors y'en a un en trop

en esperant t'avoir eclairé un peu
1
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
28 oct. 2009 à 14:16
Bonjour lewis34,

Merci pour ton eclaircissement, pour le moment je n'ai pas pu appliquer ce que tu m'as montré car j'étais en cours pour mon bachelor...Je crois que ce soir je vais le faire et je te tiendrai au courant de la suite.
Bonne journée!!!!!!!!
0
Réponse 4 / 9
moroccovich Messages postés 97 Date d'inscription vendredi 19 décembre 2008 Statut Membre Dernière intervention 24 avril 2010 16
28 oct. 2009 à 16:16
pour plus d'informations sur le Cascading Style Sheets.
===> www.cssdebutant.com
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
30 oct. 2009 à 15:26
salut je tatonne toujours entre code html et css pour organiser le contenu de ma première page web. Klk1 m'a conseillé le cssdbutant que j'ai lu attententivement, on dit que des codes html comme les <html> <head> <body> sont importants. J'ai essayé mais en vain car je voudrais d'abord découper ma page en bloc ensuite ce code: <link rel="stylesheet" style="text/css href="style/sytle.css"/> après ce code commencer à écrire des codes css???

Est ce que qu'un aurait la volonté de débuter le codage pour avoir 4 bloc (entete, corps, menu, pied de page) pour moi SVP??

Merci bcp!
Je compte sur vous...
0
Réponse 6 / 9
lewis34 Messages postés 2557 Date d'inscription samedi 21 juillet 2007 Statut Membre Dernière intervention 30 mai 2015 352
30 oct. 2009 à 19:25
rien ne vaut la pratique, c'est en forgeant qu'on deviens forgeron

regarde ici
http://www.alsacreations.com/static/gabarits/liste.html

choisi toi un gabarit et retape les codes, ne fait pas un simple copier collé

pour t'aider

ta page doit etre struturée comme ça 
<!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">
<!-- le doctype tres tres important-->
<head>
<!-- a partir de la entre <head> et </head> tu met  des fonctions javascript,  les liens vers ton ou tes feuilles de style et les balises meta-->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>
		LE TITRE DE TA PAGE
	</title>
	<link rel="stylesheet" type="text/css" href="styles/base.css" media="all" />
	<link rel="stylesheet" type="text/css" href="meta/styles.css" media="screen" />
</head>

<body >

<!--le contenu de ta page proprement dit ou tu met tes div,tableaux, texte et images-->
</body>
</html>
0
Réponse 7 / 9
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
2 nov. 2009 à 14:38
Quels scripts JAVA faut il integrer entre les feuilles de styles pour faire des blocs svp!
Quelqu'un aurait la volonté de les me écrire?? Je n'y connais rien...

Merci de votre réponse si precieuse! Bon app
0
notobe
4 nov. 2009 à 10:27
Des scripts java ???? Il doit y avoir une petite confusion de ta part là. Java n'a absolument rien à voir là dedans :-D

La définition de blocs se fait en css, et t'a déjà donné plein de liens pour aller apprendre ce langage et comment l'intégrer à ta page html.
Alsacréations cité plus haut est très bon pour ça (si ce n'est le meilleur).

Sinon, tu as aussi CSS débutant dont ce tutoriel explique comment faire des blocs http://css.mammouthland.net/mise-en-page-sans-tableau.php#aveccss et comment on enregistre les styles pour des pages html http://css.mammouthland.net/feuille-de-style-css-debutant.php#record
0
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011 > notobe
5 nov. 2009 à 00:24
Bonsoir merci pr ta note, j'ai vraiment de sérieux problème de compréhension.
Ecoute STP tu peux verifier mes codes??? Je l'ai ecrit dans notepad++ et enregistré d'abord sous le langage html. Voilà ce que le navigateur me présente:
body {
background-color:white;
margin:0px 0px 0px 0px;
} h1 {
font-family:verdana, sans-serif;
font-size:100%; color:black;
background-color:transparent;
text-align:left;
} h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h3 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:100%; color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
font-family:verdana, sans-serif;
font-size:100%;
color:black; text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}

Alors si je l'enregistre sous le langage css, je tente voir sur le navigateur ça me présente un nsimple bloc-note avec du codage toujours comme cela:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=charset=UTF-8"/>
<title>ccs test</title>
<link rel="stylesheet" type="text/css" href="styles/base.css" media="all"/>
<link rel="stylesheet" type="text/css" href="meta/styles.css" media="screen"/>
body {
background-color:white;
margin:0px 0px 0px 0px;
} h1 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h2 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
} h3 {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
}
p {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:visited {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
a:hover {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
font-family:verdana, sans-serif;
font-size:100%;
color:black;
text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}
</head>
</body>
</html>
...Je ne sais plus comment procéder...bien que j'ai parcouru attentivement le cssdébutant...Je suis au bord de l'abandon toutes les 2 présentations sont identiques
Si tu peux m'aiguiser encore plus...
Merci d'avance!! Bonne nuit!
0
notobe > mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
5 nov. 2009 à 09:34
C'est pas banal ça... c'est pourtant bien expliqué, mais tu n'appliques pas ce qui est indiqué...
C'est sûr que de la façon dont t'y prends, ça ne peut pas fonctionner.

Alors, on va y aller pour une feuille de style interne pour l'instant, on verra l'externalisation plus tard (car là, tu mélanges les 2, mais pas de façon correcte.)

Tes styles internes doivent être dans les balises style : 

<style type="text/css">
[...]
</style>


Et ça, c'est à placer dans les balises <head></head>

Petite remarque : pas la peine de répéter à chaque fois la font de caractère utilisée puisque c'est tjs la même. Tu la déclares dans le body, et par héritage, tous les autres éléments vont en bénéficier. Par contre, si tu déclares tout en noir (color:black), ça va être un peu tristounet, et tu ne vas pas voir l'intérêt de déclarer des styles...

Et dans le code html, et bien tu mets du code html ! S'il n'y a rien, aucun des styles ne peuvent être appliqués !

Donc, on résume, tu colles tout ce code dans une nouvelle page (j'ai modifié quelques couleurs, tu changeras après à ta convenance : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=charset=UTF-8" />
<title>CSS test</title>
<style type="text/css">
body {
background-color:white;
margin:0px 0px 0px 0px;
font-family:verdana, sans-serif;
font-size:100%;
color:black;
}
 h1 {
background-color:transparent;
text-align:left;
color:red;
} 
h2 {
color:black;
background-color:transparent;
text-align:left;
color:blue;
} 
h3 {
background-color:transparent;
text-align:left;
color:green;
}
p
{
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
li 
{
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;
}
a:link {
background-color:transparent;
text-decoration:underline;
}
a:visited {
background-color:transparent;
text-decoration:underline;
}
a:hover {
background-color:transparent;
text-decoration:underline;
}
table {
border-color:white;
border-style:solid;
border-width:1px;
}
td {
text-align:left;
background-color:transparent;
border-color:white;
border-style:solid;
border-width:1px;
}
</style>
</head>

<body>

<h1>Ma page de test</h1>
<h2>Sous titre</h2>
<p>Ceci est un paragraphe</p>
<ul> 
 <li>item 1</li>
 <li>item 2</li>
</ul>
<h3>Sous-sous titre</h3>
<p>youpi ça marche !</p>

</body>
</html>
0
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011 > notobe
7 nov. 2009 à 00:06
Bonsoir,
Merci pour ton aide qui m'a bcp eclairé, j'ai mis du texte et j'ai changé quelques valeurs donc j'ai pu constaté vraiment le changement.
Par contre je ne m'ensors toujours pas avec les bordures que j'ai envi de faire avec css. J'ose encore solliciter tes bons services STP?
Merci d'avance
0
notobe > mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
7 nov. 2009 à 20:24
Bonsoir,

Pour faire des bordures, le principe est le suivant :

1. Tu encadres l'ensemble de ton bloc à encadrer par un div (dans le code html) dont on peut attribuer une classe. Exemple : 

<div class="encadre">
<h2>Sous titre</h2>
<p>Le sous titre te ce paragraphe sont à encadrer d'une bordure de couleur rouge, sous forme d'un trait solide fin de 1 pixel</p>
</div>


2. Tu rajoutes dans la CSS : 

div.encadre {
border : 1px solid red;
}


le "div.encadre" de la CSS fait appel au <div class="encadre"> du code html.
0
Réponse 8 / 9
ARMAND3 Messages postés 115 Date d'inscription jeudi 14 février 2013 Statut Membre Dernière intervention 26 décembre 2015 4
12 déc. 2015 à 16:41
pour creer un fichier css, tu va au menu fichier de notpad++ tu creer un nouveau fichier avec l'extension fichier.css que tu enregistre dans le meme dossier que ton fichier html pour un depart, ensuite tu specifie le chemin comme explique plus haut sur ton fichier html
0
Réponse 9 / 9
mitbkieta Messages postés 55 Date d'inscription samedi 25 juillet 2009 Statut Membre Dernière intervention 26 mars 2011
28 oct. 2009 à 03:36
Ce fichier .css m'embrouille trop. où le trouver même dans tous ces codes excuse moi de cette question mais je suis vraiment perdu.
Tu peux m'aiguiser plus que cela??

Merci d'avance
-1

Discussions similaires

comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses