Trame verticale

[Thornubik]

Bonjour a tous,

Je souhaiterais copier plus ou moins copier l'interface de ce site : http://www.jmthiphop.com/ sur celui ci http://www.rapandrevenge.com/index.php dont je m'occupe pour la maintenance, je souhaite simplement crée cette foutue trame verticale avec un fond (tout comme le site JMTHIPHOP) lorsque je touche au code sur mon site voila ce que j'obtiens, ce n'est pas si eloigné du but rechercher mais le noir n’englobe qu'un élément a la fois au lieu d’englober tous les articles je vous laisse voir par vous même : http://www.heberger-image.fr/images/74088_Exemple_site_.jpg.html

merci a ce qui prendront le temps de me répondre,

a bientot,

Thorn

Modifié 25 Septembre 2013 par Ernestine
Quand tu fais un lien, n'oublie pas le "http://" au début, sinon ça ne marche pas.

[yuston]

Impossible d'aider davantage sans code. Mais il faut englober dans un élément "global" tous les petits éléments. Il suffit alors de lui mettre un fond noir.

[captain_torche]

A priori, tu as juste besoin d'envelopper tout ton code dans une balise div, et d'appliquer la marge et la couleur de fond à celle-ci.

[Thornubik]

de quel code as tu besoin yuston?

aurais-tu un exemple de cette balise div danacol?

je suis désolé je suis ultra débutant dans l'écriture de code

[captain_torche]

Thornubik, c'est un petit peu la base du HTML ... Il te suffit d'entourer ton code avec

<div id="monmachin">

Ton code

</div>

L'id te permettra de le cibler pour lui donner une couleur de fond noire en CSS.

[Thornubik]

Je vois comment réagis le html en fonction du css sa pas de problème, mais je ne comprend, j'ai deja des balise div (<div class ="nomdanslecss">) , mais lorsque j'ajoute un nouveau nom CSS genre .general { background-color: black;} et que j'englobe mon code html <div id="general"> il n'y a aucune réaction du code. je sais pas si c'est très claire ce que j'explique

[captain_torche]

Oui, mais c'est parce que ton CSS fait référence à une classe (Le point devant le nom) et que tu attribues un ID à ton div.

Pour cibler un id, il faut mettre un dièse (#).

<div id="machin">, sera ciblé en CSS par #machin

<div class="machin"> sera ciblé en CSS par .machin

Un attribut "id" n'est destiné à être présent qu'une seule fois dans la page, tandis qu'un attribut class peut être utilisé sur plusieurs éléments.

[Thornubik]

Yeaah ! t'assure mec merci ! sa fonctionne, va falloir que j'adapte ma mise en page mais merci pour tous ces précieux renseignements! tu me libère de quelques maux de têtes !

[Thornubik]

Re salut a tous, bon la trame est faite mais j'ai un problème toujours, elle ne va pas jusqu'en bas de ma page voici un imprim et mon code css :

#global {

width: 800px;
height:auto;
overflow: visible;
background-color: black;
margin: auto;

}

http://zupimages.net/viewer.php?id=3/1285648062.jpg

[Ernestine]

Il faudrait que ton image de background comporte une bande centrale noire au centre, de manière à simuler la colonne.

[Thornubik]

cela ne risque pas de faire pixeller le background? car c'est un background qui se repete et non un background qui fait la taille de la page

comment on t'il fait sur ce site : http://www.jmthiphop.com/

[Thornubik]

pixélliser pardon

[captain_torche]

Ils n'ont rien fait de différent : seulement, leur contenu est plus haut que le tien.

Si on supprime tout le contenu de leur site, on obtient la même chose que toi.

[Thornubik]

plus haut c'est a dire? il n'ya pas assez d'élement c'est ca? (sur le mien)

[captain_torche]

Oui, c'est exactement ça.

Mais ça n'est pas véritablement un souci : ne va pas rajouter des éléments inutiles sur ta page jusque parce que tu veux que ton fond noir descende en bas.

[Ernestine]

Mets cette image en background :

Et dans ta css, ajoute cette ligne aux styles du body :

background: url("bg.jpg") center top repeat-y;

En mettant le bon chemin pour l'image bien sûr.

[Thornubik]

cela ne fonctionne pas très bien, mais je pense avoir trouvé la solution en ajoutant des balises <br/> entre les éléments

[captain_torche]

Je te l'ai dit : ne va pas agrandir inutilement la taille de ton contenu, ça rend bien comme ça.

[Thornubik]

Cela ne dépend pas seulement de moi, nous avons établie un cahier des charges, j'essaie de m'y tenir

[yuston]

Même avec la méthode d'Ernestine ça ne marche pas?!

[Thornubik]

non pas vraiment;, ayant un grand ecran le fond se repete sur le coté droit et il y'a une bande noir pour le coup

[captain_torche]

Essaye de mettre un min-height: 100%; à ton div en question.

[Thornubik]

effectivement sa m'alonge un peu la bande noire, mais lorsque je passe en plein écran navigateur (f11) il reste un trou en bas, mais avec des balise <br/> le problème se résout je pense utilisé ça, c'est du bricolage mais si sa tiens la route....

[Dadou]

Et non, cela ne tiend pas la route, si l'ecran de ton visiteur est plus haut en hauteur que le tiens, le problème revient.

[Ernestine]

Reprends la technique que je t'ai dite dans mon précédent message, mais au lieu de

background: url("bg.jpg") center top repeat-y;

mets plutôt :

background: url("bg.jpg") center top;