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

Bild zum Beitrag

01.10.2021, 21:30

html-code: <!DOCTYPE html> <html lang="de"> <head> <title></title> <link rel="stylesheet" href="../CSS/stylesheet.css"> </head> <body> <nav> <div>

<ul> <li><a href="Produkte.html">PRODUKTE</a></li> <li><a href="Über_uns.html">ÜBER UNS</a></li> <li><a href="Start.html">START</a></li> <li style="float:left"><a href="Startseite.html">AMBITS</a></li> </ul> </div> </nav> <div id="img1"> <img src="../images/image1.png/" alt="Das Bild kann nicht angezeigt werden"> </div> </body> </html>

css-code:

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #000000; position: relative; top: 0; width: 100%; font-family: Copperplate Gothic; }

li { float: right; } li a { display: block; color: white; text-align: center; padding: 25px 30px; text-decoration: none; font-size: 15px; } nav { border-bottom: 1px solid #ccc; } body { background-color: black } #img1 { position: absolute; top: 0; margin-top: 1px; left: 0; }#img1 { position: absolute; top: 0; margin-top: 1px; left: 0; width: 1px; height: 1px; }

threadi

01.10.2021, 20:57

Wie sieht der HTML-Code dazu aus?

Lucas557

Fragesteller

01.10.2021, 21:25

<!DOCTYPE html>
<html lang="de">
<head>
    <title></title>
    <link rel="stylesheet" href="../CSS/stylesheet.css">
</head>
<body>
    <nav>
        <div>
        
mehr geht nicht

threadi

01.10.2021, 21:28

Dann stell den Quellcode bitte irgendwo bereit.

Lucas557

Fragesteller

01.10.2021, 21:31

ich hab jetzt die frage ergänzt

3 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Programmieren & Softwareentwicklung

01.10.2021, 21:37

Wenn ich eine Seite mit dem Quellcode aufrufe ist das Bild bei mir oben links in der Ecke - auch ohne die Styles, die Du für #img1 hinterlegt hast. Ich kann das Problem aus deinem Screenshot somit nicht nachvollziehen.

Woher ich das weiß:Berufserfahrung

Lucas557

Fragesteller

01.10.2021, 21:45

okay danke dann wirds wahrscheinlich an der auflösung liegen oder?

threadi

01.10.2021, 21:45

@Lucas557

Kann ich ohne einen Link zur betreffenden Seite nicht beurteilen.

Lucas557

Fragesteller

01.10.2021, 21:46

@threadi

oh okay aber danke ich versuch's mal an einem anderen Gerät
Schönen abend noch :)

regex9

02.10.2021, 01:50

@Lucas557

Nein, es liegt daran, dass der obige Code offensichtlich von dem abweicht, den du für deine Webseite auf dem Screenshot verwendet hast.

Der #img1-Selektor wirkt auf dein Bild (bzw. den Bildcontainer) und drückt durch die absolute Positionierung das Bild in die linke obere Ecke. Die Rolle des Ankers (von dem aus sich ausgerichtet wird) übernimmt hierbei das body-Element.

Würde man nun annehmen, dass du keinen der beiden #img1-Selektoren verwendest, müsste man zumindest davon ausgehen, dass das Bild linksseitig eine breite transparente Fläche hat.

MooKuh

02.10.2021, 08:30

Ich würde deinen Header umbauen. Das macht man nicht (mehr?) mit Float, sondern eher mit Display: flex;

Das verhält sich responsiv ganz anders und ist viel einfacher zu bearbeiten.

Setze den Header außerdem auf Position fixed, dann wird das Bild vermutlich automatisch - zumindest etwas - nach oben rutschen.

ichmagmemes

01.10.2021, 20:23

die einfachste lösung wäre:

position: absolute;

top: 0;

margin-top: beliebige px;

left: 0;

margin-top hängt von deiner header höhe ab, damit das bild nicht unter AMBITIS steht

Lucas557

Fragesteller

01.10.2021, 20:30

Hey :)
danke für die Antwort aber leider hängt das bild egal was ich mach da unten fest :(

ichmagmemes

01.10.2021, 20:30

@Lucas557

ist das nur ein <img> oder ist es in einem <div>?

Lucas557

Fragesteller

01.10.2021, 20:31

@ichmagmemes

es ist in einem <div>

ichmagmemes

01.10.2021, 20:31

@Lucas557

zeig mal deinen div style also das CSS davon

Lucas557

Fragesteller

01.10.2021, 20:36

@ichmagmemes

#img1 {
        position: absolute;
        top: 0;
        margin-top: 1px;
        left: 0;
}

ichmagmemes

01.10.2021, 20:37

@Lucas557

achso hm versuch mal dem div eine höhe und breite zu geben(ungefähr vom bild, bisschen größer) ?

und sicher, dass der div funktioniert? gib ihm mal ein background-color: red;

Lucas557

Fragesteller

01.10.2021, 20:40

@ichmagmemes

der div funktioniert hab ich grad getestet.

Lucas557

Fragesteller

01.10.2021, 20:41

@Lucas557

#img1 {
        position: absolute;
        top: 0;
        margin-top: 1px;
        left: 0;
        width: 1px;
        height: 1px;
}

ichmagmemes

01.10.2021, 20:42

@Lucas557

hm da weiß ich auch nicht mehr weiter sorry.. ich kann das am handy grad nicht nach programmieren

Lucas557

Fragesteller

01.10.2021, 20:43

@ichmagmemes

alles gut kein problem ich probier dann einfach bisschen herum
danke für deine Antworten :)

schönen abend noch

threadi

01.10.2021, 21:28

Absolute Positionierung erscheint einfach, ist aber gerade bei responsiven Ansichten für Mobilgeräte absolut ungeeignet.

Hey, ich lerne seit neuem HTML und CSS, und würde gerne wissen, was der Unterschied zwischen diesen beiden Elementen ist

...zur Frage

Minus Padding CSS?

Ich muss eine Website mit Phase 5 HTML Editor machen und dafür brauche ich ein negatives Padding… ich habe gefühlt alles probiert und z.B. margin: -10px funktioniert aber Padding eben nicht…

Vielen Dank schon mal

...zur Frage

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

Im CSS-Dokument

...zur Frage

text-align funktioniert nicht?

Hey Leute, ich versuche zurzeit eine Website mit Atom zu erstellen. HTML und CSS.

Ich brauch zurzeit den "Command" text-align. Aber irgendwie funktioniert dieser nicht. Und wir nicht mal aufgelistet. Woran liegt das?

http://prntscr.com/k67npb

...zur Frage

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;
}

...zur Frage

Tabelle in html mit CSS verschieben?

Habe eine Tabelle:

<table class="anker"

<tr>

<td>Anker 1</td>

</tr>

wollte die tabelle dann mit css:

table.anker{

margin-top: 50px;}

verschieben, aber wenn verschoben wird verschwinden die rahmen von der Tabelle

...zur Frage

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zur Frage

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zur Frage

CSS Abstand von Header zu Fensterrand verschwinden lassen?

Hey, ich will den den Abstand zwischen Header und dem oberen Fensterrand verschwinden lassen, es funktioniert aber nicht

Margin: 0 und padding: 0 habe ich probiert, funktioniert aber nicht

...zur Frage

text-align:center; funktioniert nicht?

Ich versuche schon seit geraumer Zeit dieses Problem zu lösen, doch ich komme einfach nicht dahinter, vielleicht kann mir hier jemand netterweise bei meinem Problem weiterhelfen.

<!DOCTYPE html>                             
<style>
  body{
    font-family: Georgia, 'Times New Roman', Times, serif;
  }
  
 #top{
  text-align: center;
 } 
  
 #logo{
    color:rgb(255, 255, 255);
    background-color: crimson;
    display: inline-flex;
    font-size: 32px;
    font-weight: bold;
    padding: 8px;
    margin-top: 16px;
  }
  #logo-name {
font-size: 32px;
font-weight: bold;
margin: 16px;
text-align: center;
  }
</style>
<html>
  <head>
<title> Homepage </title>
  </head>
<body>
  <div id="top"></div>
  <div id="logo">OH</div>
  <div id="logo-name">Homepage</div>
  <div id="main"></div>
  <div id="footer"></div>
</body>
</html>

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

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

CSS background gif UND background color?

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Wie in HTML und CSS Texte und Bilder verschieben?

Hey! Ich habe angefangen mich mit dem erstellen von Websites zu beschäftigen. Ich bin noch ein sehr sehr blutiger Anfänger und Frage mich deshalb folgende Frage:

Wie in HTML & CSS Bilder & Texte verschieben?

Ich möchte nämlich einen Text & ein Bild von der oberen rechten Ecke, nach unten verschieben.

Ich habe das auch schon mit Padding-Top & Right probiert, jedoch verschiebt sich dann der Rest (NavBar & anderer Text) mit nach unten. Wie löse ich das problem?

Ich nutze Visual Studio Code.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen