Aide pour un layout en CSS

Fermé
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008 - 14 juin 2008 à 13:50
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008 - 19 juin 2008 à 08:50
Bonjour,
Je suis en train de faire le layout d'un blog en DotClear et je bloque sur un petit soucis que je ne parviens absolument pas à solutionner...

Voici le fichier html :
http://www.pierre-neuville.be/test/layout.htm
Et le css :
http://www.pierre-neuville.be/test/style.css

Si vous observez bien vous voyez que le content_bg vient se superposer au background du dessus. Ce qui ne devrait bien évidement pas arriver.

Ca devrait ressembler à ceci :
http://www.pierre-neuville.be/test/home.jpg

Le fait est que le contenu doit commencer juste en dessous de la ligne de "menu". Mais donc le content background ( selon mon css et mon layout ) va commencer là aussi et on aura ce qui s affiche désormais sur la page.

Je voudrais donc trouver un moyen pour pouvoir décaller ce div plus bas .... tout en laissant du contenu dans celui ci afin qu'il grandisse avec celui ci ( sur Y ).

Et donc je devrais avoir un DIV pour toute la zone de contenu et dans celui ci un pour le menu à droite et un pour le contenu à gauche.

Voila si quelqu'un à une idée, m'ême s'il faut redécouper l'image de base autrement ou structure la page autrement je suis preneur !


Merciii !
A voir également:

12 réponses

warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
15 juin 2008 à 00:06
bonsoir


J avoue même après trois relecture , je n ai pas compris ^^


Tu veux que le div de texte soit en dessous du header ?

un body

div header

div content avec deux div : 1 content et 1 menu (droit)

le bg du content démarrera a la base de celui-ci et non sur le header , qui lui reste une base fixe du site
1
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
15 juin 2008 à 00:28
Mmmmh oui en gros c est ça ...

le BG du content doit démarre sous le header .... mais par contre le content doit démarrer dans le header ... c ets la que se pose mon probleme :D


tu vois une solution ?

J'avais pensé faire donc un div qui descend jusque sous le header mais alors je perds de la place pour le contenu et je vais avoir un gros blanc ... vu que le contenu est un "bloc" qui va jusqu'en bas de la page ...
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
16 juin 2008 à 01:56
re


Bon je vais rapidement te donner une idée ^^



<body>

<div id="header">header.jpg</div

<div id="content">
<div class="contenu"> blalalalalala </div>
<div class=menu"> ton menu </div>
</div

</body>

dans le css

#header {
width: 1000px;
margin:auto;
}

#content {
width: 1000px;
margin: auto;
}

.contenu {
width: 700px;
float: left;
}

.menu {
width:300px;
float: rigth;
}


Je donne ces chiffre à revoir en fonction de ton site
Il y a à revoir mes margin les padding etc..

Mais le principe est de mettre dans un div id les deux : content et menu
De maniere à ce qu ils soit parent et donc alignés de la même maniere , pour ensuite leur dire
Je veux que content reste sur la gauche et menu sur la droite

Il faut juste faire le bon réglage et ne pas se planter avec un jpg qui serait trop large (par exemple)

Mon exemple est à travaillé sur la forme , mais de base c est le mieux.
Toi tu fais des position absolute et relative , ce qui est mauvais , enfin pour ce que tu veux en faire


Essais ^^
1
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
16 juin 2008 à 02:05
Le fait de faire deux div un a droite et un a gauche ne me pose pas vmt de problème en fait ...

j'dois vraiment avoir du mal a expliquer ce qui cloche faut croire xD ...


Le seul et unique probleme c est que dans mon contenu en fait j'ai deux partie ... une qui est dans le header ( partie ou y a le papier peint derrière ) et une qui est en dessous de cette ligne là ...

La partie du dessous à un background qui dessine les contour de la page ... la partie du dessus n'a pas de background vu qu'il ya le header en fond qui défini déjà l'image ...

Le probleme est donc ici de trouver un moyen pour avoir ces deux partie du content ... en un seul div ?!

Enfin du moins que je n'ai pas à séparer mon contenu dans deux div était donné que ça va etre une variable php reliée au sytème du blog.

Je sais pas si c'est plus clair ? :-S
0
Mon problème ici étant surtout que j'ai un un dégrade le long du contenu ...
Mais le contenu commence plus haut que le "top" donc je ne peux pas afficher le dégradé dès le début et je dois l'afficher qu'a partir de 300px du dessus si je ne m abuse ...
Mais par contre le contenu commence plus haut et je ne veux pas faire deux div différent pour le contenu ...
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
14 juin 2008 à 21:50
Personne ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
15 juin 2008 à 00:57
pourquoi le content dans le header , sert a rien vu qu il sera caché par l image du head justement
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
15 juin 2008 à 04:08
non non pas dans le header juste sous la bannière et la ligne ou y a le bouton menu qui est une image qui fait tout une ligne car pas besoin de mettre de contenu a la meme hauteur que ce "bouton" ...
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
16 juin 2008 à 02:34
Ha mais tu parle du body , pas du contenu :)

Les deux images rouges du fond

Tu veux que la partie 'travailléeé soit allignée au header (bas) , mais ton head fait 148 et le css du top height: 280px; tu as règlé ça ?
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
16 juin 2008 à 02:39
http://www.warlix.fr/test1.html


comme ça , bon pas de respect de couleur .. mais ^^
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
16 juin 2008 à 02:40
c ets la bannière qui fait 148 de haut ... l'autre truc devrait etre aligné a environ 300 pixel logiquement ...

Enfin si d'ici demain j'ai pas trouvé de solution "par moi meme" ou avec ton aide,
je vais demander ça a un ami dont c est le boulot, ça lui prnedra deux minutes :p

merci quand meme
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
16 juin 2008 à 02:41
le décalage est fait expres entre le fond et la bannière ... regarde le jpg de base :D

et c est ce décalage qui rend l exercice si difficile en fait sinon il n y aurait aucun probleme ....
0
warlix Messages postés 1201 Date d'inscription mercredi 25 juillet 2007 Statut Contributeur Dernière intervention 21 février 2009 288
16 juin 2008 à 02:48
ok

Bon désolé je n ai pas compris ce que tu souhaitais

Bon courage quand même et si tu trouves la solution pose là ici , que je me réveille moins c.. :p

si c est le texte , il peut se décaler avec un padding-top et d'ailleurs le reste aussi
le padding te permet de jouer en dedans les div sans qu'ils soient modifié sur leurs alignements extérieurs (margin)
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
16 juin 2008 à 02:54
Un grand merci en tout cas d'avoir essayé :D


C'est pas facile a expliquer comme ça et puis je ne dois pas utiliser le langage ad hoc a mon avis ...


Mais je posterai le résultat ici si tu veux oui comme ça tu verras ce que je voulais obtenir ... enfin ca devrait ressembler logiquement à ceci :

http://www.pierre-neuville.be/test/home.jpg

mais en page web :D

Si tu regardes bien le contenu commence au dessus de l espece de papier peint ( vertticalement parlant ) .... et tout le long de la page, le long du cadre du contenu il y a une légère ombre ...


Le probleme sur le layout que je donne ici c est que cette image de fond pour la lagère ombre le long du cadre du contenu se met par dessus le papier peint et commence directement sous la bannière ...

Et je ne trouve pas de solution pour la faire commencer plus bas sans devoir créer deux div ce qui ne m arrange pas puisque le contenu du blog est chargé par une seule variable et donc tout doit se trouver dans le meme div ...


Enfin bon ... bonne fin de soirée à toi !
0
M_Icy Messages postés 9 Date d'inscription samedi 14 juin 2008 Statut Membre Dernière intervention 19 juin 2008
19 juin 2008 à 08:50
Et voila c'est enfin terminé après une nuit d'acharnement :D

http://www.pierre-neuville.com/fr/

Plus qu'a faire la version anglaise et puis le site sera entièrement terminé !
0