Div Button über andere Div Container legen?

Ich habe eine Webseite erstellt, welche mehrere Div-Container beinhaltet. Nun habe ich einen Button mittels Div erstellt. Jedoch ist der Button nicht sichtbar wenn ich andere Div-Container "aktiviert" habe. Mir ist bewusst das sich dies mit dem z-index regeln lässt, jedoch bei allen Div-Containern, außer bei dem mit dem Button.

Ohne andere Div-Objekte funktioniert er problemlos.

Danke im Vorraus!:)

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

medmonk

26.03.2016, 05:05

Buttons nicht mit einem Div erstellen. Verwende dafür entweder ein Anker-Tag und formatiere diesen mit Hilfe von CSS. Alternativ ein Button-Tag (HTML5) verwenden, und das Aussehen auf selbe weise anpassen.

<!-- Anker-Tag -->
<a href="/">Beschriftung</a>

<!-- Button-Tag -->
<button name="button">Beschriftung</button>

Weitere Informationen zum Button-Tag findest du unter anderem auf der Developer Website von Mozilla.org. Ansonsten einfach mal ins HTML5 Handbuch von Stefan Münz rein schauen. Hier mal die Links zu beiden Quellen:

Was jetzt die Gestaltung bzw. Positionierung angeht, solltest du dich mit dem CSS Box und Flex-Modell vertraut machen. Allgemein dein Wissen bezüglich HTML und CSS weiter vertiefen. Sprich essentielles Grundlagenwissen aneignen und lernen semantisch korrekten (validen) Code zu schreiben.

LG medmonk

fluffiknuffi

26.03.2016, 10:41

(Das Button-Tag gab es schon vor HTML5, siehe den von dir geposteten MDN-Link.)

medmonk

27.03.2016, 00:25

@fluffiknuffi

Kann passieren, ja nicht alles merken kann. ;) Danke fürs Feedback.

fluffiknuffi

26.03.2016, 10:43

Versuch es mal zusätzlich mit position: absolute (oder position: relative?)

Ich möchte einen Div Container auf 100% breite setzten, aber dabei bleibt immer links und rechts ein kleiner Rand..

Jetzt habe ich per margin Tag, den Container zwar ganz links an den Rand bekommen, aber rechts ist immer noch eine Lücke, das Problem ist, dass der der margin-right Tag nicht funktioniert...

Ich hab auch schon probiert die breite nicht auf 100% sondern 102 oder sowas zu setzten, dann ist die Lücke zwar kleiner, aber ganz geht sie auch nicht weg, weil z.B. 103% schon wieder viel zu breit ist.. und beim Zoomen der Seite wird die Lücke immer sehr stark sichtbar..

Ich will also einfach 100% Breite, ohne Lücken am Rand

Hat jemand eine Idee?

...zur Frage

CSS div container neben img in der selben Zeile?

Ich wollte ein Bild neben einem Div-container in der obersten Zeile platzieren, habe jedoch keinen Weg gefunden, kann mir jmd helfen? Danke! :^)

...zur Frage

DIV-CONTAINER an Bildschirmgröße anpassen?

Liebe Commuity, Ich bin sehr neu in sachen HTML und CSS. Wir haben ein Projekt von der Schule aus, eine Website erstellen. Nun habe ich einen Div-Container mit einem Hintergrund gemacht (Auf den Hintergrund kommt ein Text). Jedoch wenn ich es auf meinem großen Bildschirm anordne und dann auf meinen Laptop gehe, ist klarerweise alles verschoben. Wie kann ich dies verhindern? :)

LG Flagga005

...zur Frage

Div ohne Position im Vordergrund?

Hallo. Ich versuche gerade auf einer Webseite ein div in den Vordergrund zu verschieben. Das Problem bei der ganzen Sache ist:

Es hat keine Position. Über den normalen weg des z-index ist also erstmal nichts zu machen.
Es liegt etwa folgende Struktur vor:
Soll oben Liegen Ist eine Js Animation welche über allem liegt aber von manchen Objekten überlappt werden soll

Gibt es dafür eine schon bestehende Lösung?

Danke!

...zur Frage

HTML - div verschwinden lassen nach Zeit?

Hallo,

ich habe eine einfache Webanwendung mit HTML, CSS und JavaScript programmiert. Mit CSS habe ich eine einfache Lade-Animation erstellt.

Diese Animation ist in einem .div -Container gespeichert.

Diese Animation soll nach 5 Sekunden automatisch verschwinden, da der Content meiner Webanwendung bis dahin richtig geladen hat und sonst der Bildschirm mit den verschiedenen Elementen überflutet wäre...

Durch Google bin ich leider nicht schlauer geworden.

Kann mir jemand den Code als Antwort auf diese Frage geben oder einen Link zum Code geben?

Danke im Voraus!

...zur Frage

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

Css div Container weissen Rand los werden?

Hey Leute, Lerne derzeit CSS und bin gerade bei einem Hindernis gelandet. Irgendwie ist ein weisser Rand aussen von meinem div Container entstanden und egal mit welchen Befehl, er geht einfach nicht weg. Habe es auch schon mit margin: 0%; versucht.

Nix hat funktioniert.

Ich würde den Code gerne einfügen jedoch ist er zu lang. Wenn jemand Interesse hat mir im privat Chat zu helfen kann ich gerne den Code zuschicken.

Hat jemand anderes trotzdem eine Ahnung was das sein kann und wie ich es loswerden kann? Habe den Code bereits kontrolliert und und nix finden können.

...zur Frage

Objekt mit Funktionen in Localstorage speichern?

Hey,

ich würde gerne ein Objekt in den Localstorage speichern, das auch Funktionen enthält. Das Problem ist jedoch, dass die Funktionen nicht mir gespeichert werden. Ist das überhaupt möglich und wenn ja wie?

let data = {
    user: _user,
    enemy: _enemy,
    settings: 'settings'
}
localStorage.setItem('fg:data', JSON.stringify(data));

_user ist ein Objekt, das Funktionen beinhaltet, die nicht im Localstorage auftauchen.

...zur Frage

Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

Hallo zusammen,

ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

Danke sehr!

...zur Frage

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

(Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

...zur Frage

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zur Frage

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

...zur Frage

Flutter Data from API?

Hey, will Daten von meiner erstellten API ausgeben in meiner App.

Code:

fetchData() async {
    final response = await http.get(Uri.parse('http://localhost/list.json'));
    return json.decode(response.body);
  }

FutureBuilder(
            future: fetchData(),
            builder: (BuildContext context, AsyncSnapshot snapshot){
              if(snapshot.hasError){
                return Center(
                  child:Text("Error"),
                );
              }
              if(snapshot.hasData){
                return ListView.builder(
                  itemCount: snapshot.data.length, 
                    itemBuilder: (BuildContext context, int index){
                  return Row(
                    children: [
                      Expanded(
                        child: Container(
                        child: Column(
                          children: [
                            Text(snapshot.data[index]['id']),
                            SizedBox(height: 10,),
                            Text(snapshot.data[index]['name']),
                            
                          ],
                        ),
                        ),
                      ),
                    ],
                  );
                });
              }
              return Center(child: CircularProgressIndicator(),);
            },
          ),

Jedoch bekomm ich als Ausgabe "Error". Woran kann das liegen? Die API kann ich mit Postmann abfragen.

...zur Frage

PHP-Datei in einen Div-Container mittels PHP laden?

Ich möchte mit einem Klick auf den Button eine PHP-Datei in den "main"-Tag laden (= <main>...</main>).

Hier könnt ihr den Quellcode sehen: http://damiantoczek.de/gpus.php

Die Datei ".../topics/howmuchvramdoineed.php" soll in <main>...</main> geladen werden.

Und das auch so, dass man einen Verlauf hat und man einen Schritt zurück gehen kann, wo die Datei noch nicht hineingeladen wurde.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen