HTML, Position der Bilder verschieben sich beim Zoomen im Browser?

Was muss ich eingeben, damit die Bilder unter den Preisschildern bleiben?

100% Zoom:

Bild zum Beitrag

33% Zoom:

Bild zum Beitrag

4 Antworten

NackterGerd

12.04.2020, 14:31

Ich würde GRID zum sauberen positionieren verwenden.

Damit erreichst du sauber Bereiche umd kannst dann auch einfach die Anordnung beim Handy anpassen (z

B. Alles intereinander)

Username541765

11.04.2020, 23:56

Nutze in CSS ein relatives Layout.

vibu04

11.04.2020, 22:05

Du solltest für sowas eine Tabelle nehmen, sprich den <table> tag. Dann verrutscht auch nichts.

Woher ich das weiß:Hobby

NackterGerd

12.04.2020, 14:33

Tabellen sind hier nicht so sinnvoll.

Zum einen Erwartet Google aus SEO Sicht dass Tabellen Daten sind.

Zum Anderen sind damit keine Responsable Designs möglich

GRID sind in HTML5 das entsprechende modernere und bessere Mittel.

Tabellen dafür war früher einmal

bycrix1

Beitragsersteller

11.04.2020, 22:19

Ist bereits in einer Tabelle

<table cellspacing="180">
                    <thead>
                        <tr class="tabelle1">
                            <th><img src="../WebSite/Bilder/Hintergrund/PC1Neu1.jpg" width="400"></th>
                            <th><img src="../WebSite/Bilder/Hintergrund/PC2.jpg" width="400"></th>
                            <th><img src="../WebSite/Bilder/Hintergrund/PC3.jpg" width="400"></th>
                        </tr>
                    </thead>
                </table>

vibu04

11.04.2020, 22:24

@bycrix1

Mach mal den <thead>-tag weg, wenn du sonst kein <tbody> und <tfoot> benutzt.

bycrix1

Beitragsersteller

11.04.2020, 22:26

@vibu04

hat das was damit zu tun, dass die bilder beim zoomen verrutschen? Denn es hat nix gebracht.

vibu04

11.04.2020, 22:33

@bycrix1

Das war mir nur so in den Sinn gekommen. Aber echt gute Frage mir ist sowas noch nie aufgefallen.

Du kannst aber noch versuchen deinen Bildern eine prozentuale Breite zu geben.

z.B. width="25%"

Niklas

12.04.2020, 00:44

Ich rate dir, das mit CSS Flexbox umzusetzen:

Beispiel HTML:

<div class="row images">
  <div class="col">
    <img src="image1.jpg" alt="Foto 1">
  </div>
  <div class="col"> 
    <img src="image2.jpg" alt="Foto 2">
  </div>
  <div class="col">
    <img src="image3.jpg" alt="Foto 3">
  </div>
</div>

Beispiel CSS:

.row.images {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

Mit nur einer Änderung kannst du es responsive gestalten:

@media (max-width: 575px) {
  .row.images {
    flex-direction: column;
  }
}

Mehr zu CSS Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hoffe, ich konnte helfen. :)

Liebe Grüße

Woher ich das weiß:Berufserfahrung – Software Engineer

bycrix1

Beitragsersteller

12.04.2020, 01:59

Probiere das gleich mal aus, vielen Dank!

Ähnliche Beiträge

Durch HTML den Browser zoom änden

Kann man durch HTML einstellen, dass wenn jemand die Seite öffnet der Browser Zoom automatisch auf 100% gestellt wird?

...zum Beitrag

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

...zum Beitrag

HTML Editor Bilder verschieben?

hallo, melde mich nochmal auf Grund meiner Website.

Der Code um Bilder darzustellen und seine Größe zu bestimmen ist ja

<img src="Beispiel.jpg" width="100" height="100" border="0"> jedoch kenne ich keinen Befehl um die Position des Bildes auf der Seite zu bestimmen. Kann mir da jemand weiterhelfen?

...zum Beitrag

Wie bleibt der Footer immer ganz unten der Seite (CSS,HTML)?

Hllo, ich möchte den Footer immer ganz unten der Seite haben. Allerdings ist ern nicht ganz unten wenn ich z.B. nur 1. Satz geschrieben habe... hier klappts nicht Beispiel: http://tom.musicintime.de/ hier klappts Beispiel: [Impressum]

Ich habe das mit footer { position: relative; width: 100%; } ausprobiert allerdings mit diesem Ergebniss

Wie kann ich Den Footer IMMER am Seitenende haben egal wie viel Inhalt ich habe?

...zum Beitrag

HTML/CSS/JAVASCRIPT Taschenrechner Fehler beheben?

ich programmiere grade einen Taschenrechner mithilfe von Javascript, habe auch alles soweit richtig hinbekommen. nur wenn ich einen buchstaben eingebe zeigt mit der browser(in diesem fall t): Uncaught ReferenceError: t is not defined

welche funktion muss ich noch hinzufügen das einfach gar nichts bei einem buchstaben passiert aber auch keine fehlermeldung kommt?

danke

https://hastebin.com/nutoquduca.html

...zum Beitrag

HTML|JS|CSS - Hinter dem DIV den Hintergrund unschärfen?

Hallo,

ich möchte gerne die restliche Seite unscharf haben, wenn mein DIV-Formular offen ist. Wenn ich mein DIV aber schließe "Abbrechen", ist die ganze Seite weg. Ich vermute mal das es mit dem anzeigen und verstecken vom "overlay" DIV zusammenhängt, welcher auch die Unschärfe rein bringt.

HTML Part:

<html>
<header>
    <link rel="stylesheet" href="css/style.css">
    <script language="javascript" type="text/javascript" src="js/script.js"></script>
    <script type="text/javashttps://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.jsquery.min.js"></script>
</header>

<div class="bsr"> <b> Besprechungsraum: </b> RR </div> <br>

<div id="ajaxdiv"> </div>

<div align="center" id="reservierungdiv"> <a href="#" class="btn_reservierung" onclick="openForm()">Reservierung</a> </div>

<?php include "connect/users.php"; ?>

</div> </body> </html>

CSS Part:

body {
    background-color: whitesmoke;
    /overflow: hidden;/
    z-index: 0;
}

#overlay{
    /display: none;/
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: .5;
    z-index: 3;
    filter: blur(2px);
    visibility: hidden;
}

JS Part:

function openForm() {
    document.getElementById("myForm").style.display = "block";
    document.getElementById("overlay").style.display = "block"; <---
    startTimer();
}

function hideDiv() {
    document.getElementById('myForm2').reset();
    //$("#client")[0].reset();
    document.getElementById('myForm').style.display = 'none';
    document.getElementById("overlay").style.display = "none"; <---
}

...zum Beitrag

Dark-Mode White-Mode Schalter Position verschieben?

Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)

Hier der Code der HTML-Seite:

<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>

<form>

<!-- LOGO -->

<div class="Logo">

<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>

</div>

<!-- ----- -->

<!-- HIER BEFINDET SICH DIE FRAGE -->

<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">

<div class="curtain"></div>

<!-- UEBERSCHRIFT -->

<div class="Ueberschrift">

<h1> <b> ÜBERSCHIRFT </b> </h1>

<h2> IMPRESSUM </h2>

</div>

<!-- ----- -->

<!-- BUTTONS -->

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<!-- ----- -->

<!-- KONTAKT -->
<div class="Impressum">

<h2> <u> TEXT </u> </h2>

</div>

<center>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>

<p> TEXT </p>

</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">

<h2> <u> IMPRESSUM </u> </h2>

<h3>TEXT</h3>

<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>

<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>

</p>
<p>
TEXT
</p>

<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

</div>

<!-- ----- -->





</form>

</body>

</html>

...zum Beitrag

HTML / CSS: div wird nicht angezeigt?

Ich fange gerade erst an und mein HTML-Code für div ist:

<body bgcolor="#333333">
  <div id="top"> </div>
</body>

und im CSS:

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

Aber wenn ich das im Browser angucken will, dann wird mir nichts angezeigt. Alles ist gespeichert und ich benutze Brackets. Davor hab ich es mit Atom ausprobiert, aber da funktioniert es auch nicht.

...zum Beitrag

Bild/Text beliebig verschieben (HTML)?

Hallo zusammen im Moment Arbeite ich an einer Homepage wo ich das Problem habe, das ich Texte nicht auf ein Bild billig verschieben kann, wie ich will.

Es hat, mit Position gut funktioniert wurde mir aber leider von meinem Arbeitgeber verwehrt.

Ich probierte es mit Padding, margin aus und z-index aber es Funktionierte dennoch nicht. Also komm ich zu der Frage wisst ihr Vllt welche befehle es noch gibt, wo man Objekte beliebig verschieben kann wie man möchte?

...zum Beitrag

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

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

Ist es möglich die Scroll-Position zu verändern in HTML/CSS?

Ich habe einen festen Header, welcher 7% der Seite beansprucht. Wenn ich jetzt auf einen Anker klicke, der zu einer Section führt (also z.B '#home') dann Scrollt der Browser immer so weit, bis die Section ganz oben auf der Seite ist, also unter dem Header. Die Scroll-Position müsste also um 7% verschoben sein. Ist das ohne JavaScript möglich?

...zum Beitrag

Localhost spinnt rum?

Ich benutze XAMPP zum Testen meiner Website, hat auch bis jetzt alles immer gut geklappt...

Meine Websites speichere ich jeweils in Unterordnern in htdocs, benutze erstmal nur HTML und CSS, darum geht es jetzt nämlich auch.

Einige Daten:

Betriebssystem: Linux | Ubuntu 20.04
Editor: gedit
Browser: Firefox 98.0.2 (64bit)

Das Problem ist dass immer wenn ich in meinem CSS-Code etwas ändere, es dann abspeichere und schließlich im Browser öffne, werden meine Änderungen nicht angezeigt. Wenn ich allerdings Sachen in der HTML-Datei ändere werden diese angezeigt.

Einige Klarstellungen:

Ich bin mir zu 100% sicher, dass ich die richtige CSS-Datei bearbeite und auch im richtigen Ordner abspeichere.
Die CSS-Datei wurde mit folgendem Code in der HTML-Datei verwiesen:

<link rel="stylesheet" href="style.css">

(Außerdem hat das Problem ja jetzt erst begonnen.)

Ich habe keine Fehler in der CSS-Datei eingebaut, also bspw. zwei Semikolons, unbekannte Befehle etc.

Kann mir da jemand weiterhelfen??

...zum Beitrag

HTML5, CSS, PHP | Inhalt ist viel zu klein | Zoom funktioniert nicht richtig?

Hallo,

ich habe ein Problem mit meiner HTML Seite. Ich muss für die Schule eine kleine Login Website erstellen. Mein Problem die Website schaut auf 250% so aus, wie ich sie haben möchte... Jedoch meine Lehrerin wird sich diese auf 100% anschauen... 😂 Hat irgendwer eine Ahnung, wie man das außer mit dem Zoom "Befehl" in CSS standartmäßig auf 250% festlegen kann? Würde mich riesig freuen, falls mir wer weiterhelfen könnte.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen