28182 sujets

CSS et mise en forme, CSS3

Menu apparant en 1024 via CSS [Résolu]

Pages :
Bonjour à tous,
alors voila j'ai un gros probleme avec la structure de page que je voudrais réaliser UNIQUEMENT en css.
Voici le pb:
j'ai une page structurée en trois parties:
-le menu, à gauche, de largeur fixe
-le contenu, au centre, d'une largeur minimale de 500px mais qui doit pouvoir se redimentionner en fonction des ecrans
-enfin j'ai des rubriques à droites (genre de menu complémentaires) dont la largeur est fixe .

Ce que voudrais faire consiste, en fait, à afficher uniquement le menu gauche et le contenu dans sa taille minimale sur un écran 15'

Pour les 17',le menu droit apparait (soit : menu gauche, contenu dans sa taille minimale et enfin menu droit...)

Pour les écrans trés grands(je sais c'est encore rare... ) le contenu doit s'adapter à l'écran tout en préservant le menu gauche et le menu droit....

voila , j'espere que vous voyez ce que je veux dire.Je suis a votre disposition pour plus de détails.

J'ai retourné le pb dans tous les sens ..y'a pas je trouve pas la solution
Le seul moyen que j'ai touvé est de claquer un tableau avec trois cellules qui contiennent chacune un des elements...pas trés satisfaisant comme solution....


Merci de votre aide
Modifié par dubnet (11 Sep 2005 - 21:57)
dubnet a écrit :
[...] le contenu doit s'adapter à l'écran tout en préservant le menu gauche et le menu droit....

Bonsoir,

Ce gabarit pourrait peut-être t'aidé ?
Modifié par Bouda (26 May 2005 - 20:16)
merci, mais ça ne m'aide Smiley bawling pas du tout!
ici ,le menu gauche flotte sur la droite...donc, si tu as bien lu le truc, tu verra que ça ne marche pas puisque sur un 15' je ne veux pas que le menu droit apparaise.. Smiley biggol
je sais , c'est un peu tordu...c'est pour ça que j'ai besoin d'aide Smiley lol

en tous cas merci beaucoup pour ta suggestion
Bonsoir

Tu peux expliquer pourquoi tu ne veux pas que ton menu droit ne soit visible qu'en 1024 ?
visible en 1024' et plus....je ne veux pas qu'il soit visible sur un 15' car c'est un menu facultatif, horsj'ai besoin d'un maximum d'espace pour le contenu qui est plutôt fourni.
voilà, c'est tout simple...
T'as une solution à mon pb?
ouais, t'as raison

voila le html:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>mon site</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>

<table id="tab" >
<tr>
<td valign="top" >

<div id="menu">
<!--articles--!>
<div class="transport_articles">
</div>

<!--acces membre--!>
<div class="transport_membres">
</div>
</div>


<!--corps--!>

<div class="contenu">


<p class="texte"> 
<img src="transport_visuel/spacer.gif" width="555" height="1"></br>

<!--attention,ici j'ai claqué un spacer pour bloquer la réduction dema cellule....--!>



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.
</p>


</div>

</td>


<td valign="top">

<div id="menub">

</div>

</td>
</tr>
</table>


</body>
</html>

et voici le css :


#menu
{float:left;
margin: 0px 0px 0px 10px;
}


#menu .transport_articles 
{
min-height:80px;
max-height:500px;

width:175px;
padding:5px;
border:1px solid #EBAC3C;

border-bottom: 10px solid #728B9F;

}

#menu .transport_membres
{

height:160px;
width:175px;
border:1px solid #728B9F;
margin-top:10px;
}




.contenu
{
margin-left:200px;
text-indent:1em;
border:1px solid red;
min-width:500px;
}






#menub
{
vertical-align:top;
height:500px;
width:100px;
border:1px solid red;
}

#tab td
{border:2px solid red;}

voila,j'espere que tu comprendra mieux avec ça....
Modifié par dubnet (27 May 2005 - 13:02)
Je pense tout d'abord qu'il va falloire réflechir en terme de resolution plus qu'en taille d'ecran. En effet il n'est pas rare d'avoir de 15' en 1024. En plus cette donnée me semble plus facilement récupérable !

L'idée serait un espece de script qui detecte la résolution et qui en fonction de cette resolution choisie le XHTML qu'il faut ! Via le CSS tu ne peux rien faire si le XHTML est fixe.

Dans le Xhtml 800X600 tu ne mets pas le code du menu droit. Dans l'autre si. Apres il est aisé de faire un design fluide ce ne sera pas le probleme pour les résolution a partir de 1024.

Mais bon reste a mettre cela en oeuvre si c'est cette strategie que tu choisis !
ok,ça c'est une bonne idée.....enfin!

merci beaucoup de ta suggestion.
Tu penses donc qu'en css c'est pas faisable?
dubnet a écrit :
ok,ça c'est une bonne idée.....enfin!

merci beaucoup de ta suggestion.
Tu penses donc qu'en css c'est pas faisable?


Je crois qu'il t'a été demandé d'éditer ton titre et de balisé ton code dans ton message Smiley cligne
Administrateur
dubnet a écrit :
voila Igor! c'est bon là

Dis-voir, tu le prendrais mal si je fais une remarque ? Smiley biggol
Ton titre "pb de mise en page", sachant que dans ce salon, il n'y a presque que des "problèmes de mise en page", crois-tu que ce titre indique vraiment de quoi parle ton sujet ?

Hop, je suis déjà reparti.
Le probleme du CSS est que tu peux effectivement faire apparaitre une feuille ou l'autre (ou une propiété ou l'autre). On utilise bien des hacks pour ie pourquoi ne pas faire un hack pour la resolution.
Le probleme est que ton menu est mis en forme via le css mais ce qu'il y a dedans est dans le XHTML. Or je ne vois pas comme cela une sorte de propriété hidden qu'on pourrait donner au css. Encore ce contenu (du menu droit) devrait apparaitre a un autre endroit pourquoi pas mais de là à le faire disparaitre ?????
Raphael a écrit :

Dis-voir, tu le prendrais mal si je fais une remarque ? Smiley biggol
Ton titre "pb de mise en page", sachant que dans ce salon, il n'y a presque que des "problèmes de mise en page", crois-tu que ce titre indique vraiment de quoi parle ton sujet ?

Hop, je suis déjà reparti.


dommage car je pense que le probleme est largement à ta hauteur
Smiley lol
ouais c'est vrai! vous me prennait la tête avec mon titre...franchement on s'en tape d'en la mesure ou il reste acceptable et cohérent(il s'agit bien d'un probleme de mise en page...on peut avoir d'autres pb avec le css....on peut demander des informations sur telle ou telle fonction, demander une vérification de code...bref ai-je vraiment besoin de perdre mon temps avec ça? si mon titre ne vous convient changer le vous même parceque je vois pas quoi mettre d'autre (d'aussi explicite) En revanche, raphael, ton aide aurait été la bien venue...dommage...
Les Modérateurs de ce forum doivent vraiment avoir un boulot de fou, vu les exigences du forum....
Vraiment dommage de gâcher un si bon forum avec des trucs aussi stupide....
merci à toi gilles 6975,
j'ai eu un peu de mal à te comprendre (ai-je vraiment tout compris...pas sûr Smiley ravi ) mais j'ai réussit à dégager quelques idées;
En fait le menu droit ne doit pas "disparaître",il reste accessible via le scrolling horizontal de la fênêtre.

voilà je continu à méditer sur tes remarques...

encore merci
Modifié par dubnet (27 May 2005 - 15:49)
dubnet a écrit :
ouais c'est vrai! vous me prennait la tête avec mon titre...franchement on s'en tape d'en la mesure ou il reste acceptable et cohérent(il s'agit bien d'un probleme de mise en page...on peut avoir d'autres pb avec le css....on peut demander des informations sur telle ou telle fonction, demander une vérification de code...bref ai-je vraiment besoin de perdre mon temps avec ça? si mon titre ne vous convient changer le vous même parceque je vois pas quoi mettre d'autre (d'aussi explicite) En revanche, raphael, ton aide aurait été la bien venue...dommage...
Les Modérateurs de ce forum doivent vraiment avoir un boulot de fou, vu les exigences du forum....
Vraiment dommage de gâcher un si bon forum avec des trucs aussi stupide....



Alors déjà non on s'en tape pas, ensuite si on te "prend la tête" c'est pour une bonne raison. Sur ce forum nous avons décidé de mettre en avant la qualité des posts (politesse, formulation, pertinence...), c'est pas pour rien.

Avoir un titre cohérent et précis permet aux autres membres de savoir à quoi correspond tel ou tel sujet. Cela facilite la recherche et permet de limiter la création de nouveaux sujets si un problème à déjà été résolu.

Si les règles du forum ne te conviennent pas libre à toi de partir mais si tu décide de rester et par conséquence de profiter des avantages de ce forum tu dois en respecter les règles d'usages.
Modifié par jb_gfx (27 May 2005 - 15:44)
Modérateur
dubnet a écrit :
ouais c'est vrai! vous me prennait la tête avec mon titre...franchement on s'en tape d'en la mesure ou il reste acceptable et cohérent....

Vraiment dommage de gâcher un si bon forum avec des trucs aussi stupide....


Non on ne s'en tappe pas justement. Si toutes les personnes qui ont un problème de mise en page décident de choisir un titre : "pb de mise en page", "mise en page", "bug mise en page" etc, ca deviendrait le bordel dans le forum. Pourquoi crois-tu que c'est un bon forum justement ? Parce qu'on fait le ménage, on s'arrange pour que ce soit droit et que l'information reste facilement trouvable.

Ca l'aurait pu être "Menu apparant en 1024 via CSS", "Positionner un menu selon résolution". N'importe quoi qui toucherait au moins l'un des points que tu soulève.

Mon intervention n'est pas de te faire changer ton titre. Si t'as aucune idée quoi choisir d'autres, c'est pas grave pour cette fois. C'était juste pour apporter une petite précision pourquoi on demande de choisir des titres explicites et surtout, pour que t'évite de t'emflammer pour rien.

Edit : Grillé !
Modifié par Merkel (27 May 2005 - 15:48)
Administrateur
dubnet a écrit :
vous me prennait la tête avec mon titre...franchement on s'en tape

Moi je dis simplement que demain, quand je voudrais t'aider pour résoudre ton problème, j'irai dans la Recherche et j'essayerai de me rappeler du titre de ton problème.
Pour l'instant, je ne risque pas de le retrouver Smiley ohwell

Chaque règle a une utilité sur ce forum. Aucune n'est inutile.
C'est sans doute pour ça que tu le trouves si bien Smiley cligne
Pages :
Sujet clos
Aller à