HTML / CSS: Wie Bild nach rechts verschieben?

Da mein Code, wollte nach rechts verschieben.

<a target="_blank" href="https://www.amazon.de/gp/product/B016EZUMGQ/ref=as_li_tl?ie=UTF8&camp=1638&creative=6742&creativeASIN=B016EZUMGQ&linkCode=as2&tag=9393930b-21&linkId=2fd661b6a6382fca1ba22f1bb933eeef"><img border="0" src="//ws-eu.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=DE&ASIN=B016EZUMGQ&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL160_&tag=9393930b-21"></a>
<img src="//ir-de.amazon-adsystem.com/e/ir?t=9393930b-21&l=am2&o=3&a=B016EZUMGQ" width="1" height="1" border="0" alt="" style="border:none !important; margin:px !important;" />

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, programmieren

19.05.2020, 19:14

Sind komplette, anständige Sätze bereits zu schwierig geworden oder wieso schreibst du so seltsam?

Das erste, was auffällt, sind Markup-Fehler.

Dem ersten img-Element fehlt ein alt-Attribut.
Das border-Attribut ist obsolet. Setze den Rahmen via CSS mit dem border-Property. Beim zweiten img-Element machst du das doch sogar schon.
Dem margin-Property fehlt ein konkreter Wert.

Die !important-Regeln in deinen Styles verraten zudem, dass du entweder nicht verstanden hast, wie sich die Gewichtung bei Kaskaden berechnet oder dein CSS bereits jetzt schon schlecht ist. Normalerweise ist !important nämlich gar nicht notwendig.

Styles sollten zudem besser in einen eigenen style-Block oder eine eigene Datei verlagert werden. So wird alles einfacher überschau- und wartbar. Redundanter Code kann eingespart werden. Momentan schreibst du für verschiedene Elemente, die die gleichen Styles nutzen, doppelten Code.

Zu deinem Fragetitel: Das Bild lässt sich mit dem CSS-Property margin-left nach rechts verschieben. Es lässt sich auch komplett an den rechten Rand seines Containers rücken, indem man bspw. das float-Property mit dem Wert right verwendet.

Ähnliche Fragen

weiße Ecken bei border-radius?

Hi,

ich habe eine Navbar von Bootstrap auf meiner Website und ein Accountsystem, bei dem das Profilbild oben rechts angezeigt wird. Aus irgendeinem Grund werden, trotz, dass ich einmal per Bootstrap Klasse rounded-circle und auch selbst:

border-radius: 50%;

weiße Ecken angezeigt. Das Bild ist eigentlich transparent. Am Bild selber kanns aber net liegen, weil ich unterschiedliche getestet habe...

Mein Code:

<img src="/img/profile-images/donut.png" alt="user-img" class="user-img-navbar rounded-circle shadow-lg">

So sieht das dann aus:

Ich weiß nicht ob´s man gut erkennen kann aber direkt um das bild sind so weiße ecken. ich habe auch schon die hintergrundfarbe der navbar auf weiß geändert... man sieht die ecken aber trotzdem noch...

Jemand ne idee warum da weiße ecken sind? :D

...zur Frage

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?

...zur Frage

wie unterscheidet man bilder in HTML/CSS?

Okay, ich habe auf meine Website nen Bild eingefügt,

ganz normal

und das zweite

<img src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcQkZ6w8bYc2wm0VHc6SPTWVPGZogOf5Oseh35yBMeBbl2ByMCnTPoawYRQcuY9M"

height="646" weight="818"

aber jetzt will ich beide an andere positionen mit css verschieben.

aber dann schreibe ich img {

position:relative;

left:0%;

bottom:60%;

}

wie unterscheide ich das jetzt vom zweiten welches ich wo anders hin machen wollte?

falls ich etwas absolut falsch gemacht habe tut es mir leid, ich lerne HTML/CSS seit 2 Tagen

...zur Frage

HTML - Wie kriege ich Text in einen Facebook-Teilen-Button?

Ich kann ohne weiteres einen Text in einen WhatsApp-Teilen-Button bringen, der dann bei einem Empfänger angezeigt wird.

Als Beispiel:

Geht das auch bei Facebook? Hier der HTML-Text zu Facebook.

An welcher Stelle müsste ich den Text "Dieses%20ist%20ein%20Beispieltext%20für%20Gutefrage." in Facebook einfügen so wie in WhatsApp?

...zur Frage

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

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

Positionierung von Pfeilen in Flexboxen?

Hallo,

ich wollte bei meiner Website eine kleine Slideshow einbauen. Dazu habe ich erst einmal Pfeile erstellt. Diese wollte ich nun richtig positionieren. Ich hatte die Idee, eine Flexbox um die Bilder mit den Pfeilen zu erstellen und die Pfeile dann einfach mit align-items zu positionieren. Irgendetwas habe ich allerdings falsch gemacht. Vielleicht fällt euch ja mein Fehler auf. Bin für jeden Tipp dankbar.

html:

<div class="slide">
            <div id="footer2">
                <div id="bilder">
                    <div id="flexbox">
                        <div class="post">
                            <img src="wohnzimmer.png" alt="Wohnzimmer">
                            <div class="post-s">
                                <h2>Einbaumöbel</h2>
                            </div>
                        </div>
                        <div class="post1">
                            <img src="badezimmer.png" alt="Badezimmer">
                            <div class="post1-s">
                                <h2>Badmöbel</h2>
                            </div>
                        </div>
                        <div class="post2">    
                            <img src="einbauschränke.png" alt="Einbauschränke">
                            <div class="post2-s">
                                <h2>Einbauschränke</h2>
                            </div>
                        </div>
                    </div>
                    <div class="post3">
                        <img src="hochbett.png" alt="Hochbett">
                        <div class="post3-s">
                            <h2>Kinderhochbetten in Eichemassivholz</h2>
                        </div>
                    </div>
    
                    </div> 
                    
                </div>
                <a class="pfeil pfeil-links"><span>&#10094;</span></a>
                <a class="pfeil pfeil-rechts"><span>&#10095;</span></a>
            </div> 
        </div>

Css:

.slide{
    display: flex;
    border: solid black;
}
.pfeil {
    position: absolute;
    top: 0px;
    bottom: 0px;
    font-size: 50px;
    font-weight: bold;
    display: flex;
    align-items: center;
    
}
.pfeil-links {
    left: 0;
}
.pfeil-rechts {
    right: 0;
}

...zur Frage

HTML Rounded Borders für's Bild geht in Wordpress nicht?

Moin,

ich habe ein kleines Problem und weiß mittlerweile nicht mehr weiter.

Es ist recht simpel, ich will, dass auf meiner Wordpress-Seite alle Bilder einen Border-radius von z.B. 7px haben. Allerdings kann ich in Wordpress keinen Borderradius benutzen, es wird einfach nicht angenommen oder so, die Bilder bleiben mit Ecken.

Also habe ich mal eine normale .html Seite erstellt und auf dieser funktioniert es einwandtfrei.

Hier der Code, auf der HTML seite

<img class="rounded-corner" src="https://dummyimage.com/wuxga" width="600px;"/>
<style>
.rounded-corner { 
  border-radius: 7px;
}
</style>

(Das Bild habe ich durch ein Beispielbild ersetzt)

Eben diesen Code habe ich in Wordpress dann auch mal auf die Seite eingefügt, allerdings bleiben die Bilder mit ecken. Ich habe auch über das <img> ein div gelegt mit einer class (dachte das hilft vllt), aber es ging auch nicht.

Ich benutze bei Wordpress den Editor "Elementor" also nicht den Standard Editor von Wordpress selbst. Man kann bei Elementor zwar Bilder manuell round machen an den Ecken, aber ich würde gerne einen Code haben, der dies "Sitewide" macht.

Wenn jemand eine Idee hat, gerne melden ;)

Vielen Dank!

...zur Frage

Github Readme: Bild neben Text?

Hey Leute,

Könnte mir bitte jemand weiterhelfen und sagen, wie ich bei Github ein oder mehrere Bilder neben einen Text (rechts davon) packen kann?
Mein bisheriger Code sieht so aus (Die Bilder erscheinen dann unter dem Text):

</p>

Es wäre sehr hilfreich:)
Liebe Grüsse

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

Html/CSS/Javascript Website Bild wird nicht angezeigt?

Hi, will dass das erste Bild direkt angezeigt wird und das der Beispieltext rechts steht. Wegen Zeichen kurz gehalten. Danke!

<div class="mySlides" id="expandedImg">
<img src="bilder/schuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/schönschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/mann.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/lederschuh.jpg" style="width:35%">
</div>
<div class="mySlides">
<img src="bilder/basketball.jpg" style="width:35%">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="bilder/schuh.jpg" style="width:90%" onclick="currentSlide(1)" alt=""></div>
<div class="column">
<img class="demo cursor" src="bilder/schönschuh.jpg" style="width:90%" onclick="currentSlide(2)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/mann.jpg" style="width:90%" onclick="currentSlide(3)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/lederschuh.jpg" style="width:90%" onclick="currentSlide(4)" alt="">
</div>
<div class="column">
<img class="demo cursor" src="bilder/basketball.jpg" style="width:90%" onclick="currentSlide(5)" alt="">
</div>
</div>
</div> 
<div class="text">
<a>Beispieltext</a>
<p>Beispieltext...</p>
</div>
* {box-sizing: border-box;}
.container {
position: relative;
margin-top: 80px;
}
.mySlides {
display: none;
margin-bottom: -45px;
margin-top: 65px;
margin-left: 10px;}
.cursor {cursor: pointer;}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 300px;
width: auto;
padding: 16px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;}
.next {
right: 0;border-radius: 3px 0 0 3px;} 
.prev:hover,
.next:hover {background-color: rgba(211, 211, 211, 0.8);}
.caption-container {text-align: center; background-color: rgb(255, 255, 255);color: white;}
.row:after {content: ""; display: table; clear: both;}
.column {float: left; width: 7%;}    
.demo {opacity: 0.6;}
.active,
.demo:hover {opacity: 1;}
.row {margin-top: 65px; margin-left: 10px;}
.text {display: flex; justify-content: flex-end; width: 40%;}
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;}

...zur Frage

HTML: Bild durch bedingte Einstellungen anzeigen?

Wie kann ich ein Bild durch eine bedingte Option anzeigen? Es soll z.B. am Donnerstag, wenn die Uhrzeit zwischen 7 bis 21 Uhr ist, ein bestimmtes Bild anzeigen.

<script>
  document.write('<div id="contHour"></div>');
  mainDate = new Date();
  myHour = mainDate.getHours();
  mySeconds = mainDate.getSeconds();
  const weekday = [ "bild1.jpg", "bild2.jpg", "bild4.jpg", "bild14.jpg", "DO14.png", "bild20.jpg", "bild21.jpg" ];
  const d = new Date();
  let day = weekday[d.getDay()];
  <!--	document.getElementById("demo").innerHTML = "<img src='"+day+"' />";>

  if (myHour >= 21 && myHour < 7) { //ab dieser Zeit wird ein bestimmtes Bild angezeigt
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 7 && myHour < 8) {
    document.getElementById("contHour").innerHTML = '<img src="M7.png" alt="kein Bild" />';
  }
  else if (myHour >= 8 && myHour < 9) {
    document.getElementById("contHour").innerHTML = '<img src="M8.png" alt="kein Bild" />';

...zur Frage

wie kann ich ein Bild nach rechts verschieben HTML?

Wie kann ich zwischen den beiden Bildern einen Abstand lassen bzw das 2 Bild nach rechts verschieben?

der HTML CODE:

</iframe>

Beide haben den gleichen quellcode alsooben 2x habe ich es eingefügt in der website

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen