Retour à Forum de site web

CSS superposition avec z-index et Mouseover Pop Ups

  • brittagyrl
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Nov 21, 2008
  • Messages: 32
  • Loc: Ogden, Utah
  • Status: Offline

Message Juillet 28th, 2010, 1:21 pm

Mon patron veut utiliser cette disposition (voir image ci-dessous) pour un nouveau projet, nous travaillons sur la bibliothèque.

Il veut chaque image sur le bureau de pop-up avec une version plus grande de lui-même sur mouseovers seulement. C'est un peu plus de ma tête. Jai déjà tranché toutes les images dans Fireworks, mais pour la faire la souris ont-pop plus jusqu'à me rend fou.

Est-ce que quelqu'un sait de toute bons tutoriaux la façon d'utiliser les z-index superposition et de pop ups utilisant CSS uniquement?
Attachments:
woodDesk.jpg

This is the layout. I actually have it up on our site though if I can SOMEHOW get someone and external link.



Voir le progrès dans ce domaine http://dctest.weber.edu/custompages/ucui/deskmock/index.php
Moderator Remark: added link for OP
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Juillet 28th, 2010, 1:21 pm

  • brittagyrl
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Nov 21, 2008
  • Messages: 32
  • Loc: Ogden, Utah
  • Status: Offline

Message Juillet 29th, 2010, 8:22 am

Bonjour..... Il ya quelqu'un là-bas?
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Juillet 29th, 2010, 12:43 pm

Je suppose que vous devrez utiliser un peu de javascript en plus de css pour bien swap z-index. Je n'ai pas une main hors tutoriel, mais essayez de rechercher jQuery et z-index pour voir si quelque chose se présente.

Une note de conseiller. Je wouldnt simplement tranche cela dans ImageReady. Je pense que le sage de créer chaque objet séparément, sans aucun des autres contenus de la manière. Ainsi, le plein (vide) de bureau en arrière-plan et ensuite chaque objet comme une image toute seule, sans tout ce qu'il se chevauchent. À ce moment, vous pouvez échanger des profondeurs et il ne sera pas question ce qui est sur en haut de rien d'autre.

Autant que cela me fait mal de le dire, je pense que Flash serait une solution beaucoup plus facile à ce problème. Je pense que votre va passer beaucoup de temps pour la faire fonctionner dans les navigateurs Web et composer avec le fait que vous ne pouvez pas avoir une zone non rectangulaire cliquez sur HTML.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • brittagyrl
  • Novice
  • Novice
  • Avatar de l’utilisateur
  • Inscription: Nov 21, 2008
  • Messages: 32
  • Loc: Ogden, Utah
  • Status: Offline

Message Juillet 29th, 2010, 1:54 pm

Graphixboy Salut!
Im si heureux que vous ayez répondu à cette question.

Im avoir un sacré temps à essayer de rendre cela possible. Si il ya une façon que je peux vous envoyer ce lien, peut-être vous pouvez voir ma douleur.

L'objectif est de créer des CSS pop ups pour chacune de ces images sur ce bureau.

Il ne veut pas utiliser de Javascript et semble penser que c'est une possibilité réaliste.

Voici mon code HTML:
HTML Code: [ Select ]
<body bgcolor="#000000"><center>
<table border="0" cellpadding="0" cellspacing="0" width="899">
<!-- fwtable fwsrc="UCUImain.png" fwpage="Page 1" fwbase="ucui.jpg" fwstyle="Dreamweaver" fwdocid = "2010783289" fwnested="0" -->
  <tr>
   <td><img src="spacer.gif" width="288" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="611" height="1" border="0" alt="" /></td>
   <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>
 
  <tr>
   <td colspan="2"><img src="desk.jpg"  /></td>
   <td><img src="spacer.gif" width="1" height="109" border="0" alt="" /></td>
  </tr>
  <tr>
 
</table>
</body>
 
  1. <body bgcolor="#000000"><center>
  2. <table border="0" cellpadding="0" cellspacing="0" width="899">
  3. <!-- fwtable fwsrc="UCUImain.png" fwpage="Page 1" fwbase="ucui.jpg" fwstyle="Dreamweaver" fwdocid = "2010783289" fwnested="0" -->
  4.   <tr>
  5.    <td><img src="spacer.gif" width="288" height="1" border="0" alt="" /></td>
  6.    <td><img src="spacer.gif" width="611" height="1" border="0" alt="" /></td>
  7.    <td><img src="spacer.gif" width="1" height="1" border="0" alt="" /></td>
  8.   </tr>
  9.  
  10.   <tr>
  11.    <td colspan="2"><img src="desk.jpg"  /></td>
  12.    <td><img src="spacer.gif" width="1" height="109" border="0" alt="" /></td>
  13.   </tr>
  14.   <tr>
  15.  
  16. </table>
  17. </body>
  18.  


Et voici mon CSS:

CSS Code: [ Select ]
@charset "UTF-8";
/* CSS Document */
 
body {
   margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
   padding: 0;
   text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
   color: #000000;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 100%;
   background-color: #000000;
}
 
/* Tips for Elastic layouts
1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
*/
 #container {
   width: 1190px; /* this overrides the text-align: center on the body element. */
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   border: 1px solid #000000;
   background-color: #000000;
   height: 1013px;
   position: absolute;
   left: 180px;
}
 #header {
   padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
   background-color: #000000;
   background-position: center;
   position: absolute;
   top: 0px;
}
#desk {
   margin: 0px;
   padding: 0px;
   background-color: #000000;
   background-image:url(../../custompages/ucui/deskmock/desk.jpg);
   background-repeat:no-repeat;
   height: 924px;
   width: 1190px;
   z-index: 1;
   position: absolute;
   top: 90px;
}
#annual {
   position:absolute;
   left:0px;
   top:645px;
   z-index: 2;
}
.span.annual {
   background-image:url("../../custompages/ucui/deskmock/annual.png");
   background-repeat: no-repeat;
   display:block;
   height: 368px;
   width: 406px;
}
.span.annual:hover img {
background-image:url("../../custompages/ucui/deskmock/annualUP.png");
   visibility:hidden;
   height: 368px;
   width: 430px;
}
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. body {
  5.    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
  6.    padding: 0;
  7.    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
  8.    color: #000000;
  9.    font-family: Verdana, Arial, Helvetica, sans-serif;
  10.    font-size: 100%;
  11.    background-color: #000000;
  12. }
  13.  
  14. /* Tips for Elastic layouts
  15. 1. Since the elastic layouts overall sizing is based on the user's default fonts size, they are more unpredictable. Used correctly, they are also more accessible for those that need larger fonts size since the line length remains proportionate.
  16. 2. Sizing of divs in this layout are based on the 100% font size in the body element. If you decrease the text size overall by using a font-size: 80% on the body element or the #container, remember that the entire layout will downsize proportionately. You may want to increase the widths of the various divs to compensate for this.
  17. 3. If font sizing is changed in differing amounts on each div instead of on the overall design (ie: #sidebar1 is given a 70% font size and #mainContent is given an 85% font size), this will proportionately change each of the divs overall size. You may want to adjust based on your final font sizing.
  18. */
  19.  #container {
  20.    width: 1190px; /* this overrides the text-align: center on the body element. */
  21.    margin-top: 0;
  22.    margin-right: auto;
  23.    margin-bottom: 0;
  24.    margin-left: auto;
  25.    border: 1px solid #000000;
  26.    background-color: #000000;
  27.    height: 1013px;
  28.    position: absolute;
  29.    left: 180px;
  30. }
  31.  #header {
  32.    padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
  33.    background-color: #000000;
  34.    background-position: center;
  35.    position: absolute;
  36.    top: 0px;
  37. }
  38. #desk {
  39.    margin: 0px;
  40.    padding: 0px;
  41.    background-color: #000000;
  42.    background-image:url(../../custompages/ucui/deskmock/desk.jpg);
  43.    background-repeat:no-repeat;
  44.    height: 924px;
  45.    width: 1190px;
  46.    z-index: 1;
  47.    position: absolute;
  48.    top: 90px;
  49. }
  50. #annual {
  51.    position:absolute;
  52.    left:0px;
  53.    top:645px;
  54.    z-index: 2;
  55. }
  56. .span.annual {
  57.    background-image:url("../../custompages/ucui/deskmock/annual.png");
  58.    background-repeat: no-repeat;
  59.    display:block;
  60.    height: 368px;
  61.    width: 406px;
  62. }
  63. .span.annual:hover img {
  64. background-image:url("../../custompages/ucui/deskmock/annualUP.png");
  65.    visibility:hidden;
  66.    height: 368px;
  67.    width: 430px;
  68. }
Moderator Remark: added code tags
  • graphixboy
  • Control + Z
  • Mastermind
  • Avatar de l’utilisateur
  • Inscription: Juil 11, 2005
  • Messages: 1828
  • Loc: In the Great White North
  • Status: Offline

Message Juillet 29th, 2010, 1:58 pm

PM moi le lien. Ill mettre en place afin que tous puissent le voir.

Quels sont les navigateurs que vous avez à l'appui? Vous pouvez obtenir que cela fonctionne sans javascript dans les navigateurs plus récents, mais sa va être assez dur avec toutes les versions d'IE.
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 95 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC