MyKemushi Posté(e) December 12, 2014 Signaler Share Posté(e) December 12, 2014 (modifié) Hello, Actuellement je me remets au développement en repartant de zéro. Comme l'application est plus parlante que la théorie pure et dure, je construis un site fictif pour un musicien fictif qui s'apelle... comme moi. Enfin bref, vous l'avez compris, ce site n'a pas vocation à servir mais est pour moi une manière de m'entrainer et de progresser. A l'heure ou je vous parle je n'ai que quelques heures de développement et ça commence à prendre un peu forme, on est sur un site statique en HTML5/CSS3. Dans la première version du site il n'y aura pas de JavaScript. Plus tard, il pourra prendre une tournure dynamyque. Et, je fais appel à vous pour m'aider et me guider dans mes incompréhensions au fil du développement. Par avance, je vous remercie. Problème n°1 - En cours de résolution J'ai créé un élément central pour mon site, là ou toute l'information se placera. Je veux laisser un style épuré et donc le mettre en blanc. Sauf que je veux que cet élément soit "entouré" par deux colones vides mais ayant une couleur différente ou un background. Un peu comme ici : http://chipzel.co.uk/album/super-hexagon-ep .content { text-align:center; background-color: #ab7e7e; width:80%; padding-top:40px ; margin:auto; } content c'est ce qui contient le coeur de la page. Donc là mon code me le centre et laisse une marge de 10% de l'écran de chaque côté. Mon objectif est de pouvoir remplir ces deux marges, séparemment si possible. Par avance, MyKemushi PS : Si le thread n'est pas au bon endroit, que le modérateur qui verra ça ne me tue pas, je m'en excuse. Modifié December 12, 2014 par MyKemushi Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
AlexMog Posté(e) December 12, 2014 Signaler Share Posté(e) December 12, 2014 effectivement, tu n'es pas dans la bonne section. Je déplace ton sujet! Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Soulalex Posté(e) December 13, 2014 Signaler Share Posté(e) December 13, 2014 Tu peux faire un truc de ce genre : <div id="content"> <div id="col-left"> <!-- Contenu de la colonne de gauche --> </div> <div id="col-mid"> <!-- Contenu de la colonne du milieu --> </div> <div id="col-right> <!-- Contenu de la colonne de droite --> </div> </div> Après tu auras juste à adapter un peu ton code CSS. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
MyKemushi Posté(e) December 14, 2014 Auteur Signaler Share Posté(e) December 14, 2014 Pas bête, j'essaie ça demain et je vous dis. Merci bien. Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
MyKemushi Posté(e) December 14, 2014 Auteur Signaler Share Posté(e) December 14, 2014 (modifié) Je me permets un double post, sorry. Nouveau souci, j'ai changé d'avis vis à vis du design et je veux un truc plus simple. Bref, le problème est le suivant : EDIT : Au niveau du bloc vert on croit qu'il est entouré de blanc mais c'est le screenshot qui donne cet effet, le bloc vert est parfaitement mis. Vous voyez les deux marges à côté du bloc bleu ? Elles sont indésirées et je veux que le bloc bleu prenne l'étendu de la page. A vrai dire je ne vois pas ou ça coince dans mon code : @charset "UTF-8"; header { background-color:#21BD72; list-style:none; text-align:center; padding-bottom:20px; padding-top:20px; position:fixed; top: 0; left: 0; right: 0; font-family:arial black; } header a { text-decoration:none; color:white; } header a:hover { color:silver; } .social { float:right; padding-right:20px; } .corps { padding-top: 80px; background-color:#277885; text-align:center; padding-bottom:20px; top:70px; left:0; right:0; } Voilà voilà, merci de m'éclairer. Modifié December 14, 2014 par MyKemushi Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Soulalex Posté(e) December 14, 2014 Signaler Share Posté(e) December 14, 2014 Ceci devrait corriger ton problème : body { margin: auto; top: 0px; left: 0px; } 1 Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
MyKemushi Posté(e) December 14, 2014 Auteur Signaler Share Posté(e) December 14, 2014 En effet ça marche ! Tu peux m'expliquer un petit peu ce que ça fait s'il te plait ? Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Soulalex Posté(e) December 15, 2014 Signaler Share Posté(e) December 15, 2014 J'ai simplement enlevé les marges sur toute la page Citer Lien vers le commentaire Partager sur d’autres sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.