CSS – die besten Beiträge

BibbleBob

07.12.2021, 20:44

Mit Links

Wie kann ich einen Text in JavaScript positionieren?

Moin, ich möchte die einzelnen Wörter in JS bewegen, wie geht das?

JS-Code:

var footer = `

<h2> Service-Hotline </h2>

<h2> Quellen </h2>

<h2> Anfahrt </h2>

<p></p>

<h1><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> Quellenverzeichnis </a></h1>

<h1><a href="https://www.google.de/maps/place/Heischberg+6,+24329+Dannau/@54.2467622,10.5792516,17z/data=!3m1!4b1!4m5!3m4!1s0x47b263e46411918d:0xc44a9eacc772c79d!8m2!3d54.24676!4d10.5807992"> Karte </a></h1>

document.getElementsByTagName("footer")[0].innerHTML = footer;

MrAmazing2

07.12.2021, 02:40

Sind HTML und CSS Open-Source?

Und wenn ja, wo kann ich mir den Source-Code ansehen?

(Möchte in Java ein GUI-Framework machen, mit vielen Features von HTML/CSS. Aber bei manchen Sachen wie z.B. Borderradius bin ich Stundenlang am tüfteln. Da wäre es schon sehr nützlich, die originale Implementierung von HTML/CSS als Grundlage zu haben.)

6 Antworten

Fabboy

06.12.2021, 12:53

Mit Bildern

Schriftart von Gta?

Weiss jemand wie diese schriftart heisst? Brauche sie auf meiner Website (Css)

Bzw. Obs diese Schriftart überhaubt gibt. Es geht auch was was in diese richtung geht

Lilly17uwu

04.12.2021, 23:33

CSS "checked" auf nur einen input (checkbox) anwenden?

Hallo,

Ich mache gerade für Info eine Webseite, allerdings dürfen wir noch kein JavaScript benutzen.

Deshalb habe ich , um die Webseite responsive zu machen das ganze mehr oder weniger mit einem input (checkbox) geregelt, die man nicht sieht, welche dann durch ein label verbunden ist, was wiederrum eine art Burger-Stapel ist. Auf diesen kann man clicken, und dann schieben sich die Links von oben nach unten.

Spielt aber hierfür keine Rolle.

Auf jeden Fall habe ich in CSS logischerweise dann das mit "checked ~" gemacht, was auch funktioniert.

Nun möchte ich aber einen Darkmode integrieren, und brauche dafür nochmal einen zweiten input (auch wieder checkbox), also im Prinzip das selbe Spiel nochmal.

Allerdings prüft "checked ~" ALLE checkboxen, sodass das responsive nicht mehr funktioniert, wenn der Darkmode aktiv wäre.

Kann ich also irgendwie nur immer die JEWEILIGE checkbox prüfen lassen?

Danke im Voraus! :)

thanos2605

04.12.2021, 20:57

HTML/CSS/JS Sections einfliegen lassen?

Hi, ich arbeite gerade an einer Website, nun möchte ich, dass wenn man scrollt, die jeweilige section einfliegt (von links). Ich komme aber nicht richtig weiter, wäre nett, wenn mir jemand helfen kann.

FrageCoding

03.12.2021, 07:53

Body nach Footer färben?

Ich habe dem Body rot und header und footer gelb. Wenn man aber scrollt (wenn nichts mehr kommt auf dem Handy) dann sieht man das der Footer auf dem Body liegt. Kann ich den Body nach dem Footer auch nochmal einfärben?

4 Antworten

PoisenDrive

01.12.2021, 14:30

Denkt ihr man kann Javascript in zwei Monaten lernen wenn man sich sehr intensiv damit auseinandersetzt?

Ich hab mir überlegt mit Bücher und Tutorials zu lernen und gleichzeitig eigene Projekte umsetzten. Ist das ne gute Idee?

PS ich beherrsche keine Programmiersprachen bevor ich mit JS anfange sollte ich HTML und CSS auf einem guten Niveau können, aber mehr Vorkenntnisse hab ich nicht

8 Antworten

Sebi4480

01.12.2021, 01:59

Anmeldeseite für Mobilen Hotspot?

👋 Hi, liebe Community,

Ich habe eine dringliche Frage.

Und zwar: Ist es irgendwie möglich, ohne einen Desktop-Computer oder einen Laptop/Notebook, eine Login-Seite für Benutzer meines Hotspots unter Android 11 einzurichten? — egal wie? (Ich habe 999 GB Datenvolumen)

Ich wäre Euch sehr verbunden, wenn Ihr mir – falls es auf irgendeine Art und Weise möglich ist – eine Lösung vorschlagen könntet. Zu Not ginge auf die Desktop-Variante.

Liebe Grüße und eine angenehme Nacht! 😄

➕ ... und bleibt natürlich gesund! 😉✌️

4 Antworten

BibbleBob

30.11.2021, 20:21

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

verreisterNutzer

29.11.2021, 21:44

Wie lange würde es dauern, HTML oder CSS zu meistern?

Ich fange grade mit diesen zwei Programmiersprachen an und Frage mich wie lange das dauern würde. Was ich mich auch Frage ist wie viele Themenbereiche hat HMTL?

6 Antworten

martinensen

29.11.2021, 13:02

Mit Bildern

Mit Links

Frag zu CSS Background Images?

Guten Tag,

aus Langeweile wollte ich die Starbucks Website https://www.starbucks.com/rewards nachbauen, nur habe ich keine Ahnung, wie das mit dem Background-Image gemacht wurde.

Der Stern wurde als Hintergrund der ganzen Box gesetzt und skaliert mit - die grüne Box aber auch?

https://codepen.io/stewn/pen/JjrjPzX

Es geht um heading-section.

Das Bild ist

-responsiv

-die grüne Box ist immer so groß wie das Bild

-das Bild bleibt immer an der Kante

Fussilo

28.11.2021, 17:12

Wie ändere ich die Hintergrundfarbe meiner Webseite mit CSS?

Hallo, ich möchte gerne die Hintergrundfarbe meiner gesamten Webseite ändern, aber es funktioniert nicht, wie es sollte. An der Verlinkung in der HTML Datei kann es nicht liegen, da ich die Farbe von h1 ändern kann. Aber die Hintergrundfarbe von sowohl body als auch header lässt sich nicht ändern. Hat jemand eine Ahnung, woran das liegen könnte? Danke schonmal im vorraus

body{
  background-color: rgb(112, 224, 108);
  }
header{
      background-color: red;
  }
h1{
      color:red;margin-bottom: 100px;
  }

Mythxx103

28.11.2021, 11:26

Website nur mit Code bzw. Kennwort betreten?

Hallo, wie kann ich mir quasi eine „private“ Website machen? Also so das man nur mit einem Code bzw. einem richtigem Kennwort beitreten kann?

hfasijfhjisdhf

24.11.2021, 16:24

HTML/CSS iPhone Video Tag?

wie verhindere ich das der Mobile Safari Browser automatisch in den Fullscreen Mode geht um ein video abzuspielen?

Habe schon sehr vieles ausprobiert auf Stackoverflow.

und warum funktioniert es manchmal nicht ein Iframe Youtube video einzubetten ?
Liegt es an der Musik oder an der länge des videos ?

verreisterNutzer

22.11.2021, 23:39

[JavaFX] Border-Radius für das Fenster an sich?

Bekanntlich kann man ja fast allen Elementen einen border-radius verpassen, jedoch möchte ich dies auf das Fenster selbst - die Scene - setzen. Ist das denn möglich?

Gescheiterte Versuche:

Style im SceneBuilder auf -fx-border-radius: 20 setzen
In der .css-Datei -fx-border-radius: 20 auf die fx:id AnchorPane_Background setzen

Oder funktioniert das nur auf Elementen im Fenster selbst?

Milchbraue201

22.11.2021, 19:25

Ist HTML einsteigerfreundlich?

Ich habe heute angefangen schon meine ersten Websites zusammenzubauen. Würdet ihr sagen HTML 5 ist einsteigerfreundlich?

7 Antworten

elomenatyStinkt

21.11.2021, 22:46

Mit Links

CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>

Fabboy

21.11.2021, 08:04

Mit Bildern

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

verreisterNutzer

20.11.2021, 19:11

Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.