Bonjour , quand j'ai commencé à creer mon site apres avoir suivi le cours HTML5 / CSS3, j'ai eu un souci car l'arriere plan de ma partie "header" était trop grand et donc il y avait une barre de défilement horrizontale. J'ai donc bidouiller en modifiant la taille de l'image pour que sa soit bon (pas de barre horizontale car image correspondant a l'écran). Cependant, je suppose que sa veut dire que j'ai adapté cette image pour ma résolution 1600x900 mais que si je vais sur le site avec un autre ordinateur mon arreire plan ne sera pas bon (trop petit ou trop grand).
Ma question est donc, quel est le moyen de faire en sorte que tout mon site s'adapte aux différents ordianteurs.
Je précise que je ne veux pas qu'il s'adapte a la diminution de la taille de la fenetre internet sur un meme ordianteur.
Faut il creer plusieurs site? un code en + dans le html.. ?
Je n'y connais casi rien en codage car j'ai commencé le cours cette semaine . Merci d'avance pour vos réponse
Oups je l'avais oublié celui la (doctype), je veins de le rajouter merci.
Peut etre je comprend pas grand chose mais en essayant d'adapter ce tuto a ma situation je ne sais pas comment procéder.
J'ai réussi a crer le modele de site qui me correspond mais il me reste a l'adapter a toutes les définitions.
Le tuto montre comment garder toujours son site centré au milieu de la page alors que moi je voudrais que mon arriere plan de l'en-tete puis par la suite l'arriere plan du reste s'adapte a la définition. En gros, le dégradé bleu du site du zéro qui se trouve dans header, comment fait on pour qu'il ai toujours la largeur de l'écran et que sa hauteur soi proportionnelle.
Faut il plusieurs fond d'écran a chaque dimension?
Si tu regarde bien le code, tu verra que le background du header du sdz, c'est juste une image de dégradé de quelques pixel de large sur autant de pixel de haut que le header. Ensuite tu répète cette image sur l'axe des x, et il s'adaptera à la largeur de du bloc si tu ne donne pas de taille fixe (dans le cas du sdz, le bloc fait la largeur de l’écran, et possède une largeur minimum).
Merci pour vos réponse, mais bon la je me rend compte c'est trop compliqué pour moi, j'arrive meme pas a faire mon site en suivant le TP, des décalages, images qui s'affichent pas, je craque^^
Si quelqu'un veut m'aider: voila mes codes, ce que j'obtient et ce que je voudrais obtenir (comme le TP sauf: aucune marge et une image de fond dans "header")
Relis ce que je vient de te dire :
Pour faire une bannière comme sur le sdz, il te faut :
Une image d'un dégradé vertical, de la hauteur de ton block, et d'une largeur quelconque (la plus petite étant préférable).
Répéter ce background sur l'axe des x.
Un block qui n'as pas de largeur fixe.
Avec celui du sdz ça fera :
<div id="header">
<!-- Ici le contenu de ta bannière -->
</div>
#header{
background-image:url(http://www.siteduzero.com/images/designs/2/bg_header.png);
background-repeat : x; /* Repetera le fond sur l'axe des x */
height: 122px; /* Hauteur de ton block, ici même hauteur que l'image */
min-width:940px; /* Largeur minimale de la bannière, optionnel ici */
}
Merci de me répondre mais tu ne répond pas a ma question, tu n'a lu que le début de mon poste, je ne veux pas faire de dégrader, je veux mettre une image et je sais ce qu'il faut faire mais le soucis c'est que ce que j'ai essayé ne fonctionne pas (voir codes et images du post précédent)
Tu devrais utiliser les Medias Queries. Dans document HTML, tu as cette ligne dans la balise "head".
<link rel="stylesheet" href="Acceuil.css" />
Très bien. Maintenant, tu vas dans ton fichier CSS. Ensuite, tu vas taper ces lignes. (C'est pour te montrer un exemple des Medias Queries.)
@media screen and (max-width: 900px){
body{
background-color: orange;
}
}
/* C'EST JUSTE À TITRE D'EXEMPLE */
Ensuite, tu pourras essayer de réduire la largeur de ta fenêtre et tu remarqueras que ton background va changer. Alors dans ces Medias Queries, on change la color du background si l'écran est inférieur à 900px. Tu pourras adapter ton truc pour les ecrans des utilisateurs avec les Medias Queries.
En gros, sur les 3 images de la banniere j'ai que la fleche blanche qui s'affiche mais pas mon arriere plan et le bouton rouge.
Mais ce qu'il faut regarder c'est surtout les codes, il doit y avoir une raison de pourquoi ma banniere ne s'affiche pas comme dans le TP mais je ne l'ai pas trouvé.
En as tu un à me conseiller car sur google, la liste des hébergeurs gratuits est longue.
Pour ce que tu m'as dis, j'ai mi la ligne qui était sur "relative" en absolute mais s'a na rien chnagé, je ne comprends pas, j'ai vérifié a plusieurs reprises les chemins et c'est pas sa le soucis.
Je suis vraiment débutant donc si il y a une erreur dans mon code elle ne me saute pas aux yeux.
En demande d'aide, je ne peut pas avancer tant que ma banniere n'est pas faite
J'ai testé de remplacer "background" par background-image" comme tu me l'as dit mais sa n'a rien changé. Je ne comprend pas, mon code a l'air de correspondre a celui du TP mais mon arriere plan de la banniere et le bouton rouge ne s'affichent pas...
Je poste des liens de téléchargement de mes fichiers codes si quelqun veut travailler dessu pour voir ce qui cloche.
(cliquer sur les liens puis cliquer sur "télecharger le fichier à droite de la fenetre ouverte)
@TGez : En plus de déterrer un sujet vieux de plus de 6 mois, ta solution est inutile : body est un élément de type block et prend donc 100% de la largeur par défaut.
Moi ce que je ne comprends pas c'est que j'ai respecté tous les conseils donnés ici avec les valeurs de "width" mais mon site n'a absoulement pas la même résolution sur un ordinateur fixe et un ordinateur portable par exemple. Sur le fixe tout paraît "normal" et sur le portable qui a une résolution plus petite et bien mes pages sont déformé c'est-à-dire que le footer par exemple se met tout en haut alors qu'il ne devrait pas, les textes en <p> </p> se déplacent je ne comprends pas pourquoi.
Voici un exemple de mon code qui est le même sur toutes les pages .css:
body
{
background: white;
background-repeat: no-repeat;
width: 100%;
margin: auto;
}
.footer{
margin-top: 10px;
font-size: 14px;
font-family: 'times new roman';
width: 100%;
}
Si quelqu'un pour m'expliquer pourquoi ma page se modifie lorsque je change de support.
pour le déterrage, on va traiter le mal à la racine. Je ferme le sujet, merci de créer un nouveau sujet dédié à votre problème plutôt que de faire de la nécromancie.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)