Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > [FAQ] Mise en place > Lecture du sujet

[FAQ] Mise en place

Donnez-nous vos idées...

Vous devez être inscrit pour pouvoir poster des messages

Page : Précédente  1  2  3  4 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : Précédente  1  2  3  4 
Hors ligne treize # Posté le 03/12/2007 à 19:09:49
*Brain FAILED*
Avatar
Groupe : Membres
Reprise du dernier message de la page précédente :
Bah euh, Olympe Network a été piraté donc plus maintenant :'(
Image utilisateur

> Beedee's (pré inscriptions)
> Blog de Beedee's
> Topic de présentation







 
Hors ligne strucky # Posté le 26/02/2008 à 15:47:51
Avatar
Modérateurs
Les chemins relatifs, brève explication


Dans tout répertoire :
Le . (point) désigne le répertoire dans lequel on se trouve (répertoire courant)
Le .. (double point) désigne le répertoire parent du répertoire courant.

Dans un chemin :
Le / (slash) est un séparateur de répertoire (ou le répertoire racine sur système unix)

Ainsi pour remonter dans l'arborescence de nos répertoires, on utilise le ..

Exemple simple d'une arborescence d'un site web :

arborescence

Notre fichier index.html est relié à fichier.css (balise link), dans celui-ci, on doit se servir de image_index.png en background.
Le chemin que l'on mettra dans l'attribut url() de la propriété background du css sera donc : ../image/image_index.png
Ce qui pourrait se traduire verbalement par : on sort du répertoire css (..), on entre dans le répertoire image pour prendre image_index.png, en séparant bien entendu le tout avec des slashs.

Notre fichier admin.html est relié à admin.css (toujours la balise link), dans celui-ci, on a besoin d'accéder à l'image image_admin.png.
Le chemin que l'on mettra pour l'attribut url() du background css sera donc : ../../image/image_admin.png
Que l'on exprimerait verbalement par : on sort du répertoire css (1er ..), on sort du répertoire admin (2nd ..), on entre dans le répertoire image pour prendre image_admin.png.

La chose à retenir est que pour remonter dans l'arborescence on utilise ..
Une fois que l'on arrive à se situer correctement dans notre arborescence, accéder à n'importe quel fichier est un jeu d'enfant.

----------------- FIN -----------------

Si vous avez des critiques à formuler sur ce que j'ai écrit, c'est le moment :p
Édité le 26/02/2008 à 16:16:00 par strucky
Image utilisateur
 
Hors ligne treize # Posté le 01/03/2008 à 14:56:57
*Brain FAILED*
Avatar
Groupe : Membres
Comment mettre deux colonnes en background sur une page en CSS ?

=> Qu'est ce que des colonnes ?

Pour un design fixe



Il suffit de créer une image de la largeur de votre page (le plus classique est 800 pixels) et de la mettre en arrière-plan avec :

Code : CSS - Afficher / masquer les numéros de ligne
  1. body
  2. {
  3.    /* Largeur de la page */
  4.    width: 800px;
  5.    /* Background de la page */
  6.    background: url(../images/arriere_plan.png) top center repeat-y black
  7. }


Le repeat-y va répéter l'image sur toute la hauteur de la page et top center va la placer avant la répétition.


Pour un design extensible



Pour un design extensible, c'est déjà plus compliqué. Il faudra toucher au xHTML. En fait, nous allons utiliser deux <div> qui engloberont la page entière et possèderont les background des colonnes.

Code : HTML - Afficher / masquer les numéros de ligne
  1. <div id="deco_gauche">
  2.  <div id="deco_droite">  
  3.  
  4.   <!-- Le contenu de votre page -->
  5.  
  6.  </div>
  7. </div>


Jusque là, c'est simple :p .
Maintenant le CSS :

Code : CSS - Afficher / masquer les numéros de ligne
  1. #deco_gauche
  2. {
  3.   /* On lui applique son background */
  4.   background: url(../images/colonne_gauche.png) top left repeat-y black
  5. }
  6.  
  7. #deco_droite
  8. {
  9.   /* On lui applique un padding, histoire que le corps ne passe pas dessus */
  10.   padding: 0px 20px;
  11.   /* De même pour cette colonne sauf qu'elle est à droite */
  12.   background: url(../images/colonne_droite.png) top right repeat-y black
  13. }


Je ne mets pas de padding à #deco_gauche car il affecterait #deco_droite et décalerait le background. ;)

Je pense que le code parle de lui-même ;)

En espérant vous avoir aidé.

Ca y est strucky, j'ai trouvé une soluce bien connue. ;)
Édité le 01/03/2008 à 23:42:14 par treize
Image utilisateur

> Beedee's (pré inscriptions)
> Blog de Beedee's
> Topic de présentation







 
Hors ligne strucky # Posté le 01/03/2008 à 19:50:49
Avatar
Modérateurs
Ouaip, là je suis d'accord, les colonnes sont bien extensibles en hauteur :p

Par contre un truc à rectifier, c'est le padding pour #deco_gauche.
Il n'en faut pas :)
Image utilisateur
 
Hors ligne treize # Posté le 01/03/2008 à 23:33:53
*Brain FAILED*
Avatar
Groupe : Membres
Oui effectivement, je viens de m'en rendre compte. ;)
Boh, je modifierais demain. ;)
Image utilisateur

> Beedee's (pré inscriptions)
> Blog de Beedee's
> Topic de présentation







 
Hors ligne strucky # Posté le 02/03/2008 à 18:51:01
Avatar
Modérateurs
C'est ajouté :)

A vot' bon coeur m'sieurs dam' :D
Image utilisateur
 
Hors ligne strucky # Posté le 06/03/2008 à 10:09:19
Avatar
Modérateurs
En mettant un background sur un fieldset, IE met également le background sur le legend, comment régler ce problème ?


Problématique : Avec Internet Explorer le background d'un fielset empiète sur le legend.

Exemple d'une page comprenant une partie d'un formulaire :

Code : HTML - Afficher / masquer les numéros de ligne
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  4. <head>
  5. <title>Ma page</title>
  6. <meta name="generator" content="Quanta Plus" />
  7. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  8. <style type="text/css">
  9. form { width: 500px; padding: 25px; background: #d9fffb }
  10. fieldset { margin: 0 0 25px 0; background: #d9ddff }
  11. fieldset p { margin: 15px 0; padding: 0; height: 25px; line-height: 25px }
  12. legend { margin-left: 2em; font-weight: bold; font-variant: small-caps; }
  13. label{ display: block; width: 150px; padding: 0 5px 0 0; float: left; text-align: right; font-variant: small-caps }
  14. .inputText{ background: #e5e8ff }
  15. .inputText:focus{ background: #fff }
  16. </style>
  17. </head>
  18. <body>
  19.  
  20. <form action="" method="post">
  21.    <fieldset>
  22.       <legend>vos coordonées</legend>
  23.       <p><label for="prenom">prenom : </label><input class="inputText" id="prenom" type="text" name="prenom" /></p>
  24.       <p><label for="nom">nom : </label><input class="inputText" id="nom" type="text" name="nom" /></p>
  25.    </fieldset>
  26. </form>
  27.  
  28. </body>
  29. </html>


Rendu sur opera :
Image utilisateur

Rendu sur IE :
Image utilisateur

La solution à ce problème consiste à utiliser un positionnement négatif pour le legend.

A ajouter dans le head de ma page exemple avec un commentaire conditionnel :

Code : Autre - Afficher / masquer les numéros de ligne
  1. <!--[if IE]>
  2. <style type="text/css">
  3. fieldset { position: relative; top: 1em }
  4. legend { position: relative; top: -1em; padding: 0.3em 0 0 0 }
  5. </style>
  6. <![endif]-->


On utilise un positionnement relatif afin que la propriété top s'applique à nos balises.
Sur le fieldset, on utilise un top: 1em afin de décaler le fielset vers le bas.
Sur le legend on utilise un top: -1em afin que le legend "rentre" dans le fieldset.
On se sert également d'un petit padding-top afin de repositionner correctement le texte du legend.

Les valeurs que j'ai utilisé sont propres à ma page, à vous de modifier légèrement ces valeurs pour obtenir le meilleur rendu possible.

J'ai également mit le css directement dans ma page, mais c'est évidemment mieux d'utiliser des feuilles de styles.

Édité le 06/03/2008 à 10:10:48 par strucky
Image utilisateur
 
Hors ligne strucky # Posté le 22/04/2008 à 13:39:31
Avatar
Modérateurs
Comment imbriquer des listes ul ou ol en html ?


Un élément ul, ou ol ne peut avoir pour enfant direct uniquement que des éléments li.

Donc pour imbriquer une liste dans une autre, la liste enfant doit-être contenue dans un élément li de la liste parente.

Exemple basique :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>item 2.1</li>
      <li>item 2.2</li>
    </ul>
  </li>
  <li>item 3
    <ul>
      <li>item 3.1</li>
      <li>item 3.2
        <ul>
          <li>item 3.2.1</li>
          <li>item 3.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>item 4</li>
</ul>
Image utilisateur
 
Hors ligne graphox # Posté hier à 21:45:57
Hoho ! Quel rigolo !
Avatar
Groupe : Membres
Question : Comment éviter que le background-image d'un input s'échappe quand nous dépassons du champs ? (sous IE)

Réponse :
Si votre feuille de style est semblable a :
Code : CSS
1
2
3
4
5
6
input{
background-image:url('images/champ.png'); /* L'url où se trouve votre image de fond par rapport au fichier css */
background-color:transparent; /* Pour enlever le fond blanc par défaut */
border:none; /* Pour enlever les bordures se trouvant autour de votre input */
width:150px; /* Important : Renseigner ici la taille exacte de votre image de fond de l'input, le texte ne dépassera donc pas cette taille, vous pouvez après mettre un padding pour espacer les bords de l'image avec le texte */
}

Est que cette image prend toute la place du champ (pas une petite image dans un coin de l'input), il suffit de rajouter :
Code : CSS
1
2
3
4
5
6
input{
background:url('images/champ.png') right top no-repeat; /* Voilà les nouvautés ! Modifiez la première ligne de votre code par celle-ci, est le tour est joué ! */
background-color:transparent;
border:none;
width:150px;
}
Édité hier à 21:56:40 par graphox
Image utilisateur
Inscrivez-vous ;)
 
Hors ligne ybouane # Posté il y a 1h58
<vive le SDZ!!!>
Avatar
Groupe : Membres
Comment créer son site
Apprenez à créer votre site web !

plusieurs vont me remercier car ils n'avaient pas vus le lien dans toutes les pages du site! :p
Outils services compteurs générateurs des scripts... gratuitement à 100%
Générateur de bannières animées gratuit
Générateur d'userbars
Générateur de menus web 2.0

Description de mon site:
Support du web est un site qui propose des outils, des services, des compteurs de connecté, des compteur de pages vues, des compteurs de clics, des générateurs de bannières animée gratuit, des scripts php,(X)html, css, javascript... gratuitement à 100% pour les webmasters développeurs...
Image utilisateur
 

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 89 Zéros connectés | Requêtes SQL 7 requêtes | Temps de génération de la page : Total (SQL) 0.0695s (0.0555s)