Galerie, wie bekomme ich diesen kleinen bauen Stich weg

stoffel_hessen

Hallo Gemeinde,

ich verwende zur Zeit die Lightbox2 und habe hier zwischen allen Bildern solch einen kleinen Strich, welcher den Link der vorangestellten Bildes enthält.

Wie bekomme ich diesen weg?

Galerie Strich.JPG

HTML

HTML

<div class="content">
      <div class="rahmen bilderlink">

      <a href="pictures/800px/2023-04-15_15-21-24_DSC_3823_LR_800px.jpg" rel="lightbox" data-lightbox="kreatives" data-title="Keilrahmen - ">
      <img src="pictures/200px_Thumbnail/2023-04-15_15-21-24_DSC_3823_LR_200px_Thumbnail.jpg" width="100">
      </a>
            
      <a href="pictures/800px/2010-01-04_15-11-32_DSC_1712_LR_800px.jpg" rel="lightbox" data-lightbox="kreatives" data-title="Inchies - ">
      <img src="pictures/200px_Thumbnail/2010-01-04_15-11-32_DSC_1712_LR_200px_Thumbnail.jpg" width="100">
      </a>

Alles anzeigen

CSS

CSS

  .content{
    overflow:auto;
    padding: 1%;
    margin: 1%;
    }
  .rahmen{
    border:rgba(0, 0, 0, .4);
    background: linear-gradient(90deg, #ffa602, #7bed9f);
    padding:0.1em 1em;
    border-radius: 1em;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
  }
  .bilderlink{
    text-decoration: none;
  }

Alles anzeigen

Danke für eure Unterstützung

Gruß Christopher

Sempervivum

Guten Morgen Christopher und willkommen im Forum,

dieses Phänomen hat auch mich ganz am Anfang als ich begonnen habe, mich mit Webentwicklung zu beschäftigen, zur Verzweiflung getrieben. Die Erklärung ist, dass der Browser einen Zeilenumbruch in ein Leerzeichen umsetzt. Und weil dieses in einem Link standardmäßig unterstrichen wird, kommt der Strich zu Stande.

Abhilfe indem Du das a-href- und das img-Tag ohne Zeilenumbruch in die selbe Zeile schreibst. Damit die Zeile dann nicht endlos lang wird, kannst Du den Zeilenumbruch innerhalb des Tags machen:

Code

     <a href="pictures/800px/2023-04-15_15-21-24_DSC_3823_LR_800px.jpg"
         rel="lightbox" data-lightbox="kreatives" data-title="Keilrahmen - "><img
         src="pictures/200px_Thumbnail/2023-04-15_15-21-24_DSC_3823_LR_200px_Thumbnail.jpg" width="100"></a>

Auch was Du mit text-decoration: none; versucht hast, müsste funktionieren wenn Du es auf den Link selber anwendest:

Code

  .bilderlink a {
    text-decoration: none;
  }

stoffel_hessen

Super, vielen lieben Dank, jetzt ist der Strich verschwunden.

Jetzt mitmachen!