Willkommen Gast. Bitte einloggen oder registrieren. Haben Sie Ihre Aktivierungs E-Mail übersehen?
25.07.2021, 01:16:44

.
Einloggen mit Benutzername, Passwort und Sitzungslänge

Mitglieder
  • Mitglieder insgesamt: 25777
  • Letzte: wombat1
Statistiken
  • Beiträge insgesamt: 746694
  • Themen insgesamt: 60054
  • Heute online: 248
  • Am meisten online: 2287
  • (22.01.2020, 19:20:24)
Benutzer Online
Mitglieder: 5
Gäste: 180
Gesamt: 185

Autor Thema: [gelöst]  HTML/CSS-Problem  (Gelesen 591 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

[gelöst] HTML/CSS-Problem
« am: 21.01.2021, 18:11:25 »
Servus Minters,

vermeintlich schwierige Sachen gehen oft unerwartet leicht, vermeintlich leichte Aufgaben machen einen wahnsinnig.
Seit 3 Tagen sitze ich jetzt an einer dieser vermeintlich leichten Aufgaben.

Hiiiiilfe!  :o :o :o

Unter h1 habe ich eine linksbündige Überschrift. Rechtsbündig möchte ich gerne in diesem Text ein Logo-Image einbinden.
Das Logo habe ich drin, aber es steht direkt anschließend dem Text der Überschrift. Und lässt sich absolut nicht überreden, sich rechts ans Ende zu bewegen.
Habe in CSS schon x Sachen ausprobiert, Null Erfolg!
Irgendein heisser Tip wäre mit heissem Dank übergossen!  ;D
Der Anhang verdeutlicht die Situation.

Besten Dank im Voraus!
Hans
« Letzte Änderung: 22.01.2021, 09:53:26 von 85hans »

Re: HTML/CSS-Problem
« Antwort #1 am: 21.01.2021, 18:28:53 »
Hallo Hans,
der Befehl lautet:
<p align="right">Dies ist ein Absatz, der rechts ausgerichtet ist.Hier bitte die Verlinkung zum Logo einfügen.</p>
Hier bitte dein Logo einbinden und in die entsprechende Seite einfügen.

Re: HTML/CSS-Problem
« Antwort #2 am: 21.01.2021, 18:30:18 »
Also erstmal würde ich die Grafik nicht innerhalb der H1 Definition schreiben. So sieht es auf deinem Bild aus.
@sonar: dann käme aber alles rechtsbündig und nicht nur die Grafik! Machst du das <P....> nur für die Grafik, ist sie aber in einer anderen Zeile!

Re: HTML/CSS-Problem
« Antwort #3 am: 21.01.2021, 18:45:51 »
@toffifee
Ich habe es eben nochmal ausprobiert. In dem P-Befehl lassen sich ja verschiedene Elemente/Text/Bilder usw. unterbringen, die dann rechts erscheinen-auch in der selben Zeile, wenn es richtig eingefügt ist. Die vorhergehende  und nachfolgende Formatierung bleibt unverändert.

Re: HTML/CSS-Problem
« Antwort #4 am: 21.01.2021, 18:50:12 »
Er will aber auf gleicher Höhe Text links und Grafik rechts! ;)

Re: HTML/CSS-Problem
« Antwort #5 am: 21.01.2021, 19:07:23 »
Hab leider grade wenig Zeit um nochmals auszuprobieren.
Versuche dieser Art mit Zeilenumbruch habe ich hinter mir.
Ich denke, die Lösung müsste darin liegen, wie ich nach dem Text der Headline einen Abstand zum Logo machen kann.

@toffifee
Das Logo muss leider in die gleiche Zeile wie h1.
Also keine Alternativlösungen möglich.

Besten Dank inzwischen, melde mich Morgen wieder.

Re: HTML/CSS-Problem
« Antwort #6 am: 21.01.2021, 19:14:46 »
Das Logo muss leider in die gleiche Zeile wie h1.
Das habe ich schon verstanden. ;) Du wirst da mit CSS absolut positionieren müssen, fürchte ich, wenn du nicht zu alten Tabellentricks  greifen willst. So hat man das mal gemacht früher, weil du in separaten Zellen getrennte Formatierungen anwenden kannst.

Re: HTML/CSS-Problem
« Antwort #7 am: 21.01.2021, 19:17:23 »
z.B.
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("Logo.png");
            background-repeat: no-repeat;
            background-position: 99% top;
        }
    </style>
    <title>Titel</title>
    <meta charset="utf-8">
</head>
<body>
    <h1>Headline</h1>
</body>
</html>

Re: HTML/CSS-Problem
« Antwort #8 am: 21.01.2021, 19:31:12 »
background-position: 99% top;
Nur damit würde das Logo aber horizontal mittig erscheinen.

Re: HTML/CSS-Problem
« Antwort #9 am: 21.01.2021, 19:39:07 »
background-position: 99% top;
Nur damit würde das Logo aber horizontal mittig erscheinen.
Bei mir ist es 99% rechts und oben. Ich sehe jetzt nicht, was da gerade nicht stimmen soll?

Re: HTML/CSS-Problem
« Antwort #10 am: 21.01.2021, 19:44:56 »
Mein Denkfehler. Hätte allerdings erwartet, dass der Null Punkt links wäre und nicht rechts.
Außerdem kann er dann keinen anderen Seiten Hintergrund mehr verwenden.

Re: HTML/CSS-Problem
« Antwort #11 am: 21.01.2021, 19:58:37 »
Mein Denkfehler. Hätte allerdings erwartet, dass der Null Punkt links wäre und nicht rechts.
Außerdem kann er dann keinen anderen Seiten Hintergrund mehr verwenden.
Bei mir ist der Null Punkt links. Das andere links? :) Bei right oder 100% ist der rechte Bildrand am rechten Fensterende.
Das mit dem Hintergrund ist auch nur eine Lösung. Da geht bestimmt vieles mehr. Bin ja kein HTML oder sogar CSS Spezialist (oder Pixelzähler oder Pixelschubser).  :)

Re: HTML/CSS-Problem
« Antwort #12 am: 21.01.2021, 20:50:27 »
Moin,

ein einfaches Beispiel mit reinem HTML:

<h1>Beispieltext<img src="image.png" align="right" /></h1>
Unter CSS kannst du die Tags auch kombinieren: z.B.

h1 img { align: right; padding: 5px; }
Dann würde die HTML-Version

<h1>Beispieltext<img src="image.png" /></h1>
so aussehen. Ich hoffe, das hilft etwas weiter.

Re: HTML/CSS-Problem
« Antwort #13 am: 21.01.2021, 21:02:08 »
div { display: flex; justify-content: space-between; }
<div><h1>...</h1><img src../></div>

Re: HTML/CSS-Problem
« Antwort #14 am: 22.01.2021, 09:16:09 »
Besten Dank für die unerwartet vielen Tipps.

Die Vorschläge von sonar und atze funktionieren bei mir leider nicht wie gewünscht.

T.Beutel trifft voll ins Schwarze: Beide Lösungen funktionieren.   ;D ;D ;D
Die CSS-Lösung ist dabei natürlich die flexiblere und elegantere. Bestens! Damit kann ich auch noch ein 2.Logo einbinden.

Happy Day!
« Letzte Änderung: 22.01.2021, 09:55:07 von 85hans »