SuperVespa
-
Compteur de contenus
9 -
Inscrit(e) le
-
Dernière visite
-
Salut Mammouthland, Effectivement, il n'y en a pas. Car c'est uniquement le contenu de «scroler» qui doit défiler (overflow: auto). Les autres <div> «adresse», «menus» et «projets» sont en position «absolute», donc, normalement, ils ne bougent plus une fois leur position chargée. C'est justement parce qu'IE 6 n'interprète pas cette option que j'ai cherché une solution sans le code «fixed». Mais cette «%&*°%» de version ne prend même pas en compte la valeur «absolute», comme tous les autres navigateurs, tant sur Mac que sur Windows ... C'est malheureusement ce qu'il me semble aussi. Peut-être une solution avec une <table> ?
-
Merci pour vos suggestions ... Le problème semble lié à IE en version 6, qui est incapable d'afficher des <div> en position fixe (contrairement à Safari, FireFox et iE en version 7). Peut-être connaissez-vous une solution fiable pour rendre mon projet compatible ?
-
Salut à tous, Je travaille sur un modèle de page XHTML (avec styles CSS intégrés, pour le test) avec des conteneurs <div> qui doivent rester en place, même lorsqu'on actionne le défilement du contenu principal. Ma solution semble fonctionner correctement. Je l'ai testé sous Mac OS avec Safari et Firefox. Au bureau, je peux également faire des tests sous Windows XP avec IE et FireFox. Par contre, je ne dispose pas de version plus ancienne du système Windows, ni de Vista. Qui peut vérifier si l'affichage est correct, également sous ces versions ??? Bien entendu, tous vos conseils avisés sont également bienvenus ... CODE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Ma page XHTML test</title> <style type="text/css"> <!-- body { background-color: #FFCCFF; margin: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding: 0px; } p { margin-top: 0px; margin-bottom: 12px; } #scroler { width: 100%; background-color: #CCCCCC; overflow: auto; height: auto; position: absolute; margin: 0px; padding: 0px; top: 0px; bottom: 60px; } #main { width: 400px; background-color: #FFFFFF; left: 50%; position: absolute; margin-left: -300px; margin-top: 20px; padding-top: 20px; padding-right: 100px; padding-bottom: 10px; padding-left: 100px; text-align: justify; } #adresse { background-color: #FF9966; height: 60px; width: 100%; text-align: center; font-weight: bold; color: #FFFFFF; padding: 0px; overflow: hidden; margin: 0px; bottom: 0px; position: absolute; } #projets { background-color: #FF9966; height: 250px; width: 200px; position: absolute; left: 50%; top: 50px; margin-left: -500px; padding: 0px; text-align: center; font-weight: bold; color: #FFFFFF; } #menus { background-color: #FF9966; height: 250px; width: 200px; position: absolute; left: 50%; top: 49px; margin-left: 300px; padding: 0px; text-align: center; font-weight: bold; color: #FFFFFF; } --> </style> </head> <body> <div id="scroler"> <div id="main"> <P>DEBUT DU TEXTE</P> <p>Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p> <p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p> <p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p> <p>Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p> <p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p> <p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p> <p>Ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista.Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant.</p> <p>At minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari.</p> <p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p> <p>Ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista.</p> <P>FIN DU TEXTE</P> </div> </div> <div id="projets"><br /> <p>Conteneur pour les projets</p></div> <div id="menus"><br /> <p>Conteneur pour les menus</p></div> <div id="adresse"><br />Adresse et logo</div> </body> </html> Un grand merci par avance !!!
-
Choix d'un CMS avec les caractéristiques suivantes
SuperVespa a répondu à MarvinLeRouge - Forum : Systèmes de publication
Salu davidm, Pourrais-tu me donner un exemple typique où Joomla manque de flexibilité ? -
Choix d'un CMS avec les caractéristiques suivantes
SuperVespa a répondu à MarvinLeRouge - Forum : Systèmes de publication
Salut MarvinLeRouge, Je te recommande Joomla 1.0.12 qui répondra certainement à tes besoins et qui est simple d'utilisation ... -
Salut bobybx, Fais un petit essai avec le code ci-dessous, je pense qu'il répond à ta demande. Il ne correspond pas à tes dimensions, mais tu pourras sans problème les modifier par la suite. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Test pour bobybx</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #conteneurVariable { background-color: #CCCCCC; margin-top: 0px; margin-right: 350px; margin-bottom: 0px; margin-left: 0px; } #conteneurFixe { background-color: #2BFF00; float: right; width: 350px; margin: 0px; } #colonneGauche { background-color: #00CCFF; float: left; width: 150px; } #colonneCentre { background-color: #666666; width: 200px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #colonneDroite { background-color: #FF6600; float: right; width: 150px; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin: 0px; padding: 10px; text-align: center; } --> </style> </head> <body> <div id="conteneurFixe"> <p>id "conteneurFixe"<br /> 350 px </p> </div> <div id="conteneurVariable"> <div id="colonneGauche"> <p>id "colonneGauche"<br /> 150 pixels </p> </div> <div id="colonneDroite"> <p>id "colonneDroite"<br /> 150 pixels </p> </div> <div id="colonneCentre"> <p>id "colonneCentre"<br /> 200 pixels </p> </div> </div> </body> </html> [Edit] modifier en «codebox»
-
Salut xpatval et klelugi, merci pour vos réponses ! Concernant la dimension (900 pixels de large), je suis le premier à insister sur le respect d'un affichage 800x600 pour un site «tout public». Surtout que, même avec un affichage 1024x768, la surface est limitée à environ 800 pixels lorsqu'une fenêtre optionnelle d'IE est ouverte (l'historique par exemple). Mais dans le cas présent, le site s'adressera principalement à un public bien équipé et ce format fait partie du cahier des charges. Concernant la colonne de droite (sous-menu & «last news»), le layout de base (montage Photoshop) prévoit qu'il n'occupe pas obligatoirement toute la hauteur. Donc la couleur de fond ne doit pas aller jusqu'en bas. Par contre, klelugi, n'hésite pas à poster un exemple du code retouché par tes soins avec un <div> de fond sur toute la hauteur. Sinon, qu'entends-tu par «les ss-cat»? Si d'autres personnes veulent bien tester et commenter mon code, merci par avance ...
-
Salut à tous, «Petit nouveau» sur ce forum, je cherche à partager notre/votre expérience en proposant de commenter le squelette XHTML annexe. Il s'agit d'une mise en page très classique, avec un «banner» (en haut), un espace réservé aux menus principaux, 3 colonnes fixe (2 pour le contenu, 1 pour les sous-menus à droite) et un bandeau «pied de page». Le tout dans un conteneur de 900 pixels, centré horizontalement au milieu de la page. Le code me semble bon, en tout cas cela semble s'afficher correctement sous Safari (MacOS 10.3.9) et sous IExplorer (Windows XP Pro). Le contenu des colonnes de droite et centrale est censé repousser le bandeau du bas (pied de page), selon la quantité de texte. 1. Merci de me donner votre avis «d'experts CSS» et de me faire part de vos remarques, idées d'optimisation et autres corrections ... 2. N'est-il pas possible sur ce forum de placer un fichier annexe à un post (dans mon cas: code HTML sous la forme d'un fichier téléchargeable au lieu de le mettre dans le message)? P.S. si cette page peut aider d'autres utilisateurs de ce forum, n'hésitez pas à l'utiliser comme base pour votre création ... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Projet layout 3 colonnes</title> <style type="text/css"> <!-- body { background-color: #336699; padding: 0px; margin-top: 25px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; margin: 0px; padding: 0px; text-align: justify; } #conteneur { background-color: #FFFFFF; width: 900px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #bannerHaut { background-color: #CCCCCC; height: 100px; } #bannerMenu { background-color: #999999; height: 50px; } #gauche { background-color: #FFFFFF; float: left; width: 290px; margin: 0px; padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 30px; } #centre { background-color: #FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-right: 270px; margin-left: 340px; padding-top: 20px; padding-bottom: 20px; padding-right: 0px; padding-left: 0px; } #droite { background-color: #CCCCCC; float: right; width: 230px; padding-top: 20px; padding-left: 20px; padding-bottom: 20px; } #piedPage { background-color: #CCCCCC; height: 50px; clear: both; } --> </style> <link href="file:///MegaDur 250Go/Users/Pub2/Desktop/Dreamweaver vidéo/layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="conteneur"> <div id="bannerHaut"> <p>Banner<br /> </p> </div> <div id="bannerMenu"> <p>menu</p> </div> <div id="gauche"> <p>Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari. Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt.</p> <p> </p> <p>Iipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit: Non diutius gaudebit ista ! o Vocato igitur filio, pinnato illi et sagittis armato Cupidini Psychen ostendit jussitque: Matris tuae injurias vindica ! Puella ista turpissimi mortalis amore teneatur, ut miserior nulla per totum orbem terrarum inveniri possit.</p> </div> <div id="droite"> <p>Sous-catégorie 1</p> <p>Sous-catégorie 2</p> <p>Sous-catégorie 3</p> <p>Sous-catégorie 4</p> <p>Sous-catégorie 5</p> <p>Sous-catégorie 6</p> <p>Sous-catégorie 7</p> </div> <div id="centre"> <p>Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae omnibus provinciis plurimi homines ad puellam conspi- ciendam longis itineribus convenerunt; ipsius autem Veneris templis relictis, pervenit res ad aures verae deae quae, ubi se neglegi honoresque suos ad puellam mortalem conferri cognovit, maxima ira incensa clamavit.</p> <p> </p> <p>Non diutius gaudebit ista ! o Vocato igitur filio, pinnato illi et sagittis armato Cupidini Psychen ostendit jussitque: Matris tuae injurias vindica ! Puella ista turpissimi mortalis amore teneatur, ut miserior nulla per totum orbem terrarum inveniri possit. Erant olim in quadam civitate rex et regina, quibus fuerunt tres pulcherrimae filIae. Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset.</p> <p> </p> <p>Earum vero majores natu, quamquam insigni specie erant, tamen humanis verbis satis laudari poterant; at minoris pulchritudo tam mira erat ut humano sermone ne exprimi quidem posset. Jam cives advenaeque multi puellam, ut deam, summa religione colebant ferebantque alteram Venerem in mediis hominibus versari. Fama denique per gentes latius manante, a proximis insulis atque etiam a terrae.</p> </div> <div id="piedPage"> <p>Pied de page </p> </div> </div> </body> </html> Edit Modérateur : Merci d'utiliser la balise CODEBOX pour les codes longs
-
Salut, Je travaille sur un projet de site web avec Dreamweaver 8. Le site sera géré directement par le client avec Contribute 3. Je bute toutefois sur un problème concernant les galeries de photos que le client veut gérer lui-même (ajouter/supprimer des galeries, y ajouter/supprimer des photos). Le but est de fournir des modèles de pages pour créer une nouvelle galerie de photos (entre 10 et 50 photos par galerie). Chaque galerie se compose d'une première page, avec toutes les images en petit, puis d'une fenêtre «pop-up» qui s'ouvre avec l'image plus grande et la possibilité de naviguer d'une photo à l'autre toujours dans la fenêtre «pop-up». Le tout, comme indiqué, géré le plus simplement possible par le client avec Contribute 3. Merci de me faire part de vos expériences, idées, problèmes rencontrés et solutions trouvées ...