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.

Bild zum Beitrag

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

07.04.2023, 20:54

body {
  margin: 0;
}

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

MrAmazing2

08.04.2023, 20:20

Danke für den Stern :)

katzebiggi

07.04.2023, 18:53

Moin.

der rote Kasten oben ist rechts zu breit und drückt das Ganze nach außen. Verkleinern, dann sollte der Hintergrund seitlich weg sein.

Grüße von katzebiggi

Woher ich das weiß:Hobby

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

07.04.2023, 18:49

wie ich es loswerden kann

<style>
body {margin:0; padding:0}
</style>

Alex

Ähnliche Beiträge

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

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 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

Wie kann man ein festes Bild über einem div oder header in css anzeigen lassen ohne, dass es sich in diesem Container befindet?

Hallo,

ich bin aktuell dabei meine eigene kleine Website mit HTML und CSS zu gestalten und bin auf ein Problem gestoßen. Ich möchte mein Logo über einem Header oder Div anzeigen wie es unten auf dem Bild auch gezeigt ist. Ich habe versucht das Bild in den Container zu verschieben und dann versucht es mit den Display Typen flex und grid zu positionieren. Leider wird entweder das Bild an eine falsche stelle verschoben oder meine Links werden falsch positioniert (Siehe Bild 2). Hat jemand eventuell eine Lösung wie ich das mache ohne das Bild in den Container zu verschieben oder das Bild obwohl es in dem Container ist statisch zu positionieren, ohne dass es von den Positionen der Links beeinflusst wird.

...zum Beitrag

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


@app.route('/')
def index():
    return render_template('output.html')

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

... // FLASK
        var socket = io();

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.color;
        });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

html & css - container ist zu lang, wie kürzen?

hallo,

ich hocke seit einer std und finde es nicht heraus. Wie kann man diesen Container rechts kürzen, sodass es einen gleichmäßigen Rand für das Bild ergibt?

Danke schonmal.

...zum Beitrag

CSS-Problem: Pointer-Events und Cursor-Aussehen?

#knopf-weiter {pointer-events: none; cursor: not-allowed;}

.wennauswahlgetroffen {pointer-events: all !important;}

Dieser Code hier bedeutet, dass der Knopf, der einen Link enthält erst klickbar wird, wenn eine Bedindung erfüllt wurde. Mein Problem ist aber das bei "pointer-events: none" der Cursor auf "not-allowed" nicht mehr angezeigt wird sondern nur die normale Maus. Ich will aber dass ich den Cursor ändern kann.

...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

CSS!important?

Hallo

Ich habe das Problem, wenn ich mein (s)css an die Handyansicht anpasse, dann muss ich die Werte im Media Query immer mit !important überschreiben.

Wie kann ich das ändern oder wie löse ich es ohne important?

Danke im voraus

...zum Beitrag

html: wie div boxen neben- und untereinander?

Hallo, in meiner Website sollen dienstleistungen aufgelistet werden.
Für die PC Ansicht, sollen diese (insgesamt 6) nebeneinander stehen.
Für die Tablet und Handy Ansicht sollen diese dann so umbrechen, das genug Platz ist, um sie noch zu lesen und sie nicht ineinander verschwimmen.
Ich habe jetzt hier versucht fürs Tablet drei Boxen nebeneinander und somit dann zwei Spalten zu haben, allerdings ist in jeder Ansicht jetzt alles untereinander und man muss auch noch zur Seite scrollen um den ganzen Text zu lesen (dies soll aber nicht sein).
Im Folgenden ist der Teil meiner CSS Datei:

.leistung {

padding: 15px;

margin: 15px;

}

.leistung-container {

display: flex;

flex-direction: column;

}

/* Layout für Tablet (teilweise nebeneinander, teilweise untereinander) */

@media (min-width: 25em) and (max-width: 45em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(50% - 2em);

/* Zwei Boxen nebeneinander */

}

/* Layout für PC (nebeneinander) */

@media (min-width: 45em) and (max-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

@media (min-width: 65em) {

.leistung-container {

display: flex;

flex-wrap: wrap;

}

.leistungen {

flex: 1 1 calc(33.33% - 2em);

/* Drei Boxen nebeneinander */

}

Ist da irgendwas falsch?
Könnt mir da jemand helfen?
Dankeschön

...zum Beitrag

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.

...zum Beitrag

Was ist eigentlich das div genau in html?

Wenn ich zum Beispiel 4 div Container im Code habe, ist der erste div Container dann ganz oben und der letzte div Container ganz unten?

...zum Beitrag

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! :^)

...zum Beitrag

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

Was möchtest Du wissen?

Deine Frage stellen