28173 sujets

CSS et mise en forme, CSS3

[Résolut]Comment faire pour que le corps de la page soit à cot

Pages :
bonjour!!!
comment je pourrais faire (quel code css) pour mettre le contenu de la page à coté des menu (sans les tableau bien entendu)
merci

upload/9507-prblm.JPG

style.css
a:alink {
color:#000099;
}

a:link{
color:#000099;
}

a:vlink{
color:#990099;
}

a:hover {
color: red;
}

body {
PADDING-RIGHT: 0px; 
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; 
MARGIN: 0px; 
PADDING-TOP: 0px; 
FONT-WEIGHT: normal;
TEXT-ALIGN: left;
TEXT-DECORATION: none;
background: #CCCCCC;
}

#cadre {
position:absolute;
width: 800px;
margin-left:10%;
margin-right:10%; 
text-align: left;
border-collapse: collapse;
border: 1px solid black;
background: #FFFFFF;
}

#centre  {
margin-left: 15%; 
margin-right: 15%; 
}

img {
border:0px;
}

#header {
padding: 0px;
background: url(../img/ban.gif) no-repeat left;
width: 800px;
height: 80px;
}

.menu_barre {
padding: 0px;  
background: url(../img/menu_bar.gif) repeat left;
height: 34px;
width: 800px;

}

.text_bar  {
padding-top: 6px;
color: #0EE010;
}
a.text_bar:link {
color: #0EE010;
}
a.text_bar:vlink {
color: #0DA504;
}

.menu_titre {
width: 15%;
padding-top: 2px;
background: #666666;
font-weight: bold;
text-decoration: none;
text-align: center;
color: white; 
border-collapse: collapse;
border: 1px solid black;
}

.menu_contenu {
width: 15%;
padding: 0px;
background: #C0C0C0;
font-weight: normal;
text-decoration: underline;
text-align: center;
border-collapse: collapse;
border: 1px solid black;
border-top: 0px;
}

.corps {
padding-left: 20%;
padding-right:auto;
padding-bottom: auto;
padding-top: 0%;
border-collapse: collapse;
border: 1px solid black;
font-weight: normal;
width:100%;
}


index.html
<body>
<div id="cadre">
<div id="header"></div>
<div class="menu_barre"><div class="text_bar">
<img src="img/ico_home.png" /> <a href="#accueil" class="text_bar">Accueil</a>&nbsp; &nbsp;
<img src="img/livredor.png" /> <a href="#livredor" class="text_bar">Livre d'or</a>&nbsp; &nbsp;

</div> <!-- position text -->
</div> <!-- bar menu -->
<br />
<div class="menu_titre">Menu</div>
<div class="menu_contenu">
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
</div>
<br />
<div class="menu_titre">Menu n°2</div>
<div class="menu_contenu">
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
<a href="#" >Lien</a><br />
</div>
<div class="corps">
<h1>Ceci sera le contenu de la page le corps etc... J'essaye de faire une ligne grande pour voir les cent pourcent où il vont! voila je pence que c'est bon!!!</h1>
</div> <!-- corps -->
</div> <!-- cadre -->
</body>

Modifié par moii (04 Feb 2007 - 13:11)
Administrateur
Hello,

J'ai dû modifier ton message.

Bonne soirée.

PS : pourrais-tu corriger la faute de ton titre ("a cotter"), pour faciliter l'accessibilité du forum aux utilisateurs de synthèse vocale ? Merci d'avance Smiley smile
Modifié par Raphael (04 Jan 2007 - 21:06)
Administrateur
Arg, merci d'avoir corrigé, mais en fait cela ne s'écrit pas non-plus "a coter", mais "à côté" Smiley ohwell
Modifié par Raphael (04 Jan 2007 - 21:24)
Sauf que cela est aussi sur firefox et tous les autres.
Si tu avais regardé l'image tu aurais pu voir que cela n'avais rien avoir. (en fin je pence mdr)
en faite le problème c'est que je n'arrive pas a le mettre en face des menu comme le montre la fleche.
merci quand meme!!!
Bonjour moii,

Essaye en ajoutant une "<div>" qui englobe tes menus, comme ceci :
<div style="float: left;">
<div class="menu_titre">Menu</div
<div class="menu_contenu">
...
<div class="menu_titre">Menu n°2</div>
<div class="menu_contenu">
...
</div>
</div>

Tu ne dois pas mettre "width:100%;" dans ".corps".
A quoi sert "border-collapse: collapse;" dans ".corps" ?
Administrateur
Et en supprimant toutes les largeurs inutiles sur les blocs ? (sachant qu'un bloc utilise par défaut toute la largeur de son conteneur). Je pense que ça te donnera une piste.

a écrit :
A quoi sert "border-collapse: collapse;" dans ".corps" ?
A rien, puisque cette propriété ne s'applique qu'aux éléments de tableaux.
Le problème est que lorsqu'on veut aller trop vite dans les CSS sans prendre le temps nécessaire à l'apprentissage des bases, on essaye un peu tout et n'importe quoi. Cela donne souvent des codes compliqués dont même l'auteur ne comprend plus comment il fonctionne Smiley decu

a écrit :
Si tu avais regardé l'image tu aurais pu voir que cela n'avais rien avoir. (en fin je pence mdr)
Si si, justement. L'image est une parfaite représentation du problème que j'évoque.
Même si ton problème ne s'applique pas uniquement à IE, je persiste à dire que tu n'as pas compris le calcul des largeurs de boites : par exemple #corps a un width de 100% + un padding-left de 20% soit 120% : il n'a donc pas de place. Supprime le width pour commencer.

A quoi correspondent tes padding-right:auto; et padding-bottom: auto; Smiley confus
Modifié par Raphael (05 Jan 2007 - 08:53)
Administrateur
Ah au fait, puisque c'est une question de mise en page (CSS) et non de XHTML, je déplace ce sujet dans le bon salon.
j'ai fais un autre code:

.corps {
position: absolute; 
width: auto;
left: 19%;
right: 2%;
top: 22%;
bottom: auto;
border: 1px solid black;
font-weight: normal;
text-decoration: none;
text-align: justify;
}


met voila ce que cela donne http://simplement.goldzoneweb.info/sitebientot/
donc comment faire pour que cela suive et ue sa décende le pied en meme temps?

et j'oubliais j'ai essayer d'entourer les menu par un div mais cela me rétrécissait un max mes menu ya que le contenu qui restait bien.
Modifié par moii (05 Jan 2007 - 11:56)
Bon j'ai rien dit pour ceux qui auraient lu ce que j'ai mis avant ...

Je pense que le mieux c'est de mettre les menus de gauche dans un div et d'utiliser des listes. Ensuite tu mets le div contenant les menus en float: left; et le corps en float: right;.
Modifié par CNeo (05 Jan 2007 - 21:19)
a écrit :
Il faut laisser le corps dans le flux ... Pour qu'il soit à côté des menus pourquoi ne mets-tu pas simplement un margin-left de la largeur nécessaire ?

Que veut tu dire par la?

a écrit :
A part çà pourquoi n'utilises-tu pas des listes ( <ul> <li> ) pour tes menus ?


Et à quoi cela me servirai?
moii a écrit :
A part çà pourquoi n'utilises-tu pas des listes ( <ul> <li> ) pour tes menus ?


Et à quoi cela me servirai?
Rien c'est juste plus logique ...

J'ai édité le message précédent ...
Modifié par CNeo (05 Jan 2007 - 21:22)
Et bien explique développe en quoi c'est plus logique??
Car si je ne veut pas mettre de puce ??
explique Smiley smile
Et si tu peut m'aider pour mon problème de contenu se serai sympa! Smiley cligne
merci
Administrateur
moii a écrit :
Et bien explique développe en quoi c'est plus logique??
Car si je ne veut pas mettre de puce ??
En fait cela n'a aucun rapport avec la puce : rien ne t'empêche de faire des listes sans puces (CSS est justement fait pour ça).
Ce qui est logique est qu'un menu n'est rien d'autre... qu'une liste de liens, non ?

Regarde le code de tous les menus de la galerie d'Alsa : ce sont tous des listes... et ils n'ont pas de puces Smiley cligne
moii a écrit :
Et bien explique développe en quoi c'est plus logique??

Parce qu'un menu n'est jamais qu'une liste de page

a écrit :
Car si je ne veut pas mettre de puce ??

Il y a la propriété list-style-type pour ça Smiley smile

a écrit :
Et si tu peut m'aider pour mon problème de contenu se serai sympa!

Je te dirais de regarder du coté de la propriété clear: both et du overflow: auto (je ne retrouve le lien de notre ami avec le turban Smiley smile )
En fait deux choix s'offrent à toi :

- la hauteur de tes menus ne sera jamais supérieure à la hauteur de ton corps, là tu mets les menus en position: absolute; et tu enlève cette même propriété de ton corps, enfin tu mets une marge gauche à ton menu de la largeur de ce même menu

- la hauteur de tes menus peut être supérieure à la hauteur de ton corps, là tu fais la solution dans mon avant-avant-dernier post
Administrateur
moii a écrit :
j'ai fais un autre code:

.corps {
position: absolute; 
width: auto;
left: 19%;
right: 2%;
top: 22%;
bottom: auto;
border: 1px solid black;
font-weight: normal;
text-decoration: none;
text-align: justify;
}


met voila ce que cela donne http://simplement.goldzoneweb.info/sitebientot/
donc comment faire pour que cela suive et ue sa décende le pied en meme temps?

Est-ce que tu connais bien le positionnement que tu as choisi (absolu) ? Est-ce que tu connais ses contraintes (celles de sortir du flux) ?

Je n'en suis pas sûr, j'ai bien peur que tu testes plein de choses sans vraiment savoir où tu vas, sans vraiment prendre le temps d'apprendre les bases minimales.

Du coup, on va te parler chinois, ou te donner des "trucs" tous faits, mais tu ne comprendras pas vraiment et tu n'apprendras pas vraiment à te servir des CSS.

Je te suggère vivement de prendre de temps pour l'apprentissage des bases : http://css.alsacreations.com/Bases-et-indispensables/

Bonne chance Smiley smile
Modifié par Raphael (05 Jan 2007 - 21:28)
je ne veut pas utiliser overflow qui va me faire une scrollbar.. moi je veut que le pied descende avec le contenu enfin que les deux soit par exemple margin-bottom: 2%;
mais sa veut pas .
Et clear: both; je ne comprend pas à quoi ça sert car j'ai déjà testé et lu plein de définition mais je ne voi pas de différence.
help me.. Smiley decu
merci! Smiley cligne Smiley cligne
Pages :
Sujet clos
Aller à