Bitte um Hilfe? Das Bild auf der Website die ich zum ertsten Mal programmiere verschiebt sich als beim Verkleinern des Browserfensters nach oben, was tun?

Das Bild soll an der richtigen stelle bleiben wie kann ich das anstellen, dass es das tut egal, ob der Browserbildschirm nun im Vollbild ist oder etwas verkleinert?

Auf dem dritten Bild erkennt man den verkleinerten Bildschirm. Das 4 Bild ist ein Teilscreenshoot des Browser im Vollbildmodus, man erkennt genau, dass sich das Bild beim verkleinetem Fenster nach oben zieht. Vieleicht erkennt jemand im html oder CSS Teil den Fehler. Bin echt für jede Hilfe dankbar. Ich bin Anfänger und suche ziemlich verzweifelt nach einer Lösung

Bild zum Beitrag

2 Antworten

SpezialAntwort

27.11.2024, 10:05

Der HTML-Code ist nur selektiv dargestellt.

Grundsätzlich rate ich dazu, Bereiche auf einer Webseite mit "Containern" (DIVs etc.) stärker zu strukturieren. Das erleichtert am Ende das Formatieren der Anordnungen, sonst weiß man am Ende gar nicht mehr so richtig, wo man was hingeschoben hat.

slaxxer

20.11.2024, 13:43

Du suchst nach dem begriff Media-Querys

und btw, statt position absolute empfehl ich dir mit Grid oder Flexbox zu arbeiten

Jack354

Beitragsersteller

21.11.2024, 10:51

danke ich werde es probieren

Ähnliche Beiträge

Website formatierung verschiebt sich immer?

Hallo. Ich hab für die Schule ne website mit html programmieren müssen. Dabei ist mir jedoch aufgefallen, dass wenn ich die website auf dem PC von der Schule öffne, alle Elemente komplett verschoben sind und wenn ich die Formatierung anpasse ist sie wenn, ich sie auf meinem Laptop öffne, wieder verschoben. Wie kann man das ändern?

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

Welche App/Website zum programmieren lernen?

Hallo zusammen,
ich habe eine Frage an die Entwickler unter euch.
Im August diesen Jahres fange ich eine Ausbildung zum Programmierer an.
Gerne würde ich mir bereits etwas Vorwissen aneignen.
Seit etwa drei Wochen arbeite ich mit "Mimo" und habe damit auch jede menge Spaß und habe mir ein paar Grundkenntnisse in HTML UND CSS angewinnen können. Dennoch suche ich nach einer Alternativen zu Mimo, da ich oft gelesen habe, dass Mimo nicht wirklich umfangreich wäre und da es die App zumindest in der Web-Version auch nur auf englisch gibt, wäre eine Alternative vielleicht nicht schlecht.

Die Website/App darf ruhig kostenpflichtig sein.
Ich würde mir wünschen, dass es auf dieser Projekte gibt, wo man quasi schon seine eigenen Websiten/Apps, usw. Schritt für Schritt aufbauen kann. Eine Spielwiese, um zu experimentieren wäre auch gut. Ich würde gerne in die Richtung Full-Stack-Development gehen.
Ich freue mich über Empfehlungen! :)
Liebe Grüße

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

Projektideen für Programmier- Anfänger?

Hallo, ich absolviere für 4 Monate mein Praktikum im Bereich Informatik. In meiner Abteilung geht es um Websiteentwicklung und ich soll demnächst selbst eine Website programmieren (mit C#, JavaScript, HTML, Ajax und CSS).

Meine Frage ist, ob ihr so Ideen habt, was man als Anfänger (wirklich Anfänger mit 1% Grundkenntnis🥲) programmieren kann für 3 Monate ungefähr? Bin so 30 Stunden der Woche bei dem Unternehmen.

Eine weitere Frage ist, ob ihr gute Tutorials, Websites, YT- Videos, etc. zum Thema kennt? Ich soll nämlich selbst recherchieren und mir das selber beibringen.

Danke im Voraus für eure Antworten

...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 habt ihr Programmieren gelernt?

Ich habe es mir durch Internettutorials beigebracht, insbesondere durch welche auf YouTube. Ich habe mit vielen Sprachen gleichzeitig (Java, JavaScript, HTML, CSS Tailwind und Python) gestartet, nach etwa einem Jahr konnte ich dann auch schon die ersten bezahlten Aufträge erstellen (zuerst nur eine Website für meine Mutter, dann auch och für andere Leute). Ich hatte auch immer mehrere Projekte gleichzeitig laufen, allerdings habe ich auch immer darauf geachtet, dass ich alle abschließe.

...zum Beitrag

Bild als Hintergrund Bild in Website einbinden (HTML , CSS )?

Hallo,

Ich Programmiere gerade eine Website in Visual Studio Code und will hinter den Buttons(siehe Bild 2) ein Bild als Hintergrund haben. Nun habe ich das ganze so programmiert (siehe Bild 1) und auch das Bild in die Website Datei eingefügt und alles gemacht. Dennoch sieht das ganze wenn man den liveserver öffnet, so (siehe Bild 2 ) aus und es ist anstatt dem Foto nur das Foto jpg Symbol klein zu sehen . Wie kann ich das ändern so das ich das Bild sehen?

Vielen Dank

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

Wie kann ich ein Bild verkleinern und verschieben (Html, css)?

Ich programmiere eine Website. Und ich muss ein bild in der Mitte, oben platzieren.

...zum Beitrag

Website programmieren?

Moin moin,

Ich habe mich mal wieder ans programmieren gewagt und bin dabei meine eigene Website zu coden. HTML, JavaScript, CSS sind die Programmiersprachen. Ich frage mich jetzt nur, wie ich die Sprachen zusammenfügen kann zu einer Website. Von mir aus könnt ihr auch irgendeinen Hoster nennen. Hauptsache ich kann da selber coden und habe nicht irgendeinen Websitebaukasten. Der Preis ist egal.

Euch allen noch einen wunderschönen Abend :)

...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 @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zum Beitrag

Wie kann man in einer HTML-Website den Übersetzer ausschalten?

Ich habe eine eigene Website mit HTML, CSS und JavaScript programmiert und ich habe ein paar englische Wörter, die ich nicht Übersetzen möchte, sondern in Originalform stehenlassen möchte. Wie kann man das programmieren.

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen