Petite demande a propos du CSS

Lucas

Néophyte

Messages: 2

« le: 02 Janvier 2008 à 15:56:10 »

Bonjour à tous,

En ce moment même , je suis entrain de me faire une petite page HTML en local. Mais j'ai une petite question a propos du CSS et de mon code.

D'abord voici mon code :

Code:

<!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>mY Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
</head>
<body>
<h1>Bienvenue ô toi : visiteur de mon site ! Si il y a une chose que tu dois <i>retenir</i> c'est : fais comme chez to<i>i</i> !

</h1>

<p>
Et oui ! Mon premier site ! Enfait,je ne sais pas du tout de quoi il va parler mais j'ai une idée bien précise en tête vous

savez !
</p>

<h2>Hum ... Petite hésitation </h2>
<p>
Enfait mon site portera dans un premier temps sur comment bien configurer une page web
</p>
<p>
Vous pourrez biensur apprendre et laisser des commentaires,il suffit de laisser un petit message quand j'aurai mis les commentaires adéquats...

</p>

<h2>Hum ... Forum ? Ou pas forum . </h2>
<p>
Allo Allo , Vous suivez ??!! Ah ! Vous me reconfortez !!</br>
Allo allo ??
</p>
</body>
</html>

Déjà , est ce que ça pose problème que je code ma feuille de style CSS sur le bloc note ou faut t-il que je la crée sur Notepad++ ?

Ensuite,ce bout de code pose problème :

Code:

<p>
Allo Allo , Vous suivez ??!! Ah ! Vous me reconfortez !!</br>
Allo allo ??
</p>
</body>
</html>

A la fin j'ai mis

Code:

Vous me reconfortez !!</br>

Je regarde et le Allo Allo est resté en haut.
Erreur dans le XTHML ? Je sais pas
Donc voila si vous pouvez m'aider ca serai sympa

Merci d'avance a tous Clin d'oeil


	Journalisée

Matthieu

Administrateur
Membre Héroïque

Sexe:

Messages: 3461

Unreal Power...

Re : Petite demande a propos du CSS

« Répondre #1 le: 02 Janvier 2008 à 18:00:10 »

Salut,

Concernant la création sur le bloc notes ou notepad++, je peux dire que c'est un problème et ça n'en est pas un...
En effet, tu ne t'es sans doute jamais posé la question, mais le jeu de caractères utilisé sur le Web pour les sites européens est en général le ISO-8859-1 (latin1) ou parfois le ISO-8859-15 (latin9 = latin1 + symboles oe de coeur + le symbole euro) et, bien entendu, Windows utilise son propre système : Windows-1252...

Donc *a priori* pour taper du texte CSS ce n'est pas un souci (vu qu'il n'y a pas, hormis les 2 points et - éventuellement - le point d'exclamation, de ponctuation ni de caractères accentués. Par contre si tu tapes autre chose et qu'un jour tu as des caractères bizarres, c'est une piste à suivre.

Concernant l'XHTML, il n'y a pas de balise </br>. Tout simplement.

Les balises HTML ont toutes une fermeture </machin> exceptées les balises suivantes, pour ne citer que les principales :
- <meta />
- <img />
- <br />
- <hr />
- <base />

D'autre part, j'insiste sur l'espace entre le texte et le / : c'est <br /> et non <br/>, pour des raisons de parseur XML.
Enfin, si une balise dont la fermeture </machin> existe et est vide, on l'écrit <p></p> (par exemple) en XHTML, même si tu trouveras parfois l'écriture <p /> qui est fausse.


	Journalisée

Foire aux questions NewsletTux 2 | Télécharger NewsletTux - | Etat d'avancement NewsletTux 3

Lucas

Néophyte

Messages: 2

Re : Petite demande a propos du CSS

« Répondre #2 le: 02 Janvier 2008 à 19:08:39 »

Ah oui je viens de vérifier et ça marche Clin d'oeil

Merci


	Journalisée

damy

Membre Junior

Messages: 61

Re : Petite demande a propos du CSS

« Répondre #3 le: 13 Janvier 2008 à 15:07:35 »

Bonjour,

J'ai aussi un petit problème de css

J'ai fait une template reliée à une css séparée. J'ai voulu tout mettre dans la css mais ça n'a pas fonctionné et j'ai du mettre la mise en forme du texte directement dans la template pour que ça fonctionne (ce qui au passage, modifie un peu la page "écrire une lettre aux abonnés" mais c'est un détail Cool

)

Mon problème est le suivant : j'ai besoin de mettre des marges de 30px sur les côtés pour faire entrer le texte dans l'image mais je n'y arrive pas. Il faut égalment que j'applique ces marges sur la ligne de séparation au dessus des liens de gestion d'abonnement et pub.

Voilà le code de la css

Code:

/* Mise en forme du body */

body { background: #ffffff url(../images/bg.gif) top repeat-x; margin: 0px 0px 0px 0px;}

/* ID(#) - Mise en forme de la page en DIV - */

#header { margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:153px; width: 900px; background-image:url(../images/header.jpg); padding: 0px 0px 0px 0px;}

#menu {background: #ffffff url(../images/bgMenuTop.gif) top left no-repeat; margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 10px; width: 900px; padding-left: 0px; padding-right: 0px;}
#smenu {background: #ffffff url(../images/bgSMenuTop.gif) top left no-repeat; margin-top: 0px; margin-left: auto; margin-right: auto; margin-bottom:0; height:20px; width: 900px;}

#contenuBg {background:url(../images/bgContenu.gif) top left repeat-y; margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height:auto; width: 900px; padding: 0px 0px 0px 0px;}

#footer {margin-top:0; margin-left:auto; margin-right:auto; margin-bottom:0; height: 46px; width: 900px; background: #fff url(../images/bgFooter.gif) top left no-repeat; text-align:center;}

et la template

Code:

<html><head>
<title>lettre d'information</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://www.lefanal.be/css/templatype.css" rel="stylesheet" type="text/css"/></head>
<style type="text/css">

</style>
<body>
<div id="header"></div>
<div style="height: 10px;" id="menu"></div>
<div style="height: 7px;" id="smenu"></div>
<div id="contenuBg">
--NEWSLETTUX--
<div id="footer"><p class="textePetit" style="margin: 0px; padding-top: 10px;">
Copyright© 2007-2008 Le Fanal asbl. Tous droits réservés.</p></div>
</div></body></html>

Ce qui donne ceci

Comment faire pour réduire le corp de la lettre et le séparateur ?

Merci et bonne journée


	Journalisée

Matthieu

Administrateur
Membre Héroïque

Sexe:

Messages: 3461

Unreal Power...

Re : Petite demande a propos du CSS

« Répondre #4 le: 13 Janvier 2008 à 16:01:05 »

petite question :
pourquoi ne pas mettre un padding au #contenuBg et réduire sa largeur pour compenser ?

D'autre part, tu peux abréger un peu l'écriture :

Code:

margin:0px 0px 0px 0px;

équivaut à :

Code:

margin:0;

(puisque c'est zéro, l'unité importe peu)

D'autre part, tu peux aussi réduire si tu le douhaites lorsque les valeurs sont égales 2 à 2 :

Code:

margin:0px auto 0px auto;

équivaut à :

Code:

margin:0 auto;

(respectivement, pour le premier code, haut, droite, bas, gauche et pour le second code haut/bas puis droite/gauche.
Valabe pour les padding aussi.)


	Journalisée

Foire aux questions NewsletTux 2 | Télécharger NewsletTux - | Etat d'avancement NewsletTux 3

damy

Membre Junior

Messages: 61

Re : Petite demande a propos du CSS

« Répondre #5 le: 13 Janvier 2008 à 16:39:34 »

Merci pour les infos, en effet ça abrège.

Citation de: Matthieu le 13 Janvier 2008 à 16:01:05

petite question :
pourquoi ne pas mettre un padding au #contenuBg et réduire sa largeur pour compenser ?

Parce que ça ne fonctionne pas, ça décale le bas.

EDIT: Ok, j'ai trouvé le pourquoi du décalage avec le padding. Il y avait simplement une balise DIV mal placée.

Merci et bonne semaine


« Dernière édition: 13 Janvier 2008 à 18:32:18 par damy »	Journalisée

Pages: [1] Haut de page

« sujet précédent | | sujet suivant »