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

ich habe gehört es geht mit css

Status
Für weitere Antworten geschlossen.
K

kennedys

Neues Mitglied
wie kann ich das mit css lösen? ich habe keine großen css kenntnisse und frage daher um rat.
Code: 
<tr>
 <td>


 </td>
</tr>

<tr>
 <td>
 <img src="space.gif" width="1" height="93" alt="" border="0" bordercolor="#000000">
   </td>
   <td>
   <img src="space.gif" width="90" height="1" alt="" border="0" bordercolor="#000000"><br>


 <a href="DSC00172.JPG" rel="lightbox[mofa]" title=" ''N'' VORBL&Auml;TTERN <BR>''P'' ZUR&Uuml;CKBL&Auml;TTERN"><img src="DSC00172k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
  </td>
   <td>
   <img src="space.gif" width="90" height="1" alt="" border="0" bordercolor="#000000"><br>


   <a href="DSC00173.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00173k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
   </td>
   <td>
   <img src="space.gif" width="90" height="1" alt="" border="0" bordercolor="#000000"><br>



   <a href="DSC00174.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00174k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
    </td>
   <td>
   <img src="space.gif" width="90" height="1" alt="" border="0" bordercolor="#000000"><br>



   <a href="DSC00175.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00175k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
    </td>
   <td>
   <img src="space.gif" width="90" height="1" alt="" border="0" bordercolor="#000000"><br>



   <a href="DSC00176.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00176k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a></td>



</tr>
<tr>
 <td>

 <img src="space.gif" width="1" height="75" alt="" border="0" bordercolor="#000000">

   </td>
   <td>

  <a href="DSC00177.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00177k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
     </td>
   <td>

   <a href="DSC00178.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00178k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
       </td>
   <td>

   <a href="DSC00179.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00179k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
       </td>
   <td>

   <a href="DSC00180.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00180k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
       </td>
   <td>

   <a href="DSC00181.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00181k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a></td>

</tr>
<tr>
 <td>

 <img src="space.gif" width="1" height="75" alt="" border="0" bordercolor="#000000">
    </td>
   <td>


 <a href="DSC00182.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00182k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
     </td>
   <td>

   <a href="DSC00183.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00183k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
      </td>
   <td>

   <a href="DSC00184.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00184k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
     </td>
   <td>

   <a href="DSC00185.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00185k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
      </td>
   <td>

   <a href="DSC00186.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00186k.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a></td>

</tr>
<tr>
 <td>

 <img src="space.gif" width="1" height="75" alt="" border="0" bordercolor="#000000">
      </td>
   <td>


 <a href="DSC00187.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00187.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>
       </td>
   <td>

   <a href="DSC00188.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte"><img src="DSC00188.JPG" width="80" height="65" alt="" border="2" bordercolor="#000000" onmouseover="this.height = '70';
this.width = '85';"
onmouseout="this.height = '65';
this.width = '80';" /></a>


</td>



</tr>
 
der code funktioniert, jedoch ist ersehr unelegant.
ich möchte ihn kürzer haben, denn alles wird immer wieder wiederholt und hat daher unötiglangeladezeit, vorallem, wenn ich noch mehr bilder rauf setze.
ich suche eine kürzere und schnellere lösung. und ich glaube, dass es mit css möglich ist.
 
Hier bitte, Da du CSS nach eigener Aussage ja "verstehen aber nicht schreiben" kannst geb ich dir mal nur den Code, ohne Erklärungen:
Code: 
<!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" lang="de-de">
    <head>
        <title>CSS</title>        
        <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
        <style type="text/css">
            a {
                display:block;
                width:auto;
                margin:5px;
                float:left;
            }
            #gallery img {
                width:80px;
                height:65px;
                border:solid 2px #000;
            }
            #gallery img:hover {
                width:85px;
                height:70px;
            }
        </style>
    </head>
    <body>
        <div id="gallery">
            <a href="DSC00172.JPG" rel="lightbox[mofa]" title=" ''N'' VORBL&Auml;TTERN <br />''P'' ZUR&Uuml;CKBL&Auml;TTERN">
                <img src="DSC00172k.JPG" alt="" />
            </a>
            <a href="DSC00173.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00173k.JPG" alt="" />
            </a>
            <a href="DSC00174.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00174k.JPG" alt="" />
            </a>
            <a href="DSC00175.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00175k.JPG" alt="" />
            </a>
            <a href="DSC00176.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00176k.JPG" alt="" />
            </a>
            <br style="clear:both;" />
            <a href="DSC00177.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00177k.JPG" alt="" />
            </a>
            <a href="DSC00178.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00178k.JPG" alt="" />
            </a>
            <a href="DSC00179.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00179k.JPG" alt="" />
            </a>
            <a href="DSC00180.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00180k.JPG" alt="" />
            </a>
            <a href="DSC00181.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00181k.JPG" alt="" />
            </a>
            <br style="clear:both;" />
            <a href="DSC00182.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00182k.JPG" alt="" />
            </a>
            <a href="DSC00183.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00183k.JPG" alt="" />
            </a>
            <a href="DSC00184.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00184k.JPG" alt="" />
            </a>
            <a href="DSC00185.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00185k.JPG" alt="" />
            </a>
            <a href="DSC00186.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00186k.JPG" alt="" />
            </a>
            <br style="clear:both;" />
            <a href="DSC00187.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00187.JPG" alt="" />
            </a>
            <a href="DSC00188.JPG" rel="lightbox[mofa]" title="Der Bau der H&uuml;tte">
                <img src="DSC00188.JPG" alt="" />
            </a>
        </div>
    </body>
</html>
Sollten doch nocht Fragen offen sein hilft CSS 4 You - The Finest in Stylesheets ;)
 
jaahhh
besten dank das war das was ich meinte.:grin:
ich hatte nur das mit hover vergessen sonst hätte ich es vll selbst nach langem tüfteln hin bekommen. trotzdem danke

5 min später:
naja ich habe da immer noch probleme, den auf der seite sind auch noch andere bilder, welche ach beeinflustwerden:cry:
außerdem bewegen sich die anderen bilder auch immer, wenn ein bild vergrößert wird.
und im ie funkst es auch nicht so recht
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben