Css position verändert sich?

Das ist der code - (Programmieren, HTML, CSS) So sollte es eig aussehen - (Programmieren, HTML, CSS) Und so sieht es bei einem anderen monitor aus - (Programmieren, HTML, CSS)

4 Antworten

  1. Poste Code so, dass man ihn einfach lesen und reproduzieren kann.
  2. Arbeite mit einem relativen Positionmodell.

arbeite mit flexbox oder als anfänger mit bootstrap-grid

da haste alles was du brauchst direkt responsive

Dropdown Menu Buttons nebeneinander?

Ich habe für meine Website ein Dropdown Menu gemacht,dass aus einem Button besteht,der,wenn man draufklickt eine neue Liste unterhalb des Buttons öffnet,die Links enthält.Um eine Navigtionsleiste zu erstellen,die übersichtlich ist,will ich mehrere Buttons nebeneinander positionieren.Das hat soweit auch geklappt und das erste Menü öffnet sich perfekt,wenn ich aber den anderen Button anklicke,öffnet sich nur das Menü des ersten Buttons.

Hier der Code,bestehend aus html,css und JavaScript (die entsprechende Stellen) :

HTML

<div class="dropdown">    <button onclick="myFunction()" class="dropbtn">Charaktere</button>    <div id="myDropdown" class="dropdown-content">      <a href="#">1</a>      <a href="#">2</a>      <a href="#">3</a>  </div> </div> <div class="dropdown"> <button onclick="myFunction()" class="dropbtn">Charaktere</button> <div id="myDropdown" class="dropdown-content">  <a href="#">1</a>  <a href="#">2</a>  <a href="#">3</a> </div>   </div>

CSS

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

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

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

JavaScript

/* Dropdown Button */ .dropbtn {    background-color: white;    color: black;    padding: 16px;    font-size: 16px;    border: none;    cursor: pointer;    height: 70px;    width: 160px;    font-family: Trebuchet MS;    border: 1px solid darkturquoise; }

/* Button hovered*/ .dropbtn:hover, .dropbtn:focus {    background-color: darkturquoise;    font-family: Trebuchet MS; }

/* Platzierung des <div>*/ .dropdown {    position: relative;    display: inline-block;    font-family: Trebuchet MS; }

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

/* Links im Menü */ .dropdown-content a {    color: black;    padding: 12px 16px;    text-decoration: none;    display: block; }

/*Farbwechsel */ .dropdown-content a:hover {background-color: #ddd}

/* Das Droptdown Menü,wenn es aufklappt*/ .show {display:block;}

...zur Frage

JQuery Tabellenzeile löschen?

Hallo miteinander,

Ich bin noch ein ziemlicher Anfänger, was JQuery angeht. Ich musste bisher in meinem Praktikum eine Tabelle mit html und css designen. Dies habe Ich auch ohne Probleme hinbekommen. Jetzt jedoch muss Ich die "Zeile hinzufügen / löschen"-Buttons auch zum Laufen bringen.

Bisher habe Ich es so geregelt, dass Ich in der Ur-Zeile keinen Löschen-Button habe und der sich mit einem Klick auf den "Hinzufügen"-Button allesamt mit einer neuen Zeile hinzufügt.

Ich habe es so programmiert, das er es in die Konsole schreibt, wenn man den Button klickt. Dies ist jedoch nicht der Fall. Habe Ich irgendeinen Fehler?

if ("") {
    $("tbody").append(Neue_Zeile);
} else {
    alert = "Du musst jedes Feld ausfüllen"
}


});

$("#button_delete").on("click",function(){

    console.log("Löschen-Button wurde geklickt");

if (""){
    $("tbody").remove(Neue_Zeile);
} else {
    alert = "Du musst erst eine Zeile hinzufügen, um sie löschen zu können"
};

})

Ganz oben wollte Ich angeben, dass er erst eine Zeile hinzufügt, wenn alle Felder ausgefüllt sind. Was soll Ich da dann nach dem "if" in die Klammer schreiben?

Genauso wie bei dem Löschen-Button. Wie kann Ich da nur die Zeile löschen, auf die der angeklickte Button liegt?

Ich danke für eure Antworten! Bitte schreibt die Antwort nicht all zu kompliziert :P

Mit freundlichen Grüßen, Robert Kessler

...zur Frage

PHP Vor- und Zurück-Button?

Hallo und guten Mittag :)

Ich habe eine Frage bezüglich meiner Website.ich suche ne Funktion, welche mir ermöglicht auf einer Seite einen Vor und ZurückButton zu bauen mittels PHP.

Bedeutet auf der Seite XY möchte ich meherere Artikel haben, jedoch sollten nicht alle angezeigt werden, sondern immer nur einer. Wenn ich auf den Button Next gehe sollte auf der gleichen Seite der nächste Artikel erscheinen usw.

Meine Seite heißt momentan noch:

http://tanzkunstakademie.com

Unter Unterrichtsfächer stehen 3 Kategorien. In den einzelnen Kategorien sollten die Fächer aufgelistet werden. Aber immer nur ein Fach sollte da stehen und mit dem Button Vor sollte das nächste Fach angezigt werden usw.

Kann mir jmd helfen, da ich in PHP ein Newby bin und ich nur die Sprachen C# , TSQL, CSS und HTML kann und ich diese dafür nicht gebrauchen kann.Die Seite an sich ist fast komplett selbst geschrieben, sprich im komm in den Code rein.

Ich hoffe der ein oder andere kann mir helfen.

Mit freundlichen GrüßenIch

...zur Frage

Was möchtest Du wissen?