Jump to content

Search the Community

Showing results for tags 'css3'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Accueil
    • Annonces de Webmaster Hub
    • Webmaster Hub se présente
    • Les nouveaux membres se présentent
    • Revues de presse
    • Le salon de Webmaster Hub
    • La tribune de Webmaster Hub
  • Publications et Redirections
    • Référencement et Publicité
    • Droit, Finances et Administration
    • Les techniques de l'Internet
    • Noms de domaines et hébergement
    • La tribune du Hub
  • Création et exploitation de Sites Internet
    • Les langages du Net
    • Les fondations d'un site
    • Accessibilité et Ergonomie Web
    • E-commerce
    • Administration & Droit
    • Systèmes de publication
  • Promotion de Sites Internet
    • Techniques de Référencement
    • Techniques de Promotion
  • Informatique & Internet
    • PC-Gyver
    • Les Navigateurs
  • Les services de Webmaster Hub
    • Infogérance serveurs dédiés
    • Offres et demandes de prestations de service

Blogs

  • Dan's Blog
  • Blog de Webadev
  • Toulouzheing
  • Phoblog
  • boutiques
  • KaRaK
  • Nicolas Blog
  • Americas - Info
  • Spidetra Blog
  • Rat de bibliothèque
  • Une bonne blog... de Bourinho
  • Blog e-Business et Emarketing
  • La piscine
  • Vincent
  • Blog de Georges
  • Dessiner le web
  • Web shopping
  • Toulouse
  • Webmarketing, what else ?
  • SpeedAirMan's blog
  • Le Blog de Dadou
  • illustration et delires graphiques d'un infographiste...
  • paolo
  • CQJD News
  • magie

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Skype


Localisation


Société

Found 2 results

  1. Bonjour, A partir de tutoriaux, j'ai élaboré le menu déroulant suivant sur mon site: http://www.huiledolivedespagne.fr/ Mais, il utilise, de façon impropre apparemment (selon w3c), les balises dl,dt,dd. et cela ne marche pas sur Safari (mais sur IE, google et mozilla si). J'essaye donc de le refaire, simplement avec des ul li ul li (des listes classiques). Or je me mélange les pédales et m'y perds dans la définition des propriétés des balises. OBJECTIF: Retrouver avec des ul li ul li ce que j'ai réussi à faire avec dl,dt,dd sur le site http://www.huiledolivedespagne.fr/ Je souhaitais que le texte des menus et sous-menus apparaissent en gris noir toujours et sans soulignement jamais. Je souhaitais aussi, qu'au touché avec le curseur de la souris, le rectangle autour du texte apparaisse en jaune clair et que les textes avec liens (seulement ceux qui ont des liens) la police apparaisse en rouge (ceux sans liens restent gris noir). Enfin, je souhaitais que, pour le menu, le fait d'avoir déjà clicqué sur un lien ne modifie pas l'apparence des textes dans les menus après. Ils restent gris noirs et changent seulement s'il y a un lien quand le cursor de la souris le touche. (voir comment cela fonction actuellement sur le site huiledolivedespagne.fr) Définition du Menu: Code html actuel (dl,dt,dd): <nav><div id="menu"><dl><dt><a href="index.html">ACCUEIL</a></dt></dl><dl><dt>ZONES DE PRODUCTION</dt><dd><ul><li><a href="geographique.html">Répartition géographique</a></li><li><a href="AOP.html">Carte des variétés et AOPs</a></li><li><a href="poids.html">Poids des variétés</a></li></ul></dd></dl><dl><dt>VARIÉTÉS D'OLIVE</dt><dd><ul><li><a href="picual.html">Picual</a></li><li><a href="cornicabra.html">Cornicabra</a></li><li><a href="hojiblanca.html">Hojiblanca</a></li><li><a href="picudo.html">Picudo</a></li><li><a href="arbequina.html">Arbequina</a></li><li><a href="empeltre.html">Empeltre</a></li></ul></dd></dl><dl><dt>RECETTES</dt><dd><ul><li><a href="cuisineethuile.html">Une huile pour chaque plat</a></li><li><a href="papillotes.html">Papillotes de Loup</a></li><li><a href="filetmignon.html">Filet Mignon Ibérique</a></li><li><a href="glacehuiledolive.html">Glace à l'huile d'olive</a></li></ul></dd></dl><p><br/></p></div> </nav> Définition du Menu: Objectif code HTML (ul,li): <nav> <div id="menu"> <ul> <li><a href="index.html">ACCUEIL</a></li> <li>ZONES DE PRODUCTION <ul> <li><a href="geographique.html">Répartition géographique</a></li> <li><a href="AOP.html">Carte des variétés et AOPs</a></li> <li><a href="poids.html">Poids des variétés</a></li> </ul> </li> <li>VARIÉTÉS D'OLIVE <ul> <li><a href="picual.html">Picual</a></li> <li><a href="cornicabra.html">Cornicabra</a></li> <li><a href="hojiblanca.html">Hojiblanca</a></li> <li><a href="picudo.html">Picudo</a></li> <li><a href="arbequina.html">Arbequina</a></li> <li><a href="empeltre.html">Empeltre</a></li> </ul> </li> <li>RECETTES</li> <ul> <li><a href="cuisineethuile.html">Une huile pour chaque plat</a></li> <li><a href="papillotes.html">Papillotes de Loup</a></li> <li><a href="filetmignon.html">Filet Mignon Ibérique</a></li> <li><a href="glacehuiledolive.html">Glace à l'huile d'olive</a></li> </ul> </li> </ul> <p><br/></p> </div> </nav> Définition du Menu: CSS actuel: /* Navigation *//* MENU */#menu { text-decoration: none; list-style: none; margin: 0px auto; padding: 0px; width: 57em; height: 40px; text-align: center; text-transform: none; font-family: "Trebuchet MS", Arial; font-weight: bold; display: block; position: relative; z-index: 7;}dl { background: white; margin: 0px; padding: 0px; float: left; display: block;}dt { margin: 0px; padding: 0px; width: 14em; height: 40px; text-align: center; color: rgb(24, 24, 24); line-height: 40px; font-weight: bold; cursor: pointer;}dt a { text-decoration: none; margin: 0px; padding: 0px; text-align: center; color: rgb(24, 24, 24); font-weight: bold; text-decoration: none;}dt:hover { text-decoration: none; background: rgb(255, 255, 196); color: rgb(24, 24, 24);}dt a:hover { text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15);}dt:visited,dt a:visited { text-decoration: none; color: rgb(24, 24, 24);}/* sous-menus */dd { background: rgb(255, 255, 196); margin: 0px; padding: 0px; display: block; z-index: 7;font-weight: normal;}dd ul { background: white; margin: 0px; padding: 0px; width: 14em; height: 30px; text-align: center; line-height: 30px; display: block; z-index: 7;}dd ul li { background: white; margin: 0px; padding: 0px; display: block; z-index: 7;}dd ul li a { text-decoration: none; width: 14em; height: 30px; color: rgb(24, 24, 24); line-height: 30px; display: block; z-index: 7;}dd ul li a:hover { text-decoration: none; background: rgb(255, 255, 196); color: rgb(255, 15, 15); z-index: 7;}dd ul li a:visited { text-decoration: none; color: rgb(24, 24, 24); z-index: 7;}dl dd { display: none;}dl:hover dd { display: block;} Je voudrais pouvoir adapter ce CSS au html avec seulement ul et li et obtenir le même résultat. Je n'y arrive pas. Je m'emmêle les pédales avec les ul li ul li. J'ai aussi essayé avec des classes menu, sous-menu, menu-item, sous-menu-item. Je n'y arrive pas non plus. Quelqu'un peut-il me donner un coup de main, SVP? Merci d'avance...
  2. Salut à tous, je vous soumets ici une solution que j'ai utilisé pour rendre un site responsive web design sans me prendre la tête avec les em, vw, % et tout ce binz. Le problème étant qu'en utilisant autre chose que des unités en px, il est très difficile d'avoir le même rendu sur tout les écrans, voir impossible ... telle tablette affiche des textes plus gros qu'une autre, les images (qui sont toujours en pixels faut'il le rappeler) s'affichent différemment en fonction du ration device-pixel-ratio du device, bref c'est le bordel ... Quand on cherche des solutions sur le net, tout le monde dit : ha ben facile pour re-déclare des styles CSS en fonction de la résolution du device, utilise un viewport avec initial-scale, maximum-scale ... bref pour moi c'est en retour en arrière, vers les années 1998 ou l'on devait presque coder un site par navigateur (netscape, ie et compagnie), vive le progrès ... Donc ma solution simple et facile est celle-ci : > Tu intègres ton site en pixels (px) comme ca tout est bien calé > Tu redimensionnes le site avec une fonction javascript qui change le style:zoom sur le site en fonction de la largeur ou la hauteur (comme tu préfères) de l'écran du device > Et voila c'est fait, le rendu est le même quelque soit l'écran ! Donc j'aimerais savoir ce que vous pensez de cette solution ? Est-ce que j'ai raté un truc ou cette solution vous semble plus simple et efficace que d'avoir à gérer : > plusieurs fichiers CSS en fonction du device > des viewport avec des scales pour chaque device > des images qui s'affichent différemment en fonction du device-pixel-ratio Merci pour vos retours. Voila le code : <!DOCTYPE html> <html lang="fr"> <head> <title>Titre</title> <meta charset="utf-8"> <style> html, body { margin : 0 ; padding : 0 ; } #FSite { position : absolute ; width : 1300px ; height : 640px ; top : 50% ; left : 50% ; margin : -320px 0 0 -650px ; background : #FFCC00 ; } </style> <script type="text/javascript"> function XLViewport() { var SiteW = 1300 // Largeur du site source ; var SiteH = 640 // Hauteur du site source ; var ScreenW = getWindowWidth() ; var ScreenH = getWindowHeight() ; // Je veux que le site fit en fonction de sa hauteur PercentH = 100 ; if (SiteH > ScreenH) PercentH = (ScreenH * 100) / SiteH ; PercentW = 100 ; if (SiteW > ScreenW) PercentW = (ScreenW * 100) / SiteW ; if (PercentW <= PercentH) Percent = PercentW ; else Percent = PercentH ; Scale = Percent / 100 ; FFrame = document.getElementById('FSite') ; FFrame.style['-webkit-transform'] = 'scale(' + Scale + ')'; FFrame.style['-moz-transform'] = 'scale(' + Scale + ')'; FFrame.style['-ms-transform'] = 'scale(' + Scale + ')' ; FFrame.style['transform'] = 'scale(' + Scale + ')'; } function getWindowHeight() { var windowHeight=0; if (typeof(window.innerHeight)=='number') { windowHeight=window.innerHeight; } else { if (document.documentElement&& document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else { if (document.body&&document.body.clientHeight) { windowHeight=document.body.clientHeight; } } } return windowHeight; } function getWindowWidth() { var windowWidth=0; if (typeof(window.innerWidth)=='number') { windowWidth=window.innerWidth; } else { if (document.documentElement&& document.documentElement.clientWidth) { windowWidth = document.documentElement.clientWidth; } else { if (document.body&&document.body.clientWidth) { windowWidth=document.body.clientWidth; } } } return windowWidth; } window.onload = function(){ XLViewport() ; }; window.onresize = function(){ XLViewport() ; }; </script> </head> <body> <div id="FSite"> CONTENU DU SITE </div> </body> </html>
×
×
  • Create New...