Bild an Div Container anpassen?

Das Bild ist erstmal nur Platzhalter, da kommt später noch ein Timer rein (aber erst mit JavaScript). Nun soll das Bild aber halt in der Mitte des Bildes auf einer bestimmten Höhe sein. Ich hab bis jetzt mit Padding gearbeitet, aber da der Container je nach der Größe der Seite (das ganze soll halbwegs responsive sein) immer größer als das Bild ist, haut das mit dem Padding da nicht komplett hin. Da ich allerding auch das Prinzip mit dem zentrieren eines divs mit 2 weiteren Containern überhaupt nicht kann, ist mein Ansatz jetzt, dass sich das Bild immer dem Container anpasst in dem es ist. Darüber ist bereits so eine 3er Reihe mit Containern, aber da hat mir ein Freund geholfen, der gerade nicht da ist. Wenn ihr wollt, setze ich dann noch n Bild ran, wo ihr euch das nochmal genau ansehen könnt, ansonsten hier die betreffenden Code-Zeilen:

HTML:

</div>

CSS:

.Timer-container {

display: block;

padding-top: 10%;

padding-left: 25%;

padding-right: 25%;

padding-bottom: 30%;

}

Ich hoffe ihr könnt mir helfen!

Eure Amy

4 Antworten

Sonnenschauer

24.04.2018, 14:35

Bild zum Beitrag

Das ist bei einer Beispielsgröße (hab einfach mal bei dem Responsive Tool rumgespielt)

Isendrak

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

programmieren

24.04.2018, 14:46

So sollte klappen: https://jsfiddle.net/isendrak/6u1tarp6/

Sonnenschauer

24.04.2018, 14:36

Bild zum Beitrag

Das ist das woran ich am meisten arbeite. Da soll es halt echt gut aussehen, der Rest soll soweit wie möglich responsive sein, aber ist auch nicht schlimm wenn nicht. Daher arbeite ich viel mit %

Gaterde

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

24.04.2018, 14:32

Meinst du sowas:

.Timer-container {
    display: inline-block;
    zoom: 1;
    padding: 50px;
}

Sonnenschauer

Fragesteller

24.04.2018, 14:34

ich versuchs mal,

aber ich muss das mit dem Padding so aufspalten, weil das ansonsten auf der Seite mit dem Button und dem Kreis nicht passt. Hab endlich das Bild hochladen können.

Sonnenschauer

Fragesteller

24.04.2018, 14:46

Ich habs ausprobiert und es hat funktioniert! Zumindest auf allen "Handyformaten" funktioniert es und das ist das wichtigste!

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

...zur Frage

Wie macht man eine HTML Webseite responsive?

Ich habe in einem div Container zwei div Container nebeneinander.

Wenn man die Webseite vom Handy aus öffnet, sollen die zwei div Container welche nebeneinander sind übereinander angezeigt werden, ansonsten sieht der Text echt schlecht aus, wie kriege ich das hin?

...zur Frage

Div Button über andere Div Container legen?

Ich habe eine Webseite erstellt, welche mehrere Div-Container beinhaltet. Nun habe ich einen Button mittels Div erstellt. Jedoch ist der Button nicht sichtbar wenn ich andere Div-Container "aktiviert" habe. Mir ist bewusst das sich dies mit dem z-index regeln lässt, jedoch bei allen Div-Containern, außer bei dem mit dem Button.

Ohne andere Div-Objekte funktioniert er problemlos.

Danke im Vorraus!:)

...zur Frage

Verschachtelte DIV-Container in einer Reihe?

Ich versuche dieses Beispiel wie unten im Bild zu schaffen.

...zur Frage

Warum reagiert mein Div Container nicht auf die Click-Anweisung?

Hi mal wieder eine Frage.

Auf der HTML Seite werden mir die 2 Divs generiert, aber wenn ich dann drauf Klicke kommt kein alert.

Wieso kann das nicht erkannt werden?

...zur Frage

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zur Frage

HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

...zur Frage

Bild in einem Parallax Container etwas abschneiden?

Moin,

ich habe eine Parallax Container direkt unter die Nav Bar eingefügt. Es sieht eigentlich recht hübsch aus, auch den Effekt mag ich.

Aber leider ist das Bild etwas hoch, so dass auf der Seite nur der obere Teil des Bildes angezeigt wird.

Kann man das Bild in einem Parallax beschneiden (also etwas vom oberen Teil des Bildes entfernen), oder das Bild zentrieren? Ich würde gerne die Mitte zu beginn sehen und dann diesen scroll Effekt haben. Das Bild sieht momentan wie mittig abgeschnitten aus. Der obere Teil wird angezeigt und der Untere ist nicht vorhanden.

Falls es hilft:

 <div class="parallax-container valign-wrapper">
      <div class="section no-pad-bot">
        <div class="container">
          <div class="row center">
            <h1 class="header col s12 light">TEST</h1>
          </div>
        </div>
      </div>
      <div class="parallax"><img src="img/pic.png"></div> 
    </div>

Style: .parallax-container { min-height: 380px; line-height: 0; height: auto; color: white; }

.parallax-container .section { width: 100%; }

@media only screen and (max-width : 992px) { .parallax-container .section { position: absolute; top: 40%; } #index-banner .section { top: 10%; } }

Es hat keinen tieferen Sinn, es ist grade nur eine Spielerei :)

Danke im Voraus.

...zur Frage

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zur Frage

Warum funktioniert mein Text Decoration nicht?

CSS:

body{

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

margin: auto 0;

}

.nav{

background: rgb(0, 47, 255);

padding: 0.3em;

color: white;

text-decoration: none!important;

.contact{

text-decoration: none;

}

HTML:

<body>

XXX <span>XXX</span>

</div>

<a class="contact" href="#">Contact</a>

<a class="about-me" href="#">About Me</a>

<a class="projects" href="#">Projects</a>

</div>

</container>

<div>

Test

</div>

</container>

</body>

...zur Frage

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Bild im HTML/CSS verrutscht seitlich?

Hallo,

ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.

Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.

Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.

Also habe ich mir diesen Code hier ausgedacht:

<html>
<head>
<style>


#example {
    box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
    /*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
    margin-left: -10vw;
    margin-right: -10vw;
    margin-top: 0px;
    margin-bottom: 6vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 0px;
    padding-bottom: 0px;
    boarder-left: 0px;
    boarder-right: 0px;
    boarder-top: 0px;
    boarder-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2vh;
    left: 0px;
}
</style>
</head>
<body>
<div id="example">
    <img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>

</body>

Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.

Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.

Woran liegt das und wie kann ich das vermeiden?

(Firefox Dev-Edition 66.0b1 (64-bit))

...zur Frage

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

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen