Css xhtml par l'exemple

Assistance à ces langages

Modérateur: Guardian

Css xhtml par l'exemple

Messagede AgnesD le Dim 27 Mar 2005 - 14:32

Pour essayer d'expliquer par l'exemple ce que l'on peut faire avec les css.

- Les balises seront les mêmes qu'en html sauf que...
- Elles sont écrites en minuscules...
- Chaque balise ouverte doit être fermée ...
- Pour celles qui n'ont pas de balise fermante ; elle sera crée : par exemple <br> deviens <br />
Code: Tout sélectionner
<img src="image.png" width="750" height="100" alt="logo">
deviens
Code: Tout sélectionner
<img src="image.png" width="750" height="100" alt="logo" />.

- chaque balise devra être fermée dans l'ordre ....Exemple
Code: Tout sélectionner
<div id="container" >
<div id="entete">
<div id="menuhoriz">
</div>
</div>
</div>

ceci n'est pas valide....et devra être remplacé par
Code: Tout sélectionner
<div id="container" >
<div id="entete">
</div>
<div id="menuhoriz">
</div>
</div>

Il y a bien d'autres régles je vous renvoie pour cela a cet article d'Openweb http://openweb.eu.org/articles/xhtml_une_heure/
je démarre sur des bases qui excluent la moindre mise en forme dans la page html....toute mise en forme sera sur la feuille css.
La mise en forme ne passera pas par des tableaux mais par des "boites" chaque zone de la page sera determinée par une identité...boddy, container, entete, menuhoriz, menuverti, centre, pied. Ceci me donnera un entête, deux menus (vertical et horizontal),un centre pour le texte , et le pied de page le tout sera a l'intérieur d'un element container.On choisit les identitées " id"( -># dans la feuille de style ) quand la"chose" est unique sinon on définit par un identifiant "class" (-> . dans la feuille de style )pour le moment la feuille de style ne comporte que des " id "
Voila a quoi ressemble le code de la page.

Code: Tout sélectionner
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" /> <!-- ceci est l'appel de la feuille de style -->   
<title>Site mod&egrave;le
</title>
</head>

<body>
<div id="container" >

<div id="entete">Le Header
</div>

<div id="menuhoriz">ici sera le menu horizontal
</div>

<div id="menuverti">là ce sera le menu vertical
</div>

<div id="centre">La cigale, ayant chanté
Tout l?été,
Se trouva fort dépourvue
Quand la bise fut venue.
Pas un seul petit morceau
De mouche ou de vermisseau
Elle alla crier famine
Chez la fourmi sa voisine,
La priant de lui prêter
Quelque grain pour subsister
Jusqu?à la saison nouvelle
« Je vous paierai, lui dit-elle,
Avant l?oût, foi d?animal,
Intérêt et principal. »
La fourmi n?est pas prêteuse ;
C?est là son moindre défaut.
« Que faisiez-vous au temps chaud ?
Dit-elle à cette emprunteuse.
? Nuit et jour à tout venant
Je chantais, ne vous déplaise.
? Vous chantiez ? j?en suis fort aise.
Eh bien : dansez maintenant. »
</div>

<div id="pied">Et le pied de page
</div>

</div>

</body>
</html>


Maintenant la feuille de css.

Code: Tout sélectionner
body {background:white;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 100%; /* taille des polices */
color: black;
margin: 0;
padding: 0;
}

#container {margin: 1% 1% 1% 1% ;
position: absolute;
width: 98%;
background:Black;
}

#entete {
margin: 1%; /* marges externes */
height: 100px; /* hauteur */
background:Aqua ; /* couleur du fond */
}

#menuhoriz {
margin:1%;
height: 30px;
background:Silver;
}


#menuverti {background:gray;
position:absolute;
left:0;  /* positionne a gauche.. */
width: 18%;  /* largeur de la boite  */

margin: 1%;  /* marges externes */
min-height:200px;  /* hauteur minimum pour "déplier" la boite*/
}

#centre {background:White;
margin:1% 1% 1% 20%;
min-height:200px;
}


#pied {text-align: center;
margin: 1%;
height: 60px;
background:Aqua;
}


Voila une page de base...les dimensions données en % permettent d'avoir l'élasticitée pour passer en toute résolution . Je sais c'est pas beau mais pour commencer cela permet de définir les zones. si je n'avais pas mis de marges tout le container serait rempli et on ne verrait plus la partie noire...cela dépend de ce que l'on veut faire...
pour tester télèchargez le dossier exemple http://home.tele2.fr/agnesD/Exemple.zip et amusez vous a modifier mais testez toujours dans des navigateurs différents...(IE etant un peu particulier les résultats sont parfois surprenants...)
Suite au prochain numéro (peut être pas tous les jours...:wink: )
J'éspére avoir été claire....... sinon dites le moi...
A+



AgnesD a écrit:


[center]MISE EN FORME DU TEXTE[/center]
Pour la mise en forme du texte c'est comme pour le html avec les balises <br /> <p></p> les balises de titre....

le menu vertical est organisé en liste et le menu horizontal est une suite de liens (ce n'est pas trés correct cela serait mieux organisé en liste mais provoquait trop de bugs....sous IE, que je ne sais pas corriger.)

pour l'exemple nous allons définir plusieurs classes pour les paragraphes...et les titres

et mettre en forme le texte; la mise en forme des paragraphes comprends des classes "rouge", "gras", et "rouge gras" (on peu en effet combiner plusieurs classes entre elles.
Code: Tout sélectionner
<div id="centre">
<h1>FABLES</h1>

<h2>La cigale et la fourmi</h2>
<p>La cigale, ayant chanté<br /><!-- paragraphe de base -->
Tout l?été,<br />
Se trouva fort dépourvue<br />
Quand la bise fut venue.</p>
<p class="rouge">Pas un seul petit morceau<br /><!-- style rouge -->
De mouche ou de vermisseau<br />
Elle alla crier famine<br />
Chez la fourmi sa voisine,<br />
La priant de lui prêter<br />
Quelque grain pour subsister<br />
Jusqu?à la saison nouvelle</p>
<p class="gras">« Je vous paierai, lui dit-elle,<br /> <!-- style gras -->
Avant l?oût, foi d?animal,<br />
Intérêt et principal. »<br />
La fourmi n?est pas prêteuse ;<br />
C?est là son moindre défaut.<br />
« Que faisiez-vous au temps chaud ?<br />
Dit-elle à cette emprunteuse.</p>
<p class="gras rouge">? Nuit et jour à tout venant<br /><!--style gras et rouge  -->
Je chantais, ne vous déplaise.<br />
? Vous chantiez ? j?en suis fort aise.<br />
Eh bien : dansez maintenant. »</p>

<h3>Jean de la Fontaine</h3>
</div>


Je met en ligne un zip qui prends en compte ces nouveaux paramétres, en gardant la feuille de style de base.(vous la completerez au fur et a mesure pour voir. http://home.tele2.fr/agnesD/Exemple.zip


Maintenant la description des styles de titres et paragraphes (a copier coller dans la feuille de style)

Code: Tout sélectionner
H1 {
font-size: 130% bold;color: #993333;
}

H2, {font-size: 120%;
    }

H3{font:110% ;color:#cccccc;
    }

P {
  color: #000000; font:80%;
}

.rouge {
  color: #993333; /*polices en rouge */
}
.gras {
  font-weight: bold; /*polices en gras */
}


[center]BORDER MARGIN PADDING[/center]

Border

Si on désire donner une bordure a sa boite...On a le choix entre plusieurs attributs....Taille couleur et style
les styles sont : par defaut "solid" il y a aussi "inset","outset","dashed","double"...

Margin

Les marges sont les espaces extérieurs des boites on peut les donner en % ou en px .

Padding

c'est la marge interne de la boite idem que pour l'attribu margin (IE ne comprends pas les padding de la meme façon la plupart des autres navigateurs ce qui nécéssite parfois quelques adaptations....)


Comme on peut le voir le texte collé contre les cadres, ce n'est pas terrible donc nous allons utiliser padding pour l'écarter des bords...et mettre une bordure plus originale.

Code: Tout sélectionner
#centre {background:White;
margin:1% 1% 1% 20%;   /* 1% haut, 1% droite, 1% bas, 20%gaughe */
min-height:200px;
border:5px dashed #cccccc;    /* bordure pointillé grise */
padding:20px 70px 20px 30px;     /*marges internes */
}


voila l'élèment #centre un peu plus présentable vous n'avez plus qu'a le remplacer dans la feuille de style de l'exemple ...

on peut travailler un peu plus les autres élements

Code: Tout sélectionner
#entete {font: 300% bold; /* taille du titre +  caractéres gras */
color: #cccccc;/* couleur grise */
text-align: center;/* centré */
margin: 1%;
height: 100px;
background:Aqua ;
border:2px dotted #000000;    /* bordure petits pointillés noirs */
}

#pied {
margin: 1%;
height: 60px;
background:Aqua;
border:2px dotted #000000;    /* bordure petits pointillés noirs */
}



[center]BACKGROUND[/center]


Les fonds de chaque boite peuvent être traités en couleurs ou en images....(le zip contient les images que j'utilise pour l'exemple.)

Cela se traduit par
Code: Tout sélectionner
background-color:#cccccc;

pour un fond gris ou par
Code: Tout sélectionner
background-image:url("image.png");

pour une image. (les images pourront être ajustées répétées....les possibilités sont multiples.)

Si vous définissez plusieurs fois la même propriété dans la feuille de style, une classe ou un ID ce sera la derniére mention qui sera appliquée.Dans l'exemple suivant si vous voulez avoir l'image de fond il faudra supprimer la ligne "background: aqua;" ou la positionner avant "background-image:url("images/entete.png"); " ainsi les navigateurs bloquant les images pourront tout de même avoir un fond coloré...

Code: Tout sélectionner
#entete {font: 300% bold;  /* grande police noire "gras" */
background-image:url("images/entete.png"); /* image de fond" */
background:Aqua;
color: #000000;
text-align: center;
margin: 1%;
height: 100px;
border:2px dotted #000000;    /* bordure petits pointillés noirs */
}


Voila les codes qui remplacent les couleurs par des images de fond (remplacez les anciens par copier coller.)



Code: Tout sélectionner
#entete {font: 400% bold;background-image:url("images/entete.png");
color: #000000;
text-align: center;
margin: 1%;
height: 100px;
border:2px dotted #000000;    /* bordure petits pointillés noirs */
}

#menuhoriz {background-image:url("images/menuh.png");
margin:1%;
height: 30px;

}


#menuverti {background-image:url(images/menuv.png);
position:absolute;
left:0;
width: 18%;
margin: 1%;
min-height:200px;
}




#centre {background-image:url(images/centre.png);
margin:1% 1% 1% 20%;
min-height:200px;
border:5px dashed #cccccc;/* bordure pointillé grise */
padding:20px 70px 20px 70px;/*marges internes */
}


#pied {background-image:url("images/pied.png");
margin: 1%;
height: 60px;


la prochaine fois les liens et les listes.


la suite du tuto proposé par Agnes edité a sa demande le 10 avril ( florian )



LES LIENS

le lien -> a:link
le lien visité -> a:visited
le lien survolé -> a:hover
le lien actif -> a:active
Voila les quatres états des liens a chaque état on peut faire correspondre un aspect différent.

On peut créer des classes afin de leur donner une apparence différente...(on choisit des class et pas des ID car il y aura généralement plusieurs liens de chaque "classe" dans la page.)

pour l'exemple on fera deux types de liens:
On aura les liens normaux
et les liens ".ci"


Code: Tout sélectionner
a:link {color:#000000; text-decoration:none;}  /* texte noir  pas de decoration  */
a:visited {color:#000000; text-decoration:underline;}/* texte noir sousligne */
a:hover {color:#FF0066;text-decoration:none; font-weight:bold; }/* texte bordeaux  souigne "gras"*/
a:active {color:#990066; text-decoration:underline;}/* texte rouge  souligne*/


On ne va definir que deux états de liens pour la classe ".ci" les liens survolés et les liens actifs.

Code: Tout sélectionner
a.ci:hover {color:#66FF66;text-decoration:none; font-weight:bold;}/* texte vert "gras"*/
a.ci:active  {color:#3333FF; text-decoration:underline;}  /* texte bleu  souligné */


Il existe des tas de variantes , si un état n'est pas defini , c'est celui qui l'était précédement qui le remplace...

LE MENU HORIZONTAL

Code xhtml pour le menu horizontal ce menu est crée sur une structure de liste.( L'attribut title permet de créer une infobulle pour préciser le lien)

Code: Tout sélectionner
<div id="menuhoriz">
<ul class="horiz" >
<li><a  href="" title="vous êtes a la rubrique 1"> rubrique 1 </a></li>
<li><a  href="" title="rubrique 2">  rubrique 2 </a></li>
<li><a  href="" title="rubrique 3"  >  rubrique 3 </a></li>
<li><a  href="" title="rubrique 4" >  rubrique 4 </a></li>
<li><a  href="" title="rubrique 5" >  rubrique 5 </a></li>
</ul>


Voila le css qui sert a définir le menu horizontal.

Code: Tout sélectionner
#menuhoriz {background-image:url("images/menuh.png");/*fond de la barre en image */
margin:1%;/*marges extérieures */
height: 34px;/*hauteur de la barre en pixels a mettre en rapport avec la taille l'image que vous utiliserez */
}

#menuhoriz  li {
display: inline;  /* indique a la liste la mise en ligne sans cela vous aurez un menu vertical */
}


Et pour la Création de "boutons" décorés pour les liens ....la suite
Code: Tout sélectionner
.horiz a {display: block;
background-color: #cccccc;
   border: solid 1px;/* Enlever si vous voulez...aide a bien définir les contours de boutons pour les positionner. */
   text-align: center;/*position du texte texte dans les boutons */
   text-decoration: none;
   width: 165px;/* longeur des boutons grande longeur car je triche n'ayant pas réussi a les centrer proprement... */
   height: 28px;/* hauteur des boutons */
   line-height: 25px;/* positionne le texte...en hauteur effet mystérieux pour moi je procéde par tatonements. */
   float: left; /* position des boutons liens gauche la définition du type de liste: #menuhoriz  li {display: inline;} crée l'alignement des blocks float left vers la gauche*/
margin: 2px 4px;
color: #000000;
}

.horiz a:hover { background-color: #ffffff;/* couleur blanche de fond au survol du bouton. */
color: #000000;
}


Si vous désirez mettre des images a la place de la couleur il faudra remplacer dans .horiz a

Code: Tout sélectionner
background-color: #cccccc;


par

Code: Tout sélectionner
background-image:url("images/bouton.png");


et de faire de même dans .horiz a:hover en remplacant
Code: Tout sélectionner
background-color: #ffffff;

par
Code: Tout sélectionner
background-image:url("images/boutonb.png")

vous pouvez définir des classes pour chaque bouton et les combiner entre elles ; utiliser des images entiéres au lieu de tranches la différence sera dans les paramêtres de taille, de padding et margin...


J'ai modifié le fichier d'Exemples vous pouvez le télécharger... a nouveau...
http://home.tele2.fr/agnesD/Exemple.zip
(désolée mais c'est pas évident de tout prévoir dés le début)

Voila le css final comportant toutes les modifications d'aujourd'hui.



Code: Tout sélectionner
#menuhoriz {background-image:url("images/menuh.png");
margin:1%;
height: 34px;

}

#menuhoriz  li {
display: inline;
}


a:link {color:#000000; text-decoration:none;}  /* texte noir  pas de decoration  */
a:visited {color:#000000; text-decoration:underline;}/* texte noir sousligne */
a:hover {color:#FF0066;text-decoration:none; font-weight:bold; }/* texte bordeaux  souigne "gras"*/
a:active {color:#990066; text-decoration:underline;}/* texte rouge  souligne*/



a.ci:hover {color:#66FF66;text-decoration:none; font-weight:bold;}/* texte vert "gras"*/
a.ci:active  {color:#3333FF; text-decoration:underline;}  /* texte bleu  souligné */



.horiz a {display: block;
background-image:url("images/bouton.png");
   border: solid 1px;
   text-align: center;
   text-decoration: none;
   width: 165px;
   height: 28px;
   line-height: 25px;
   float: left;
margin: 2px 4px;
color: #000000;
}

.horiz a:hover {background-image:url("images/boutonb.png");
color: #000000;
text-decoration: none;
}


la prochaine fois on verra le menu vertical, et les finitions...[/quote]
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede belver le Dim 27 Mar 2005 - 16:34

Merci Agnes pour ces explications claires
il ne nous reste plus qu'à pratiquer :wink:
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede belver le Dim 27 Mar 2005 - 16:43

Pour exemple, voici subSilver.css (template subSilser) :

/*
The original subSilver Theme for phpBB version 2+
Created by subBlue design
http://www.subBlue.com
*/


/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: #E5E5E5;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
}

/* General font families for common tags */
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #D1D7DC 0px; border-top-width: 1px;}


/* This is the border line & background colour round the entire page */
.bodyline { background-color: #FFFFFF; border: 1px #98AAB1 solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: #FFFFFF; border: 2px #006699 solid; }


/* Main table cell colours and backgrounds */
td.row1 { background-color: #EFEFEF; }
td.row2 { background-color: #DEE3E7; }
td.row3 { background-color: #D1D7DC; }


/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: #FFFFFF;
background-image: url(images/cellpic2.jpg);
background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color: #FFA34F; font-size: 11px; font-weight : bold;
background-color: #006699; height: 25px;
background-image: url(images/cellpic3.gif);
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(images/cellpic1.gif);
background-color:#D1D7DC; border: #FFFFFF; border-style: solid; height: 28px;
}


/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it :-)
*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px; }
td.row3Right,td.spaceRow {
background-color: #D1D7DC; border: #FFFFFF; border-style: solid; }

th.thHead,td.catHead { font-size: 12px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }


/* The largest text used in the index page title and toptic title etc. */
.maintitle,h1,h2 {
font-weight: bold; font-size: 22px; font-family: "Trebuchet MS",Verdana, Arial, Helvetica, sans-serif;
text-decoration: none; line-height : 120%; color : #000000;
}


/* General text */
.gen { font-size : 12px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; }


/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }


/* Forum category titles */
.cattitle { font-weight: bold; font-size: 12px ; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }


/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }


/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }


/* titles for the topics: could specify viewed link colour too */
.topictitle { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }


/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : 11px; color : #000000;}

/* Location, number of posts, post date etc */
.postdetails { font-size : 10px; color : #000000; }


/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}


/* Quote & Code blocks */
.code {
font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
background-color: #FAFAFA; border: #D1D7DC; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* Copyright and bottom info */
.copyright { font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #444444; letter-spacing: -1px;}
a.copyright { color: #444444; text-decoration: none;}
a.copyright:hover { color: #000000; text-decoration: underline;}


/* Form elements */
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}

/* The text input fields background colour */
input.post, textarea.post, select {
background-color : #FFFFFF;
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : #EFEFEF;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}

/* The main submit button option */
input.mainoption {
background-color : #FAFAFA;
font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
background-color : #FAFAFA;
font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know ;)
*/
.helpline { background-color: #DEE3E7; border-style: none; }


/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("formIE.css");
J'ai encore perdu une occasion de me taire
Assistance Informatique en live
Image Image
Avatar de l’utilisateur
belver
Administrateur
 
Messages: 5132
Inscription: Mar 3 Aoû 2004 - 10:40
Localisation: Nantes

Messagede AgnesD le Dim 27 Mar 2005 - 17:47

Bonsoir...
merci
cela pourrait être sympa de faire un skin pour le forum...
bonne soirée
A+
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede JB2Lyon le Lun 4 Avr 2005 - 19:35

Bonsoir,
Pour continuer un peu Agnes_D, pour ce qui est des .css, il y a des logs pour créer des css sans avoir à taper le code ?
Pour ton site tu l'as fait avec quel log ?
Comment réaliser dans le principe du dégradé un fond sans que ce soit une image complète ?
Merci Agnes_D
Bonne soirée.
A+
JB
Avatar de l’utilisateur
JB2Lyon
Modérateur
 
Messages: 755
Inscription: Jeu 5 Aoû 2004 - 17:17
Localisation: Ya un indice sur mon pseudo :-)

Messagede Taupo le Lun 4 Avr 2005 - 21:42

salut JB

il y a des logs pour créer des css sans avoir à taper le code ?


oui le bloc note smiley_398

sinon tu peux essayer : balthisar

ou TopStyle Lite 3.10
a+
Taupo
chuis pas Nantais car j'aime pas la pluie :D
Image
Avatar de l’utilisateur
Taupo
Ancien du forum
 
Messages: 855
Inscription: Mer 4 Aoû 2004 - 19:41

Messagede JB2Lyon le Lun 4 Avr 2005 - 21:58

Salut Taupo et merci.
j'essaie ca.
A+
JB
Avatar de l’utilisateur
JB2Lyon
Modérateur
 
Messages: 755
Inscription: Jeu 5 Aoû 2004 - 17:17
Localisation: Ya un indice sur mon pseudo :-)

Messagede AgnesD le Mar 5 Avr 2005 - 6:16

Bonjour

J'ai fait le site avec le blocnotes....Et je vois que Taupo a de la ressource...
Je ne comprens pas bien ta question sur les images....mon fond est une ligne dégradée....de 1 ou 2 pixel de large....Tu apelles quoi une image compléte ????
La suite va bientôt venir...(les liens et les menus) .
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede JB2Lyon le Mar 5 Avr 2005 - 17:41

Bonsoir Agnès,
Avec le blocnote ... smiley_1041 sign26
Ce que je voulais dire, C comment fais-tu pour qu'une ligne de 2pxl de large se retrouve sur toute la surface ?
A+
JB
Avatar de l’utilisateur
JB2Lyon
Modérateur
 
Messages: 755
Inscription: Jeu 5 Aoû 2004 - 17:17
Localisation: Ya un indice sur mon pseudo :-)

Messagede AgnesD le Mar 5 Avr 2005 - 19:30

Salut JB
Tu fait rien justement elle se multiplie automatiquement....c'est si tu veux quelle ne se déplie pas que tu dois le lui indiquer
Code: Tout sélectionner
background-repeat: no-repeat;

Va jetter un coup d'oeuil là
http://cerig.efpg.inpg.fr/dossier/feuil ... mmaire.htm
C'est bien fait et trés simple.
Pour le blocnotes, avec le casque et une bonne musique c'est pas désagréable... :wink: en fait j'aime beaucoup tu n'a que ce que tu met toi même donc c'est clean...
mais on m'a fait un peu évoluer ces temps çi j'ai essayé Editplus (shareware) et je gagne pas mal de temps...tout en gardant une base trés propre. Il y a notepad2 aussi mais faut que je rééssaye....
Dés que j"ai un peu de temps je met la suite.
A+
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede JB2Lyon le Mar 5 Avr 2005 - 19:56

Merci Agnes_D
Bonne fin de soirée.
A+
JB
Avatar de l’utilisateur
JB2Lyon
Modérateur
 
Messages: 755
Inscription: Jeu 5 Aoû 2004 - 17:17
Localisation: Ya un indice sur mon pseudo :-)


Retourner vers Html / Javascript / XML / XHTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

cron