Mise en page CSS, histoire de bien démarrer

Mise en page CSS, histoire de bien démarrer - HTML/CSS - Programmation

Marsh Posté le 07-05-2014 à 17:27:54    

Bonjour,

 

Voici quelques temps que je n'ai pas fait de HTML/CSS (les dernières fois, les forums commencaient à s'insurger de voir des balises table à tout va pour faire de la mise en forme, et IE6 était le futur...) et en m'y remettant un peu, 'jai beaucoup avec tous les instructions CSS qui sont parues depuis (2, 3, on voit même des notions de transformation maintenant : flash ne sert-il plus ?  :whistle: )

 

Bref, quoiqu'il en soit, j'aimerai un avis extérieur un peu plus expert sur comment bien partir pour faire une page, telle que celle ci
http://img15.hostingpics.net/thumbs/mini_177568miseEnPage.png

 

Autant sur les couleurs, pas de soucis.
Mais j'aimerai savoir comment partir et surtout partir de quoi pour faire ce genre de travail.
J'ai lu un peu partout que les div n'étaient pas forcément la solution à tout

 

Combien d'éléments seraient selon vous à créer ?

 

La contrainte majeure étant que cela doit fonctionner sur IE9, et que cela serait bien si l'on pouvait passer sur des écrans de 17 à 20 pouces sans que cela foute tout en l'air (j'aurais donc plutôt tendance à partir sur des placements relatifs plutôt que jouer à coup de pixels).

 

Si quelqu'un à une piste sur la chose, je suis preneur :)

 

Gocho

 

PS : je demande pas de code hein, je préfère qq conseils et demander des validations sur ce que je produirai par la suite :)


Message édité par gocho le 07-05-2014 à 17:29:48
Reply

Marsh Posté le 07-05-2014 à 17:27:54   

Reply

Marsh Posté le 07-05-2014 à 19:53:26    

Je te conseille de partir d'un framework existant, comme foundation ou comme bootstrap(  qui est le plus connu)  
 
Flash sert encore par la puissance de son existant, mais aujourd'hui il y a bcp de choses qui sont possibles en html/css/js


---------------

Reply

Marsh Posté le 08-05-2014 à 20:55:23    

Merci pour ce retour, je vais commencer par regarder.
Dans l'attente, j'ai un point technique qui m'embête : les quarts de cercle.
Je les ai fait assez simplement via des border radius, mais mon probleme réside dans l'effet 3d que je souhaiterai obtenir (cf le quart supérieur gauche sur l'image, fait via powerpoint).

 

J'ai réussi à avoir des choses pas trop mal via les bordures en outset, mais sur les bords droits.
Des qu'il s'agit d'un bord courbe, ça se gâte.

 

Est-ce possible techniquement d'obtenir un rendu tel que sur l'image, sans passer par une image justement ?
Si oui, c'est faisable relativement simplement en css?

 

Je joins mon bout de code correspondant dès que je rentre, ça devrait être plus parlant :-)

 

edit :
Voilà ce que j'obtiens : Le rectangle est proche du résultat voulu (bien que pas forcément très joli, en fait...).
Mais le quart de cercle, c'est pas top au niveau de l'arc.

 

Le CSS

Code :
  1. div.quarterCamembert {
  2. width: 320px;
  3. height: 255px;
  4. margin: 5px;
  5. }
  6. div#bla {
  7. margin: 3px;
  8. border-top-left-radius: 100%;
  9. border-width: 7px;
  10. border-style: outset;
  11. border-color: #FFD2A4;
  12. box-shadow: 1px 1px 5px grey;
  13. background-color: #FFD2A4;
  14. }
  15. div#blu{
  16. top: 20%;
  17. left: 500px;
  18. width: 300px;
  19. height: 100%;
  20. border-width: 10px 10px 10px 10px;
  21. border-style: outset;
  22. border-color: #FFD2A4;
  23. border-radius: 7px 7px 7px 7px;
  24. box-shadow: 4px 5px 5px grey, inset 1px 1px 20px #FFD2A4;
  25. background-color: #FFD2A4;
  26. }


Le HTML

Code :
  1. <html><body>
  3. <div id="bla" class="quarterCamembert">
  5. </div>
  7.  <div id="blu">
  8.   <h3>test</h3>
  9.   <p>
  10.    blablabla...
  11.   </p>
  12.  </div>
  17. </body></html>
 

Si quelqu'un a déjà traité un sujet similaire, je suis preneur :)
J'ai cherché sur internet, mais je n'ai pas trouvé de piste qui ressemblait à ce que je souhaite :/


Message édité par gocho le 08-05-2014 à 22:13:14

---------------
Mon feedback
Reply

Marsh Posté le 09-05-2014 à 18:37:25    

J'ai commencé un squelette de page, qui rend comme je le veux pour le moment (mais bon, y'a pas encore de contenu ^^)
 
Serait-il possible de me conforter sur le fait que je pars dans la bonne direction ou si je peux faire mieux/d'autres façons ?
 
Le CSS

Code :
  1. .lien {
  2.    display: table-cell;
  3.    width: 50%;
  4.    padding: 2%;
  5.   }
  7.   html, body{
  8.    margin:0;
  9.    padding:0;
  10.    border:0;
  11.    width: 100%;
  12.    height: 100%;
  13.   }
  15.   body{
  16.    display: inline-block;
  17.    background-image: linear-gradient(#EBF0FA, #E1E8F5);
  18.   }
  20.   header#logo {
  21.    height : 6%;
  22.    display: block;
  23.    background: url(img/image2.png);
  24.   }
  26.   header#image {
  27.    height : 10%;
  28.    display: block;
  29.    padding: 0;
  30.    background: url(img/image1.jpg);
  31.    margin-top: -0.1%
  32.   }
  34.   header#image p{
  35.    margin-left: 15%;
  36.    padding-top: 10%;
  37.   }
  40.   div#content{
  41.    display : table;
  42.    width: 100%;
  43.   }
  45.   div#left_content {
  46.    display: table-cell;
  47.    width: 30%;
  48.    <!--border : 1px solid black;-->
  49.    text-align: center; /* Centrage horizontal */
  50.    vertical-align: middle;
  51.   }
  53.   div#pour_qui {
  54.    width: 75%;
  55.    border: 0px purple solid;
  56.    margin-top: 5%;
  57.    margin-left: 5%;
  58.    padding: 2%;
  59.    background-color: #C6D9F1; /*#8EB4E3*/
  60.    font-family: Calibri;
  61.   }
  63.   div#middle_content{
  64.    display: table-cell;
  65.    width: 40%;
  66.    <!--border : 1px solid black;-->
  67.    text-align: center; /* Centrage horizontal */
  68.    vertical-align: middle;
  69.   }
  71.   div#right_content {
  72.    display: table-cell;
  73.    width: 30%;
  74.    <!--border : 1px solid black;-->
  75.    text-align: center; /* Centrage horizontal */
  76.    vertical-align: middle;
  77.   }
  79.   footer {
  80.    height: 10%;
  81.    width: 100%;
  82.    position: absolute;
  83.    bottom: 0;
  84.    left: 0;
  85.    vertical-align: center;
  86.    font-family: Arial;
  87.    font-size: 130%;
  88.    background-image: linear-gradient(#E1E8F5, #1D3B62);
  89.   }
  91.   footer p{
  92.    color: white;
  93.    text-align: center;
  94.   }


 
 
Le HTML

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <title></title>
  7.         <meta name="description" content="">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.     </head>
  10.     <body>
  11.        <header id="logo">
  12.   <img src="img/image3.png">
  13.    </header>
  14.    <header id="image">
  15.    </header>
  16.    <div id="content">
  17.   <div id="left_content">
  18.    <div id="pour_qui">
  19.     <h3>pour qui ?</h3>
  20.     <p>
  21.      Du blabla
  22.     <br><br>
  23. Encore du blabla     <br>
  24.     </p>
  25.    </div>
  26.    <p class="lien">
  27.     <a href="#">Documentation</a>
  28.    </p>
  29.    <p class="lien">
  30.     <a href="#">Nous Contacter</a>
  31.    </p>
  34.   </div>
  36.   <div id="middle_content">
  37.   ca
  38.   </div>
  40.   <div id="right_content">
  41.   va
  42.   </div>
  46.    </div>
  47.    <footer>
  48.   <p>
  49.   un ptit peu plus de blabla
  50.   </p>
  51.    </footer>
  52.  
  53.     </body>
  54. </html>


 
Merci par avance de vos avis éclairés :)
 
Gocho


---------------
Mon feedback
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed