Aide pour site responsive

Aide pour site responsive - HTML/CSS - Programmation

Marsh Posté le 16-07-2014 à 16:32:26    

Bonjour tout le monde,
 
j'ai crée il y a quelques années pour mon activité libérale un "logiciel" de gestion de mes patients sous forme de site web avec base MySQL.
 
Tout fonctionne comme je le souhaite mais je voudrais le faire évoluer niveau design pour être plus pratique et accessible partout (et sur tout support), d'où ma demande pour de l'aide à construire mon site avec du css efficace et responsive.... sauf que je connais moyennement CSS et n'ai pas le loisir de tout reprendre à la base.
 
Est ce que quelqu'un pourrait m'aider ? J'ai crée l'apparence que je souhaitais sous photoshop pour avoir une idée du rendu, je les poste ici si ça vous parle et interesse :
 
http://img11.hostingpics.net/thumbs/mini_815048Vuemobileportrait.jpg
 
http://img11.hostingpics.net/thumbs/mini_806057Vuemobileportraitmenu.jpg
 
http://img11.hostingpics.net/thumbs/mini_699849Vueordipaysage.jpg


---------------
www.bubbleburstband.com
Reply

Marsh Posté le 16-07-2014 à 16:32:26   

Reply

Marsh Posté le 16-07-2014 à 16:54:18    

Passe sur bootstrap:
 
http://getbootstrap.com/
 
Vu le design ton site est déjà prêt pour, tu auras peu de changements à faire (regarde dans la doc la partie sur les grids: CSS => grid system)
 
Ca te donnera un bon point de départ sans pour autant toucher beaucoup de CSS ;)

Reply

Marsh Posté le 16-07-2014 à 17:05:39    

Au risque de passer pour un con : je suis déjà tombé sur ce bootstrap.... et n'ai pas compris comment ça fonctionnait .... ! :D


---------------
www.bubbleburstband.com
Reply

Marsh Posté le 16-07-2014 à 23:03:49    

Simple tu inclus bootstrap dans ton site, tu peux passer par un cdn pour les tests:
http://www.bootstrapcdn.com/
 
Inclus au moins le lien CSS dans ta page, ensuite, par exemple:

Code :
  1. <button type="button" class="btn btn-default">Default</button>


 
Tu devrais voir un bouton stylisé comme sur la doc boostrap (le même look): http://getbootstrap.com/css/#buttons
 
Si tu as ca, c'est correctement intégré, te reste plus qu'a faire le responsive:
http://getbootstrap.com/css/#grid
 
Go tester les exemples avec div="row" dans cette partie, tu devras bien sur tester plus plusieurs navigateurs et te rendre compte qu'il gère bien le responsive a ta place, simplement avec les classes associées.
 
 
EDIT: et pour le "comment ca marche", pour faire simple, c'est un simple CSS dans lequel il a déjà beaucoup de classes faites avec les relations entre chaque, donc il te suffit ensuite d'inclure les classes dans ton html aux bon endroits pour avoir le style graphique associé, ou par exemple, comme ici, le responsive déjà fait.


Message édité par Devil'sTiger le 16-07-2014 à 23:07:30
Reply

Marsh Posté le 17-07-2014 à 07:25:52    

Sur vos conseils je m'y suis mis hier pour essayer de comprendre et je pense que je vais finir par y arriver (en tout cas les grandes lignes !)  
 
Je reviendrai vousmontrer le résultat et vous demander conseil si besoin ;-)
 
Merci à vous en tout cas !


---------------
www.bubbleburstband.com
Reply

Sujets relatifs:

Leave a Replay

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