Forum: PC-Programmierung [HTML, Java-Script] Bild richtig positionieren


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Alex A. (Firma: AT-Corporation) (alextbg)


Bewertung
-1 lesenswert
nicht lesenswert
Auf einer Website habe ich programmiert, dass oben rechts ein Bild 
angezeigt werden soll, gleich im Anschluss soll dann ein Text kommen 
welcher mit der Unterkante des Bildes bündig ist. Hätte es mit % 
gemacht, aber immer wenn ich zb die Schriftgröße von etwas ändere, 
verschiebt sich alles. Hat da jemand eine Idee dazu?
Fyi ich kann beim Body leider nicht mehr code reingeben, da die Seite 
mir dann immer anzeigt, dass es Spam sein :D
Vielen Dank
1
    body{
2
        margin: 0;
3
        padding: 0rem;
4
        width: 100%;
5
        height: 40%;
6
        background-image: linear-gradient(#3a6073);
7
        background-position: center;
8
        background-size: cover;
9
    }
10
    .container-head{
11
        display: flex;
12
        flex-direction: row;
13
        justify-content: space-around;
14
        flex-wrap: wrap;
15
        align-content: space-around;
16
        margin-top: 2rem;
17
    }
18
    .Titel{
19
        background: url() -80px -80px;
20
        color: red;
21
        -webkit-text-fill-color: transparent;
22
        -webkit-background-clip: text;
23
        font-weight: bold;
24
        font-size: 100px;
25
        font-family: arial, helvetica;
26
        width: 60%;
27
    margin-left: -31%;
28
    margin-top: -1.25%;
29
        text-align: center;
30
    }
31
.copyright{
32
    color: black;
33
    font-size: 20px;
34
    margin-left: -48em;
35
    margin-top: 2.5em;
36
  }
37
Body:
38
    label class="copyright" &copyM

von funkbummi (Gast)


Bewertung
1 lesenswert
nicht lesenswert
HTML wurde nicht erfunden um damit DTP zu betreiben.
Freunde dich einfach mit dem Gedanken an.

von Nop (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Sollte gehen, aber nicht mit JavaScript, sondern mit CSS. Mehr läßt sich 
bei der unklaren Problembeschreibung kaum sagen.

von maler und landstreicher (Gast)


Bewertung
1 lesenswert
nicht lesenswert
sowas programmiert man nicht, das macht man mit html und css.

aufgrund der äußerst vagen beschreibung:
bild und text in einen holder, dort ausrichten und das ganze dann 
irgendwo platzieren

von DPA (Gast)


Bewertung
0 lesenswert
nicht lesenswert
So? https://jsfiddle.net/2nmx54y8/ (Alternativ könnte man da wohl auch 
eine Tabelle nehmen)

Oder eher so? https://jsfiddle.net/z81yg9jx/4/

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.