HTML / CSS: Warum lässt sich das Bild nicht nach links bewegen?

HTML:

<div class="mittecrew_png">
  <img src="mittecrew.png" height="105"; widht="1505";>
  <a href="#"></a>
</div>

CSS:

.mittecrewpng {
  margin-left: 100px;
}

5 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

20.09.2019, 22:04

Zunächst mal ist dein HTML-Code nicht nur unvollständig sondern auch fehlerhaft. Hier

   <img src="mittecrew.png" height="105"; widht="1505";>

gehören die ";" nicht hin und "widht" ist auch falsch geschrieben.

Jetzt wäre noch zu fragen was Du mit "nach links bewegen" meinst? Soll das Bild rechts von Text umflossen werden? Vlt. wäre es gut um das große Ganze zu sehen wenn Du einen Link zur betreffenden Seite postest.

Woher ich das weiß:Berufserfahrung

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, HTML

20.09.2019, 22:58

1) Behebe die Markup-Fehler.

Das Attribut heißt width.
Die Semikolons sind an der Stelle falsch und sollten raus.
Das alt-Attribut, welches das Bild beschreiben sollte, fehlt.
Die von dir angegebene Klasse wird vom Selektor nicht angesprochen.
Da du einen Abstand nach rechts haben möchtest, solltest du auch einen Abstand nach rechts (margin-right o.ä.) definieren.

Korrektur:

<div class="mittecrewpng">
  <img alt="Your image description..." src="mittecrew.png" height="105" width="1505">
  <a href="#"></a>
</div>

2) Nun wirst du bestimmt auf das Problem stoßen, dass ein rechter Abstand nicht angezeigt wird, weil die enorme Breite deines Bildes ganz sicher seinen Container überschreiten wird. Gib also dem Bild selbst den Abstand nach rechts:

.mittecrewpng > img {
  margin-right: 100px;
}

Inwiefern sich dies tatsächlich visuell bemerkbar macht, hängt allerdings vom weiterliegenden Kontext ab (z.B. könnten weitere Containergrenzen überschritten werden). Zudem verbreiterst du effektiv betrachtet nur die Seite.

Ich würde dir von daher raten, dir einmal Gedanken darüber zu machen, ob eine feste Breitenangabe wirklich notwendig ist / inwiefern du das Bild responsive skalierbar einsetzen kannst (z.B. als Hintergrundbild).

NebenwirkungTod

20.09.2019, 22:05

Dazu müsste ich mehr vom HTML & CSS sehen.

Bist du dir sicher, dass das CSS richtig eingebunden ist? Funktionieren andere CSS Sachen?

PS: px zu verwenden ist meistens keine gute Idee für responsive Design

verreisterNutzer

20.09.2019, 22:04

Das lässt sich wahrscheinlich nicht nach links bewegen, weil du da ein margin hast, welches mindestens 100px Abstand verursacht.

Wieso nutzt du für sowas kein In-Line-CSS?

BTW: du hast "width" falsch geschrieben.

Ist da sonst noch ein div?

NebenwirkungTod

20.09.2019, 22:06

In-Line-CSS ist grässlich

verreisterNutzer

20.09.2019, 22:07

@NebenwirkungTod

Lädt in diesem Fall aber schneller.

NebenwirkungTod

20.09.2019, 22:07

@verreisterNutzer

Schneller /= besser

BloodyKarin

20.09.2019, 22:04

widht= <---sicher dass du das richtig geschrieben hast?

Ähnliche Fragen

Bilder auf gleiche Höhe in HTML/CSS?

Hallo,

ich habe nochmal eine Frage zu meiner Website.

Kann mir jemand sagen, wie ich die beiden linken Bilder auf die gleiche Höhe wie das rechte Bild bringen kann? Ich finde bei Google nichts und weiß nicht weiter.

Hier der Ausschnitt meines Codes:

HTML:

<div id="bilder">
  <div id=bild1>
    <img src="bild1.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild2>
    <img src="bild2.jpg" alt="Wir bei der Arbeit">
  </div>
  <div id=bild3>
    <img src="bild3.png" alt="Holzschränke"
  </div>

CSS:

#bild1 {
  display: inline;
  margin-left: 500px;
}

#bild2 {
  display: inline;
  margin-left: 50px;
}

#bild3 {
  display: inline;
  margin-left: 50px;
}

...zur Frage

CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}

...zur Frage

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

...zur Frage

CSS: Wie kann ich die Unterlinie des Texts wegbekommen?

Hallo. Irgendwie geht die text-decoration bei mir nicht weg. Bitte helft mir.

HTML:

 <button class="cn"><a href="#">create</a></button>

CSS:

.cn {
  text-decoration: none;
  width: 160px;
  height: 40px;
  background: #23002f;
  border: none;
  margin-bottom: 10px;
  margin-left: 20px;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: .4s ease;
  margin-left: 350px;
  margin-top: 5px;
}

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

Wie kann ich Bilder in HTML bzw. CSS horizontal automatisch verteilen?

Ich möchte gern auf meiner Webseite (Schulaufgabe - die Lehrerin hat natürlich mal wieder alles genau erklärt) einige Bilder horizontal über die Breite des Feldes verteilen. Das aber nicht mit absoluten Werten sondern automatisch da wir auch responsive Design anwenden sollen - wenigstens ein klein wenig zumindest.

Nun schaffe ich es aber maximal die Abstände zwischen den Bildern mit margin einzustellen, dass diese sich automatisch verteilen funktioniert nicht wirklich, auch nicht mit auto.

Hier der Code der bisherigen Klasse für die Bilder:

.BildStartseite{
    width:150px;
    margin-left:2%;
    margin-right:2%;
}

vielleicht könnt ihr mir da ja helfen. Danke im voraus! :)

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zur Frage

Wieso funktioniert margin-left, aber margin-right nicht?

Im CSS-Dokument

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zur Frage

Html/CSS Text neben Bild?

Hallo, ich arbeite seit ungefähr drei Monaten mit html und habe jetzt ein Problem: Ich will einen Text neben mein Bild platzieren, doch immer wenn ich alles nach links floate zerstört das meine navigationsleiste. Möchte noch anmerken, dass meine Skills zu diesem Thema ziemlich beschränkt sind. Hier findet ihr mein CSS - unten html. Danke für eure hilfe! 😊

.topnav {

background-color: rgb(245, 245, 245);

overflow: hidden;

}

.topnav a {

float: left;

display: block;

color: #1d1d1d;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #3f79e6;

color: white;

}

.topnav .icon {

display: none;

}

@Media screen and (max-width: 600px) {

.topnav a:not(:first-child) {display: none;}

.topnav a.icon {

float: right;

display: block;

}

@Media screen and (max-width: 600px) {

.topnav.responsive {position: relative;}

.topnav.responsive a.icon {

position: absolute;

right: 0;

top: 0;

margin-left: 30px;

}

.topnav.responsive a {

float: none;

display: block;

text-align: left;

}

@Media screen and (min-width: 601px){

#produkte {

margin-left: 20%;

float: left;

}

.produkt {

width: 200px;

border: solid #dedcd9;

background-color: #f6f8fa;

padding: 10px;

margin: 20px;

display: block;

text-align: right;

height: 200px;

}

.produkt img {

width: 180px;

padding: 10px;

display: block;

}

p, a, h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, sans-serif;

font-display: block;

}

a {

font-size: x-large;

color:#3f79e6;

}

Das ist mein html:

<!DOCTYPE html>

<head>

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

</script>

</head>

<body>

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

<a href="#about">About</a>

</a>

</div>

<div class="desc"><a>Nike Air</a></div><p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>

</div>

</body>

</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen