Ich habe "li h2{}" ausgetauscht und "li img{}" dazugeschrieben trotzdem ist das Prpblem noch da.
Ich danke Dir für die Mühe.
Beiträge von elmi
-
-
Das ist der ganze Code:
----------------------------
html body{
margin:0;
padding: 0;
background: rgbwhite;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 0.9rem;
}
.hauptContainer{
width: 100%vw;
height: 100%vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 120px 1fr 50px;
grid-template-areas:
"header"
"menuBox"
"container"
"footer"
;
text-align: center;
}
.container{
min-width: 100%;
grid-area: container;
background-color: white;
display: flex;
justify-content: center;
gap: 50px;
flex-direction: row;
flex-wrap: wrap;
}
/* Grid anlegen, die Breite soll
sich nach dem Inhalt richten: */
li.nav-item {
display: inline-grid;
overflow: hidden;
/* border: solid red; */
}
li h2,
li a {
/* Beide Element sollen in der selben Zelle liegen
und sich überdecken: */
grid-column: 1 / 2;
grid-row: 1 / 2;
/* border: solid green; */
}
li h2 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transition: transform 0.4s;
/* Den Text nach links verschieben, so dass
er zunächst unsichtbar ist: */
transform: translateX(-100%);
}
li.nav-item:hover h2 {
/* Beim Hover heben wir die Verschiebung
auf, so dass der Text sichtbar wird: */
transform: translateX(0);
backdrop-filter: blur(5px);
}
-
Ich habe weiter oben in der CSS Datei einen Grid definiert. Könnte es daran liegen?
.hauptContainer{
width: 100%vw;
height: 100%vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100px 120px 1fr 50px;
grid-template-areas:
"header"
"menuBox"
"container"
"footer"
;
text-align: center;
}
-
Hey ich würde gerne Dir eine Frage zu dem Code von Dir stellen. Aus irgend einem Grund funktioniert "hover" nicht hundertprozentig damit meine ich manchmal muß man die Maus etwas hin und her bewegen bos der Effekt mit dem Text einsetzt. Ich habe zwar minimale Änderungen vorgenommen aber das Problem hatte ich vorher schon:
<div class="menuBox">
<ul>
<li class="nav-item">
<h2>Der Text</h2>
<a href="#"><img src="btn/1.jpg"></a>
</li>
<li class="nav-item">
<h2>Der Text 2</h2>
<a href="#"><img src="btn/2.jpg"></a>
</li>
<li class="nav-item">
<h2>Der Text 3</h2>
<a href="#"><img src="btn/3.jpg"></a>
</li>
<li class="nav-item">
<h2>Der Text 4</h2>
<a href="#"><img src="btn/4.jpg"></a>
</li>
<li class="nav-item">
<h2>Der Text 5</h2>
<a href="#"><img src="btn/5.jpg"></a>
</li>
<li class="nav-item">
<h2>Der Text 6</h2>
<a href="#"><img src="btn/6.jpg"></a>
</li>
</ul>
<div class="menu-text"><h2>Home</h2></div>
</div>
---------------------------------------------------------------------------------
/* Grid anlegen, die Breite soll
sich nach dem Inhalt richten: */
li.nav-item {
display: inline-grid;
overflow: hidden;
/* border: solid red; */
}
li h2,
li a {
/* Beide Element sollen in der selben Zelle liegen
und sich überdecken: */
grid-column: 1 / 2;
grid-row: 1 / 2;
/* border: solid green; */
}
li h2 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
transition: transform 0.4s;
/* Den Text nach links verschieben, so dass
er zunächst unsichtbar ist: */
transform: translateX(-100%);
}
li.nav-item:hover h2 {
/* Beim Hover heben wir die Verschiebung
auf, so dass der Text sichtbar wird: */
transform: translateX(0);
backdrop-filter: blur(5px);
}
-
Ja. Ich hatte ziemliches Chaos in meinem Code. Anfänger eben
danke für die Hilfe. -
Bitte um Entschguldigung ich dachte "Erleuchteter" wäre der Benutzernamen.
-
Hallo Erleuchteter,
ich danke dir, dass du dit die Zeit genommen hast und vielen Dank für die Tipps. Ich konnte mich leider bis heute nicht zurück melden.
Gruß
Elmi -
Hallo,
ich bin ein ziemlicher Anfänger dennoch versuche ich für meine Webseite eine Bilderleiste als Menu zusammen zu stellen und soweit habe ich es schon. Ich versuche zusätzlich den (hover) so zu gestalten, dass ein Wort über das Bild/Menupunkt erscheint. Mit einzelnen Bilder kriege ich es hin aber , das doi Menuleiste als <ul><li> definiert ist, klappt es nicht und ich komme leider nicht weiter. Ich wäre für gute Tipps sehr dankbar:
/* Text über Navi */
.post{
/*margin: 80px 0 0 20px;*/
position: relative;
cursor: pointer;
}
.post:hover li .menu-text{
/*background-color: #fff;*/
width:152px;
}
.post img{
display: block;
}
.menu-text{
width: 0;
height: 50px;
background-color: rgba(100,100,100,0.7);
position: absolute;
top:0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
/*border: solid;*/
transition: 0.7s ease;
}
.menu-text h2{
color: white;
font-size: 20px;
/* border: 6px solid white; */
padding:10px 30px;
}
/* */
<body>
<div class="hauptContainer">
<div class="box header"><img src="logo.jpg"></div>
<div class="box menu">
<div class="post">
<ul>
<li class="navi"><div class="menu-text"><h2>Panorama</h2></div> <a href="#"><img src="btn/1.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>X</h2></div><a href="#"><img src="btn/2.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>Y</h2></div><a href="#"><img src="btn/3.jpg" title="" target=""></a></li>
<li class="navi"><div class="menu-text"><h2>Z</h2></div><a href="#"><img src="btn/4.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/5.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/6.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/7.jpg" title="" target=""></a></li>
<li class="navi"><a href="#"><img src="btn/8.jpg" title="" target=""></a></li>
</ul>
</div>
</div>
<div class="box container">
<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing </div>
<div class="box item">Lorem, ipsum dolor sit amet consectetur adipisicing.</div>
</div>
<div class="box footer">
<ul>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">AGB</a></li>
<li><a href="#">Versand</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
</body>