Anzeige

[CSS] Ausgangsbild bestimmen

[CSS] Ausgangsbild bestimmen | PSD-Tutorials.de

Erstellt von gegenwind, 13.03.2008.

  1. gegenwind

    gegenwind liebt Pizza.

    Dabei seit:
    18.01.2006
    Beiträge:
    806
    Geschlecht:
    männlich
    Software:
    CS6
    [CSS] Ausgangsbild bestimmen
    Hallo, hier habe ich eine kleine Bildergalerie mit CSS.
    Es funktioniert alles Prima, nur ich möchte das schon am Anfang ein Bild gewählt ist. Wenn man die Seite mit der Galerie startet, ist kein Bild gewählt und der graue Hintergrund ist zu sehen. Sieht nicht einladend aus, deshalb möchte ich gerne gleich ein Ausgangsbild haben. Die Bemerkungen, die der CSSAutor reingeschrieben hat, habe ich drin gelassen. Vielleicht hilfts ja! Ausserdem bleiben die Bilder nur da, wenn man mit linker Maustaste drauf bleibt. Das Problem habe ich aber erst seitdem ich das hiereingebaut habe. Allerdings möchte ich das schon ganz gerne behalten :)

    Vielen Dank!

    PHP:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <title>Partyservice</title>
    6. <style type="text/css">
    7. <!--
    8. body {
    9.     background-color: #FFFFFF;
    10. }
    11. a, a:visited, a:hover, a:active {
    12. color:#000;
    13. }
    14. /* style the outer cntaining div to fit the landscape, portrait and buttons */
    15. #album {
    16.     width:490px;
    17.     height:370px;
    18.     background:#eee url(gallery/deer.jpg) 0 40px no-repeat;
    19.     border:1px solid #C0C0C0;
    20.     margin:0 0px;
    21. }
    22. /* remove the padding margin and bullets from the list. Add a top margin and width to fit the images and a position relative */
    23. .gallery {
    24.     padding:0;
    25.     margin:320px 0 0;
    26.     list-style-type:none;
    27.     position:relative;
    28.     width:490px;
    29. }
    30. /* remove the default image border */
    31. .gallery img {
    32. border:0;
    33. }
    34. /* make the list horizontal */
    35. .gallery li {
    36. float:left;
    37. }
    38. /* style the link text to be central in a surrounding box */
    39. .gallery li a, .gallery li a:visited {
    40.     font-size:11px;
    41.     float:left;
    42.     text-decoration:none;
    43.     color:#000;
    44.     background:#0066CC;
    45.     text-align:center;
    46.     width:27px;
    47.     height:26px;
    48.     line-height:25px;
    49.     border:1px solid #444;
    50.     margin:10px;
    51. }
    52. /* position the images using an absolute position and hide them from view */
    53. .gallery li a img {
    54. position:absolute;
    55. top:-320px;
    56. left:0;
    57. visibility:hidden;
    58. border:0;
    59. }
    60. /* fix the top position for the landscape images */
    61. .gallery li a img.landscape {
    62. top:-280px;
    63. }
    64. /* fix the left position for the portrait images */
    65. .gallery li a img.portrait {
    66.     left:0;
    67.     border-left:40px solid #eee;
    68.     border-right:40px solid #eee;
    69. }
    70. /* style the hover background color for the text boxes */
    71. .gallery li a:hover {
    72. background:#ddd;
    73. }
    74. /* style the active/focus colors for the text boxes (required for IE) */
    75. .gallery li a:active, .gallery li a:focus {
    76. background:#444;
    77. color:#fff;
    78. }
    79. /* make the images visible on active/focus */
    80. .gallery li a:active img, .gallery li a:focus img {
    81. visibility:visible;
    82. }
    83.  
    84. -->
    85. </style>
    86. <link href="ccs/site.css" rel="stylesheet" type="text/css" />
    87. <script type="text/javascript">
    88. <!--
    89. function MM_swapImgRestore() { //v3.0
    90.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    91. }
    92. function MM_preloadImages() { //v3.0
    93.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    94.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    95.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    96. }
    97.  
    98. function MM_findObj(n, d) { //v4.01
    99.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    100.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    101.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    102.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    103.   if(!x && d.getElementById) x=d.getElementById(n); return x;
    104. }
    105.  
    106. function MM_swapImage() { //v3.0
    107.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    108.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    109. }
    110. //-->
    111. </script>
    112. <style type="text/css">
    113. <!--
    114. .Stil1 {color: #FFFFFF}
    115. #apDiv1 {
    116.     position:absolute;
    117.     width:490px;
    118.     height:322px;
    119.     z-index:1;
    120. }
    121. -->
    122. </style>
    123. <script type="text/javascript">
    124. <!--
    125. function MM_reloadPage(init) {  //reloads the window if Nav4 resized
    126.   if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    127.     document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    128.   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    129. }
    130. MM_reloadPage(true);
    131. //-->
    132. </script>
    133. </head>
    134.  
    135. <body onload="MM_preloadImages('layout_img/navi/RollOver/hp_navi_startseite_ro.jpg','layout_img/navi/RollOver/hp_navi_partyservice_ro.jpg','layout_img/navi/RollOver/hp_navi_referenzen_ro.jpg','layout_img/navi/RollOver/hp_navi_guestbook_ro.jpg','layout_img/navi/RollOver/hp_navi_anfrage_ro.jpg')">
    136. <table width="761" border="0" align="center" cellpadding="0" cellspacing="0">
    137.   <tr>
    138.     <td height="10" colspan="7">&nbsp;</td>
    139.   </tr>
    140.   <tr>
    141.     <td colspan="7" class="hpbanner">&nbsp;</td>
    142.   </tr>
    143.   <tr>
    144.     <td width="96" height="50" align="center" valign="top" class="hp_navi_left">&nbsp;</td>
    145.     <td width="101" height="50" align="center" valign="top"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Startseite','','layout_img/navi/RollOver/hp_navi_startseite_ro.jpg',1)"><img src="layout_img/navi/RollDown/hp_navi_startseite.jpg" alt="Startseite" width="101" height="50" border="0" class="img" id="Startseite" /></a></td>
    146.     <td width="121" height="50" align="center" valign="top"><a href="partyservice.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Partyservice','','layout_img/navi/RollOver/hp_navi_partyservice_ro.jpg',1)"><img src="layout_img/navi/RollDown/hp_navi_partyservice.jpg" alt="Partyservice" width="121" height="50" border="0" class="img" id="Partyservice" /></a></td>
    147.     <td width="114" height="50" align="center" valign="top"><a href="referenzen.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Referenzen','','layout_img/navi/RollOver/hp_navi_referenzen_ro.jpg',1)"><img src="layout_img/navi/RollDown/hp_navi_referenzen.jpg" alt="Referenzen" width="114" height="50" border="0" class="img" id="Referenzen" /></a></td>
    148.     <td width="87" height="50" align="center" valign="top"><a href="anfrage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Anfrage','','layout_img/navi/RollOver/hp_navi_anfrage_ro.jpg',1)"><img src="layout_img/navi/RollDown/hp_navi_anfrage.jpg" alt="Anfrage" width="87" height="50" border="0" class="img" id="Anfrage" /></a></td>
    149.     <td width="113" height="50" align="center" valign="top"><a href="guestbook.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Gaestebuch','','layout_img/navi/RollOver/hp_navi_guestbook_ro.jpg',1)"><img src="layout_img/navi/RollDown/hp_navi_guestbook.jpg" alt="Gaestebuch" width="113" height="50" border="0" class="img" id="Gaestebuch" /></a></td>
    150.     <script>function init()
    151. {
    152.    var a=document.getElementsByTagName('a');
    153.  
    154.    for (var i=0;i<a.length;i++) {
    155.       a[i].onmousedown = function()
    156.       {
    157.          this.onfocus = function()
    158.          {
    159.             this.blur();
    160.          }
    161.       }
    162.       a[i].onmouseup = function()
    163.       {
    164.          this.onfocus = function(){}
    165.       }
    166.       a[i].onmouseout = a[i].onmouseup;
    167.    }
    168. }
    169.  
    170. if ( (window.onload === undefined) || (window.onload === null) ) {
    171.    window.onload = window.init;
    172. }
    173. else {
    174.    window.myLoad = window.onload;
    175.    window.onload = function()
    176.    {
    177.       window.myLoad();
    178.       window.init();
    179.    }
    180. }</script>
    181.     <td width="132" height="50" align="center" valign="top" class="hp_navi_right">&nbsp;</td>
    182.   </tr>
    183.   <tr>
    184.     <td height="905" colspan="7" valign="baseline" class="hp_textarea"><div class="hp_index_layout">
    185.       <div>
    186.         <div align="center"><img src="fonts/referenzen.gif" alt="" width="265" height="70" /></div>
    187.       </div>
    188.       <div align="center"><br />
    189.         Hier werden Sie demnächst Referenzen zu unserem Partyservice finden!<br />
    190.         <br />
    191.        
    192.      
    193.         <script charset="utf-8" id="injection_graph_func" src="photo_album-Dateien/injection_graph_func.js"></script></head>
    194. <body id="www-cssplay-co-uk">
    195. <div id="album">
    196.   <ul class="gallery">
    197.   <author: http://www.cssplay.co.uk/>
    198.     <li><a href="#nogo" class="Stil1">01<img class="Kaese" src="img/menu/kaese.jpg" alt="Kaese" title="Kaese" /></a></li>
    199.     <li><a href="#nogo"> 02<img class="schinken" src="img/menu/schinken.jpg" alt="Schinkenplatte" title="Schinkenplatte" /></a></li>
    200.     <li><a href="#nogo">03<img class="schinken" src="img/menu/schinken2.jpg" alt="Schinkenplatte" title="schinken" /></a></li>
    201.     <li><a href="#nogo">04<img class="pizza" src="img/menu/pizza.jpg" alt="pizza" title="pizza" /></a></li>
    202.     <li><a href="#nogo">05<img class="fruechte" src="img/menu/fruechte.jpg" alt="Fruechte" title="fruechte" /></a></li>
    203.     <li><a href="#nogo">06<img class="Fleisch" src="img/menu/fleisch.jpg" alt="Fleisch" title="Fleisch" /></a></li>
    204.     <li><a href="#nogo">07<img class="Canna" src="img/menu/canna.jpg" alt="canna" title="canna" /></a></li>
    205.     <li><a href="#nogo">08<img class="fisch" src="img/menu/fisch.jpg" alt="fisch" title="fisch" /></a></li>
    206.     <li><a href="#nogo">09<img class="erdbeeren" src="img/menu/erdbeeren.jpg" alt="erdbeeren" title="erdbeeren" /></a></li>
    207.     <li><a href="#nogo">10<img class="Broetchen" src="img/menu/fisch.jpg" alt="broetchen" title="broetchen" /> </a></li>
    208.     <li></li>
    209.     <li></li>
    210.   </ul>
    211. </div>
    212. <!-- end of wrapper -->
    213. </script>
    214. <br />
    215.       </div>
    216.     </div>      
    217.     <p>&nbsp;</p></td>
    218.   </tr>
    219.   <tr>
    220.     <td colspan="7"><img src="layout_img/hp_footer.jpg" alt="" width="761" height="91" /></td>
    221.   </tr>
    222. </table>
    223. </body>
    224. </html>
     
    Zuletzt bearbeitet: 13.03.2008
    #1      
  2. pacmanforever

    pacmanforever Nicht mehr ganz neu hier

    Dabei seit:
    28.12.2005
    Beiträge:
    108
    [CSS] Ausgangsbild bestimmen
    AW: [CSS] Ausgangsbild bestimmen

    wie wäre es mit dem dazugehörigen php code ?
     
    #2      
  3. kyle66

    kyle66 Guest

    [CSS] Ausgangsbild bestimmen
    AW: [CSS] Ausgangsbild bestimmen

    Und der Javascript-Code wäre sicherlich auch hilfreich. Wird überhaupt php verwendet?
     
    #3      
  4. gegenwind

    gegenwind liebt Pizza.

    Dabei seit:
    18.01.2006
    Beiträge:
    806
    Geschlecht:
    männlich
    Software:
    CS6
    [CSS] Ausgangsbild bestimmen
    AW: [CSS] Ausgangsbild bestimmen

    Hallo Kyle, das ist alles, da gibts keine weitere Javascript :)
     
    #4      
x
×
×