bonjour tout le monde !
je suis débutante dans le développement(je suis actuellement en stage)
depuis trois jours j'essaie désespérément d'aligner 3 div(sidebar,content,puis sidebarright)et je n’y arrive pas ,soit elles ne sont pas dans le bonne ordre,soit elles sont décalés à moment j’ai crue avoir réussi puisqu’elles étaient aligné mais finalement ma sidebar sortait du bas de la page,j’ai mis « height :auto ; »dans ma css mais ca n’a pas marcher non plus je sais pas trop quoi vous mettre car ma css fait plusieurs pages et mon code et plutôt long aussi.
le site :discount-promo
j’espère que quelqu’un pourra m’aider (dites moi qu’elles sont les bouts de codes que vous avez besoin de voir ,je les posteraient)
merci beaucoup a tout ce qui pourront me donné un coup de main
Céline
Version complète: sur le forum Webmaster Hub : casse-tête pour moi
je précise que je suis allez voir la discussion:trois colonnes
mais rien ne marche du moins je n'arrive pas à ce que ça marche.
mais rien ne marche du moins je n'arrive pas à ce que ça marche.
Bonjour Celine,
C'est assez logique vu que tu mets ta <div id="content"> qui n'a pas la propriété "float" au début (avant <div id="sidebar"> et <div id="sidebarright">)
Cela te fait donc un saut de ligne après cette <div>.
Tu devrais mettre ces 3 divs dans l'ordre, soit:
sidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">
Dan
PS: et puisque tu es chez Katsu, remets donc mon bonjour à Sylvain
C'est assez logique vu que tu mets ta <div id="content"> qui n'a pas la propriété "float" au début (avant <div id="sidebar"> et <div id="sidebarright">)
Cela te fait donc un saut de ligne après cette <div>.
Tu devrais mettre ces 3 divs dans l'ordre, soit:
sidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">
Dan
PS: et puisque tu es chez Katsu, remets donc mon bonjour à Sylvain
merci dan ,
mais le probleme c'est que ceci
ps:effectivement je suis en stage chez katsu ,je passerais le bonjour à Sylvain.
mais le probleme c'est que ceci
CITATION
Tu devrais mettre ces 3 divs dans l'ordre, soit:
sidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">
etait la stucture du code jusqu'à maintenant mais mon travail(pour le référencement du site) est de faire passer content juste apres le header,mais maintenant que c'est fait il faut que je fasse que l'affichage du site soit le meme qu'avantsidebar, content et sidebarright, toutes les trois en float:left et à l'itérieur de <div id="wrapper">
ps:effectivement je suis en stage chez katsu ,je passerais le bonjour à Sylvain.
Dans ce cas, il faut travailler en positionnement absolu et non en float.
Cela ne peut se faire que si tes divs ont toutes des largeurs fixes.
Cela ne peut se faire que si tes divs ont toutes des largeurs fixes.
CITATION
C'est assez logique vu que tu mets ta <div id="content"> qui n'a pas la propriété "float" au début (avant <div id="sidebar"> et <div id="sidebarright">)
Cela te fait donc un saut de ligne après cette <div>.
Cela te fait donc un saut de ligne après cette <div>.
comment puis-je enlevé ce saut de ligne?j'ai trouver plein de choses mais rien ne marche
ici
et ici
et aussi ici
y a encore d'autre chose que j'ai essayé mais je trouve plus ou c'est,voila merci pour les futurs réponses
bonjour,
Voilà ma css avec laquelle mes div sont enfin correctement positionnées, maintenant gros problème mes block ne s’agrandissent pas lorsque leur contenu lui s’agrandit comment faire help s.v.p. !
CODE
body
{
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#0000;
margin:20px 0px 20px 0px;
background:url(images/body.jpg) top repeat-x #FF00A2;
background-attachment:fixed;
}
*
{
margin:0;
padding:0;
}
#wrapper
{
background:#fff;
border:3px solid #FF00A2;
width:980px;
margin:0 auto;
}
* html #wrapper
{
width:980px;
}
#innerwrapper
{
width:960px;
margin:1px;
background:#ffffff;
padding:10px;
}
...
#cont-side-right
{
width:960px;
}
#cont-side
{
width:770px;
}
#sidebar
{
float:left;
color:#666;
padding:10px 0px 0px 20px;
width:190px;
}
......
#sidebarright
{
height:200px;
float:right;
width:190px;
background:#F7F7F7;
padding:10px 0 0 20px;
}
{
font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
word-spacing:2px;
color:#0000;
margin:20px 0px 20px 0px;
background:url(images/body.jpg) top repeat-x #FF00A2;
background-attachment:fixed;
}
*
{
margin:0;
padding:0;
}
#wrapper
{
background:#fff;
border:3px solid #FF00A2;
width:980px;
margin:0 auto;
}
* html #wrapper
{
width:980px;
}
#innerwrapper
{
width:960px;
margin:1px;
background:#ffffff;
padding:10px;
}
...
#cont-side-right
{
width:960px;
}
#cont-side
{
width:770px;
}
#sidebar
{
float:left;
color:#666;
padding:10px 0px 0px 20px;
width:190px;
}
......
#sidebarright
{
height:200px;
float:right;
width:190px;
background:#F7F7F7;
padding:10px 0 0 20px;
}
Voilà ma css avec laquelle mes div sont enfin correctement positionnées, maintenant gros problème mes block ne s’agrandissent pas lorsque leur contenu lui s’agrandit comment faire help s.v.p. !
coucou tout le monde ,
ça y est j'ai enfin résolu mon probléme!
je vous met ma solution...
je vous met ce que j'ai ajouté par rapport à celle que je vous avez fourni avant:
body
{
min-height:100%;
}
#wrapper
{
min-height:100%;
}
* html #wrapper
{
height:auto;
}
...
#cont-side-right
{
height:auto;
}
#cont-side
{
height:auto;
float:left;
}
......
#content
{
width:520px;
float:right;
padding:20px 0 0 20px;
height:auto;
}
<div id="wrapper">
<div id="innerwrapper" >
<div id="header">
</div>
<div id="cont-side-right" >
<div id="cont-side" >
<div id="content" >
</div>
<div id="sidebar" >
</div>
</div>
<div id="sidebarright" >
</div>
</div>
<div id="footer">
</div>
</div>
</div>
ça y est j'ai enfin résolu mon probléme!
je vous met ma solution...
je vous met ce que j'ai ajouté par rapport à celle que je vous avez fourni avant:
CODE
body
{
min-height:100%;
}
#wrapper
{
min-height:100%;
}
* html #wrapper
{
height:auto;
}
...
#cont-side-right
{
height:auto;
}
#cont-side
{
height:auto;
float:left;
}
......
#content
{
width:520px;
float:right;
padding:20px 0 0 20px;
height:auto;
}
CODE
<div id="wrapper">
<div id="innerwrapper" >
<div id="header">
</div>
<div id="cont-side-right" >
<div id="cont-side" >
<div id="content" >
</div>
<div id="sidebar" >
</div>
</div>
<div id="sidebarright" >
</div>
</div>
<div id="footer">
</div>
</div>
</div>
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.