Vertikalen Border anders positionieren

MonacoFranze · 3 September 2024

Hallo Leute,

Ich bin am verzweifeln.

Um was es geht: ich möchte die senkrechte pinke Linie mit dem Text drin nicht mittig platziert haben, sondern am rechten Bildschirmrand (aber auch nicht ganz rechts, sondern in etwa da wo im Bild der Mauszeiger grad ist), und schaffs einfach nicht, dass ich sie um-platziere weg von der Mitte.
Im Anhang ein Bild davon, damit man es sich besser vorstellen kann.

Hier der Code wie ich es bisher versucht habe (es geht um die CSS Klasse info3, ganz unten):

Code:

<style>
@font-face {
    font-family: 'Audiowide Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
    }
body{background: (linear-gradient to bottom right, #063FAB, #01258A);color:#DEDEDE;font-size:19px;text-align:center;margin:0;overflow:hidden;
 padding-top: 5em;
 display: block;
 justify-content: center;
 background-image: url(/luna.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 
 font-family: 'Audiowide Regular';}
.info1 h1 {
  color: #FFFFFF;
  display: block;
  justify-content: center;
  font-family: 'Audiowide Regular';
  font-style: italic;
 
  position:relative;top:0%;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
 
 
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
 
  animation: blink 2.4s infinite;
  animation-fill-mode: both;
}

@keyframes blink {
   0% { opacity: 0 }
   50% { opacity: 1 }
   100% { opacity: 0 }
}
 
.info2 h2 {
  display:block;
  font-family: 'Audiowide Regular';
  font-size: 24px;
  font-color: #DEDEDE;
  position:relative;top:66%;
  background-color: #FF1493;
  opacity: 0.6;
 
}

.info3 {
  display: flex;
  font-family: 'Audiowide Regular';
  font-size: 24px;
  font-color: #DEDEDE;
  position: relative;;
  justify-content: center;
  place-items: center;
  background-color: #FF1493;
  opacity: 0.6;
  border-right: 6px solid #FF1493;
  transform:rotate(90deg);
  text-align: center;
 
}

html, body {background-color: #DEDEDE;}
</style>

eingefügt habe ich es mit:

Code:

<div class="info3">ULTIMATE SCRIPT</div>

Ich krieg es einfach ums Verrecken nicht hin, kann mir bitte jemand helfen?

Ich danke euch von Herzen!

Sempervivum · 4 September 2024

Guten Morgen @MonacoFranze und willkommen auch in diesem Forum!
Jetzt schreibe ich schon zur 3. Mal eine Antwort auf deine Frage, los geht's:
"transform:rotate" ist ein wenig tricky im Handling, versuche die gedrehte Schrift besser mit "writing-mode":
https://www.mediaevent.de/css/writing-mode.html
Wenn Du dann nicht zum Ziel kommst, poste bitte auch das übrige HTML.

MonacoFranze · 5 September 2024

Hallo @Sempervivum, vielen dank für deine Antwort und auch für das Willkommensgeheiß!

Ich hab es so probiert wie du es gesagt hast aber ich bekomme es leider einfach nicht hin bzw komme einfach nicht weiter.

Ich würde gerne dein Angebot annehmen und poste dann hier mal den kompleten Code der index.html (CSS ist direkt in die Datei integriert, gibt keine externe .css-datei).
Würde mich wahnsinnig freuen, wenn du mir helfen kannst.

Nochmal was ich genau will: einen senkrechten Border am rechten Bildschirmrand (etwa bei 90% der Breite des Bildschirms), der von ganz oben nach ganz unten verläuft und der dann mit dem horizontalen Border unten kreuzt. die Klasse ist info3 bei mir im Dokument.

(eigentlich genauso wie ich es in meinem ersten Posting als Anhang schon gepostet habe, nur dass der Border eben rechts ist und nicht mittig)

Code:

<html>
<head>
<title>Atari Ultimate Script</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="shortcut icon" href="favicon.ico"></link>

<style>
@font-face {
    font-family: 'Audiowide Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
    }
body{background: (linear-gradient to bottom right, #063FAB, #01258A);color:#DEDEDE;font-size:19px;text-align:center;margin:0;overflow:hidden;
 padding-top: 5em;
 display: block;
 justify-content: center;
 background-image: url(/luna.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 
 font-family: 'Audiowide Regular';}
.info1 h1 {
  color: #FFFFFF;
  display: block;
  justify-content: center;
  font-family: 'Audiowide Regular';
  font-style: italic;
  
  position:relative;top:0%;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  
  
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  
  animation: blink 2.4s infinite;
  animation-fill-mode: both;
}

@keyframes blink {
   0% { opacity: 0 }
   50% { opacity: 1 }
   100% { opacity: 0 }
}
   
.info2 h2 {
  display:block;
  font-family: 'Audiowide Regular';
  font-size: 24px;
  font-color: #DEDEDE;
  position:relative;top:66%;
  background-color: #FF1493;
  opacity: 0.6;
 
}

.info3 {
  display: flex;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 1em auto;
  background-color: #FF1493;
  font-family: 'Audiowide Regular';
  font-size: 24px;
  font-color: #DEDEDE;
  opacity: 0.6;
}


html, body {background-color: #DEDEDE;}



</style>

<script>
async function webkitExploit() 
{
 await import('./alert.js');
}
</script>

</head>
<body onload="setTimeout(webkitExploit,1500);"><!--  -->
<script src="ultimate.js"></script>

<div class="info1"><h1>&nbsp;<span style="text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#FF1493;text-decoration-thickness:5px;">Lange Überschrift</span>&nbsp;<br>&nbsp;Unterschrift&nbsp;</h1></div>



<br /><br /><br /><br /><br /><br /><div class="info2" id="msgs"><h1>&nbsp;<br><br><br><h2><span style="center" background-color: #FF1493;>Loading ATARI Ultimate Script...</span></h2></h1></div>
<div class="info3">ULTIMATE SCRIPT</div>
</body>
</html>

Ich bedanke mich vielmals bei dir und wünsche dir einen schönen Abend.

Sempervivum · 5 September 2024

Ich habe das mal so eingerichtet wie ich deine Absichten von dem Bild her verstehe. Also dass das Ganze das Browserfenster voll ausfüllt und die beiden Balken am Rand rechts und unten liegen.
Beachte meine Kommentare.
"font-color" ist zwar nahe liegend aber die Schriftfarbe heißt einfach "color".
Die br-Tags habe ich heraus genommen weil man Abstände besser und flexibler mit margin oder padding einstellt.
Und die h-Tags in .info2 habe ich auf eines reduziert, damit ein Balken entsteht, der ganz unten liegt und rechts an .info3 nahtlos anschließt.
Einige Kleinigkeiten könnten noch unstimmig sein, aber das lasse ich erst Mal außen vor.

Ich hoffe, dass ich so deine Absichten richtig verstanden habe.

Code:

<!DOCTYPE html>
<html>

<head>
    <title>Atari Ultimate Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="favicon.ico">

    <style>
        html,
        body {
            height: 100%;
            background-color: #DEDEDE;
        }

        @font-face {
            font-family: 'Audiowide Regular';
            font-style: normal;
            font-weight: normal;
            src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
        }

        body {
            background-image: (linear-gradient to bottom right, #063FAB, #01258A);
            color: #DEDEDE;
            font-size: 19px;
            text-align: center;
            margin: 0;
            overflow: hidden;
            /* padding-top: 5em; */
            /* display: block; */
            /* Die Elemente main und .info2 untereinander anordnen: */
            display: flex;
            flex-direction: column;
            background-image: url(/luna.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            font-family: 'Audiowide Regular';
        }

        main {
            /* Soll in der Höhe den verbleibenden Raum ausfüllen: */
            flex: 1;
            /* Die Elemente darin sollen nebeneinander
            angeordnet werden: */
            display: flex;
        }

        .info1 {
            /* Soll den verbleibenden freien Raus ausfüllen: */
            flex: 1;
        }

        .info1 h1 {
            color: #FFFFFF;
            display: block;
            justify-content: center;
            font-family: 'Audiowide Regular';
            font-style: italic;
            flex: 1;
            /* position: relative;
            top: 0%; */
            overflow: hidden;
            /* Ensures the content is not revealed until the animation */


            /* margin: 0 auto; */
            /* Gives that scrolling effect as the typing happens */

            animation: blink 2.4s infinite;
            animation-fill-mode: both;
        }

        @keyframes blink {
            0% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .info2 h2 {
            margin: 0;
            display: block;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            /* position: relative;
            top: 66%; */
            background-color: #FF1493;
            opacity: 0.6;
        }

        .info3 {
            /* Soll eine Breite entspr. Inhalt annehmen,
            nicht wachsen oder schrumpfen: */
            flex: 0 0 auto;
            writing-mode: vertical-rl;
            text-orientation: upright;
            /* margin: 1em auto; */
            background-color: #FF1493;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            opacity: 0.6;
        }
    </style>

    <script>
        async function webkitExploit() {
            await import('./alert.js');
        }
    </script>

</head>

<body onload="setTimeout(webkitExploit,1500);"><!--  -->
    <script src="ultimate.js"></script>
    <!-- Weil .info1 und .info2 nebeneinander angeordnet werden sollen,
     legen wir sie in einen Container -->
    <main>
        <div class="info1">
            <h1>&nbsp;<span
                    style="text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#FF1493;text-decoration-thickness:5px;">Lange
                    Überschrift</span>&nbsp;<br>&nbsp;Unterschrift&nbsp;</h1>
        </div>
        <div class="info3">ULTIMATE SCRIPT</div>
    </main>
    <div class="info2" id="msgs">
        <h2><span style="text-align: center; background-color: #FF1493;">Loading ATARI Ultimate Script...</span></h2>
    </div>
</body>

</html>

MonacoFranze · 5 September 2024

Klasse, ich danke dir sehr.

Eine Frage noch: die zwei Klassen info2 und info3 haben ja eine Opacity von 0.6
Wie kann man es noch machen, dass die Transparenz von links nach rechts bei info2 und oben nach unten bei info3 bei 0.6 beginnt und im Verlauf dann jeweils bei 0.3 ankommt am Ende?

MonacoFranze · 5 September 2024

und ist es in deinem Code noch möglich, die Position der Border so wie auf dem Bild im Anhang zu positionieren? Also nicht GANZ unten und GANZ rechts, sondern, ja, eben wie auf dem Bild...

dann geb ich aber wirklich Ruhe. ;)
Du hast mir sehr geholfen auf jedenfall! Danke dafür und für deine Zeit

Sempervivum · 5 September 2024

Da führt mich Google zu diesem:

CSS opacity gradient?

I am looking to create an effect like this, but my website has a dynamic background-color. Note that this example uses a white overlay, which does not work with different backgrounds. p { width:

stackoverflow.com

Dort wird auf diese, einfachere Lösung verwiesen:

https://jsfiddle.net/x4gSG/310/

(Hier ist einiges an Overhead drin, den man weg lassen kann.)
Da auch dein Body ein Hintergrundbild haben soll, wirst Du wahrscheinlich die Lösung von Stackoverflow nehmen müssen, wenn dieses durchscheinen soll.
Versuche, ob Du damit zum Ziel kommst.

Sempervivum · 5 September 2024

und ist es in deinem Code noch möglich, die Position der Border so wie auf dem Bild im Anhang zu positionieren?

Verstehe, dann waren die Margins doch so gewollt und ich habe etwas falsch verstanden. Da die Balken sich überdecken sollen, wird es wahrscheinlich nicht ohne absolute Positionierung gehen. Oder mit Gridlayout. Ich werde drüber nachdenken.

MonacoFranze · 5 September 2024

Sempervivum schrieb:
Verstehe, dann waren die Margins doch so gewollt und ich habe etwas falsch verstanden. Da die Balken sich überdecken sollen, wird es wahrscheinlich nicht ohne absolute Positionierung gehen. Oder mit Gridlayout. Ich werde drüber nachdenken.

Das wäre echt supernett von dir! <3

Sempervivum · 5 September 2024

So?

Code:

<!DOCTYPE html>
<html>

<head>
    <title>Atari Ultimate Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="favicon.ico">

    <style>
        html,
        body {
            height: 100%;
            background-color: #DEDEDE;
        }

        @font-face {
            font-family: 'Audiowide Regular';
            font-style: normal;
            font-weight: normal;
            src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
        }

        body {
            background-image: (linear-gradient to bottom right, #063FAB, #01258A);
            color: #DEDEDE;
            font-size: 19px;
            text-align: center;
            margin: 0;
            overflow: hidden;
            /* padding-top: 5em; */
            /* display: block; */
            /* Die Elemente main und .info2 untereinander anordnen: */
            display: flex;
            flex-direction: column;
            background-image: url(/luna.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            font-family: 'Audiowide Regular';
        }


        .info1 {
            /* Soll den verbleibenden freien Raus ausfüllen: */
            flex: 1;
        }

        .info1 h1 {
            color: #FFFFFF;
            display: block;
            justify-content: center;
            font-family: 'Audiowide Regular';
            font-style: italic;
            flex: 1;
            /* position: relative;
            top: 0%; */
            overflow: hidden;
            /* Ensures the content is not revealed until the animation */


            /* margin: 0 auto; */
            /* Gives that scrolling effect as the typing happens */

            animation: blink 2.4s infinite;
            animation-fill-mode: both;
        }

        @keyframes blink {
            0% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .info2 {
            position: absolute;
            bottom: 5%;
            left: 0;
            width: 100%;

        }

        .info2 h2 {
            margin: 0;
            display: block;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            background-color: #FF1493;
            opacity: 0.6;
        }

        .info3 {
            writing-mode: vertical-rl;
            text-orientation: upright;
            /* margin: 1em auto; */
            position: absolute;
            right: 5%;
            top: 0;
            height: 100%;
            background-color: #FF1493;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            opacity: 0.6;
        }
    </style>

    <script>
        async function webkitExploit() {
            await import('./alert.js');
        }
    </script>

</head>

<body onload="setTimeout(webkitExploit,1500);"><!--  -->
    <script src="ultimate.js"></script>
    <!-- Weil .info1 und .info2 nebeneinander angeordnet werden sollen,
     legen wir sie in einen Container -->
    <div class="info1">
        <h1>&nbsp;<span
                style="text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#FF1493;text-decoration-thickness:5px;">Lange
                Überschrift</span>&nbsp;<br>&nbsp;Unterschrift&nbsp;</h1>
    </div>
    <div class="info2" id="msgs">
        <h2><span style="text-align: center; background-color: #FF1493;">Loading ATARI Ultimate Script...</span></h2>
    </div>
    <div class="info3">ULTIMATE SCRIPT</div>
</body>

</html>

MonacoFranze · 5 September 2024

PERFETTO mein Lieber, mille Grazie! Du bist echt der Hammer ;)
Ich weiss gar nicht was ich sagen soll...
Vielen vielen Dank!!

ist es sehr unverschämt, wenn ich dich jetzt noch frage, wie ich da unten wo das schwarze A steht jetzt (Bild im Anhang), also wo sich die zwei Border kreuzen, noch ein kleines ATARI Logo (also eine .gif-Bilddatei) einfügen kann? kannst du mir bitte deinen Code um das noch ergänzen?

Also dass das mini ATARI-Logo GENAU da in dem Quadrat ist, wo sich die beiden pinken Linien kreuzen?

Sempervivum · 5 September 2024

Lässt sich sicher ohne Probleme machen. Ich sehe mir das morgen an.

MonacoFranze · 5 September 2024

Sempervivum schrieb:
Lässt sich sicher ohne Probleme machen. Ich sehe mir das morgen an.

Klasse, ich danke dir sehr.

Schönen Abend für dich und nochmal: Vielen Vielen Dank

Sempervivum · 5 September 2024

Immer gern, ich wünsche ebenfalls einen schönen Abend!

Sempervivum · 6 September 2024

Guten Morgen, ich habe das Logo jetzt zusätzlich eingebaut. Dabei bin ich von der absoluten Positionierung zum Gridlayout umgeschwenkt, weil man dabei die Abmessungen und die Positionen relativ zueinander besser im Griff hat:

Code:

<!DOCTYPE html>
<html>

<head>
    <title>Atari Ultimate Script</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="favicon.ico">

    <style>
        html,
        body {
            height: 100%;
            background-color: #DEDEDE;
        }

        @font-face {
            font-family: 'Audiowide Regular';
            font-style: normal;
            font-weight: normal;
            src: local('Audiowide Regular'), url('Audiowide-Regular.woff') format('woff');
        }

        body {
            display: grid;
            /* Spalten und Zeilen anlegen:
            Die erste Zeile/Spalte ist zehn Mal so breit/hoch wie die dritte.
            Die mittlere ist jeweils der pinke Balken und ist so breit/hoch
            wie der Inhalt, d. h. die Schrift bzw. das Logo es erfordern. */
            grid-template-columns: 10fr auto 1fr;
            grid-template-rows: 10fr auto 1fr;
            background-image: (linear-gradient to bottom right, #063FAB, #01258A);
            color: #DEDEDE;
            font-size: 19px;
            text-align: center;
            margin: 0;
            overflow: hidden;
            background-image: url(images/0a.jpg);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            font-family: 'Audiowide Regular';
        }

        .info1 h1 {
            color: #FFFFFF;
            display: block;
            justify-content: center;
            font-family: 'Audiowide Regular';
            font-style: italic;
            overflow: hidden;

            /* Gives that scrolling effect as the typing happens */
            animation: blink 2.4s infinite;
            animation-fill-mode: both;
        }

        @keyframes blink {
            0% {
                opacity: 0
            }

            50% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        .info2 {
            grid-column: 1/4;
            grid-row: 2/3;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            background-color: #FF1493;
            opacity: 0.6;
        }

        .info3 {
            writing-mode: vertical-rl;
            text-orientation: upright;
            grid-column: 2/3;
            grid-row: 1/4;
            background-color: #FF1493;
            font-family: 'Audiowide Regular';
            font-size: 24px;
            color: #DEDEDE;
            opacity: 0.6;
        }

        .logo {
            grid-column: 2/3;
            grid-row: 2/3;
        }

        .info2,
        .info3,
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

    <script>
        async function webkitExploit() {
            await import('./alert.js');
        }
    </script>

</head>

<body onload="setTimeout(webkitExploit,1500);">
    <script src="ultimate.js"></script>
    <img class="logo" src="images/buttonleftp.png">
    <div class="info1">
        <h1>&nbsp;<span
                style="text-decoration-line:underline;text-decoration-style:solid;text-decoration-color:#FF1493;text-decoration-thickness:5px;">Lange
                Überschrift</span>&nbsp;<br>&nbsp;Unterschrift&nbsp;</h1>
    </div>
    <div class="info2" id="msgs">Loading ATARI Ultimate Script...</div>
    <div class="info3">ULTIMATE SCRIPT</div>
</body>

</html>

Die Position der Balken kannst Du mit "grid-template-columns/rows" beim body steuern, ich habe es dort kommentiert.

MonacoFranze · 6 September 2024

Servus, @Sempervivum

Klasse, ich probier das ganze gleich morgen Abend aus wenn ich wieder Zeit habe!

Hättest du bis dahin vielleicht noch eine Idee, wie ich da an der Stelle wo das rote X auf dem Bild ist (Anhang) ebenfalls noch ein Logo einfügen kann? Ich glaube, das würde den ganzen visuellen Eindruck dann vollenden & abrunden und ein schönes stimmiges Gesamtbild abgeben und dann wäre es wirklich zu 100% perfekt so wie ich es mir vorgestellt hätte alles..

Ich danke dir schon mal vorab und wünsche dir ein schönes Wochenende! :))

Sempervivum · 9 September 2024

Guten Abend @MonacoFranze
Hat das mit dem Logo auf der Kreuzung der beiden Balken denn funktioniert?

Vertikalen Border anders positionieren

Neues Mitglied

Anhänge

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Neues Mitglied

Anhänge

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Anhänge

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Klasse, ich probier das ganze gleich morgen Abend aus wenn ich wieder Zeit habe!​

​

Anhänge

Senior HTML'ler

Klasse, ich probier das ganze gleich morgen Abend aus wenn ich wieder Zeit habe!