Aller au contenu

MyKemushi.com : site fictif


MyKemushi
 Share

Recommended Posts

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é par MyKemushi
Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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 :

 

1418579299-capture-d-ecran-2014-12-14-a-

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é par MyKemushi
Lien vers le commentaire
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Vous avez collé du contenu avec mise en forme.   Supprimer la mise en forme

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Chargement
 Share

×
×
  • Créer...