MyKemushi.com : site fictif

[MyKemushi]

<p>Hello,</p>
<p>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.</p>
<p>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.</p>
<p> </p>
<p>Problème n°1 - <span style="color:#ff8c00;">En cours de résolution </span></p>
<p> </p>
<p>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.</p>
<p>Un peu comme ici : <a href="http://chipzel.co.uk/album/super-hexagon-ep" rel="external nofollow">http://chipzel.co.uk/album/super-hexagon-ep</a></p>
<pre class="ipsCode prettyprint lang-css">
.content {
text-align:center;
background-color: #ab7e7e;
width:80%;
padding-top:40px ;
margin:auto;
}
</pre>
<p>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.</p>
<p> </p>
<p>Par avance,</p>
<p>MyKemushi</p>
<p> </p>
<p>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. </p>

[AlexMog]

<p>effectivement, tu n'es pas dans la bonne section. Je déplace ton sujet!</p>

[Soulalex]

<p>Tu peux faire un truc de ce genre :</p>
<pre class="ipsCode prettyprint lang-html">
<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>
</pre>
<p>Après tu auras juste à adapter un peu ton code CSS.</p>

[MyKemushi]

<p>Pas bête, j'essaie ça demain et je vous dis. Merci bien.</p>

[MyKemushi]

<p>Je me permets un double post, sorry.</p>
<p> </p>
<p>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 :</p>
<p></p><blockquote class="ipsStyle_spoiler" data-ipsspoiler=""><img alt="1418579299-capture-d-ecran-2014-12-14-a-" src="<base_url>/applications/sslimageproxy/interface/image.php?url=http://image.noelshack.com/fichiers/2014/50/1418579299-capture-d-ecran-2014-12-14-a-18-45-46.png"/></blockquote><p></p>
<p>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.</p>
<p>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 :</p>
<pre class="ipsCode prettyprint lang-css">
@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;
}
</pre>
<p>Voilà voilà, merci de m'éclairer.</p>

[Soulalex]

<p>Ceci devrait corriger ton problème :<br/>
 </p>
<pre class="ipsCode prettyprint lang-auto linenums:0">
body
{
margin: auto;
top: 0px;
left: 0px;
}
</pre>

[MyKemushi]

<p>En effet ça marche ! Tu peux m'expliquer un petit peu ce que ça fait s'il te plait ? </p>

[Soulalex]

<p>J'ai simplement enlevé les marges sur toute la page </p>