[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

treize

# Posté le 03/12/2007 à 19:09:49

Ice screen

Groupe : Membres

Reprise du dernier message de la page précédente :

Bah euh, Olympe Network a été piraté donc plus maintenant :'(

» Topic de présentation
» Blog de Beedee's

strucky

# Posté le 26/02/2008 à 15:47:51

Jamais content !
Avatar

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 :

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

Édité le 26/02/2008 à 16:16:00 par strucky

treize

# Posté le 01/03/2008 à 14:56:57

Ice screen

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

body
{
/* Largeur de la page */
width: 800px;
/* Background de la page */
background: url(../images/arriere_plan.png) top center repeat-y black
}

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

<div id="deco_gauche">
<div id="deco_droite">
</div>
</div>

Jusque là, c'est simple

.
Maintenant le CSS :

Code : CSS - Afficher / masquer les numéros de ligne

#deco_gauche
{
/* On lui applique son background */
background: url(../images/colonne_gauche.png) top left repeat-y black
}
#deco_droite
{
/* On lui applique un padding, histoire que le corps ne passe pas dessus */
padding: 0px 20px;
/* De même pour cette colonne sauf qu'elle est à droite */
background: url(../images/colonne_droite.png) top right repeat-y black
}

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

» Topic de présentation
» Blog de Beedee's

strucky

# Posté le 01/03/2008 à 19:50:49

Jamais content !
Avatar

Ouaip, là je suis d'accord, les colonnes sont bien extensibles en hauteur

Par contre un truc à rectifier, c'est le padding pour #deco_gauche.
Il n'en faut pas

treize

# Posté le 01/03/2008 à 23:33:53

Ice screen

Groupe : Membres

Oui effectivement, je viens de m'en rendre compte.

Boh, je modifierais demain.

» Topic de présentation
» Blog de Beedee's

strucky

# Posté le 02/03/2008 à 18:51:01

Jamais content !
Avatar

C'est ajouté

A vot' bon coeur m'sieurs dam'

strucky

# Posté le 06/03/2008 à 10:09:19

Jamais content !
Avatar

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

<!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>
<title>Ma page</title>
<meta name="generator" content="Quanta Plus" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
form { width: 500px; padding: 25px; background: #d9fffb }
fieldset { margin: 0 0 25px 0; background: #d9ddff }
fieldset p { margin: 15px 0; padding: 0; height: 25px; line-height: 25px }
legend { margin-left: 2em; font-weight: bold; font-variant: small-caps; }
label{ display: block; width: 150px; padding: 0 5px 0 0; float: left; text-align: right; font-variant: small-caps }
.inputText{ background: #e5e8ff }
.inputText:focus{ background: #fff }
</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>vos coordonées</legend>
<p><label for="prenom">prenom : </label><input class="inputText" id="prenom" type="text" name="prenom" /></p>
<p><label for="nom">nom : </label><input class="inputText" id="nom" type="text" name="nom" /></p>
</fieldset>
</form>
</body>
</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

<!--[if IE]>
<style type="text/css">
fieldset { position: relative; top: 1em }
legend { position: relative; top: -1em; padding: 0.3em 0 0 0 }
</style>
<![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

strucky

# Posté le 22/04/2008 à 13:39:31

Jamais content !
Avatar

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

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

graphox

# Posté le 10/10/2008 à 21:45:57

Au secours ! Zai peur
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 :

Aperçu :
Image utilisateur

Si votre feuille de style est semblable a :
Code : CSS

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 */
background-repeat:no-repeat;
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

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é le 03/11/2008 à 17:08:26 par graphox

Sites à voir ou que j'aime bien : Dream-life - Kawizh - Ze visitor - La Tortue Facile - Art Toon - Accessibilite Php

Ajouter votre site !

ybouane

# Posté le 11/10/2008 à 05:22:00

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!

Outils services compteurs générateurs des scripts... gratuitement à 100%
Générateur de gifs animés gratuit
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...

strucky

# Posté le 14/11/2008 à 21:14:10

Jamais content !
Avatar

Pour en finir avec les images qui ne s'affichent pas

Vos images ne s'affichent pas dans votre navigateur ?
Cette explication est faite pour vous et vous permettra sans doute de régler votre problème.

Première chose à savoir, il ne faut jamais mettre le chemin d'une image (ou autres fichiers) depuis la racine du disque dur, les chemins du genre C:\Documents and Settings\mon_site_web\mes_images\image.jpg ne doivent-être en aucun cas utilisés.
A la place, on utilisera des chemins relatifs.
Si votre site est sur un serveur web, les chemins absolus depuis la racine du site ou encore des urls entières (http://monsite.org/mes_images/mon_image.gif) sont préférables.

Ensuite, on procède par étapes pour résoudre ce problème d'affichages :

C'est sans doute quelque chose de très con, mais votre image existe t-elle ?
Si vous avez un espace sur un hébergement, a t-elle été correctement transférée vers votre espace ?
Ce sont des choses élémentaires à vérifier.

Avez-vous bien mit l'extension de votre image, dans le chemin vers celle-ci ?
Code : HTML

<!-- Incorrect, l'extension de l'image est omise -->
<img src="images/soleil" alt="lever de soleil" />
<!-- Correct, l'extension indique que l'image est de type "png" -->
<img src="images/soleil.png" alt="lever de soleil" />

Il en est de même avec une image devant-être affichée en background via le css
Code : CSS

1
2
3

#monBloc{
   /* Pas bon, manque l'extension de l'image */
   background: url(../images/fond);

On vérifie que la casse (différences entre majuscules et minuscules) est correcte dans le nom et extension de l'image, pour le navigateur, mon_image.jpeg est totalement différent de monImage.JPEG

___________________

J'ai peut-être oublié d'autres trucs pouvant concerner un problème d'affichage d'une image, si vous avez d'autres conseils à émettre, n'hésitez pas.

Édité le 14/11/2008 à 21:16:53 par strucky

graphox

# Posté le 15/11/2008 à 06:52:56

Au secours ! Zai peur
Avatar

Groupe : Membres

Je pense aussi que tu pourrais l'arboresence (oui, ça ne s'écrit pas comme ça :honte:

)
Genre si fond.jpg et bien par rapport à la feuille de style, si soleil.png, bien par rapport à index.html --> [dossier]images --> soleil.png

Car beaucoup de personne oublie ceci