„div gallery von 4 bildern“ mittig auf die seite bringen?

2 Antworten

Dies können Sie mit den Flex-Boxen erreichen.

  1. Wickeln Sie die Bilder in Blöcken mit "padding: 2.5px;" Eigentum. Die "Paddings" von zwei benachbarten Blöcken ergeben zusammen die gewünschten 5 Pixel.
  2. Definieren Sie den Hauptblock als Flexbox.
  3. Richten Sie die untergeordneten Blöcke in der Mitte mit der Eigenschaft "justify-content: center;" aus.
  4. Stellen Sie die Eigenschaften "display: block;" und "max-width: 100%;" für die Bilder so ein, dass sie abnehmen, wenn die Galerie nicht auf den Bildschirm passt.

Demo: https://codepen.io/glebkema/pen/ZZQWda?editors=1100

HTML:

<div class="gallery">
	<div class="gallery-item"><img alt="" src="//placehold.it/150x150/936/fff/?text=1"></div>
	<div class="gallery-item"><img alt="" src="//placehold.it/150x150/693/fff/?text=2"></div>
	<div class="gallery-item"><img alt="" src="//placehold.it/150x150/369/fff/?text=3"></div>
	<div class="gallery-item"><img alt="" src="//placehold.it/150x150/f63/fff/?text=4"></div>
</div>

CSS:

.gallery {
	display: flex;
	justify-content: center;
}
.gallery-item {
	padding: 2.5px;
}
.gallery-item > img {
	display: block;
	max-width: 100%;
}

Schreib ins CSS

div {
 display: table;
 margin: auto;
}

Alex

jetzt kleben alle bilder aneinander & rechts ist noch eine menge platz übrig?

0
@needphysics
jetzt kleben alle bilder aneinander & rechts ist noch eine menge platz übrig?

Weil Dein Code einen Fehler hat

0

HTML/CSS Probleme mit floats?

Schönen guten Abend!

Ich habe ein Problem, wie bereits im Fragetitel erwähnt, mit Floats. Mein Vorhaben war es, einen Kasten zu erstellen, in dem links ein Bild mit einer Breite von 50% liegt sowie rechts ein weiterer Kasten mit Textinhalt. Dazu habe ich das Bild mit 50% Breite nach links gefloatet und den Textkasten dementsprechend nach rechts (siehe Quellcode unten). Als ich dem übergeordneten Kasten (main-container) schließlich einen Rahmen gegeben habe, erwartete ich, dass dieser beide Elemente (Bild und Textfeld) vollständig umschließt. Stattdessen kam Folgendes dabei heraus:

Wie kommt es zu diesem Umstand? Solche Probleme treten bei mir häufig nur unter der Verwendung von Floats auf. Ich kann sie nur nicht so recht nachvollziehen. Alles in allem ist es mir wichtig, mit relativen Größenangaben zu arbeiten, damit sich die Inhalte bei Verkleinerung/Vergrößerung des Browserfensters auch gemäß prozentual anpassen.

Wer kann mir da ein wenig weiterhelfen und / oder mir sagen, warum dieses Problem auftritt?

Über mögliche Alternativen würde ich mich auch freuen! Danke im Voraus!

Quellcode mit Internal CSS:

<!DOCTYPE html>
<html lang="de-de">
  <head>
    <meta charset="utf-8">
    <title>Hilfe!</title>
  
    <!-- INTERNAL-CSS -->
    <style>
      .main-container {
        width: 75%;
        margin: 0 auto;
        border: 3px solid #000;
      }
  
      img {
        width: 50%;
        height: auto;
        float: left;
      }
  
      .text-container {
        width: 50%;
        float: right;
        font-size: 1.5rem;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div class="main-container">
      <img src="kueche.jpg" alt="Küche">
      <div class="text-container">
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      </div>
    </div>
  </body>
</html>
...zur Frage

HTML-Code: massiver Fehler?

Guten Abend,

ich habe ein kleines Problem mit dem ESP8266. Mein Programm bleib, bei einem direktem Unterbruch der Internetverbindung, immer bei diesem HTML-Code stecken. Wollte nun mal fragen ob hier etwas Massives falsch ist.

Bei normaler Internetverbindung enstehen keine Probleme, nur beim Unterbruch, und dies führt dazu, dass mein ESP in der Schlaufe stecken bleibt, sodass es die Zeilen nicht mehr senden kann. (immer an diesem Punkt)

<style>
  .ball {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: ;
    top: 0%;
    left: -5%;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle at 100% 0%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%); //blue
  }

</style>

<style>
  .ball:before {
    content: ;
    position: absolute;
    top: 1%;
    left: 0%;
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
    -webkit-filter: blur(5px);
    z-index: 2;
  }

</style>

<style>
  .stage {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 20px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }

</style>
<section class=stage>
 <figure class=ball><span class=shadow></span></figure>
</section>
...zur Frage

html / css navbar und dropdown menü?

Hey liebe Community,

ich habe ein kleines html Problem :)

Ich möchte gerne auf einer Website ein Dropdown Menü in der Navbar machen. Hat alles geklappt, bis auf eine sache und zwar wenn ich über "Social Media" fahre, dann werden "Twitter" und "YouTube" zwar richtig angezeigt aber der navbar hintergrund wird bei denen auch noch angezeigt... hat wer eine Lösung für dieses kleine Problemchen? :)

Hier ist das CSS Dokument:

nav {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #383638;
  overflow: hidden;
  list-style-type: none;
  display: block;
}
li {
  float: left;
  display: block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #008a8a;
}
.active {
  background-color: #025c6c;
}
#socialmedia_dropdown {
  display: none;
}
.nav_right {
  float: right;
}

Hier ist das html Dokument:

<!DOCTYPE html>
<!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->
<html lang="de">
  <head>
    <title>
      Projekt-Z3ro.de
    </title>
    <meta charset="utf-8">
    <link href="style.css" rel="stylesheet">
    <script href="scripts.js"></script>
  </head>
  <body>
    <nav>
      <li><a href="#" class="active">Test</a></li>
        <span><li id="dropdown">
          <a id="socialmedia" onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Social Media</a>
          <div id="socialmedia_dropdown">
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">Twitter</a>
            <a onmouseover="socialmedia()" onmouseout="socialmediaout()" href="#">YouTube</a>
          </div></li></span>
          <li><a href="#">Impressum</a></li>
          <li class="nav_right"><a href="#" class="register">Registrieren</a></li>
          <li class="nav_right"><a href="#" class="login">Einloggen</a></li>
    </nav>

    <script>     function socialmedia() {       document.getElementById("socialmedia_dropdown").style.display = "block";     }     function socialmediaout() {       document.getElementById("socialmedia_dropdown").style.display = "none";     }     </script> <!-- Dieser Teil ist für ALLE html Seiten vorgesehen -->   </body> </html>

...zur Frage

Was ist das für ein Gegenstand oder Gerät (mechanisches Gerät). ?

Was ist das für ein Gegenstand oder Gerät (mechanisches Gerät). Bisher konnte mir niemand sagen, was das für ein Gerät ist. Es hat eine Höhe von 16cm eine Breite von 8cm. Im Innenraum sieht man eine Zahnradmechanik. Der Zylinder ist mittig geteilt und lässt sich drehen. Auf dem silberfarbenen Millimetermaßstab in der Mitte ist unten ein Bereich von 0-60mm, beim oberen von 0-360 mm eingraviert. Oben am Gerät sind zwei Dreher, der kleine ist anscheinend für eine Feinjustierung… Aber für was?

Wie auf den Bildern zu sehen ist oben ein Logo eingraviert. Kennen Sie das zufällig? Im Holzkästchen wie ebenfalls auf den Bildern zu sehen eist ein Papier mit Wappen eingeklebt auf dem steht Ludwig Petz von Lichtenhof

...zur Frage

Was möchtest Du wissen?