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
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ß
 
S

scatello

Well-known member
Beiträge
343
Punkte Reaktionen
25
Vielleicht ein Fehler im CSS, das du allerdings gekonnt verschweigst. ;)
 
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
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
Irgend etwas muss da noch fehlen: Wenn ich dieses CSS verwende bekomme ich kein Grid sondern die Bilder sind in voller Breite untereinander.
 
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,[email protected],400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Martian+Mono:[email protected];200;300;400;500;600;700;800&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,[email protected],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!
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
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?
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
PS: Auch in der Nav sehe ich a-href-Tags. Gibt es dafür vielleicht ein CSS, das den Fehler verursacht?
 
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
 
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;
}
}
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
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. */
 
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 :)
 
S

Sempervivum

Well-known member
Beiträge
329
Punkte Reaktionen
50
Danke, ich wünsche ebenfalls noch einen schönen Abend, bis dann!
 
Thema:

a href Atribut verhaut meinen Grid

Oben Unten