[SAMMELTHREAD] Kleine Coding Fragen

Kaliber · 10. März 2019

Zitat von [LiSA]Das Brot

dass er es auch für einen einzelnen Datensatz tut

Würde es...aber halt nicht so.

Deshalb schau in die Tutorial Seite, wie man es richtig macht

PlaxX · 25. April 2019

HeyHo,

ich habe ein kleines Problem mit einer Tabelle, wie bekomme ich die 3. Spalte der Reihe bündig mit der Tabelle?

PHP

echo "<tr bgcolor=\"#E3F0F7\">". PHP_EOL;
//echo "<td align=\"center\" rowspan=\"1\">". PHP_EOL;
echo "<tr bgcolor=\"#E3F0F7\">". PHP_EOL;
echo "<td colspan=\"3\" rowspan=\"1\"><center><b> Laufzeit</b></center></td>". PHP_EOL;
echo "</tr>". PHP_EOL;
echo "<td><input type=\"text\" size=\"6\" value=\"",beleg("t1h","00"),"\" name=\"t1h\"></td>";
echo "<td><input type=\"text\" size=\"1\" value=\"",beleg("t1m","45"),"\" name=\"t1m\"></td>";
echo "<td><input type=\"text\" size=\"1\" value=\"",beleg("t1s","00"),"\" name=\"t1s\"></td>";
//echo "<tr bgcolor=\"#E3F0F7\"><td>Stunden</td>". PHP_EOL;
//echo "<td>Minuten</td>". PHP_EOL;
//echo "<td>Sekunden</td></tr>". PHP_EOL;
echo "</tr>". PHP_EOL;

Alles anzeigen

Canna · 25. April 2019

Wenn du den Code mal ordentlich hier postest, würd ich dir helfen. Aber so, nö.
Stichwort: colspan

PlaxX · 26. April 2019

Zitat von Canna

Wenn du den Code mal ordentlich hier postest, würd ich dir helfen. Aber so, nö.
Stichwort: colspan

Ich habe den Code jetzt mal eben in den Editor eingefügt, und hoffe das es der "Diva ;)" jetzt so passt.

Ansonsten kannst du mich auch kurz Kontaktieren und wir machen das eben über TeamViewer dann hast du zugriff auf den kompletten Code.

LeonMrBonnie · 28. April 2019

Hi,
ich bin leider absolut scheiße mit HTML und CSS versuche aber gerade was kleines umzusetzen, krieg es aber einfach nicht hin.

Ich möchte dass die beiden div's (left und right) passend zu ihrem Klassennamen, links oder rechts vom Login Fenster stehen, dies funktioniert auch, aber leider sind diese zu hoch oder zu tief, und ich kriege es einfach nicht hin dass der Text auf einer Ebene ist.

HTML: index.html

<html>
    <head>
        <link href="login.css" rel="stylesheet">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="jquery.js"></script>
    </head>
    <body style="background-color: transparent;">
        <div class="blurry"></div>
        <div class="box">
                <div class="left">
                    <h1><strong>News</strong></h1>
                    <p class="lead boxtext">Version 1.0 out now!</p>
                    <p class="lead boxtext">- Server is now running!</p>
                    <p class="lead boxtext">- Server is now running!</p>
                    <p class="lead boxtext">- Server is now running!</p>
                    <p class="lead boxtext">- Server is now running!</p>
                    <p class="lead boxtext">- Server is now running!</p>
                </div>


                <div>
                    <h1><strong>Login</strong></h1>
                    <p class="lead boxtext">Please login using your credentials.</p>
                    <input id="username" name="username" type="TEXT"  value="" placeholder="Name">
                    <input id="password" name="password" type="PASSWORD" value="" placeholder="Password">
                    <input id="loginbtn" type="submit" name="" value="Login"><br>
                    <input id="forgotbtn" type="submit" name="" value="Forgot Password">
                    <p id="error" class="lead errortxt"></p>
                </div>


                <div class="right">
                    <h1><strong>Online Players</strong></h1>
                    <p class="lead boxtext">Currently online:</p>
                    <p class="lead boxtext">- Test</p>
                    <p class="lead boxtext">- Test</p>
                    <p class="lead boxtext">- Test</p>
                    <p class="lead boxtext">- Test</p>
                    <p class="lead boxtext">- Test</p>
                </div>
        </div>    
    </body>
</html>

Alles anzeigen

Und meine momentane CSS dazu:

CSS: login.css

.left
{
  position: relative;
  right: 35%;
  bottom: 50%;
}


.right
{
  position: relative;
  left: 35%;
  bottom: 50%;
}


.box{
    width: 1200px;
    padding: 40px;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #191914;
    text-align: center;
  }
  .box h1{
    color: white;
    text-transform: uppercase;
    font-weight: 500;
  }
  .boxtext{
    color: white;
  }
  .box input[type = "text"],.box input[type = "password"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 280px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
  }
  .box input[type = "text"]:focus,.box input[type = "password"]:focus{
    width: 300px;
    border-color: #2ecc71;
  }
  .box input[type = "submit"]{
    width:15%;
    border:0;
    background: none;
    display: inline-block;
    margin: 10px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
  }
  .box input[type = "submit"]:hover{
    background: #2ecc71;
  }


  #forgotbtn
  {
    border: 2px solid #b1b1b1;
    width: 20%;
    margin-top: 0px;
  }
  #forgotbtn:hover
  {
    background: #b1b1b1;
  }

Alles anzeigen

Und momentan sieht es leider so aus:

Spoiler anzeigen

Kaliber · 28. April 2019

Entweder nutzt du position:absolute oder mal (float:left und float:right mit margin)

LeonMrBonnie · 15. Mai 2019

Hi,
ich möchte dass der Text links und die Buttons rechts immer schön untereinander bleiben, leider tun sie das nur wenn auch 3 oder 2 Charaktere vorhanden sind. Sonst ist der Text und die Buttons über das ganze Bild verteilt. Wie kann ich das ordentlich umsetzen?

HTML

<html>
    <head>
        <link href="characterselect.css" rel="stylesheet">
        <link href="bootstrap.min.css" rel="stylesheet">
        <script src="jquery.js"></script>
    </head>
    <body style="background-color: transparent;" onload="mp.trigger('CharacterSelectLoaded');">
            <div class="blurry"></div>
            <div class="box">
                    <div class="center">
                        <img src="Logo.png" class="logo"></img>
                        <h1><strong>Charakterauswahl</strong></h1>
                        <p class="lead boxtext">Bitte waehle einen Charakter aus.</p>
                        <div id="charbox1">
                            <p id="char1text" class="lead boxtext charboxp"><strong></strong></p>
                        </div>
                        <div id="charbox2">
                            <p id="char2text" class="lead boxtext charboxp"><strong></strong></p>
                        </div>
                        <div id="charbox3">
                            <p id="char3text" class="lead boxtext charboxp"><strong></strong></p>
                        </div>
                    </div>
            </div>     
    <script>
        function loadData(char1, char2, char3)
        {
            if(char1 !== "undefined")
            {
                let charbox = document.getElementById("charbox1");
                let DelBtn = document.createElement("input");
                DelBtn.setAttribute('id', "char1delete");
                DelBtn.setAttribute('type', "submit");
                DelBtn.setAttribute('class', "charboxinput");
                DelBtn.setAttribute('value', "Loeschen");
                let PlayBtn = document.createElement("input");
                PlayBtn.setAttribute('id', "char1");
                PlayBtn.setAttribute('type', "submit");
                PlayBtn.setAttribute('class', "charboxinput");
                PlayBtn.setAttribute('value', "Spielen");
                charbox.appendChild(DelBtn);
                charbox.appendChild(PlayBtn);
                document.getElementById("char1text").innerHTML = `<strong>${char1}</strong><br>`;
            }
            else
            {
                let charbox = document.getElementById("charbox1");
                let CreateBtn = document.createElement("input");
                CreateBtn.setAttribute('id', "char1create");
                CreateBtn.setAttribute('type', "submit");
                CreateBtn.setAttribute('class', "charboxinput");
                CreateBtn.setAttribute('value', "Erstellen");
                charbox.appendChild(CreateBtn);
                document.getElementById("char1text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
            }


            if(char2 !== "undefined")
            {
                let charbox = document.getElementById("charbox2");
                let DelBtn = document.createElement("input");
                DelBtn.setAttribute('id', "char2delete");
                DelBtn.setAttribute('type', "submit");
                DelBtn.setAttribute('class', "charboxinput");
                DelBtn.setAttribute('value', "Loeschen");
                let PlayBtn = document.createElement("input");
                PlayBtn.setAttribute('id', "char2");
                PlayBtn.setAttribute('type', "submit");
                PlayBtn.setAttribute('class', "charboxinput");
                PlayBtn.setAttribute('value', "Spielen");
                charbox.appendChild(DelBtn);
                charbox.appendChild(PlayBtn);
                document.getElementById("char2text").innerHTML = `<strong>${char2}</strong><br>`;
            }
            else
            {
                let charbox = document.getElementById("charbox2");
                let CreateBtn = document.createElement("input");
                CreateBtn.setAttribute('id', "char2create");
                CreateBtn.setAttribute('type', "submit");
                CreateBtn.setAttribute('class', "charboxinput");
                CreateBtn.setAttribute('value', "Erstellen");
                charbox.appendChild(CreateBtn);
                document.getElementById("char2text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
            }


            if(char3 !== "undefined")
            {
                let charbox = document.getElementById("charbox3");
                let DelBtn = document.createElement("input");
                DelBtn.setAttribute('id', "char3delete");
                DelBtn.setAttribute('type', "submit");
                DelBtn.setAttribute('class', "charboxinput");
                DelBtn.setAttribute('value', "Loeschen");
                let PlayBtn = document.createElement("input");
                PlayBtn.setAttribute('id', "char3");
                PlayBtn.setAttribute('type', "submit");
                PlayBtn.setAttribute('class', "charboxinput");
                PlayBtn.setAttribute('value', "Spielen");
                charbox.appendChild(DelBtn);
                charbox.appendChild(PlayBtn);
                document.getElementById("char3text").innerHTML = `<strong>${char3}</strong><br>`;
            }
            else
            {
                let charbox = document.getElementById("charbox3");
                let CreateBtn = document.createElement("input");
                CreateBtn.setAttribute('id', "char3create");
                CreateBtn.setAttribute('type', "submit");
                CreateBtn.setAttribute('class', "charboxinput");
                CreateBtn.setAttribute('value', "Erstellen");
                charbox.appendChild(CreateBtn);
                document.getElementById("char3text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
            }
        }
    </script>
    </body>
</html>

Alles anzeigen

Die CSS:

CSS

.blurry
{
    background-color: #000;
    opacity: 0.7;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 99;
}


.box{
    width: 600px;
    padding: 40px;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #191914;
    text-align: center;
  }
  .box h1{
    color: white;
    text-transform: uppercase;
    font-weight: 500;
  }
  .boxtext{
    color: white;
  }
  .box input[type = "text"],.box input[type = "password"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #3498db;
    padding: 14px 10px;
    width: 280px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
  }
  .box input[type = "text"]:focus,.box input[type = "password"]:focus{
    width: 300px;
    border-color: #2ecc71;
  }
  .box input[type = "submit"]{
    border:0;
    background: none;
    display: inline-block;
    margin: 10px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: white;
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
  }
  .box input[type = "submit"]:hover{
    background: #2ecc71;
  }


  .charboxp
  {
    margin-top: 25px;
    float: left;
  }
  .charboxinput
  {
    float: right;
    margin-right: 5px;
  }


  #char1delete, #char2delete, #char3delete
  {
    border: 2px solid #d6260f;
  }
  #char1delete:hover, #char2delete:hover, #char3delete:hover
  {
    background: #d6260f;
  }


  #char1create, #char2create, #char3create
  {
    border: 2px solid #858585;
  }
  #char1create:hover, #char2create:hover, #char3create:hover
  {
    background: #858585;
  }


  .logo
  {
    width: 300px;
    height: 300px;
    margin-top: -60px;
    margin-bottom: -20px;
  }

Alles anzeigen

Und so sieht es bisher aus:

Spoiler anzeigen

Edgar · 15. Mai 2019

Du kannst das ganze gut mit Flex lösen. Schaue dir dazu das schnelle Beispiel hier an:

https://jsfiddle.net/Cireyses/bm0L6g4v/6/

LeonMrBonnie · 15. Mai 2019

Ich bin ein absoluter Anfänger mit CSS und hab keine Ahnung wie ich das verwenden soll.

Edgar · 15. Mai 2019

Der relevante Teil ist alles ab der .character-Klasse.

In dieser wird definiert, dass

die Breite 100% ist (kann btw. weggelassen werden )
display auf flex gesetzt wird
und ein margin-bottom von 5 px, dient dazu, dass der Abstand zu den einzelnen Charaktere höher ist

.character > * spricht jedes Kindelement innerhalb von .character an, unmittelbar danach, also nur die erste Ebene.
Diese gibt flex: 1; an und sagt aus, dass alle Kinderelemente die höchstmögliche Breite verwenden, also jeweils 1/3 der Breite, da es ja drei Elemente sind (Text, Button und Button).

.character > *:first-child spricht das erste der Kinderelemente an und sagt aus, dass die Mindestbreite bei 260px liegen soll. Ist zwar nicht notwendig, aber von deinem Bild ausgesehen, ist die erste Spalte breiter als die beiden anderen.

Das ganze ist natürlich nicht responsive, sollte der Bildschirm des Spielers kleiner sein, als seine Hoden, dann schieben sich die Elemente ineinander bzw. aus der Box heraus.

Hier ist ein Guide zu display: flex:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ARCADION · 17. Mai 2019

Guten Tag,

und zwar komme ich nicht mehr weiter.

Ich möchte gerne im Footer eine Zahl stehen haben wieviel sich im Forum befinden.

Wie mach ich das ganze ?

Kaliber · 17. Mai 2019

Zitat von Madness

wieviel sich im Forum befinden.

Online? Offline?

Registriert? Eingeloggt?

Oder nur Besucher?

ARCADION · 17. Mai 2019

Zitat von Kaliber

Online? Offline?
Registriert? Eingeloggt?

Oder nur Besucher?

Nur die User die Online sind und Eingeloggt...

Pytroxis · 17. Mai 2019

Moin moin,

ich würde gerne von einer Webseite etwas auslesen.
Der Teil den ich auslesen möchte ist mit einer besonderen ID gekennzeichnet.
Nun zu meiner Frage:
Wie kann ich diesen Teil auslesen und auf meiner eigenen Webseite ausgeben?
Ich habe den Befehl cUrl gefunden aber irgendwie blicke ich da nicht ganz durch?
Könnte mir jemand eine Möglichkeit nennen bzw. mir vielleicht ein kurzes Beispiel verlinken/zeigen wo ich erkennen kann,
wie ich nur diesen einen Teil auslesen kann (habe nur Anleitungen gefunden, bei welchen die gesamte Webseite ausgelesen wird).

Kaliber · 17. Mai 2019

Zitat von Madness

Nur die User die Online sind und Eingeloggt...

Mit einem einfachen SQL-Query.
Sobald ein User die Seite aktualisiert setzt einen Timestamp in die Datenbank, dann weißt du, dass er online ist.

Und dann berechnest du die Differenz...und schaust eben, ob der User vor 15min (Hier ein Limit eben abfragen) aktiv war...dann online anzeigen.

Zitat von Pytroxis

Der Teil den ich auslesen möchte ist mit einer besonderen ID gekennzeichnet.

Da gibt es viele quick & dirty Möglichkeiten.
Kannst du genau zeigen, wie der HTML Code aussieht von dem, was du haben möchtest, dann kann man dir schnell sowas schreiben

Pytroxis · 19. Mai 2019

Zitat von Kaliber

Da gibt es viele quick & dirty Möglichkeiten.Kannst du genau zeigen, wie der HTML Code aussieht von dem, was du haben möchtest, dann kann man dir schnell sowas schreiben

HTML

...
<div class="price">€4.67</div>
...

Entnommen: https://www.japancentre.com/en…i-akitakomachi-brown-rice

Vielen Dank schon einmal für deine Hilfe, du bist sehr zuvor kommend

@Kaliber
ist es auch möglich, dass in JavaScript umzusetzen?
Nutze gerade hauptsächlich JavaScript und NodeJs daher, wäre eine lösung mit den beiden Optionen super

[SAMMELTHREAD] Kleine Coding Fragen

Beitrag von hundi (11. April 2019)

Beitrag von LeonMrBonnie (17. April 2019)

Beitrag von LeonMrBonnie (14. Mai 2019)

Beitrag von Pytroxis (19. Mai 2019)