26784 sujets

CSS et mise en forme, CSS3

Pages :
Administrateur
(reprise du message précédent)

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
ok va pour le titre "Menu apparant en 1024 via CSS" c'est pas trop ça mais bon...soyons consensuel...
c'est bon pas besoin de me faire le speach, je connais bien les exigences nécessaire au bon fonctionnement d'un forum comme celui ci...c'est bien pour cela que j'ai changé mon titre une premier fois puis une seconde fois....ect...
Voila, concrétement : j'avais un pb, je pose une question ...simplement...et boum...faut pas faire si, faut pas ça...ok ok
je comprend bien , vous faîtes votres taf mais bon, besoin d'être à ce point contraignant....n'est-ce pas un peu excessif?


Si les règles du forum ne te conviennent pas libre à toi de partir


en terme de politesse et de pertinence, j'ai vu mieux!


bon voila...c'est cool,j'ai pas vraiment de réponse à mon pb, je me suis embrouillé avec tous les modérateurs(qui vont surement me jetter Smiley biggol ) et tout le monde compera sur ses positions...super le forum!

Pourquoi j'ai jamais eu de probleme sur le forum(excellent) du site du Zéro?
excusez moi pour le mauvaise usage de la citation ...je me suis trompé...
c'est grave ou pas?
je sais bien...mais bon lachez maintenant..c'est lourd à force,je suis pas là pour pour ça et j'ai du taf...je m'amuserai avec vous plus tard, si j'ai le temps...
Modérateur
dubnet a écrit :

c'est bon pas besoin de me faire le speach, je connais bien les exigences nécessaire au bon fonctionnement d'un forum comme celui ci...


Et un peu avant
dubnet a écrit :

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


J'ai du mal à suivre. Si tu comprends si bien les exigences du forum, pourquoi ca te prends la tête et que tu dis que c'est stupide ?

Mais bon, passons. C'est lourd à force, de toujours devoir rappeler les règles du forum. Je suis pas là pour ça et j'ai du taf.. je m'amuserai avec toi plus tard, si j'ai le temps. Smiley biggrin

Je t'agace, c'est tout. Arrêtons-nous là, sinon ca va faire une boucle infinie.
Smiley smile
ça marche.
je lève le drapeau blanc pour un forum plus cool et constructif Smiley smile

Et finalement,y'a quelqu'un qui à une solution à mon problème?...mais non!..pas celui avec tous les modérateurs du forum....l'autre...vous savez celui du début, avec les css et tout et tout? Smiley cligne
Administrateur
Oh quel joli titre Smiley smile

En fait, si j'ai bien suivi ton problème (et c'est loin d'être gagné Smiley biggol ), j le résume à ça (je reformule ce que j'ai compris) :
- si la résolution fait X pixel ou + alors tu veux utiliser la feuille de style 1
- si la résolution fait moins de X pixels, tu veux utiliser la feuille de style 2

Je te propose une réponse qui n'est que subjective car mes connaissances dans ce domaine (JS) sont maigres :
A mon avis, tu es obligé de gérer cette condition (if) de résolution (screen.width) en JavaScript et selon la réponse à cette condition, charger l'une ou l'autre feuille de style.

Je ne connais que la théorie mais je ferais comme ça.

Il doit y avoir d'autres solutions.

dubnet a écrit :
Et finalement,y'a quelqu'un qui à une solution à mon problème?...mais non!..pas celui avec tous les modérateurs du forum.
PS : les modérateurs ne sont pas là pour répondre à toutes les questions, mais pour... modérer Smiley smile
Modifié par Raphael (27 May 2005 - 17:10)
Modérateur
Bon, là, je vais donner une idée de code. C'est bien qu'une idée, j'ai passé que 5 minutes là-dessus. J'ai pas vérifié si le code était valide et je sais que ca ne marche pas dans IE car il ne reconnaît pas min-width. Il y a une solution pour ca mais peu importe, j'avais pas le temps d'en faire plus. C'est qu'une ébauche, j'ai testé que dans Firefox et il manque ton menu gauche aussi. J'ai pas testé non plus avec du contenu. J'ai mis aussi des valeurs fixes pour la hauteur simplement en guise de démonstration. Je pense que c'est assez clair que je ne veux pas qu'on critique mon code, mais juste vérifier si le but rechercher ressemble à cela.

EDIT : Ce layout ne correspond pas du tout à l'objectif de dubnet. Ignorez-le (mon code ou le membre, comme vous voulez Smiley langue )


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
div#corps {
width:70%;
min-width:500px;
height:300px;
border:1px solid blue;
float:left;
}

div#menu_droite {
float:left;
height:300px;
width:20%;
border:1px solid red;
}
</style>
</head>

<body>

<div id="corps">
	<h1>Titre du document</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris consectetuer, dui vel scelerisque porta, orci eros aliquam erat, a condimentum arcu libero in purus. Curabitur commodo consequat dolor. Pellentesque vulputate cursus pede. Sed varius neque placerat metus. Nam arcu purus, convallis pretium, mollis nec, feugiat vitae, ante. Donec adipiscing dapibus metus. Nulla vel diam at purus porttitor commodo. In rutrum odio vel mi. Maecenas consectetuer erat a massa. Proin eget mauris. Donec sodales lectus vitae felis. Integer et erat. Donec in enim. Pellentesque ac massa. Nunc justo diam, congue at, suscipit a, dignissim sed, enim. Maecenas gravida sollicitudin ipsum. Vestibulum nec turpis. Integer ut sem.</p>
</div>
<div id="menu_droite">Hello, je suis un menu. Non, en fait je ne suis qu'un DIV, mais je m'en fou. C'est juste une démonstration beta 0.1.</div>
</body>
</html>


Si c'est ce genre de chose que tu recherche, là il me fera plaisir de pousser plus loin le codage : sémantique, contenu plus réaliste, ajout de ton menu gauche, validation du code, test dans plusieurs navigateurs.
Modifié par Merkel (27 May 2005 - 21:17)
Modérateur
dubnet a écrit :

Et finalement,y'a quelqu'un qui à une solution à mon problème?...mais non!..pas celui avec tous les modérateurs du forum.


Raphael a écrit :

PS : les modérateurs ne sont pas là pour répondre à toutes les questions, mais pour... modérer Smiley smile


Raphael, il voulait dire par là qu'il avait deux problèmes :

1. Sa mise en page CSS
2. Conflit avec les modérateurs


Smiley cligne
Modifié par Merkel (27 May 2005 - 17:18)
ouais,merci Merkel,c'était bien ça la blague! Smiley biggrin

pour ton code,laisse moi un peu de temps pour tester le truc,peut-être que sa peut marcher. Cela dit je vois pas trop comment je vais m'en sortir avec ce !#?!# de ie...


Pour revenir au message de Raphael: je vais peut-être m'orienter vers une solution javascript mais ça sera un constat d'échec.J'aurai vraiment voulu réaliser le truc en css. A-t-on découvert les limites de la mise en forme css? Les tableaux sont-il vraiment totalement à proscrire????

quoi qu'il en soit grand merci à tous (même aux modérateurs qui modère vachement bien Smiley cligne )


ps:j'ai une nouvelle idée de titre:embrouille avec les modérateurs...ça serait approprié cette fois...non? Smiley biggol
Modérateur
dubnet a écrit :
ouais,merci Merkel,c'était bien ça la blague! Smiley biggrin
pour ton code,laisse moi un peu de temps pour tester le truc,peut-être que sa peut marcher. Cela dit je vois pas trop comment je vais m'en sortir avec ce !#?!# de ie...


Il y a une solution simple avec IE. Recherche dans le blog de Alsacreations, il y a un sujet avec min-height pour IE. J'imagine que ca fonctionnera aussi pour le width.

dubnet a écrit :

Pour revenir au message de Raphael: je vais peut-être m'orienter vers une solution javascript mais ça sera un constat d'échec.J'aurai vraiment voulu réaliser le truc en css. A-t-on découvert les limites de la mise en forme css? Les tableaux sont-il vraiment totalement à proscrire????


D'abord, les tableaux n'y changerait rien. Tu ne pourrais pas plus atteindre ton objectif avec eux.

Ce n'est pas non plus une limite de la mise en forme CSS. Afficher ou non un menu selon la résolution d'écran n'a rien à voir avec les CSS. Du moins, c'est mon avis personnel. C'est davantage le rôle du Javascript. Donc, ce ne serait aucunement un constat d'échec. Tu pourrais même, grâce à Javascript ou un langage serveur, laisser la chance au visiteur de décider si oui ou non il veut le menu à droite.

J'essaye d'insérer des données sur MS SQL serveur avec CSS, ca marche pas. Serait-ce que j'ai atteint la limite des CSS ? Tu vois ce que je veux dire ? Smiley smile
Modifié par Merkel (27 May 2005 - 19:23)
1/ouais, sauf que, à la base, je ne veux pas faire de "redirection" en fonction des utilisateurs!!!!!
revoit mon explication du début et mon code(euh, je crois que l'ai mis...)


2/
a écrit :
J'essaye d'insérer des données sur MS SQL serveur avec CSS, ca marche pas


quoi! tu sais pas faire ça...petit niveau... Smiley biggrin


3/ mon objectif a déja était atteint grace au tableaux.... Smiley langue
la base du pb reste, essentiellement,une question de flexibilité de la mise en page.
Rien à voir avec un script genre actions conditionnelles ect....même si cette méthode peut, à défaut de mieux, répondre à mon pb. C'est simplement une façon de le contourner.
Modérateur
Attends-la.. faudrait tu me montre comment t'as réalisé ca avec un tableau. J'ai du mal à croire que le fait d'utiliser un tableau te permettre de faire sauter ton menu de droite en bas du contenu si la résolution est en bas de 1024. Permet-moi d'en douter. On doit probablement pas parler du même objectif. Tiens, cela me fait penser... pourquoi tu nous montre pas ce que tu as fais avec les tableaux ? Concrètement, on verrait ce que tu veux réaliser sans ces tableaux. J'insiste, vraiment.

Avec Javascript ou langage côté serveur, il n'est pas question de faire de redirection en fonction de l'utilisateur, mais de positionner le menu grâce au couple Javascript/CSS ou LangageServeur/CSS selon la taille de l'écran. Je pensais surtout à donner l'option à l'utilisateur de choisir s'il veut le menu à droite, en stockant son choix dans un cookie par exemple. Quand il en a marre, il peut changer d'option.
a écrit :
J'ai du mal à croire que le fait d'utiliser un tableau te permettre de faire sauter ton menu de droite en bas du contenu


arrgh......c'est exactement ce que veux pas faire! Smiley bawling


a écrit :
pourquoi tu nous montre pas ce que tu as fais avec les tableaux ? Concrètement, on verrait ce que tu veux réaliser sans ces tableaux. J'insiste, vraiment.


ouais ,t'as raison sur ce coup là...je pensais l'avoir déja mis donc:


Voici 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 de ma 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.... il faut juste ajuter un spacer de 500px sur la cellule de gauche...
C'est un peu du gros bricolage mais, normalement,ça roule, tu verra ce que je veux...j'espère...




Avec Javascript ou langage côté serveur, il n'est pas question de faire de redirection en fonction de l'utilisateur, mais de positionner le menu grâce au couple Javascript/CSS ou LangageServeur/CSS selon la taille de l'écran


oui, oui, ça j'avais compris.




Je pensais surtout à donner l'option à l'utilisateur de choisir s'il veut le menu à droite, en stockant son choix dans un cookie par exemple. Quand il en a marre, il peut changer d'option.


j'avais déjà compris cette suggestion qui est intéressante mais ça ne conviendrait pas pour ce que je veux. Le pb est que l'utilisateur 15' doit absolument bénéficier d'un espace miaximum pour le corps du site. Dans le cas contraire (je sais pas moi...il séléctionnerait la mauvaise résolution..)ça serait vraiment vraiment illisible.


En fait,je crois que là, avec les solutions javascript ou autres...on s'éloigne du pb qui, finalement, n'est qu'un probleme de mise en page...

voila,j'espere que le code fourni fonctionne correctement et que tu comprendra exactement mon pb.
Modérateur
Bon, si on ferait un petit rappel :

dubnet a écrit :

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....


Bon, pour faire un menu de largeur fixe à gauche, et un contenu d'une largeur minimale de 500px à droite, qui s'étire selon la taille de l'écran, c'est réalisable en CSS. C'est relativement simple. Pas besoin de cellules de tableau.

Le point que j'accroche, c'est celui-ci :

dubnet a écrit :

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


De ce que je comprends de ton explication, tu veux que sur un écran de 17" (ou peu importe, disons résolution de 1024x768), un menu supplémentaire apparaisse à droite du contenu. Ce menu est de largeur fixe. J'en déduis donc que sur un écran à plus petite résolution, le menu n'est pas du tout apparant, nul part ? Est-ce que j'ai bien compris ?

J'ai besoin d'éclaircir cela avant d'aller plus loin.
t'as presque compris Smiley smile
c'est ça sauf que le menu droit peut être visible sur un 15'(arrête de te tirer les cheveux! ) VIA la barre de scrolling du navigateur.

voila....

Je suis désolé mais je dois m'absenter? j'espere que tout est claire maintenant? J'espere à demain

Ciao et merci
Modérateur
Merkel a écrit :

J'ai du mal à croire que le fait d'utiliser un tableau te permettre de faire sauter ton menu de droite en bas du contenu


dubnet a écrit :

arrgh......c'est exactement ce que veux pas faire! bawling


a écrit :

c'est ça sauf que le menu droit peut être visible sur un 15'(arrête de te tirer les cheveux! ) VIA la barre de scrolling du navigateur.


Bon, peut-être qu'il faudrait que tu précise laquelle des barres de scrolling. L'horizontale ou la verticale ? Je pensais que c'était la verticale, d'où mon objectif de faire sauter le menu en bas. J'en conclus donc, vu tes réponses, qu'il s'agit de la bar de scroll horizontale.

Là j'ai compris ce que tu veux. Oublis le code que je t'avais donné, ca ne correspond plus du tout. Je vais réfléchir à ca.
ok merci,

excuse mois d'avoir oublié ce détail "majeur"...c'est effectivement le scrolling horizontal....
euh oubli le "s" de excuse moi(S)...je sais,y'en a encore(des fautes) mais celle là était trop enorme pour que je la laisse telle quelle.
idem pour oubli où il manque le "e"...bref...mon orthographe est déplorable...mais là n'est pas la question...
Pages :