HTML Bild vor Text

Ich möchte auf meiner HP in die obere Ecke eine Feedback-Funktion machen und dazu ein Bild verlinken, dass dan eben dahin führt. Aber wenn ich das Bild oben in die Ecke mache, rückt der rest der seite weiter nach unten. bekomme ich das irgendwie hin, dass die seite so bleitb, wie sie ist, also z.B. wie bei word das mit dem "bild vor text"?

4 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

Puepue

22.05.2011, 13:07

Hast du einen LInk zur Seite? Ich vermute mal du suchst "float: left;" und/oder "display: inline;" http://www.css4you.de/float.html

JereOHA

Beitragsersteller

22.05.2011, 13:36

funktioniert :) jetzt hab ich noch ne frage: wie bekomme ich das hin, das dieses bild beim scrollen "mitgeht", also nicht nur an der oberen ecke der seite fest ist, sondern beim scrollen immer in der ecke tz sehen ist (ich hoffe, du weißtwas ich meine...)?

Puepue

22.05.2011, 13:43

@JereOHA

Du meinst so wie die schmutzigen Werbungen auf Download Pages? :P Das kannst du entweder mit einem Javascript-Code machen (Vorteil: Funktioniert in allen Brwosern mit Javascript) oder mit position: fixed; http://de.selfhtml.org/css/layouts/anzeige/fixiert.htm Ich denke, das können mittlerweile alle Browser - der IE6 konnte das aber z.B. nicht - müsstest du ggf. mal ausprobieren :)

Puepue

22.05.2011, 13:45

@Puepue

Hier ist noch der dazu passende css4you Link: http://www.css4you.de/position.html da sieht man unten in der Tabelle dass der IE7 das schon kann. Für den IE6 zu optimieren ist vermutlich nicht mehr nötig, der ist fast garnicht mehr in Gebrauch :)

JereOHA

Beitragsersteller

22.05.2011, 13:46

@Puepue

wo finde ich denn so einen java script-code?

Puepue

22.05.2011, 13:48

@JereOHA

Wenn dus mit Javascript machen möchtest (m.M. nach ist das nicht mehr nötig, weil die Browser das eigentlich alle können), kannst du dir diese Seite hier ansehen: http://www.howtocreate.co.uk/fixedPosition.html

JereOHA

Beitragsersteller

22.05.2011, 14:04

@Puepue

ich habs jetzt mit dem von css4you probiert, funktioniert i-wie nicht...

Puepue

22.05.2011, 16:31

@JereOHA

Poste doch mal einen Link zur Seite - dann kann man das Problem genauer sehen - hier ist auch noch eine Erklärung: http://de.selfhtml.org/css/layouts/fixbereiche.htm

JereOHA

Beitragsersteller

23.05.2011, 14:10

@Puepue

hat sich erledigt, irgendwie hab ichs doch noch hinbekommen :) danke für deine hilfe :)

Equinoxe

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Bilder

22.05.2011, 13:22

Wenn im CSS nichts anderes definiert ist, ist der normale Elementfluß die Reihenfolge der Elemente, so wie sie in der HTML Datei stehen: Untereinander!

Willst du ein Element aus diesem Fluß herausreißen, musst du die Art der Positionierung ändern (standardmäßig ist static definiert) oder Floats verwenden, wenn du Elemente nebeneinander platzieren willst (aber bitte das clear im nachflogenden Element nicht vergessen!).

Darüberhinaus kann man Blockelemente in Inlineelemente umwandeln und umgekehrt, falls es notwendig sein sollte.

McToska

22.05.2011, 13:06

also willst du einen bildlink? da machste einfach da wo der text stehen sollte das bild rein oder dass der text um das bild hreumfließt? dann nimmste am besten float hoffe konnte helfen, Greez McToska

Steppschuh192

22.05.2011, 13:07

Die 'position' Eigenschaft nutzen. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Ähnliche Beiträge

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.

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

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

...zum Beitrag

HTML Farbe ändern im Sekunden-Takt

Hallo, ich möchte im Sekunden-Takt die Farbe eines Textes in HTML ändern, wie geht das nun?

bsp.:

test

Soll seine Farbe von Rot auf Weiß ändern

...zum Beitrag

Transparente bilder in html css einfügen?

hallo wie kann ich diese Bild in html einfügen so das man die Kästchen nicht mehr sieht so das es transparent wird

...zum Beitrag

Dark-Mode White-Mode Schalter Position verschieben?

Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)

Hier der Code der HTML-Seite:

<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>

<form>

<!-- LOGO -->

<div class="Logo">

<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>

</div>

<!-- ----- -->

<!-- HIER BEFINDET SICH DIE FRAGE -->

<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">

<div class="curtain"></div>

<!-- UEBERSCHRIFT -->

<div class="Ueberschrift">

<h1> <b> ÜBERSCHIRFT </b> </h1>

<h2> IMPRESSUM </h2>

</div>

<!-- ----- -->

<!-- BUTTONS -->

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<!-- ----- -->

<!-- KONTAKT -->
<div class="Impressum">

<h2> <u> TEXT </u> </h2>

</div>

<center>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>

<p> TEXT </p>

</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">

<h2> <u> IMPRESSUM </u> </h2>

<h3>TEXT</h3>

<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>

<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>

</p>
<p>
TEXT
</p>

<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

</div>

<!-- ----- -->





</form>

</body>

</html>

...zum Beitrag

HP-Drucker druckt nur den unteren Teil des Textes auf A6-Postkarte?

Ich möchte mit meinem HP Photsmart-Drucker Texte im A6-Format ausdrucken. Dazu habe ich Blanko-Postkarten gekauft, die ich korrekt in das Fotofach eingelegt habe. Ich habe die Datei ganz normal in OpenOffice erstellt und nach der "Drucken"-Auswahl folgende Einstellungen vorgenommen.

Lieder ist das hier das Ergebnis (nicht wundern, ich habe Teile geschwärzt), d.h. der obere Teil der Seite fehlt:

Kennt evtl. jemand das Problem und weiß Rat? Ich bin gerade ziemlich am Verzweifeln... der Virtual Agent von HP ist leider überhaupt keine Hilfe.

...zum Beitrag

Wie ist der rap Text hier so?

Hey guys, hab mal mit meiner Freundin aus jux ein rap Text geschrieben und wollte fragen wo die Fehler drin sind oder generell einfach eine Meinung. Das ist das erste mal also ruhig haha. Das obere ist von meiner Freundin und der Rest von mir;) Aber naja :D Ich kann den Text hier nicht einfügen (siehe Bild)

...zum Beitrag

Navbar in Css und Html drehen?

Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist

Derzeit sieht mein CSS so aus:

.StartseiteNav{

position:fixed;

}

.ArtistsNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(90deg);

}

.InfoNav{

position:fixed;

display:block;

width: 60px;

transform: rotate(-90deg);

}

.TicketsNav{

position:fixed;

}

...zum Beitrag

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

...zum Beitrag

JavaScript (html) Element zentrieren?

Hallo ich habe in JavaScript ein Element erstellen lassen und die Größe perfekt angepasst, nun muss es nur noch zentriert werden aber irgendwie funktioniert nichts, egal was ich versuche bleibt es immer in der linken oberen Ecke!

...zum Beitrag

HTML Texte untereinander Schreiben!

Hallo ich will in HTML einen großen text untereinander schreiben allerdings immer wenn ich dies Versuch es soll eine art impressum werden . Allerdings immer wenn ich dies versuch sind die Texte nebeneinander geschrieben ! ??

Wie mach ich dies ?

...zum Beitrag

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zum Beitrag

Html text rechts schreiben?

Frage steht oben wie kann ich mit HTML rechts schreiben aber nicht das es ganz rechts am Rand ist sonder ich noch jeden centimeter bestimmen kann ob es knapp noch an der Ecke liegtbider zwischen Center und rechts

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen