Partage

Adapter site à la résolution de l'écran

21 juin 2012 à 12:02:52

Bonjour :D , 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). :o

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 :euh: . Merci d'avance pour vos réponse

<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="Acceuil.css" />
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<title>Evasion</title>
    </head>

    <body>
		<div id="bloc_page">
			<header>
				<img src="fond/lac.jpg"/>
				<div id="titre_principal">				
					<h1>.....</h1>
				</div>
		
				<nav>
					<ul>
						<li><a href="aa.html">aa</a></li>
						<li><a href="ab.html">ab</a></li>
						<li><a href="ac.html">ac</a></li>
						<li><a href="ad.html">ad</a></li>
						<li><a href="ae.html">ae</a></li>
					</ul>
				</nav>
			</header>
                        <footer>
				<div id="top5">
					<h1>Top5</h1>
					<p>Vote..</p>
				</div>
				<div id="Recherche">
					<h1>Recherche<h1>
					<p>......</p>
				</div>
			</footer>
		</div>	
	</body>
</html>

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
21 juin 2012 à 12:25:44

C'est marrant il me semble me rappeler que dans le cours tout code HTML commence par un DOCTYPE..?

Sinon http://www.siteduzero.com/tutoriel-3-4 [...] tensible.html
Ce n'est pas parce que vous ne savez pas vous servir d'un marteau qu'il faut planter des clous au tournevis.
21 juin 2012 à 14:38:13

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?
22 juin 2012 à 11:46:19

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).
22 juin 2012 à 12:13:16

Citation : nightmat

C'est marrant il me semble me rappeler que dans le cours tout code HTML commence par un DOCTYPE..?

Sinon http://www.siteduzero.com/tutoriel-3-4 [...] tensible.html



En plus de ce tutoriel, tu peux jeter un coup d'oeil aux média queries, c'est toujours utile pour être Web Reponsive ;)
22 juin 2012 à 12:21:49

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

Ce que j'obtient

Ce que j'essai d'obtenir

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
		<link rel="stylesheet" href="Acceuil.css" />
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<title>site</title>
    </head>

    <body>
		<div id="bloc_page">
			<header>
				<div id="titre_principal">				
					<h1>Evasion</h1>
				</div>
		
				<nav>
					<ul>
						<li><a href="aa.html">aa</a></li>
						<li><a href="ab.html">ab</a></li>
						<li><a href="ac.html">ac</a></li>
						<li><a href="ad.html">ad</a></li>
						<li><a href="ae.html">ae</a></li>
					</ul>
				</nav>
			</header>
		
			<div id="banniere_image">
				<div id="banniere_description">
					Dernier ajout: ...
					<a href="désert.html" class="bouton_rouge">Voir l'article <img src="fond/flecheblanchedroite.png" alt="" /></a>
				</div>
			</div>
		
			<section>
				<article>
					<h1>Présentation...</h1>
					<p>blablabla...</p>
				</article>
				<aside>
					<h1>Derniers ajouts</h1>
					<ol>
						<li><a href="Corse/Monte Cinto/Monte Cinto.html" title="Corse">Monte Cinto</a></li>
						<li><a href="Haute Savoie/Le trou de la mouche/Le trou de la mouche.html" title="Haute Savoie">Le trou de la mouche</a></li>
					</ol>
				</aside>
			</section>
			
			</section>
				<article>
					<h1>Prochainement</h1>
					<p>blablabla</p>
				</article>
				<aside>
					<a href="pub.html" class="pub">pub<img src="pub.jpg"/></a>
				</aside>
			
			<footer>
				<div id="top5">
					<h1>Top5</h1>
					<p>Vote..</p>
				</div>
				<div id="Recherche">
					<h1>Recherche<h1>
					<p>......</p>
				</div>
			</footer>
		</div>	
	</body>
</html>


body
{
	background-image: none;
	background-attachment: fixed;
    background-color: yellow;
    color: red;
	font-family: Arial;
	font-size: normal;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	margin: 0 0 0 0;
}


/* Header */
titre-principal
{

}

header
{	
	background: url('fond/lac-1600x200.jpg');
	background-attachment: scroll;
    background-color: none;
    color: black; 
	font-family: Arial;
	font-size: normal;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: justify;
	margin: 0 0 0 0;
	overflow: hidden;
	height: 200px;
}
nav
{
    display: inline-block;
    width: 740px;
    text-align: right;
}

nav ul
{
	list-style-type: none;
}

nav li
{
	display: inline-block;
	margin-right: 10px;
}

nav a
{
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover
{
    color: #760001;
    border-bottom: 3px solid #760001;
}


/* Bannière */
banniere_image
{
	margin-top: 15px;
    height: 200px;
    border-radius: 5px;
	background: url('fond/desert_1600x200.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}

banniere_description
{
	position: absolute;
	bottom: 0;
	border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
	background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.8);
	color: white;
    font-size: 0.8em;
}

bouton_rouge
{
	display: inline-block;
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('fond/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

bouton_rouge img
{
    border: 0;
}


/* Autre */
h1
{
    color: black;
	font-family: Arial;
	font-size: x-large;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	text-align: justify;
}


Donc je ne comprend pas pourquoi je n'arrive pas a faire comme dans le TP la banniere.
22 juin 2012 à 14:44:10

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 */
}
22 juin 2012 à 15:44:00

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)
22 juin 2012 à 17:53:16

Edite tes images, le lien est mort.
22 juin 2012 à 18:09:20

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.

Ce n'est vraiment pas compliqué, il suffit d'être logique. Tu devrais regarder ce tutoriel très intéressant et utile sur Alsa.
http://www.alsacreations.com/article/l [...] -queries.html
22 juin 2012 à 20:02:33

OK merci beaucoup pour ce lien, je regarderai sa quand j'aurai réussi a résoudre mon probleme d'images.
Merci encore.
Désolé pour les images:
ce que j'obtient
a peu pres ce que j'essai d'obtenir

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é.
24 juin 2012 à 18:55:34

Salut,

Si tu veux un bon conseil, trouves toi un hébergeur gratuit pour nous donner le lien, ça sera plus facile de t'aider.

Si tu as un problème d'affiche d'image, vérifie leur chemin respectif, par plutôt sur de l'absolu pour être sur.

24 juin 2012 à 20:51:59

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.

banniere_image
{
	margin-top: 15px;
    height: 200px;
    border-radius: 5px;
	background: url('fond/desert_1600x200.jpg') no-repeat;
    position: absolute;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}


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 :euh:
24 juin 2012 à 21:56:54

Et quand tu fais ça ?
background-image: url('fond/desert_1600x200.jpg') no-repeat;

}


La je n'ai pas d'hérgeur sous la main, mais je pense qu'il y a une liste épinglé dans le forum.
25 juin 2012 à 11:55:23

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)

Fichier css

Fichier html
2 janvier 2013 à 16:59:50

Salut

J'espère que tu as trouvé une solution à ta demande au cas où
et pour ceux qui seront dans la même situation
dans ton css
body{width:100%;}
Anonyme
2 janvier 2013 à 17:05:20

@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.
9 février 2017 à 10:49:14

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. 
Anonyme
30 mars 2017 à 10:47:04

On l'a déjà dit et répété : width: 100% est à éviter au maximum.

Et si tu pouvais éviter de déterrer des sujets vieux de plus de 4 ans, ce serait pas mal…

-
Edité par Anonyme 30 mars 2017 à 10:47:25

Staff 30 mars 2017 à 11:17:14

Bonjour,

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 ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!