• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

IMG mit Tiefeneffekt/ Tiefeneffekt an IMG größe anpassen

M

myoddo

Mitglied
In einer Tabelle habe ich verschiedene IMG als Link eingefügt.
Beim hover über das Bild entsteht eine Tiefenwirkung (Bild geht mit Rahmen nach unten) .
Noch ist alles gut. Allerdings nur solange die IMG eine gleiche Breite haben.
Nehme ich ein Bild welches schmäler ist, ist der Rahmen unter dem Bild so breit wie
beim breitesten Bild in der Spalte.
Kann ich den Rahmen /Background direkt an der Breite des IMG messen oder automatisch anpassen?
Ist etwas verzwickt, aber ich hoffe Ihr versteht was ich meine.

Danke
HTML: 
  <table id="ref_tab">
                                   
                                <tr>  <!-- erste Linie -->
                                    <th id="linke_tabelle">
                                     <div class="shadow6">
                                        <div class="shadow5">
                                          <div class="shadow4">
                                            <div class="shadow3">
                                              <div class="shadow2">
                                                <div class="shadow">
                              <a href="galerie-01.php"><img  src="pictures/garten-01-01.jpg" alt=    "" border="0" width="150"  height="98" /> </a>
                                             </div> <!-- Ende shadow -->
                                            </div><!-- Ende shadow 2 -->
                                          </div>  <!-- Ende shadow 3 -->
                                         </div>  <!-- Ende shadow 4 -->
                                        </div> <p>Vorgartenanlage</p> <!-- Ende shadow 5 -->
                                     </div>  <!-- Ende shadow 6 --> 
                                    </th> <!-- ende linke Tabelle -->
                                   
                                     <th id="rechte_tabelle">
                                         <div class="shadow6">
                                           <div class="shadow5">
                                          <div class="shadow4">
                                            <div class="shadow3">
                                              <div class="shadow2">
                                                <div class="shadow">                               
                                <a href="galerie-02.php"> <img  src="pictures/faell01-01.jpg" alt="" border="0" width="92"  height="98"/></a>
                                             </div> <!-- Ende shadow -->
                                            </div><!-- Ende shadow 2 -->
                                          </div>  <!-- Ende shadow 3 -->
                                         </div>  <!-- Ende shadow 4 -->
                                        </div> <p>Baumf&auml;llarbeiten</p> <!-- Ende shadow 5 -->
                                     </div>  <!-- Ende shadow 6 --> 
                                    </th> <!-- ende rechte  Tabelle -->                                  </tr>  <!--  ende erste Linie -->
                                
                        <tr>  <!-- zweite Linie -->
                                    <th id="linke_tabelle">
                                     <div class="shadow6">
                                        <div class="shadow5">
                                          <div class="shadow4">
                                            <div class="shadow3">
                                              <div class="shadow2">
                                                <div class="shadow">
                              <a href="galerie-04.php"><img  src="pictures/teich02-150-01.jpg" alt="" border="0" width="150"  height="98">
                                             </div> <!-- Ende shadow -->
                                            </div><!-- Ende shadow 2 -->
                                          </div>  <!-- Ende shadow 3 -->
                                         </div>  <!-- Ende shadow 4 -->
                                        </div> <p>Teichanlagen</p> <!-- Ende shadow 5 -->
                                     </div>  <!-- Ende shadow 6 --> 
                                    </th> <!-- ende linke Tabelle -->
                                   
                                     <th id="rechte_tabelle">
                                         <div class="shadow6">
                                           <div class="shadow5">
                                          <div class="shadow4">
                                            <div class="shadow3">
                                              <div class="shadow2">
                                                <div class="shadow">                               
                                  <a href="galerie-03.php"><img  src="pictures/schwimb-01-01.jpg" alt="" border="0" width="150"  height="98"></a>
                               
                                             </div> <!-- Ende shadow -->
                                            </div><!-- Ende shadow 2 -->
                                          </div>  <!-- Ende shadow 3 -->
                                         </div>  <!-- Ende shadow 4 -->
                                        </div> <p>Schwimmteich - Poolanlagen</p> <!-- Ende shadow 5 -->
                                     </div>  <!-- Ende shadow 6 --> 
                                    </th> <!-- ende rechte  Tabelle -->                                  </tr> <!-- ende  2. Linie -->


HTML: 
#ref_tab  {        /*referenz-tabelle  aussen*/
    display:block;
    width:auto;    
    border:/*#000000 5px solid;    schwarzer Rand */
    margin-left:0px;
        
        }

#rechte_tabelle
     {

        /* background-color:#F30;* roter Hintergrund */
         /*runden*/
         -moz-border-radius:10px; /* Firefox */
        -webkit-border-radius:10px; /* Safari, Chrome */
        -khtml-border-radius:10px; /* Konqueror */
        border-radius:10px; /* CSS3 */
        
       }

#linke_tabelle
     {
      
        /*background-color:#0066CC;  blauer Hintergrund */
         -moz-border-radius:10px; /* Firefox */
        -webkit-border-radius:10px; /* Safari, Chrome */
        -khtml-border-radius:10px; /* Konqueror */
        border-radius:10px; /* CSS3 */
        

    }



DIV.shadow IMG {
   border: 0px solid #666;
   margin: 0;   
   top: -3px;
   left: -3px;
   }
 .shadow, .shadow2, .shadow3, .shadow4, .shadow5 {
   padding: 1px;
   border-radius: 10px;
      -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
   
   
   
   }
DIV.shadow5:hover DIV.shadow,
DIV.shadow5:hover DIV.shadow2,
DIV.shadow5:hover DIV.shadow3,
DIV.shadow5:hover DIV.shadow4,
DIV.shadow5:hover {
   padding: 0;
   border-radius: 5px;
  
    -moz-border-radius:5px; /* Firefox */
    -webkit-border-radius:5px; /* Safari, Chrome */
    -khtml-border-radius:5px; /* Konqueror */
    border-radius:5px; /* CSS3 */
   
   
   
   }
DIV.shadow {
   background-color: #8e8e8e;
   border: 1px solid #959595;
   margin: 0px;
    
   }
DIV.shadow2 {
   background-color: #aaa;
   border: 1px solid #bebebe;
   margin: 0;
   
   }
DIV.shadow3 {
   background-color: #d1d1d1;
   border: 1px solid #e1e1e1;
   margin: 0;
   }
DIV.shadow4 {
   background-color: #ededed;
   border: 1px solid #f6f6f6;
   margin: 0px;
    
   }
DIV.shadow5 {    /*rand ganz aussen*/
   background-color:#fcfcfc; 
   border: 1px solid transparent;
   margin: 5px 64px;  

   }

DIV.shadow6 p {
    color:#543708;
    
    }



DIV.shadow6 {
    
    margin-left: auto;
       margin-right:auto;
       border:#543708 solid 1px;   /*Rahmen aussen*/ 
    /*runden*/
     -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
      
    
    
            }


DIV.shadow5:hover {
   border-width: 5px;
   }

DIV.shadow5 IMG {
   border: 0px solid #666;
   margin: -2px;
   display:block;
   position: relative;
   top: -3px;
   left: -3px;
   -moz-opacity:0.67;
   }
DIV.shadow5:hover IMG {
   margin: -1px;
   top: -1px;
   left: -1px;
   -moz-opacity:1;
   }
 
Werbung:
Kannst du das mal bitte onlinestellen, damit ich das vor mir hab?
Anders blicke ich da jetzt nicht ganz so durch. ;)
 
Werbung:
Die Seite ist absolut chaotisch aufgebaut. Doppelter Doctype, Head und Body (durch includes?). Div-Suppen in Tabellenzellen, um den Pseudo-Schatten zu simulieren.

Für so etwas existiert das Attribut box-shadow, oder man erstellt die schattierten Bilder in Photoshop. Wenn du dann noch die Tabelle rauswirfst, sollte es auch kein Problem mehr mit der Bildbreite geben.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben