Navigationsmenü funktioniert nicht richtig

[HTML-Laie]

du sagst ich soll das ersetzten. Ich habe den zweiten Code nach ganz unten in die style.css gesetzt, weil ich da nicht ersetzen konnte?!

Den Code wieder aus der style.css entfernen!!!

Deine Datei für die Navigation hast du ===> styles.css benannt.! In dieser Datei sollst du den Code ersetzen!!!

Die beiden anderen Codes für die swing-bilder und die Zoom-Gallery kannst du entfernen. Die hattest du ja ursprünglich in deiner Servietten-Homepage eingebaut.

LG Hape

[Butterblume]

Ohwei, also ich habe jetzt den Code in der Steys.css komplett überschreiben! Hoffe das war jetzt so richtig

Ich wills nicht beschwören, aber ich glaube jeztt habe ich es gefunden was ich ersetzten sollte!

Meine Steyls.css in der Test Seite sieht jetzt wie folgt aus:

Code: Alles auswählen

/* topnav */
ul.topnav {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav li {float: none}

ul.topnav li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav */

ul.topnav li a:hover {background-color:transparent;}

ul.topnav li.icon {display: inline;}
 .icon {
     color: #008000;
 }
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: block;

  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

}
/* untermenü*/
@media screen and (max-width:680px) {
  ul.untermenu  li:not(:first-child) {display: none;}
  ul.untermenu li{
    float: right;
    display: block;
  }
}

@media screen and (max-width:680px) {
  ul.untermenu .responsive {position: relative;}
  ul.untermenu.responsive li{
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.untermenu.responsive li {
    float: none;
    display: block;
  }
  ul.untermenu.responsive li a {
    display: block;
    text-align: left;
  }
}


/* Untermenü Überschrift  */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;

}


.submenu {
margin-bottom: 0;

}
.submenu a {
        color: #AFB0C2;
        text-decoration: none;
        border-bottom: 1px dotted #3C6539;

   padding:3px 3px 3px 3px;


}
.submenu a:hover {
        color:  #3C6539;
  background-color: #FFECEC;
   text-decoration: none;

   border-bottom: 1px solid  #3C6539;
}
/* Menu link */
 a.menulink:link, a.menulink:visited, a.menulink:active {
  list-style-type: none;
  display: block;
  width: 100%;
  font-size: 1.0em;
    text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #3C6539;
  background-color: transparent;
 border-bottom: 1px dotted  #3C6539;

}
a.menulink:hover {
  color: #0000FF;
  background-color: transparent;
}
/*navi2*/
ul.topnav2 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav2 li {float: none}

ul.topnav2 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav2 */

ul.topnav2 li a:hover {background-color:transparent;}

ul.topnav2 li.icon {display: inline;}
 .icon {
     color: #008000;
 }
@media screen and (max-width:680px) {
  ul.topnav2 li:not(:first-child) {display: none;}
  ul.topnav2 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav2.responsive {position: relative;}
  ul.topnav2.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav2.responsive li {
    float: none;
    display: block;

  }
  ul.topnav2.responsive li a {
    display: block;
    text-align: left;
  }

}
 /*navi3*/
ul.topnav3 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav3 li {float: none}

ul.topnav3 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav */

ul.topnav3 li a:hover {background-color:transparent;}

ul.topnav3 li.icon {display: inline;}
 .icon {
     color: #008000;
 }

@media screen and (max-width:680px) {
  ul.topnav3 li:not(:first-child) {display: none;}
  ul.topnav3 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav3.responsive {position: relative;}
  ul.topnav3.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav3.responsive li {
    float: none;
    display: block;

  }
  ul.topnav3.responsive li a {
    display: block;
    text-align: left;
  }

}
 /*navi4*/
ul.topnav4 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav4 li {float: none}

ul.topnav4 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav4 */

ul.topnav4 li a:hover {background-color:transparent;}

ul.topnav4 li.icon {display: inline;}
 .icon {
     color: #008000;
 }

@media screen and (max-width:680px) {
  ul.topnav4 li:not(:first-child) {display: none;}
  ul.topnav4 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav4.responsive {position: relative;}
  ul.topnav4.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav4.responsive li {
    float: none;
    display: block;

  }
  ul.topnav4.responsive li a {
    display: block;
    text-align: left;
  }

}
/* untermenü*/
@media screen and (max-width:680px) {
  ul.untermenu  li:not(:first-child) {display: none;}
  ul.untermenu li{
    float: right;
    display: block;
  }
}

@media screen and (max-width:680px) {
  ul.untermenu .responsive {position: relative;}
  ul.untermenu.responsive li{
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.untermenu.responsive li {
    float: none;
    display: block;
  }
  ul.untermenu.responsive li a {
    display: block;
    text-align: left;
  }
}


/* Untermenü Überschrift  */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;

}


.submenu {
margin-bottom: 0;

}
.submenu a {
        color: #AFB0C2;
        text-decoration: none;
        border-bottom: 1px dotted #3C6539;

   padding:3px 3px 3px 3px;


}
.submenu a:hover {
        color:  #3C6539;
  background-color: #FFECEC;
   text-decoration: none;

   border-bottom: 1px solid  #3C6539;
}
.menutitle {
	border-bottom: 1px dotted #98795A;
}
/*top nav1*/
ul.topnav1 {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
	text-align: left;
	font-weight: normal;
}
ul.topnav1 li {
	float: none
}
ul.topnav1 li a {
	display: block;
	color: #98795A;
	border-bottom: 1px dotted #98795A;
	padding: 2px 2px 5px 5px;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.0em;
}
ul.topnav1 li a:hover {
	background-color: transparent;
	color: #98795A;
}
ul.topnav1 li.icon {
	display: inline;
}
.icon {
	color: #98795A;
}
@media screen and (max-width:680px) {
ul.topnav1 li: not(: first-child) {
	display: none;
}
ul.topnav1 li.icon {
	float: right;
	display: block;
	border-bottom: 1px dotted #98795A;
}
}
@media screen and (max-width:680px) {
ul.topnav1.responsive {
	position: relative;
}
ul.topnav1.responsive li.icon {
	position: absolute;
	right: 0;
	top: 0;
}
ul.topnav1.responsive li {
	float: none;
	display: block;
}
ul.topnav1.responsive li a {
	display: block;
	text-align: left;
}
}
/*top nav2*/
ul.topnav2 {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
	text-align: left;
	font-weight: normal;
}
ul.topnav2 li {
	float: none
}
ul.topnav2 li a {
	display: block;
	color: #98795A;
	border-bottom: 1px dotted #98795A;
	padding: 2px 2px 5px 5px;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.0em;
}
ul.topnav2 li a:hover {
	background-color: transparent;
	color: #98795A;
}
ul.topnav2 li.icon {
	display: inline;
}
.icon {
	color: #98795A;
}
@media screen and (max-width:680px) {
ul.topnav2 li: not(: first-child) {
	display: none;
}
ul.topnav2 li.icon {
	float: right;
	display: block;
}
}
@media screen and (max-width:680px) {
ul.topnav2.responsive {
	position: relative;
}
ul.topnav2.responsive li.icon {
	position: absolute;
	right: 0;
	top: 0;
}
ul.topnav2.responsive li {
	float: none;
	display: block;
}
ul.topnav2.responsive li a {
	display: block;
	text-align: left;
}
}
/*top nav3*/
ul.topnav3 {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
	text-align: left;
	font-weight: normal;
}
ul.topnav3 li {
	float: none
}
ul.topnav3 li a {
	display: block;
	color: #98795A;
	border-bottom: 1px dotted #98795A;
	padding: 2px 2px 5px 5px;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.0em;
}
ul.topnav3 li a:hover {
	background-color: transparent;
	color: #98795A;
}
ul.topnav3 li.icon {
	display: inline;
}
.icon {
	color: #98795A;
}
@media screen and (max-width:680px) {
ul.topnav3 li: not(: first-child) {
	display: none;
}
ul.topnav3 li.icon {
	float: right;
	display: block;
}
}
@media screen and (max-width:680px) {
ul.topnav3.responsive {
	position: relative;
}
ul.topnav3.responsive li.icon {
	position: absolute;
	right: 0;
	top: 0;
}
ul.topnav3.responsive li {
	float: none;
	display: block;
}
ul.topnav3.responsive li a {
	display: block;
	text-align: left;
}
}

Grauenvoll, was würd eich drum geben wenn ich das allein hinbekommen würde!

[Butterblume]

Hape, es sieht zwar so nicht schön aus, aber es eilt nicht! WIr können auch morgen weiter machen!?

[HTML-Laie]

Momentan hast du jetzt in der styles.css alles doppelt stehen.

Bitte nur dieses einfügen:

Code: Alles auswählen

/* topnav */
ul.topnav {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav li {float: none}

ul.topnav li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}


ul.topnav li a:hover {background-color:transparent;}

ul.topnav li.icon {display: inline;}
 .icon {
     color: #008000;
 }
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: block;

  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

}
/* untermenü*/
@media screen and (max-width:680px) {
  ul.untermenu  li:not(:first-child) {display: none;}
  ul.untermenu li{
    float: right;
    display: block;
  }
}

@media screen and (max-width:680px) {
  ul.untermenu .responsive {position: relative;}
  ul.untermenu.responsive li{
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.untermenu.responsive li {
    float: none;
    display: block;
  }
  ul.untermenu.responsive li a {
    display: block;
    text-align: left;
  }
}


/* Untermenü Überschrift  */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;

}


.submenu {
margin-bottom: 0;

}
.submenu a {
        color: #AFB0C2;
        text-decoration: none;
        border-bottom: 1px dotted #3C6539;

   padding:3px 3px 3px 3px;


}
.submenu a:hover {
        color:  #3C6539;
  background-color: #FFECEC;
   text-decoration: none;

   border-bottom: 1px solid  #3C6539;
}
/* Menu link */
 a.menulink:link, a.menulink:visited, a.menulink:active {
  list-style-type: none;
  display: block;
  width: 100%;
  font-size: 1.0em;
    text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #3C6539;
  background-color: transparent;
 border-bottom: 1px dotted  #3C6539;

}
a.menulink:hover {
  color: #0000FF;
  background-color: transparent;
}
/*navi2*/
ul.topnav2 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav2 li {float: none}

ul.topnav2 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav2 */

ul.topnav2 li a:hover {background-color:transparent;}

ul.topnav2 li.icon {display: inline;}
 .icon {
     color: #008000;
 }
@media screen and (max-width:680px) {
  ul.topnav2 li:not(:first-child) {display: none;}
  ul.topnav2 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav2.responsive {position: relative;}
  ul.topnav2.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav2.responsive li {
    float: none;
    display: block;

  }
  ul.topnav2.responsive li a {
    display: block;
    text-align: left;
  }

}
 /*navi3*/
ul.topnav3 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav3 li {float: none}

ul.topnav3 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav */

ul.topnav3 li a:hover {background-color:transparent;}

ul.topnav3 li.icon {display: inline;}
 .icon {
     color: #008000;
 }

@media screen and (max-width:680px) {
  ul.topnav3 li:not(:first-child) {display: none;}
  ul.topnav3 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav3.responsive {position: relative;}
  ul.topnav3.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav3.responsive li {
    float: none;
    display: block;

  }
  ul.topnav3.responsive li a {
    display: block;
    text-align: left;
  }

}
 /*navi4*/
ul.topnav4 {
  width:100% ;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
}

ul.topnav4 li {float: none}

ul.topnav4 li a {
  display: block;
  color:#3C6539;
  text-align:left;
  padding:3px 3px 3px 3px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 1.0em;
  border-bottom: 1px dotted #3C6539;
}
/* topnav4 */

ul.topnav4 li a:hover {background-color:transparent;}

ul.topnav4 li.icon {display: inline;}
 .icon {
     color: #008000;
 }

@media screen and (max-width:680px) {
  ul.topnav4 li:not(:first-child) {display: none;}
  ul.topnav4 li.icon {
    float: right;
    display: block;}

}

@media screen and (max-width:680px) {
  ul.topnav4.responsive {position: relative;}
  ul.topnav4.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav4.responsive li {
    float: none;
    display: block;

  }
  ul.topnav4.responsive li a {
    display: block;
    text-align: left;
  }

}
/* untermenü*/
@media screen and (max-width:680px) {
  ul.untermenu  li:not(:first-child) {display: none;}
  ul.untermenu li{
    float: right;
    display: block;
  }
}

@media screen and (max-width:680px) {
  ul.untermenu .responsive {position: relative;}
  ul.untermenu.responsive li{
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.untermenu.responsive li {
    float: none;
    display: block;
  }
  ul.untermenu.responsive li a {
    display: block;
    text-align: left;
  }
}


/* Untermenü Überschrift  */
.menutitle {
cursor:pointer;
background-color:transparent;
color: #3C6539;
width: 98%;
padding:3px 3px 3px 3px;
text-align:left;
font-weight:normal;
border-bottom: 1px dotted #3C6539;

}


.submenu {
margin-bottom: 0;

}
.submenu a {
        color: #AFB0C2;
        text-decoration: none;
        border-bottom: 1px dotted #3C6539;

   padding:3px 3px 3px 3px;


}
.submenu a:hover {
        color:  #3C6539;
  background-color: #FFECEC;
   text-decoration: none;

   border-bottom: 1px solid  #3C6539;
}

LG Hape

[Butterblume]

So, nun habe ich das kopiert und so in die stelys.ccs gesetzt und hch geladen!

Manchmal sehe ich bei zuvielem nicht mehr wo ich was einfügen soll. Also den Wald vor lauter Bäumen nicht!

Hoffe das war jetz so richtig? ABer auf meinem Handy siehts immer noch so aus...

[Butterblume]

Es geht... Musste mein Browser nur bereinigen!


Oh gott sei dank! Ich danke Dir Hape, dass du nochmal die Geduld mit mir hattest!

Ich werde mir die Steyls.css jetzt noch einmal extra abspeichern!




Da es bei der Bastelcke und der gb4you genauso aussieht wie es bei der Poserbilder, brauche ich doch nur die Styles.css da auch hoch laden! Weil es ja das selbe Design ist!

[moni]

Hallo Karin. Die Leiste läuft ganz gut

hab Kleinigkeit gefunden, und zwar auf mobil ist der Abschnitt Wichtigen Informationen nicht zu sehen



um das zu beheben ,suche in den style.css unten das

.box-left {
width: 98%;
display: none;
visibility: hidden;
}

und das gelb markierte visibility: hidden; lösche weg..dann wird der Überschrift sichtbar ..

[Butterblume]

Hallo und guten Morgen Moni,

ich habe das jetzt raus genommen. Kannst du nochmal bitte gucken obs jetzt besser ist?! https://www.karins-poserbilder.de

[Butterblume]

Hallo Hape,

ich habe jetzt noch einmal eine na vielleicht 2 Fragen.

Die erste Frage hatte ich gestern schon gestellt!

Da die Bastel und gb4you das selbe Design hat, wie die Poserbilder, muss ich doch nur das was ich hier entnommen in den Footer, styes.css einfügen und zusätlich auch noch die skript-topnavi.js

Des Weiteren meine Frage 2.

Wir hatten ja in diesem Beitrag eigentlich it der Tabelle zwecks Textarea angefangen. Und als ich das geändert habe, ist das doch nur für die Bilder auf den jeweiligen Seiten Also diesen hier:

https://www.karins-poserbilder.de/info/besuch_danke.php

Das passt auch wunderbar. Un ich habe das auf allen HP's übernommen. Doch zu meinem Schreck habe ich heute gesehen, dass die Tabelle für meinen Geburtstag nicht mehr richtig aussieht!

Eigentlich sollte das Bild wie volgt aussehen!

https://www.test.karins-poserbilder.de/new%201.php

Also der Rahmen am bild anliegend.

bei mir siehts jetzt jedoch so aus?

https://www.geburtstag.karins-poserbilder.de/

Und ich habe seit Jahren da nichts mehr verändert auf der Seite. Weil sie ja fertig war...

Musst ein bisschen runter scrollen, ist ein Countdown bis zu meinem Geburtstag!

Liegt der Fehler vielleicht daran, dass wir die Tabelle für die Textarea verändert haben?!

Hoffe ich habs verständlich erklärt!

[moni]

Hallo und guten Morgen Moni,

ich habe das jetzt raus genommen. Kannst du nochmal bitte gucken obs jetzt besser ist?! https://www.karins-poserbilder.de

Guten Tag Karin ..
an zwei stellen hast du das noch vergessen, schau bitte ganz unten in der style.css

https://abload.de/img/snapshot_22-10-25_12-3wc9z.png

Zurzeit da sieht die HP nicht responsiv aus

https://abload.de/img/snapshot_22-10-25_12-29exy.png

Gestern war so weit alles OK... bist ja vermutlich gerade am Werkeln?