HTML CSS zwei Elementen einen bestimmten Abstand geben?

Ich habe eine Slideshow die sich durch ein 3 Punkte Menü steuern lässt (Siehe Bilder)
Auf der einen Seite funktioniert das auch super aber auf der anderen ist es viel zu weit unten. Kann ich mithilfe von CSS irgendwie festlegen, dass zwei Elemente immer einen ganz bestimmten Abstand zueinander haben?

Die beiden Bilder sind übrigens auch gleich groß, das Menü war nur so weit unten dass ich einen Teil des Bildes rausschneiden musste

Bild zum Beitrag

1 Antwort

xBlackApple

18.12.2023, 21:06

Ja, das kannst du mit CSS machen. Verwende die Eigenschaft "margin-bottom" für das obere Element und setze den gewünschten Abstand in Pixel oder einer anderen Einheit. Beispiel:

.oberes-element {

margin-bottom: 20px; /* Hier den gewünschten Abstand eintragen */

}

Damit wird der Abstand zwischen dem oberen und dem darunterliegenden Element festgelegt.

Woher ich das weiß:Berufserfahrung

ThaliaTaiger

Beitragsersteller

18.12.2023, 21:16

Hab ich versucht aber das funktioniert irgendwie nicht

Ähnliche Beiträge

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zum Beitrag

Html: bild im Hintergrund?

Hii, also ich brauch Hilfe mit HTML (nur HTML und nicht CSS).

Ich will ein Bild einfügen, will aber nicht, dass es im Text steht sondern quasi hinter dem Text.

Wenn es im Text steht, verschiebt sich immer alles und es ist ein riesen Abstand zwischen den Zeilen, genau das will ich vermeiden.

Kann mir jemand weiter helfen?

...zum Beitrag

Css input type checkbox :checked?

Ich habe nen Hamburger Menü, welches nachdem man es anklickt nen Kreuz wird. Startet man die Website neu bleibt das Kreuz allerdings. Gibt es nen Code der das mit dem checkbox checked zurücksetzt, damit es wieder zum Hamburger Menü wird? Bzw. Wenn die Website zum aller ersten Mal aufgerufen wird passt auch alles nur beim reload nicht. Vllt gibt es da ne Funktion das alles was gespeichert wurde, also wie weit man runter gescrollt hat, das chebox ding, usw, gelöscht wird.

Kurz zur Erklärung. Sobald man das Hamburger Menü anklickt egal in welche Zustand kommt so ne sidebar von links nach recht rein. Den Code dafür habe ich hier mal nicht angebracht weil mit der alles funktioniert.

Der Html Code ist etwa so aufgebaut:

<input type=checkbox>
<label onclick="toggle()"

Hier der Css code:

Hier der Javascript code:

Danke schon mal im voraus.

...zum Beitrag

Abstand in CSS/Html?

Hallo,

ich möchte Abstand zwischen diesen Wörtern nach unten machen. Wie soll ich das machen?

Hier sind meine Tags:

HTML-CODES:

<h1 class="firstheading">PEAKSOFT</h1>

<li><a class="liststyleone" href="">My courses</a></li>

<li><a class="liststyle" href="">Announcements</a></li>

<li><a class="liststyle" href="">Trash</a></li>

<li><a class="liststyle" href="">Schedule</a></li>

</ul>

</header>

CSS-CODES:

.layout {

display: flex;

justify-content: space-between;

}

.liststyle {

list-style-type: none;

}

.liststyleone {

color: rgb(31, 110, 212);;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-weight: 600;

}

.liststyle {

color: black;

font-weight: 600;

text-decoration: none;

font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

Würde mich für schnelle Antworten freuen. Danke im Voraus!
LG

...zum Beitrag

Css+html Navbar verschoben?

Hallo :)

Ich baue mir gerade eine Website auf und habe ein Burger-menü in Css und Html angelegt, allerdings ist der Navigationsbereich nicht unter dem Icon sondern verschoben darüber, wodurch das Menü nicht gut aufklappbar ist.

In Css habe ich bereits versucht durch nav{...} den Bereich von Html anzupassen (auch mit dem Boxenmodell) aber ich kenne auch noch keinen Befehl der das verschiebt, oder es funktioniert einfach nicht.

Ich wäre auf jeden Fall sehr dankbar für Hilfe!

LG Sabine

...zum Beitrag

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zum Beitrag

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zum Beitrag

Elemente in css schräg übereinander legen?

Ich habe folgendes Problem:

Ich möchte gerne den weißen Kasten mit dem Text drinnen rechts neben den Kasten mit der Flasche legen, aber die beiden sollen sich so halbwegs überschneiden (Wie in dem einen Beispiel Bild zu sehen)

Das sind mein akuteller HTML und CSS code:

Ich habe auch schon im Internet gesucht und dort steht überwiegend, dass ich was mit der id machen muss, da passiert aber irgendwie nicht das, was ich will... :/

...zum Beitrag

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen