Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

3 Antworten

pagerefresher

26.03.2020, 12:36

In der Regel benutze ich das:

position: fixed oder position: sticky +den Positionsdaten

bei dem transparenten Button benutzt du in der Regel

background-color: Transparent

Woher ich das weiß:eigene Erfahrung

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, CSS

02.04.2020, 16:53

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

.button {
  position:fixed;
  bottom:1em;
  right:1em;
  background:rgba(0,0,0,0.5);
  color:white
}

Alex

Pagefreak

26.03.2020, 12:35

Guck mal hier: https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

Was meinst du mit leicht durchsichtig unten rechts?
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

Woher ich das weiß:Hobby

Instabelike

Beitragsersteller

26.03.2020, 12:42

leicht durchsichtig hab ich schon selbst gefunden, danke.

Ähnliche Beiträge

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zum Beitrag

Css Element mit position:fixed überdeckt Elemente?

Ich habe in CSS eine Navigationsbar mit der Eigenschaft position:fixed, da ich möchte, dass sie mitkommt beim Scrollen. Jedoch überlagert sie am Anfang ebenso etwas, was ich eben nicht will.

Demnach ist meine Frage, wie ich das ganze so mache, dass die Navigationsleiste zu Beginn nicht schon ein Element überdeckt.

Navigation:

.nav{
  position: fixed;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background-color: #4A9188;
  color: #ffffff;
}

...zum Beitrag

Kann jemand diesen Button in HTML CSS umwandeln?

Hallo,

schafft es jemand, mir diesen Button in HTML und CSS zu machen?

Border color ist #f5bf8c

Font color ist #363639

Gradient links ist #fdc591

Gradient recht ist #cd9969

Und dann ist da noch so ein kleiner Schatten nach außen (gold) und nach Innen ein kleiner, schwarzer Schatten

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

HTML & CSS in .exe umwandeln?

Hallo,

ich habe eine ganz einfache Webseite mit HTML und CSS gebaut. Dort gibt es Buttons, die zu unterschiedlichen Webseiten führen. So eine Art Favoriten Liste wie in Browsern.

Diese Webseite möchte ich gerne in eine .exe umwandeln. Dann kann der Anwender über ein Desktop Icon dieses "Programm" öffnen. Wenn man dann auf einen Button klickt öffnet sich ganz normal eine externe Browser Webseite. Habe das schon mit .hta probiert, aber dann werden einige CSS Befehle nicht übernommen und die Buttons funktionieren nicht. Würde auch gerne eine Installation ausführen lassen, so dass man dann danach eine .exe. Datei hat.

Kenne mich nur mit HTML und CSS aus. Alles Andere kann ich nicht.

Danke :)

...zum Beitrag

CSS/JS Programmieren dass Link erst klickbar wenn?

Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:

<a href="seite2.html"><div>Weiter</div></a>

Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.

Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.

Ich hoffe mir kann jemand weiterhelfen. LG

...zum Beitrag

Html Sticky header funktioniert nicht?

Hallo, seit Weile arbeite ich an einer Website, für welche ich jetzt einen Header installiere. Oben ist etwas Content und danach ist eben der Header, der beim Scrollen oben am Rand bleiben soll. Das ist mein Code dazu, ich hoffe jemand kann mir helfen und danke im Vorraus.

------HTML------

<div id="header">
    <img src="bilder/Logo.png" alt="Logo Fliesen"></img>
         <div id="flexbox">
             <nav>
                 <ul class="menu">
                     <div class="flexitem" id="navFlex">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="engagement.html">Unser Engagement</a></li>
                        <li><a href="contact.html">Kontakt</a></li>
                        <li><a href="about.html">Über mich</a></li>
                        <li><a href="referenzen.html">Referenzen</a></li>
                    </div>
                </ul>
            </nav>
       </div>
   <div class="social" class="flexitem"></div>
</div>

-----CSS------

#header {
    height: 80px;
    left: 0;
    right: 0;
    width: 100vw;
    border-bottom: 1px solid #DEDCD9;
    background-color: white;
    display: flex;
    overflow: hidden;
    position: sticky;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
  
  .sticky + #bsp {
    padding-top: 60px;
}

------Script-------

<script>window.onscroll = function() {stickyH()};

var navbar = document.getElementById("header");
var sticky = navbar.offsetTop;
function stickyH() {
   if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky")
        } else {
                navbar.classList.remove("sticky");
              }
            } 
</script>

...zum Beitrag

HTML/ CSS Seite zentrieren und die Seitenränder anpassen?

Hallo, ich programmiere zur Übung eine Automarken-Webseite.

Ich will, dass die Buttons so sind;

Und nicht so: (Der Rahmen dient nur zur Übersicht)

Aber wenn ich die Webseite verkleinere, dann sieht so aus; ich möchte aber, dass die sich richtig anpassen, also z.B. 2 nebeneinander sind.

Welchen Befehl kann ich dafür verwenden?

Hier habe ich den Befehl verwendet: .body {

margin-left: 28%;

margin-right: 28%;

}

...zum Beitrag

FEHLERSUCHE bei einem nicht mitscrollenden "Nach-Oben" Button?

Mehrere Stunden hat es mich heute schon beschäftigt, ich komme und komme nicht darauf...

Es geht mir um den seitlichen (rechts) "skip-to-top" Button. Exakt alles habe ich genauso wie in diesem Pen Beispiel ( Link: https://codepen.io/jackherizsmith/pen/oNxVWrK ) gemacht.

Aber bei mir scrollt der Nach-Oben Button nicht mit wie in dem Pen Beispiel :

Meine Demo-Seite: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__26-06-24.html (aktualisiert)

Allerdings habe ich mein position: relative nicht main mitgegeben sondern der id "skiptop". Mein Dev-Tool zeigt mir an, das jeweils relative und absolute richtig erkannt wird und es wird mir auch so gezeigt.

Nur halt die Klasse "scroll-top_link" scrollt nicht in dem Bereich hoch und runter wie es soll.

Was mache ich da falsch. Könnt ihr mir bei der Fehlersuche helfen?

Vieles habe ich ausprobiert, auch meinem main habe ich position relative gegeben, aber auch anderen Elementen setzte ich position relative allerdings ohne Effekt.

Das Ding ist allerdings das dieser seitliche Bereich ein eigenes grit-Element ist. Sprich:

.main-content-wrapper {
    display: grid;
    grid:     "main-head main-head" auto
            "navigations navigations" auto
            "main-content main-content" 1fr
            "main-footer main-footer" auto
          / minmax(0, auto) [main-nav-start] 5em [main-nav-end];
    }


#navigations {
    grid-area: navigations;    
    grid-column-end: main-nav;
}

#main-nav {
    grid-area: navigations / main-nav;
    position: relative;
    outline: thin solid red;
    margin: 0;
    padding: 0;
    z-index: 100;
}

Wo ich letztendlich das Hauptmenü anzeigen lasse, da habe ich noch keinen richtigen Plan.

Eventuell in der Zeile: #navigations und dann seitlich rechts.

Nicht zu verwechseln mit Seiten-Inhalt, das ist ein Seiten internes Sprungmenü zu einem bestimmten nach Datum geordneten Artikel. Bisher habe ich noch keine bessere Bezeichnung dafür gefunden. Irgendeine Idee dafür?

Zurück zum Hauptmenü, oder ich packe das Hauptmenü seitlich zum Nach-Oben Button, mache es ebenfalls sticky.

Was dann allerdings bei einem schmalen Browserfenster passiert?... Da habe ich eigentlich vor das Hauptmenü (oberhalb vom "Seiten-inhalt" Link) ohne Button (offen) untereinander anzuzeigen.

Sag mal bitte, da mir die Praxis fehlt, wie würdest Du es lösen?

Zurück zur eigentlichen Frage:

WICHTIG ist mir nun, warum der SCROLL-TOP Button nicht nach oben und unten mitscrollt wie er es eigentlich sollte.

Muss ich da was an der html-Struktur ändern. Ein zusätzliches div?

Ich habe da heute lange daran gesessen...

...zum Beitrag

HTML und CSS - Box erscheint nach Klick auf Button und verschwindet nach Klick auf Text wieder?

Die Aufgabenstellung lautet:

"Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Diese Funktion ist noch nicht implementiert. Bitte schließen.“

Die Box soll beim Klick auf den Text wieder unsichtbar werden.

Die Box soll ihre Farbe ändern, wenn man mit der Maus darauf fährt."

Einzelne Punkte schaffe ich, aber nicht dass die Box z.B. wieder weg geht wenn man in den Text klickt ...

Freue mich über jede Nachricht!

...zum Beitrag

Wieso funktioniert dieser CSS-Ladebalken nicht?

Folgendes Problem: Ich hab hier eine Seite, die normalerweise einen Ladebalken generieren sollte. In der Style.css ist es wie folgt definiert:

.loader {

position: relative;

}

.loader::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border-radius: 100%;

border-top: 5px solid red;

border-left: 3px solid brown;

border-bottom: 1px solid purple;

border-right: transparent;

animation: spinner 0.8s linear infinite;

}

@keyframes spinner {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

In der Page selbst hab ich dann: <div class="loader">Ladebalken</div>

Die Loaderclass oben ist nur ein Beispiel. Ich hab es auch schon mit anderen Einstellungen probiert.

Nach allem was ich so finde und bisher verstanden habe müsste auf der Webseite eigentlich an der entsprechenden Position ein animierter Ladebalken angezeigt werden, wird es aber nicht, sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund. Die Style.css ist korrekt verlinkt, alle anderen Elemente wie z.b Buttons werden korrekt angezeigt.

Wo liegt das Problem bzw. woran könnte das liegen?

...zum Beitrag

Hintergrund HTML, CSS Bild?

Hallo zusammen,

ich will das auf meiner Webseite auf der rechten hälfte das Bild ist und auf der linken Seite eine Farbe z.B. Grau, wie kann ich's machen dass sich das rechte bild sich dann zur mitte in die Hintergrundfarbe verläuft?

Danke!

...zum Beitrag

HTML Banner auch beim scrollen an der gleichen stelle lassen?

Hallo,

Welchen Befehl muss ich eingeben, damit ich ein Banner habe das unten an meiner Webseite bleibt egal ob ich hoch oder runderscrolle, se soll immer am Bildschirmrand unten hängen und sich von dort wegbleiben.

Vielleicht kann mir ja auch jemand einen fertigen Quellcode geben. Und wo muss ich den Befehl Eingeben?

...zum Beitrag

Wie kann ich bei folgender CSS-Animation den Text sichtbar lassen?

Hi, ich bin neu im Thema Animationen & Co. in CSS und komme jetzt beim Ausprobieren nicht mehr weiter: Ich möchte ein "Button" (in diesem Fall ein <div>), bei dem beim Hovern von links nach rechts eine Hintergrundfarbe kommt. Jedoch verschwindet bei mir dann auch der Text.

Hier der Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href='https://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet'>
    <style>
        .box {
            position: relative;
            margin-top: 50px;
            width: 200px;
            height: 75px;
            background-color: transparent;
            border-radius: 15px;
            border: 3px solid lightgreen;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Ubuntu';
            transition: all 0.5s ease-in-out;
            z-index: 1;
        }
        .box:hover {
            color: white;
        }


        .box::after{
            position: absolute;
            left: 0;
            content: '';
            background-color: lightgreen;
            width: 0;
            height: 75px;
            border-radius: 11px;
            transition: all 0.5s ease-in-out;
            z-index: 0;
        }
        .box:hover::after{
            width: 200px;
        }



    </style>
</head>
<body>
    <div class="box">Hello</div>
</body>
</html>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen