Bild/Text beliebig verschieben (HTML)?
Hallo zusammen im Moment Arbeite ich an einer Homepage wo ich das Problem habe, das ich Texte nicht auf ein Bild billig verschieben kann, wie ich will.
Es hat, mit Position gut funktioniert wurde mir aber leider von meinem Arbeitgeber verwehrt.
Ich probierte es mit Padding, margin aus und z-index aber es Funktionierte dennoch nicht. Also komm ich zu der Frage wisst ihr Vllt welche befehle es noch gibt, wo man Objekte beliebig verschieben kann wie man möchte?
2 Antworten
Das Problem ist: Wenn du nicht viel Ahnung von CSS hast und einfach wie wild Position:Absolute benutzt, sieht es vielleicht auf DEINEM Bildschirm gut aus, responsiv ist es aber nicht. Da hat dein Arbeitgeber zu 100% recht, dass das kein guter Weg ist.
Wieso musst du denn so etwas machen, wo du offensichtlich absolut keine Ahnung davon hast? (Soll jetzt nicht beleidigend klingen!)
Kannst du vielleicht mal deinen Code posten?
Im CSS gibt es viele Wege, die zum Erfolg führen, aber nicht jeder ist gut.
Ich möchte mich gerne in diesen Bereich weiter bilden c:
Wie leider erwartet... Ist halt absolut unresponsiv. Du hast ja absolut pixelgenaue Werte angegeben. Sobald du dein Browserfenster auch nur ein kleines Bisschen vergrößerst/verkleinerst, sieht alles sofort scheiße aus und bricht.
also liegt es eher am absolute als am position oder sollte man position allgemein vermeiden ?
Du verwendest die absolute Positionierung im Überfluss und das ist nicht gut. Wahl 1 sollte eine relative Positionierung sein. Absolute Positionierungen sind in der Regel erst dann notwendig, wenn man tatsächlich Elemente übereinander schieben möchte.
Was du ebenso eher meiden solltest, ist die häufige Nutzung der !important-Regel. Da sie die höchste Spezifität einnimmt, begibst du dich mit ihr auch schnell in eine Sackgasse, denn in jedem Fall, in dem sie doch wieder überschrieben werden muss, bist du dazu gezwungen, Selektoren mit noch stärkerer Spezifität zu schaffen. Dies sorgt dafür, dass dein CSS komplexer und länger wird, als auch nur annähernd notwendig.
Bei deinem CSS ist, da bin ich ziemlich sicher, !important in keinem Fall notwendig.
Wenn Text auf ein Bild soll, würde ich davon ausgehen, dass das Bild eher dekorative Zwecke erfüllt. Demzufolge könnte man überlegen, ob man das Bild nicht eher als Hintergrundbild einer Box setzt, in der der Text (mit padding o.ä.) positioniert wird.
Ansonsten ist die Wahl von position: absolute für die freie Positionierung eines Elements über einem anderen eigentlich schon vollkommen richtig. Verschiebungen mittels margin / padding wären im Vergleich dazu eher hässliche Workarounds.
Alternativ zur absoluten Positionierung via left/top/... kann man noch eine Transformation auf das Element wirken lassen.
Beispiel:
<div>
<img alt="..." src="...">
<span>Some text</span>
</div>
CSS:
span {
color: white;
display: block;
transform: translateX(50px) translateY(-50px);
}
Im Hinsicht auf ein responsive Verhalten sollte man in Betracht ziehen, relative Längeneinheiten / Prozent für die Positionierung zu nutzen und gegebenenfalls auch Media Queries.
translatex und translatey ist für links und rechts könntest du mir vllt auch die für oben nennen ?
html, body {
background-image: linear-gradient(90deg,#209cff 20%,#68e0cf 100%);
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0px !important;
padding: 0px !important;
height: 100%;
width: 100%;}
header h1 { color: white;
font-family: serif;
font-weight: lighter;
font-stretch: expanded;
font-size: 41px;
text-align: center;
z-index: 1 ;
position: absolute; top: 130px; left: 71px; right: 385px }
header p {color: white;
font-family: Arial, Helvetica, sans-serif;
line-height: 29px;
font-size: 20,83px;
z-index: 1;
position: absolute; left: 44px ; top: 271px ; right: 365px;
text-align: center;}
#hintergrund {display: block; text-align: center;
margin: 0 !important;
padding: 0px !important;
height: 593px;
}