IMG zu Radio-Button

[vega]

hi css-gemeinde,

ein php-skript liest aus einem verzeichnis die thumbnails und ordnet diese mit einem radio-button zusammen an (siehe grafik).

könnt ihr mir sagen, wie ich den abstand von thumbnails zu button verändern kann? im moment ist da so eine große lücke und das sieht irgendwie hässlich aus. es wirkt sogar eher so, als ob die radio-buttons zum thumbnail in der nächsten zeile gehören.

per css habe ich zumindest den hässlichen hintergrund der radio-buttons im ie wegbekommen.

danke euch im voraus.

php-skript:

Code: Alles auswählen

// This function displays the available images
function displayPhotos(){
    global $columns;
   
    $act = 0;
    // Open the directory with thumbnails
    if ($handle = opendir("../../gallery/scenery/bolGallery/")) {
        // Read all file from the actual directory
        while ($file = readdir($handle))  {
            if (!is_dir($file)) {
                if ($act == 0) echo "<tr>";
                echo "<td align='center'>
                     <img src='../../gallery/scenery/bolGallery//$file' alt='postcard' /><br />
                     <input type='radio' name='selimg' value='$file' id='radio' />
                   </td>";
                $act++;
                if ($act == $columns){
                    $act = 0;
                    echo "</tr>";
                }
              }
        }
        echo "</tr>";
    }   
} 

[sejuma]

Ziffer 4: http://www.css-info.de/forum/fragen-infos-anregungen-f8/anleitung-fuer-fragesteller-t3348.html

[vega]

hi sejuma,

wozu punkt 4/verlinken? ich habe doch extra eine grafik hochgeladen. die zeigt das verhalten/aussehen und wo/wie diese thumbnail-ansicht generiert wird, habe ich per code auch im beitrag stehen:

echo "<td align='center'>
<img src='../../gallery/scenery/bolGallery//$file' alt='postcard' /><br />
<input type='radio' name='selimg' value='$file' id='radio' />
</td>";

ich könnte höchstens noch meine css-datei posten, aber das ändert ja nichts.

css:

Code: Alles auswählen

body {
  margin:0;
  padding:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:100,01%;
  background-image:url(_en/grafx/background_rw.gif);
}

img {
   display: block;
   border:0;
   }

#titelwrap {
   margin-top:30px;
   margin-left:0;
   padding-left:230px;
   width:600px;
   margin-bottom:25px;
   }

#titel {
   margin-left:0;
   float:left;
   }

#farbmenue, img {
   text-align:right;
   display:inline;
   }

#menu {
  clear:left;
  width:130px;
  height:300px;
  padding:0;
  float:left;
  margin-left:80px;
  margin-top:-2px;
}

#wrap {
  margin-left:230px;
  margin-top:0;
}

#themabild {
  margin-left:0px;
  padding:0px;
}

#themabild img {
  display:block;
}

#inhalt {
  clear:left;
  margin:0;
  padding:0px;
  width:610px;
}

#kf_1 {
  padding:0px;
  width:240px;
  float:left;
}

#kf_2 {
  padding:0px;
}

#kf_3 {
  padding-left:240px;
  clear:left;
}

#imprint_1 {
  padding:0px;
  width:250px;
  float:left;
}

#imprint_2 {
  padding:0px;
}

#imprint_3 {
  padding:0px;
  clear:left;
}

input {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
}

input.btn {
  font-size:0.7em;
  color:#666;
}

textarea {
  font-size:1em;
  font-family:Arial,Helvetica,sans-serif;
  border:none;
  background-color:#F6F6F6;   
}

h1 {
  font-size:1.2em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
}

h1 a {color:#fff;}
h1 a:link {color:#fff;}
h1 a:active {color:#fff;}
h1 a:visited {color:#fff;}
h1 a:hover {color:#646464;}

h2 {
  font-size:0.76em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#000;
}

h3 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:5px;
  margin-left:0px;
  color:#000;
}

h4 {
  font-size:0.7em;
  margin-top:0px;
  margin-bottom:3px;
  margin-left:0px;
  color:#000;
}

p {
  font-size:0.7em;
  margin-top:0;
  margin-left:0;
  padding:0;
  color:#fff;
}

a    {
   color:#fff;
   }
a:link {
   color:#fff;
   text-decoration:none;
   }
a:visited {
   color:#fff;
   text-decoration:none;
   }
a:active {
   color:#fff;
   text-decoration:none;
   }
a:hover {
   color:#646464;
   }

ul.navi, ul ul {
   border:0;
   list-style-type:none;
   overflow:hidden;
   padding:0;
   }
ul.navi {
   font-size:0.76em;
   list-style-type:none;
   text-align:right;
   vertical-align:top;
   margin:0px;
   width:130px;
   height:300px;
   }

ul.navi ul {}
ul.navi li {
   padding-bottom:4px;
   line-height:1em;
   }
ul.navi li.drop {}
ul.navi li a, ul.navi li a:visited {
   width:130px;
   text-decoration:none;
   }
ul.navi li a.last, ul.navi li a.last:visited {}
ul.navi li ul {
   display:none;
   padding-left:5px;
   margin-bottom:0;
   padding-top:3px;
   }
ul.navi li ul li {
   padding-bottom:2px;
   }
ul.navi li:hover a, ul.navi li a:hover {
   padding-right:5px;
   }
ul.navi li:hover ul, ul.navi li a:hover ul {
   display:block;
   width:130px;
   }
ul.navi li:hover ul li a, ul.navi li a:hover ul li a {
   color:#9b9b9b;
   }
ul.navi li:hover ul li:hover a, ul.navi li a:hover ul li a:hover {
   color:#646464;
   }

.shadow {
    background: url() no-repeat bottom right;
    float:left;
}
.shadow img {
    display: block;
    margin: 0px 9px 9px 0px;
}
.shadow:after {
   background:url() left bottom no-repeat;
    display:block;
    width:18px;
    height:9px;
    content:"";
    margin:-9px 0px 0px 0px;
}
.shadow:before {
    background:url() right top no-repeat;
    display:block;
    height:18px;
    content:"";
   margin-bottom:-18px;
}

#card_1 {
  padding:0px;
  width:240px;
  float:left;
}

#card_2 {
  padding:0px;
}

#card_3 {
  padding-left:240px;
  clear:left;
}

table#cardtable {
  border:0;
  border-collapse:collapse;
}

input#radio {
  background-color:#fff;
}

/*
EM - PX zum kopieren oder nachschauen
10px = 0.6em
12px = 0.76em
14px = 0.9em
16px = 1.0em
18px = 1.12em
22px = 1.38em
26px = 1.63em
*/

[sejuma]

Ein Link zur Problemseite macht deshalb Sinn, weil man dann den kompletten HTML und CSS-code einschließlich aller eingebundenen Grafiken sieht und sich so viel leichter bei der Ursachenforschung tut.

Es kann ja auch sein, dass der (vermeintliche) "Darstellungsfehler" eine ganz andere Ursache hat, als von dir erwartet.

Außerdem tun sich die hier Helfenden mit einer kompletten Seite wesentlich leichter: Ohne Link müssen sie sich die hier geposteten Codefragmente selbst zu einer Seite zusammenbauen und die verwendeten Grafiken fehlen dann ohnehin.

Aus deiner Grafik und deiner Problembeschreibung lässt sich zwar erkennen, was du gerne anders hättest; jedoch gibt die Grafik keinerlei Aufschluss darüber, warum die Darstellung so ist. Das ist rein code-abhängig.

Das sind keine Schikanen und ist auch nicht bös gemeint, ein Link zur Seite ist einfach nur zweckmäßig und erhöht deine Chancen hier Hilfe zu bekommen.

[vega]

na, ist ja kein problem: http://tinyurl.com/398rp5t

[vega]

hm, aus irgendeinem grund werden die bilder zweimal hintereinander geladen. das war gestern zu screenshot-zeiten noch nicht. muss ich wohl etwas im php (oder css) verbockt haben.

[sejuma]

Lass jeweils den Zeilenumbruch zwischen dem image und dem Button weg.

Hinweis:
Du verwendest den id "radio" mehrmals auf einer Seite. Das ist unzulässig.
Nimm deshalb besser eine Klasse für radio.

[vega]

danke dir, das hat geholfen und das mit der klasse habe ich auch gleich gemacht.

kannst du mir noch zufällig sagen, warum die bilder-galerie zweimal hintereinander geladen wird? ich habe den befehl

<table class='cardtable'>
<?php displayPhotos(); ?>
</table>

ja nur einmal gesetzt. das wundert mich etwas und ist mir gerade auch unerklärlich. danke vorab.

[sejuma]

Nee, mit PHP kenn ich mich leider nicht aus.

Vielleicht weil du "Photos" in der Mehrzahl schreibst?

[vega]

*lach* ... selbst gelöst/erledigt.