MyKemushi.com : site fictif

[MyKemushi]

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

[AlexMog]

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

[Soulalex]

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.

[MyKemushi]

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

[MyKemushi]

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

[Soulalex]

Ceci devrait corriger ton problème :
 

body
{
  margin: auto;
  top: 0px;
  left: 0px;
}

[MyKemushi]

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

[Soulalex]

J'ai simplement enlevé les marges sur toute la page