a href Atribut verhaut meinen Grid

Diskutiere a href Atribut verhaut meinen Grid im HTML Forum im Bereich Programmierung; Hey Leute, ich bin blutiger HTML/CSS Anfänger und habe daher wahrscheinlich auch eher eine Anfängerfrage, mit der ich aber absolut nicht...
Neues Thema erstellen Antworten
  • a href Atribut verhaut meinen Grid Beitrag #1
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
Hey Leute,

ich bin blutiger HTML/CSS Anfänger und habe daher wahrscheinlich auch eher eine Anfängerfrage, mit der ich aber absolut nicht weiterkomme.

Situation: Ich habe ein ImageGrid (nachgebaut von einem tut) und möchte nun die einzelnen Bilder mit einem Hyperlink zu einer neuen .html Seite verlinken. Mit "a href" funktioniert das auch. Allerdings verhaut es meinen Grid und ich steig nicht ganz dahinter wieso. Für mein Verständnis benötigt doch ein a href keinen extra space oder?

Code:
<div class="gallery-container w-1 h-2">
<div class="gallery-item">
<div class="image"><a href="Lauchhammer.html"><img src="Images/LauchhammerBuch.jpg" alt="Lauchhammer"></a></div>
<div class="text">Lauchhammer <br><div class="text2"> <br> CORPORATE DESIGN</div></div>
</div>
</div>

Sobald ich "a href" entferne ist das Bild innerhalb des Grids wieder in seiner ursprünglichen Position. Mit "a href" springt das Bild innerhalb des Container um eine Zeile nach oben.

Wäre supper wenn mir jmd weiterhelfen kann :)
Besten Gruß
 
  • a href Atribut verhaut meinen Grid Beitrag #2
S
scatello
Well-known member
Beiträge
528
Punkte Reaktionen
44
Vielleicht ein Fehler im CSS, das du allerdings gekonnt verschweigst. ;)
 
  • a href Atribut verhaut meinen Grid Beitrag #3
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
:D Danke für die schnelle Rückmeldung. Also da ich grade nicht genau eingrenzen kann wo der Fehler liegt, werf' ich mal den gesamten CSS für's Grid rein.
Dazu noch ein kleines Bild wie die Lücke entsteht.

Danke!



Code: 
body{
    margin: 20px;
    padding: 0;
    text-align: center;
    margin-bottom: 50px;
}

.container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px 300px;
    grid-gap: 10px;
    grid-auto-flow: dense;
  }

.gallery-item{
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-item .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-item .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    transition: .5s ease-in-out;
}

.gallery-item:hover .image img{
    transform: scale(1.1);
    filter: brightness(65%);
   }

.gallery-item .text{
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 45px;
    line-height: 55px;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
    }

.gallery-item .text2{
        opacity: 0;
        width: 100%;
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%);
        color:orange;
        font-size: 25px;
        transition: .6s ease-in-out;
    }
    
.gallery-item:hover .text{
    opacity: 1;
    animation: move-down .3s linear;
    padding: 1em;
    width: 100%;
}

.gallery-item:hover .text2{
    opacity: 1;
    animation: ease-in .6s linear;
    padding: 0em;
    width: 100%;
}

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-5{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}

@media screen and (max-width:500px){
    grid-template-columns: repeat(2, 1fr);
}

@keyframes move-down{
    0%{
        top: 10%;
    }
    50%{
        top: 30%;
    }
    100%{
        top: 50%;
    }
}

GridLücke.png
 
  • a href Atribut verhaut meinen Grid Beitrag #4
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Irgend etwas muss da noch fehlen: Wenn ich dieses CSS verwende bekomme ich kein Grid sondern die Bilder sind in voller Breite untereinander.
 
  • a href Atribut verhaut meinen Grid Beitrag #5
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
also der CSS ist komplett. Die Columns und Rows werden dann in der HTML definiert z.B. (w-1, h-4) unten nochmal der gesamte html.

Code: 
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Johannes Dillmann</title>
    <link rel="stylesheet" href="general_settings.css">
    <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="image-grid.css">
    <link rel="stylesheet" href="Lauchhammer.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Martian+Mono:wght@100;200;300;400;500;600;700;800&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500&display=swap" crossorigin>
        
</head>
<body>
        <header>
            <div class="header_text">
                <nav>
                        <input type="checkbox" id="toggle_button">
                        <label for="toggle_button">
                            <span class="material-symbols-outlined">lunch_dining </span>
                        </label>
                    <ul>
                        <li><a href="index.html">Johannes Dillmann</a></li>
                        <li><a href="about.html"> about</a></li>
                        <li><a href="mailto:[email protected]">contact</a></li>
                    </ul>
                
              </div> 
        </header>
</body>

    <div class="container">
        
      <div class="gallery-container w-1 h-4">
        <div class="gallery-item">
         <div class="image"><img src="Images/Alloheim.jpg" alt="Lauchhammer"></div>
        <div class="text">Begegnung<br><div class="text2"> <br>FOTOGRAFIE</div></div>
        </div>
    </div>

    <div class="gallery-container w-1 h-2">
        <div class="gallery-item">
        <div class="image"><a href="Lauchhammer.html"><img src="Images/LauchhammerBuch.jpg" alt="Lauchhammer"></a></div>
        <div class="text">Lauchhammer <br><div class="text2"> <br> CORPORATE DESIGN</div></div>
       </div>
</div>

    <div class="gallery-container w-1 h-2">
        <div class="gallery-item">
        <div class="image"><img src="Images/Babbsatt.jpg" alt="Lauchhammer"></div>
        <div class="text">Babbsatt<br>  <div class="text2"> <br>CORPORATE DESIGN</div></div>
        </div>
    </div>
 
    <div class="gallery-container w-1 h-4">
        <div class="gallery-item">
        <div class="image"><img src="Images/Habitat.jpg" alt="Lauchhammer"></div>
        <div class="text">Habitat<br>  <div class="text2"> <br>FOTOGRAFIE</div></div>
        </div>
    </div>

    <div class="gallery-container w-1 h-2">
        <div class="gallery-item">
        <div class="image"><img src="Images/Offside.jpg" alt="Lauchhammer"></div>
        <div class="text">Offside <br>  <div class="text2"> <br> CORPORATE DESIGN</div></div>
        </div>
    </div>

    <div class="gallery-containe w-1 h-2">
        <div class="gallery-item">
        <div class="image"><img src="Images/ili.jpg" alt="Lauchhammer"></div>
        <div class="text">Lauchhammer<br>  <div class="text2"> <br>CORPORATE DESIGN</div></div>
        </div>
    </div>


    <div class="gallery-containe w-1 h-3">
        <div class="gallery-item">
        <div class="image"><img src="Images/NCRC.jpg" alt="Lauchhammer"></div>
        <div class="text">Charité <br>  <div class="text2"> <br>DRUCK</div></div>
        </div>
    </div>

    <div class="gallery-containe w-2 h-3">
        <div class="gallery-item">
        <div class="image"><img src="Images/MyaLink.jpg" alt="Lauchhammer"></div>
        <div class="text">Mya LInk / Charitè<br>  <div class="text2"> <br>DRUCK</div></div>
        </div>
    </div>

    <div class="gallery-containe w-1 h-3">
        <div class="gallery-item">
        <div class="image"><img src="Images/FujiStreet.jpg" alt="Lauchhammer"></div>
        <div class="text">Street <br>  <div class="text2"> <br>FOTOGRAFIE</div></div>
        </div>
    </div>
    </div>   
</body>   
</html>

thanks!
 
  • a href Atribut verhaut meinen Grid Beitrag #6
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Du hast da zwei Fehler im HTML:
Code: 
    <header>
        <div class="header_text">
            <nav>
                <input type="checkbox" id="toggle_button">
                <label for="toggle_button">
                    <span class="material-symbols-outlined">lunch_dining </span>
                </label>
                <ul>
                    <li><a href="index.html">Johannes Dillmann</a></li>
                    <li><a href="about.html"> about</a></li>
                    <li><a href="mailto:[email protected]">contact</a></li>
                </ul>
            </nav> <!-- fehlte -->
        </div>
    </header>
<!-- </body> hier zu viel -->
Aber auch mit diesen Fehlern kann ich dein Problem nicht reproduzieren. Welchen Browser benutzt Du, ich benutze Opera?
 
  • a href Atribut verhaut meinen Grid Beitrag #7
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
PS: Auch in der Nav sehe ich a-href-Tags. Gibt es dafür vielleicht ein CSS, das den Fehler verursacht?
 
  • a href Atribut verhaut meinen Grid Beitrag #8
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
danke erstmal für deine Mühen! ;) also ich benutze Chrome - hab's aber auch in Safari geöffnet wo exakt das selbe Problem auftritt
 
  • a href Atribut verhaut meinen Grid Beitrag #9
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
hier der css für den header/nav
Code: 
header{
    padding: 50px 50px;
    display: flex;
    justify-content: left;
    align-items: left;
    margin:20px;
    flex-wrap: wrap;
    font-size: 30px;
    text-align: left;   
}

.johannes{
    font-size: 90px;
}

nav{
    margin-bottom: 145px;
}
nav ul{
    list-style: none;
    display: flex;
    gap: 355px;
px;
}

nav a{
    color: var(--secondary-text-color);
    text-decoration: none;
}

a {
    position: relative;
    display: inline-block;
    font-size: 1em;
    font-weight: 00;
    color: white;
    overflow: hidden;
    background: linear-gradient(to left, grey, grey 50%, white 5%);
    background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
}

a:hover {
  background-position: 0 100%;
  cursor: crosshair;
}

#toggle_button{
    display: none;
}
label[for="toggle_button"] {
    display: none;
}
label[for="toggle_button"] span{
    font-size: 40px;
}
@media(max-width: 800px){
    nav{
        position: absolute;
        top: 0;
        left: 0;
        background: var(--secondary-color);
        padding: 15px;
        border-radius: 0 0 25px 0;

    }
    nav ul{
        display: none;
        flex-direction: column;
    }
    #toggle_button:checked ~ ul{
        display: flex;
    }
    label[for="toggle_button"] {
        display: block;
}
}
 
  • a href Atribut verhaut meinen Grid Beitrag #10
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Alles klar, das a-Element hat dort ein display: inline-block;, das bewirkt den Fehler. Setze ein "nav" vor den Selektor, damit das CSS nur auf die a-hrefs in der Nav wirkt:
Code: 
nav a {
    position: relative;
    display: inline-block;
    font-size: 1em;
    /* usw. */
 
  • a href Atribut verhaut meinen Grid Beitrag #11
D
dilly87
Member
Beiträge
6
Punkte Reaktionen
0
sehr sehr geil! Es klappt! Vielen Dank für deine Hilfe!

Schönen Abend noch und bis bald :)
 
  • a href Atribut verhaut meinen Grid Beitrag #12
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Danke, ich wünsche ebenfalls noch einen schönen Abend, bis dann!
 
Thema:

a href Atribut verhaut meinen Grid

Oben Unten