Bonjour à tous,
Je suis entrain de créer un site web avec un design extensible mais j'ai essayer de suivre des tutos sur internet et sur youtube et j'ai toujours pas compris et comment faire, et ça marche pas aussi d'ailleurs.
Les marges et padding sont en px voici quelques photos et mon code:
La taille que j'utilise pour créé mon site:
Et dans la résolution 1280x800:
Mon code HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!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="en"
lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The world of Air Traffic Controllers</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<div id="header"></div>
<!-- Menu grey -->
<div id="menu"></div>
<!-- Text menu -->
<div id="menu-text">
<dl>
<dt>Menu 1</dt>
</dl>
<dl>
<dt>Menu 2</dt>
</dl>
<dl>
<dt>Menu 3</dt>
</dl>
</dl>
<dl>
<dt>Menu 4</dt>
</dl>
</div>
<div id="contents">
<div id="presentation"><h1><font face="Helvetica"><br /> Presentation of the website </font></h1></div>
<div id="presentationtext"><font face="Helvetica"><br /><br /><br /><br /><br /><br />Nam sit amet nunc lectus. Aenean nulla justo, pharetra vel massa ac, viverra vulputate purus. Mauris maximus auctor dolor, id ornare lacus dapibus at. Morbi vitae iaculis nunc, nec accumsan libero. Mauris congue nec nisi ac scelerisque. Etiam in interdum magna. Pellentesque luctus in orci at varius. Fusce posuere erat ac lacus dictum porttitor. Suspendisse id arcu vel nibh auctor sollicitudin. Cras sed erat in diam varius ornare. Praesent vestibulum dolor quis magna condimentum finibus. Nulla blandit ipsum erat, lobortis pellentesque mauris vulputate pulvinar. Ut ultrices metus non lectus pretium pharetra. Pellentesque et pretium libero.</font>
<p class="right"><font face="Helvetica">The Webmaster.</font></p>
</div>
<br clear="all" />
</div>
<div id="footer"><center><font face="Helvetica" size="1.5">Copyright © 2014 - The world of Air Traffic Controller by Matthew M.</font></center></div>
</body>
</html>Mon code CSS:
body{
background-color: #000b1d;
background-size: 100% 100%;
width: 100%;
}
.right{
text-align: right;
}
a{
text-decoration: none;
color: #000000;
}
.clear{
clear: both;
}
#header{
height: 358px;
background: url(header.jpg) no-repeat center;
}
#menu{
height: 40px;
background: url(menu.jpg) no-repeat center;
}
#conteneur-menu{
}
#menu-text{
height: 40px;
margin-left: 300px;
margin-top: -40px;
font-family: Arial;
font-size: 18px;
}
dl{
width: 250px;
height: 40px;
margin: 0; padding: 0px;
float: left;
}
dt{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
color: #620055;
}
dt:hover{
color: #005371;
}
#contents{
background: url(contenu.jpg) repeat-y center;
padding: 0 300px;
}
#presentation{
float: left;
}
#presentation h1{
float: left;
color: #005371;
}
#presentationtext{
width: 1000px;
}
/*/////////////////////////////
FOOTER
////////////////////////////*/
#footer{
background: url(footer.png);
width: 1050px;
height: 37px;
margin-left: 275px;
color: #2c2c2c;
}Et voilà, merci d'avance de votre aide.
PS: Je débute dans le codage donc si vous avez des questions à me donner je suis preneur :)
9 réponses
Hello,
Tu n'es pas obligé d'utiliser des valeurs en % surtout pour les versions d'écran supérieur à 1028. Pour les devices style Tablette et Smartphone, il est préférable de passer les valeurs en % mais toujours sans obligation, tout dépend de la flexibilité et l'affichage que tu désires.
. Je te recommande comme les autres d'utiliser une grille pour tes débuts car ça te permet de mettre en place rapidement une mise en page et qu'elle soit cohérente au niveau de certaines dispositions.
Voici un tuto sur la création d'une grille responsive: http://www.grafikart.fr/tutoriels/html-css/grille-responsive-css-498
Plus d'infos sur les grilles en CSS: http://www.grafikart.fr/tutoriels/html-css/grid-css-170
Utilisation de Twitter Bootstrap (base CSS qui peut t'aider à mettre pas mal de composant et mise en page très rapidement en place): http://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182
Et le lien le plus important: Pour apprendre le fonctionnement du Responsive Design: http://www.grafikart.fr/tutoriels/html-css/media-queries-responsive-178
Ne te décourage pas, car il y a plusieurs moyens d'arriver au résultat que tu souhaites. Le tout est de comprendre dans un premier temps la logique et après ça c'est d'apprendre comment optimiser au mieux ton code et de corriger les erreurs.
En espérant que ça puisse t'aider et bienvenue dans le monde merveilleux du code :p
hachbé
Bonsoir,
Comment je peux faire pour les medias queries ? C'est quoi la balise ?
Mais si je met tout en pourcent mais élèment ne sont plus à la bonne place.. Sinon pour transformer de px à % il y a un outil pour faire la transformation en gardant la même taille ?
Merci d'avance :)
Tu as plusieurs solutions qui s'offre à toi (tu peux même combiner) :
- Utiliser une grille CSS déjà faite, il en existe beaucoup (ou faire la tienne)
- Mettre des % au lieu de px dans ton CSS
- Utiliser les Media Queries, c'est du CSS, regarde comment utiliser sur internet, c'est juste une ligne à écrire puis entre accolade tu mets du CSS habituel
Si je met des % à la place de mes px sa fait décaler le site car c'est grâce que j'ai placé mes objets !? :/
Les % permettent de s'adapter d'un écran à un autre, mais après si tu fais correctement qu'avec des % sur ton écran, le resultat ne sera pas tout à fait le même sur un écran avec une autre résolution que le tien.
Bonsoir, sinon tu peux utiliser les grilles du FrameWork "Bootstrap" : http://getbootstrap.com