• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Vertikalen Border anders positionieren

MonacoFranze

Neues Mitglied
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!
 

Anhänge

  • WhatsApp Image 2024-09-03 at 23.34.47.jpeg
    WhatsApp Image 2024-09-03 at 23.34.47.jpeg
    195,4 KB · Aufrufe: 9
Werbung:
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.
 
Werbung:
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>
 
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?
 
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
 

Anhänge

  • fast_perfekt.jpg
    fast_perfekt.jpg
    296,2 KB · Aufrufe: 3
Werbung:
Da führt mich Google zu diesem:
Dort wird auf diese, einfachere Lösung verwiesen:
(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.
 
Zuletzt bearbeitet:
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.
 
Werbung:
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>
 
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?
 

Anhänge

  • 99prozent.jpg
    99prozent.jpg
    303,7 KB · Aufrufe: 4
Werbung:
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.
 
Zuletzt bearbeitet:
Werbung:
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! :))
 

Anhänge

  • logo_links.jpg
    logo_links.jpg
    296,8 KB · Aufrufe: 5
Zurück
Oben