Aide pour un layout en CSS
M_Icy
Messages postés
9
Statut
Membre
-
M_Icy Messages postés 9 Statut Membre -
M_Icy Messages postés 9 Statut Membre -
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 !
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:
- Aide pour un layout en CSS
- Microsoft keyboard layout creator - Télécharger - Bureautique
- Logiciel layout gratuit - Télécharger - Outils professionnels
- Enlever le soulignement d'un lien css - Forum CSS
- Css download - Télécharger - HTML
- Background color css ✓ - Forum CSS
12 réponses
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
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
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 ^^
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 ^^
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
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
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 ...
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 ...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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 ?
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 ?
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
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
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 ....
et c est ce décalage qui rend l exercice si difficile en fait sinon il n y aurait aucun probleme ....
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)
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)
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 !
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 !
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 ...