Felix: orblem mit grafikanordnung

SELF-Forum

orblem mit grafikanordnung

Felix
– Informationen zu den Bewertungsregeln

Hallo!

habe auf einer HP Bilder in klein eigefügt, die beim daraufklicken im neuen Fenster groß dargestellt werden....

Wie kann ich aber nach 4 Bilder eine neue Reihe anfangen?

habe das so geschrieben:

<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td valign="center" align="center" width="25%">
<table align="center" border="0" cellspacing="2">
<tr>
<td height="106" valign="center" align="center"><a onclick="w = window.open('images/pics/Simon1.JPG','TpWebWizImage','width=480,height=320,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no'); w.resizeTo(520,420); w.focus()" style="cursor:hand"><img src="images/pics/Simon1_klein.JPG" border="0" width="100" height="67" alt="images/pics/Simon1.JPG"></a></td>
</tr>
<tr>
<td valign="center" align="center"></td>
</tr>
</table>
</td>

das is 1 bild....

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. orblem mit grafikanordnung

    Felix
    – Informationen zu den Bewertungsregeln

    Ich meine in der Überschrift natürlich "Problem"

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Probleme die Klinken meiner Tastatur...

      Lachgesicht
      – Informationen zu den Bewertungsregeln

      ...zu treffen, passt hier wohl besser :-)

      Har har har!

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Problem mit grafikanordnung

    Josh
    – Informationen zu den Bewertungsregeln

    Hallo,

    erklär mir mal bitte wozu du da eine Tabelle brauchst. Warum so kompliziert?

    Gruß
    Josh

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  3. Problem mit Anordnung von Grafiken

    Gernot Back Homepage des Autors
    +2 Informationen zu den Bewertungsregeln

    Hallo Felix,

    na wie man vier Zellen pro Zeile in eine Tabelle schreibt, solltest du doch wissen.

    Dein Problem ist aber wahrscheinlich, dass du vor lauter Tabellen in Tabellen um Popup-Links den Überblick verlierst.

    Tabellen brauchst du auch gar nicht dafür.

    Wenn die kleinen Vorschaubilder alle dasselbe Format haben, dann lass sie floaten, verpass ihnen einen schönen Abstand (margin) zueinander und gruppiere sie mitsamt den Links darum doch einfach in einem Elternelement, dessen Weite so bemessen ist, dass nur maximal vier davon nebeneinander passen.

    Wenn du dieses Elternelement mit max-width definierst, dann interpretieren das vernünftige Browser auch so, dass wenn mal weniger Platz sein sollte, dann halt auch mal nur drei oder zwei Spalten entstehen. Wenn du diesen Effekt allerdings auch für den IE haben willst, wird es etwas komplizierter, da wirst du dann Javascript brauchen und kannst vielleicht im Stylesheet mit expression() arbeiten.

    Aber mal was anderes: Warum lässt du denn nicht auch Leute, in deren Browsern Popups blockiert werden oder Javascript ganz deaktiviert ist, in den Genuss deiner Bilder im Großformat kommen? Die kannst du doch auch über das href-Attribut verlinken, dann brauchst du auch keinen Cursor-Style zu definieren. Mit "return false" als letzter Anweisung im Onclick-Eventhandler wird das Bild im Normalfenster dann auch nur geöffnet, wenn das Popup aus irgendwelchen Gründen blockiert wird.

    Übrigens Tippfehler im Postingtitel kann man nachträglich auch ändern. Wenn man sich das Posting erst einaml in der Vorschau anschaut.

    Gruß Gernot

    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

    1. Max-Width-Workaround mit expression() im IE nur im Quirks-Mode?

      Gernot Back Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hallo nochmal,

      ich habe selbst mal ein bisschen an einem Workaround für max-width im IE mit expression herumgebastelt.

      Das funktoiniert aber leider nur im Quirks-Mode. Mache ich etwas falsch, oder ist das eben so?

        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
 <head>  
  <title>Bilder gleichen Formats ohne Tabellen bündig ausrichten</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  <style type="text/css">[code lang=css]  
  html, body { margin:0;padding:0; }  
  div#bildBox { max-width:373px;border:solid 1px red; }  
  * html div#bildBox {  
  width:expression(document.body.clientWidth >= (document.images[0].width*4 + 55) ? (document.images[0].width*4 + 55)+'px' : document.body.clientWidth+'px' );  
  }  
  div#bildBox img { margin:5px;border:none; }

      </style>
        <script type="text/javascript">

        
  var bildFenster;  
  function init() {  
   bilder = document.getElementById('bildBox').getElementsByTagName('img');  
   for(i=0; i<bilder.length; i++) {  
    bilder[i].parentNode.onclick = function () {  
     if (bildFenster && !bildFenster.closed){  
      bildFenster.location.href = this.href;  
      bildFenster.focus();  
     } else  
      bildFenster = window.open(this.href, 'bildfenster', 'width=480,height=320,menubar=no,resizable=yes,scrollbars=yes,status=no,toolbar=no');  
     return false;  
    }  
   }  
  }  
  window.onload=init;

      </script>
       </head>
       <body>
        <div id="bildBox">
         <a href="grossbild1.jpg" target="bildfenster"><img src="vorschaubild1.jpg" alt="Bild 1" width="80" height="100"></a>
         <a href="grossbild2.jpg" target="bildfenster"><img src="vorschaubild2.jpg" alt="Bild 2" width="80" height="100"></a>
         <a href="grossbild3.jpg" target="bildfenster"><img src="vorschaubild3.jpg" alt="Bild 3" width="80" height="100"></a>
         <a href="grossbild4.jpg" target="bildfenster"><img src="vorschaubild4.jpg" alt="Bild 4" width="80" height="100"></a>
         <a href="grossbild5.jpg" target="bildfenster"><img src="vorschaubild5.jpg" alt="Bild 5" width="80" height="100"></a>
         <a href="grossbild6.jpg" target="bildfenster"><img src="vorschaubild6.jpg" alt="Bild 6" width="80" height="100"></a>
         <a href="grossbild7.jpg" target="bildfenster"><img src="vorschaubild7.jpg" alt="Bild 7" width="80" height="100"></a>
         <a href="grossbild8.jpg" target="bildfenster"><img src="vorschaubild8.jpg" alt="Bild 8" width="80" height="100"></a>
         <a href="grossbild9.jpg" target="bildfenster"><img src="vorschaubild9.jpg" alt="Bild 9" width="80" height="100"></a>
         <a href="grossbild10.jpg" target="bildfenster"><img src="vorschaubild10.jpg" alt="Bild 10" width="80" height="100"></a>
         <a href="grossbild11.jpg" target="bildfenster"><img src="vorschaubild11.jpg" alt="Bild 11" width="80" height="100"></a>
         <a href="grossbild12.jpg" target="bildfenster"><img src="vorschaubild12.jpg" alt="Bild 12" width="80" height="100"></a>
         <a href="grossbild13.jpg" target="bildfenster"><img src="vorschaubild13.jpg" alt="Bild 13" width="80" height="100"></a>
         <a href="grossbild14.jpg" target="bildfenster"><img src="vorschaubild14.jpg" alt="Bild 14" width="80" height="100"></a>
         <a href="grossbild15.jpg" target="bildfenster"><img src="vorschaubild15.jpg" alt="Bild 15" width="80" height="100"></a>
         <a href="grossbild16.jpg" target="bildfenster"><img src="vorschaubild16.jpg" alt="Bild 16" width="80" height="100"></a>
         <a href="grossbild17.jpg" target="bildfenster"><img src="vorschaubild17.jpg" alt="Bild 17" width="80" height="100"></a>
         <a href="grossbild18.jpg" target="bildfenster"><img src="vorschaubild18.jpg" alt="Bild 18" width="80" height="100"></a>
         <a href="grossbild19.jpg" target="bildfenster"><img src="vorschaubild19.jpg" alt="Bild 19" width="80" height="100"></a>
         <a href="grossbild20.jpg" target="bildfenster"><img src="vorschaubild20.jpg" alt="Bild 20" width="80" height="100"></a>
         <a href="grossbild21.jpg" target="bildfenster"><img src="vorschaubild21.jpg" alt="Bild 21" width="80" height="100"></a>
         <a href="grossbild22.jpg" target="bildfenster"><img src="vorschaubild22.jpg" alt="Bild 22" width="80" height="100"></a>
         <a href="grossbild23.jpg" target="bildfenster"><img src="vorschaubild23.jpg" alt="Bild 23" width="80" height="100"></a>
         <a href="grossbild24.jpg" target="bildfenster"><img src="vorschaubild24.jpg" alt="Bild 24" width="80" height="100"></a>
        </div>
       </body>
      </html>[/code]

      Gruß Gernot

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln