Beiträge von PeterLustig9

PeterLustig9 · 11. Februar 2021

Danke dir! Ich habe die Optimierung für andere Auflösungen noch nicht begonnen. Den Button werden ich wahrscheinlich für kleinere Fenster entfernen. Oder hättest du eine andere Idee? mfG

PeterLustig9 · 11. Februar 2021

Habe es geschafft!!! Keine schöne Lösung aber funktioniert. Für alle die mal vor dem Problem stehen sollten:

Code

.dropbtn {
  background-color: #00006c;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
}

.dropdown {
    position: sticky;
    bottom:0px;
    display: inline-block;
    margin-left: 1200px;
    z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom:55px;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #00008b}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: #f0f0f0;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
  margin-bottom: -95px;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

PeterLustig9 · 11. Februar 2021

*Anhang*

PeterLustig9 · 11. Februar 2021

Hallo, ich habe ein Problem. Ein "sticky-element" funktioniert auf meiner Seite ganz gut - nur ganz unten nicht. Ich kann mir das ganze nicht erklären und habe bestimmt schon 2-3h lang vergebens nach dem Fehler gesucht. Ich habe die Hintergrundfarbe in dem Screenshot sehr dunkel gemacht damit man besser erkennen kann was mein Problem ist. Ich möchte den weißen Streifen unten weg haben und der blaue Kasten soll sich auch dort unten noch am untersten Bildrand befinden.

Code

<!---Sidebar--->
<div class="dropdown">
  <button class="dropbtn">Kontaktdaten</button>
  <div class="dropdown-content">
    <h5>Sie erreichen uns unter</h5>
    <h6>..................</h6>
    <h6>F....................</h6>
    <h6>M.....................</h6>
    <h5>Nutzen Sie auch gerne das Kontaktformular</h5>
  </div>
</div>

<!---Footer--->

    <footer>
      <nav>
        <ul>
          <li><a href="Impressum.html">Impressum</a></li>
          <li><a href="Datenschutz.html">Datenschutz</a></li>
        </ul>
      </nav>
      <p>© KLUTH Service GmbH & Co.KG</p>
    </footer>
  </body>
</html>

Alles anzeigen

Code

.dropbtn {
  background-color: #00006c;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
}

.dropdown {
    position: sticky;
    bottom:0px;
    display: inline-block;
    margin-left: 1150px;
    margin-bottom: 0px;
    z-index: 1;
}

.dropdown-content {
  display: none;
  position: absolute;
  bottom:55px;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #00008b}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: grey;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
  margin-top: 0px;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

PeterLustig9 · 10. Februar 2021

Kriegt das Problem irgendjemand gefixt? Hänge den gesamten Quellcode an. Ziel ist es, dass die kleine blaue Box erst ab "Über uns" angezeigt wird, d.h. auf der Home Seite versteckt ist.

Code

html, body{margin: 0;padding: 0;height: 100%;text-align: center;}
section {min-height: 100%;}
a{text-decoration: none;}
li{list-style-type: none;}

h1, h2, h3, h4, a {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  color: #494949;
  font-size: 20px;
  text-transform: uppercase;
}

h2 {
  color: #00008B
}

h3 {
  font-size: 40px;
  padding-top: 8%;
  margin-bottom: 5px;
}

h4, p, li, ul {
  font-family: 'Source Sans Pro', sans-serif;
  z-index: 1;
}

hr {
  width: 30px;
  height: 3px;
  background: #494949;
  border: 0px;
  margin: 0 auto 40px auto;
}
li, img, #logo{transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms;}


/*header******************/

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

#logo {
  width: 100px;
  float: left;
  margin: 10px 0 0 50px;
}

#logo img{
  width: 90%;
}

#logo:hover {
  transform: rotateY(360deg);
}

header nav {
  float: right;
  margin: 10px 50px 0 0;
}

header nav ul li {
  float: left;
  margin-right: 25px;
}

header nav ul li a {
  font-size: 16px;
}

header nav ul li:hover {
  padding-top: 3px;
}

/*home******************/

#Home {
  background: url(br.png);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

#Home h1 {
  margin: 300px auto 0 auto;
  font-size: 80px;
  text-shadow: 1px 1px 2px grey;
}

#Home h2 {
  margin: 0 auto 0 auto;
  font-size: 35px;
  text-shadow: 0.5px 0.5px 1px black;
}

#Home img {
  width: 42px;
  margin-top: 400px;
  opacity: 0.5;
}

#Home img:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/*Über uns******************/

#Überuns p {
  width: 900px;
  margin: 0 auto 0 auto;
  font-size: 21px;
}
#Martin {
  height: 294px;
  width: 257px;
  border: 1px solid #000000;
  margin-top: 40px;
}
#Martin:hover {
  transform: scale(1.1);
}
/*Leistungsprofil******************/

#Leistungsprofil ol li {
  font-size: 22px;
  font-weight: 500px;
}

#Leistungsprofil {
  background-color: #F0F0F0;
}

#Leistungsprofil li{
  padding-top: 25px;
}

#Leistungsprofil li:hover{
  transform: scale(1.1);
}

/*News******************/

h4 {
  font-size: 23px;
}

#News p {
  margin: 0 auto 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  width: 800px;
}

/*Kontakt******************/

form input, textarea {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #494949;
  outline: none;
  font-size: 20px;
}

form input:first-child {
  margin-top: 40px;
}

form input {
  width: 650px;
  height: 40px;
}

form textarea {
  width: 650px;
  height: 220px;
  resize: none;
}

.input_text {
  color: #494949;
  padding-left: 10px;
}

#Kontakt p  {
  width: 650px;
  margin: 0 auto 0 auto;
  font-size: 21px;
}

.button {
  background-color: #f0f0f0;
  color: #494949;
  width: 660px;
  height: 40px;
}

.button:hover {
  background-color: #E3E3E3;
}

.dropbtn {
  background-color: #000088;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;

}



.dropdown {
    position: sticky;
    bottom:665px;
    display: inline-block;
    float: right;
    margin-right: 10%;
    z-index: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 0;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {opacity: 0.85;}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: #F0F0F0;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

PeterLustig9 · 10. Februar 2021

Das Bild ist ja weg sobald man runterscrollt. Deshalb die Idee mit dem z-index. Funktioniert aber leider nicht. Lustigerweise habe ich genau das, was du mir geschickt hattest, in den Code getippt - ohne Ergebnis. Aber wenn ich es copy-paste funktioniert es? Komisch

PeterLustig9 · 10. Februar 2021

Ich hatte gerade Idee das Problem mit dem z-index zu lösen, dh der Button ist die ganze Zeit da, aber wird einfach auf der Startseite halt von dem Bild usw. überdeckt da höherer z-index. Nun bastel ich die ganze Zeit daran aber kriege es nicht hin

PeterLustig9 · 10. Februar 2021

Wo muss ich die Box in der HTML-Datei einfügen?

PeterLustig9 · 8. Februar 2021

Elly ich kann deinen Code noch nicht so richtig nachvollziehen. Ich habe das ganze jetzt erstmal so gelöst, dass ich einfach ein dropdown unten bei der kontaktseite habe (siehe Code). Wie würdest du das ganze dann hier integrieren?

Code

.dropbtn {
  background-color: #000088;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
  z-index: 0;
}


.dropdown {
  position: relative;
  display: inline-block;
  float: right;
  margin-right: 10%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {opacity: 0.85;}

Alles anzeigen

Code

<div class="dropdown">
        <button class="dropbtn">Kontaktdaten</button>
        <div class="dropdown-content">
          <h5>Sie erreichen uns unter</h5>
          <h6></h6>
          <h6></h6>
          <h6></h6>
          <h5>Nutzen Sie auch gerne das Kontaktformular</h5>
        </div>
      </div>

PeterLustig9 · 8. Februar 2021

Ich habe jetzt schon eine andere Lösung finden. Ich werde eure Ansätze dennoch mal ausprobieren. Ich danke euch!

PeterLustig9 · 8. Februar 2021

Mir würde es auch reichen ein zweites Fenster auf einem Teil der Seite zu haben.

PeterLustig9 · 8. Februar 2021

Hallo,

ich habe erst vor ein paar Tagen mit Html und Css angefangen und bastel gerade an einer Webseite. Ich möchte auf meiner OnePage Webseite eine fixed sidebar einbauen, die ab einem bestimmten punkt beim scrollen erscheint, danach aber immer an der rechten seite bleiben soll, außer wenn man wieder auf die Startseite gelangt.

Mein Problem ist, dass ich die Sidebar zwar schon erstellt, diese sich jedoch am Boden der Seite befindet und ich absolut keine Ahnung habe wie ich mein Vorhaben umsetzen kann.

Den HTML und CSS Code könnte ich ggfs. dann auch teilen, wenn mir jemand zu helfen vermag.

mfG ein verzweifelter Neuling

Beiträge von PeterLustig9

Sticky Element erzeugt weißen Streifen

Sticky Element erzeugt weißen Streifen

Sticky Element erzeugt weißen Streifen

Sticky Element erzeugt weißen Streifen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen

Sidebar bei OnePage Website einblenden lassen