Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
547 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page CSS, histoire de bien démarrer

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Mise en page CSS, histoire de bien démarrer

n°2227505
gocho
Posté le 07-05-2014 à 17:27:54  profilanswer
 

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
mood
Publicité
Posté le 07-05-2014 à 17:27:54  profilanswer
 

n°2227523
flo850
moi je
Posté le 07-05-2014 à 19:53:26  profilanswer
 

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


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

n°2227599
gocho
Posté le 08-05-2014 à 20:55:23  profilanswer
 

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
n°2227652
gocho
Posté le 09-05-2014 à 18:37:25  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Mise en page CSS, histoire de bien démarrer

 

Sujets relatifs
Ne pas appliquer le CSS aux balises div.Sauvegarde du "Menu démarrer"
recharger une page COURANTE (pas de lien en dur)Ouvrir page dans fenêtre modale
Problème actualisation page web en arrière-planPython sur page web php
Lancer des script .vbs depuis une page HTMLAide formulaire d'inscription PHP page blanche
Problème CSSAide demandée pour un debutant en html, CSS resulat different sous ie
Plus de sujets relatifs à : Mise en page CSS, histoire de bien démarrer

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.069 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR