Angepinnt [SAMMELTHREAD] Kleine Coding Fragen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • HeyHo,

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

    PHP-Quellcode

    1. echo "<tr bgcolor=\"#E3F0F7\">". PHP_EOL;
    2. //echo "<td align=\"center\" rowspan=\"1\">". PHP_EOL;
    3. echo "<tr bgcolor=\"#E3F0F7\">". PHP_EOL;
    4. echo "<td colspan=\"3\" rowspan=\"1\"><center><b> Laufzeit</b></center></td>". PHP_EOL;
    5. echo "</tr>". PHP_EOL;
    6. echo "<td><input type=\"text\" size=\"6\" value=\"",beleg("t1h","00"),"\" name=\"t1h\"></td>";
    7. echo "<td><input type=\"text\" size=\"1\" value=\"",beleg("t1m","45"),"\" name=\"t1m\"></td>";
    8. echo "<td><input type=\"text\" size=\"1\" value=\"",beleg("t1s","00"),"\" name=\"t1s\"></td>";
    9. //echo "<tr bgcolor=\"#E3F0F7\"><td>Stunden</td>". PHP_EOL;
    10. //echo "<td>Minuten</td>". PHP_EOL;
    11. //echo "<td>Sekunden</td></tr>". PHP_EOL;
    12. echo "</tr>". PHP_EOL;
    Alles anzeigen
    Bilder
    • Tabelle Code.JPG

      40 kB, 580×205, 19 mal angesehen
    • Tabelle.JPG

      180,62 kB, 1.279×1.023, 26 mal angesehen

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von PlaxX () aus folgendem Grund: Code neu eingefügt

  • Canna schrieb:

    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. :D

    Ansonsten kannst du mich auch kurz Kontaktieren und wir machen das eben über TeamViewer dann hast du zugriff auf den kompletten Code.
  • 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-Quellcode: index.html

    1. <html>
    2. <head>
    3. <link href="login.css" rel="stylesheet">
    4. <link href="bootstrap.min.css" rel="stylesheet">
    5. <script src="jquery.js"></script>
    6. </head>
    7. <body style="background-color: transparent;">
    8. <div class="blurry"></div>
    9. <div class="box">
    10. <div class="left">
    11. <h1><strong>News</strong></h1>
    12. <p class="lead boxtext">Version 1.0 out now!</p>
    13. <p class="lead boxtext">- Server is now running!</p>
    14. <p class="lead boxtext">- Server is now running!</p>
    15. <p class="lead boxtext">- Server is now running!</p>
    16. <p class="lead boxtext">- Server is now running!</p>
    17. <p class="lead boxtext">- Server is now running!</p>
    18. </div>
    19. <div>
    20. <h1><strong>Login</strong></h1>
    21. <p class="lead boxtext">Please login using your credentials.</p>
    22. <input id="username" name="username" type="TEXT" value="" placeholder="Name">
    23. <input id="password" name="password" type="PASSWORD" value="" placeholder="Password">
    24. <input id="loginbtn" type="submit" name="" value="Login"><br>
    25. <input id="forgotbtn" type="submit" name="" value="Forgot Password">
    26. <p id="error" class="lead errortxt"></p>
    27. </div>
    28. <div class="right">
    29. <h1><strong>Online Players</strong></h1>
    30. <p class="lead boxtext">Currently online:</p>
    31. <p class="lead boxtext">- Test</p>
    32. <p class="lead boxtext">- Test</p>
    33. <p class="lead boxtext">- Test</p>
    34. <p class="lead boxtext">- Test</p>
    35. <p class="lead boxtext">- Test</p>
    36. </div>
    37. </div>
    38. </body>
    39. </html>
    Alles anzeigen


    Und meine momentane CSS dazu:

    CSS-Quellcode: login.css

    1. .left
    2. {
    3. position: relative;
    4. right: 35%;
    5. bottom: 50%;
    6. }
    7. .right
    8. {
    9. position: relative;
    10. left: 35%;
    11. bottom: 50%;
    12. }
    13. .box{
    14. width: 1200px;
    15. padding: 40px;
    16. position: absolute;
    17. z-index: 100;
    18. top: 50%;
    19. left: 50%;
    20. transform: translate(-50%,-50%);
    21. background: #191914;
    22. text-align: center;
    23. }
    24. .box h1{
    25. color: white;
    26. text-transform: uppercase;
    27. font-weight: 500;
    28. }
    29. .boxtext{
    30. color: white;
    31. }
    32. .box input[type = "text"],.box input[type = "password"]{
    33. border:0;
    34. background: none;
    35. display: block;
    36. margin: 20px auto;
    37. text-align: center;
    38. border: 2px solid #3498db;
    39. padding: 14px 10px;
    40. width: 280px;
    41. outline: none;
    42. color: white;
    43. border-radius: 24px;
    44. transition: 0.25s;
    45. }
    46. .box input[type = "text"]:focus,.box input[type = "password"]:focus{
    47. width: 300px;
    48. border-color: #2ecc71;
    49. }
    50. .box input[type = "submit"]{
    51. width:15%;
    52. border:0;
    53. background: none;
    54. display: inline-block;
    55. margin: 10px auto;
    56. text-align: center;
    57. border: 2px solid #2ecc71;
    58. padding: 14px 40px;
    59. outline: none;
    60. color: white;
    61. border-radius: 24px;
    62. transition: 0.25s;
    63. cursor: pointer;
    64. }
    65. .box input[type = "submit"]:hover{
    66. background: #2ecc71;
    67. }
    68. #forgotbtn
    69. {
    70. border: 2px solid #b1b1b1;
    71. width: 20%;
    72. margin-top: 0px;
    73. }
    74. #forgotbtn:hover
    75. {
    76. background: #b1b1b1;
    77. }
    Alles anzeigen
    Und momentan sieht es leider so aus:
    Ich helfe zu allen Fragen bezüglich PAWN Scripting gerne weiter.
    Auch im Bereich JavaScript und dort der RageMP API helfe ich gern.

    Konversation: Konversation starten
    Discord: LeonMrBonnie#2251

    Beitrag von LeonMrBonnie ()

    Dieser Beitrag wurde vom Autor gelöscht ().
  • 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-Quellcode

    1. <html>
    2. <head>
    3. <link href="characterselect.css" rel="stylesheet">
    4. <link href="bootstrap.min.css" rel="stylesheet">
    5. <script src="jquery.js"></script>
    6. </head>
    7. <body style="background-color: transparent;" onload="mp.trigger('CharacterSelectLoaded');">
    8. <div class="blurry"></div>
    9. <div class="box">
    10. <div class="center">
    11. <img src="Logo.png" class="logo"></img>
    12. <h1><strong>Charakterauswahl</strong></h1>
    13. <p class="lead boxtext">Bitte waehle einen Charakter aus.</p>
    14. <div id="charbox1">
    15. <p id="char1text" class="lead boxtext charboxp"><strong></strong></p>
    16. </div>
    17. <div id="charbox2">
    18. <p id="char2text" class="lead boxtext charboxp"><strong></strong></p>
    19. </div>
    20. <div id="charbox3">
    21. <p id="char3text" class="lead boxtext charboxp"><strong></strong></p>
    22. </div>
    23. </div>
    24. </div>
    25. <script>
    26. function loadData(char1, char2, char3)
    27. {
    28. if(char1 !== "undefined")
    29. {
    30. let charbox = document.getElementById("charbox1");
    31. let DelBtn = document.createElement("input");
    32. DelBtn.setAttribute('id', "char1delete");
    33. DelBtn.setAttribute('type', "submit");
    34. DelBtn.setAttribute('class', "charboxinput");
    35. DelBtn.setAttribute('value', "Loeschen");
    36. let PlayBtn = document.createElement("input");
    37. PlayBtn.setAttribute('id', "char1");
    38. PlayBtn.setAttribute('type', "submit");
    39. PlayBtn.setAttribute('class', "charboxinput");
    40. PlayBtn.setAttribute('value', "Spielen");
    41. charbox.appendChild(DelBtn);
    42. charbox.appendChild(PlayBtn);
    43. document.getElementById("char1text").innerHTML = `<strong>${char1}</strong><br>`;
    44. }
    45. else
    46. {
    47. let charbox = document.getElementById("charbox1");
    48. let CreateBtn = document.createElement("input");
    49. CreateBtn.setAttribute('id', "char1create");
    50. CreateBtn.setAttribute('type', "submit");
    51. CreateBtn.setAttribute('class', "charboxinput");
    52. CreateBtn.setAttribute('value', "Erstellen");
    53. charbox.appendChild(CreateBtn);
    54. document.getElementById("char1text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
    55. }
    56. if(char2 !== "undefined")
    57. {
    58. let charbox = document.getElementById("charbox2");
    59. let DelBtn = document.createElement("input");
    60. DelBtn.setAttribute('id', "char2delete");
    61. DelBtn.setAttribute('type', "submit");
    62. DelBtn.setAttribute('class', "charboxinput");
    63. DelBtn.setAttribute('value', "Loeschen");
    64. let PlayBtn = document.createElement("input");
    65. PlayBtn.setAttribute('id', "char2");
    66. PlayBtn.setAttribute('type', "submit");
    67. PlayBtn.setAttribute('class', "charboxinput");
    68. PlayBtn.setAttribute('value', "Spielen");
    69. charbox.appendChild(DelBtn);
    70. charbox.appendChild(PlayBtn);
    71. document.getElementById("char2text").innerHTML = `<strong>${char2}</strong><br>`;
    72. }
    73. else
    74. {
    75. let charbox = document.getElementById("charbox2");
    76. let CreateBtn = document.createElement("input");
    77. CreateBtn.setAttribute('id', "char2create");
    78. CreateBtn.setAttribute('type', "submit");
    79. CreateBtn.setAttribute('class', "charboxinput");
    80. CreateBtn.setAttribute('value', "Erstellen");
    81. charbox.appendChild(CreateBtn);
    82. document.getElementById("char2text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
    83. }
    84. if(char3 !== "undefined")
    85. {
    86. let charbox = document.getElementById("charbox3");
    87. let DelBtn = document.createElement("input");
    88. DelBtn.setAttribute('id', "char3delete");
    89. DelBtn.setAttribute('type', "submit");
    90. DelBtn.setAttribute('class', "charboxinput");
    91. DelBtn.setAttribute('value', "Loeschen");
    92. let PlayBtn = document.createElement("input");
    93. PlayBtn.setAttribute('id', "char3");
    94. PlayBtn.setAttribute('type', "submit");
    95. PlayBtn.setAttribute('class', "charboxinput");
    96. PlayBtn.setAttribute('value', "Spielen");
    97. charbox.appendChild(DelBtn);
    98. charbox.appendChild(PlayBtn);
    99. document.getElementById("char3text").innerHTML = `<strong>${char3}</strong><br>`;
    100. }
    101. else
    102. {
    103. let charbox = document.getElementById("charbox3");
    104. let CreateBtn = document.createElement("input");
    105. CreateBtn.setAttribute('id', "char3create");
    106. CreateBtn.setAttribute('type', "submit");
    107. CreateBtn.setAttribute('class', "charboxinput");
    108. CreateBtn.setAttribute('value', "Erstellen");
    109. charbox.appendChild(CreateBtn);
    110. document.getElementById("char3text").innerHTML = `<strong>Nicht vorhanden</strong><br>`;
    111. }
    112. }
    113. </script>
    114. </body>
    115. </html>
    Alles anzeigen


    Die CSS:

    CSS-Quellcode

    1. .blurry
    2. {
    3. background-color: #000;
    4. opacity: 0.7;
    5. height: 100%;
    6. width: 100%;
    7. position: absolute;
    8. z-index: 99;
    9. }
    10. .box{
    11. width: 600px;
    12. padding: 40px;
    13. position: absolute;
    14. z-index: 100;
    15. top: 50%;
    16. left: 50%;
    17. transform: translate(-50%,-50%);
    18. background: #191914;
    19. text-align: center;
    20. }
    21. .box h1{
    22. color: white;
    23. text-transform: uppercase;
    24. font-weight: 500;
    25. }
    26. .boxtext{
    27. color: white;
    28. }
    29. .box input[type = "text"],.box input[type = "password"]{
    30. border:0;
    31. background: none;
    32. display: block;
    33. margin: 20px auto;
    34. text-align: center;
    35. border: 2px solid #3498db;
    36. padding: 14px 10px;
    37. width: 280px;
    38. outline: none;
    39. color: white;
    40. border-radius: 24px;
    41. transition: 0.25s;
    42. }
    43. .box input[type = "text"]:focus,.box input[type = "password"]:focus{
    44. width: 300px;
    45. border-color: #2ecc71;
    46. }
    47. .box input[type = "submit"]{
    48. border:0;
    49. background: none;
    50. display: inline-block;
    51. margin: 10px auto;
    52. text-align: center;
    53. border: 2px solid #2ecc71;
    54. padding: 14px 40px;
    55. outline: none;
    56. color: white;
    57. border-radius: 24px;
    58. transition: 0.25s;
    59. cursor: pointer;
    60. }
    61. .box input[type = "submit"]:hover{
    62. background: #2ecc71;
    63. }
    64. .charboxp
    65. {
    66. margin-top: 25px;
    67. float: left;
    68. }
    69. .charboxinput
    70. {
    71. float: right;
    72. margin-right: 5px;
    73. }
    74. #char1delete, #char2delete, #char3delete
    75. {
    76. border: 2px solid #d6260f;
    77. }
    78. #char1delete:hover, #char2delete:hover, #char3delete:hover
    79. {
    80. background: #d6260f;
    81. }
    82. #char1create, #char2create, #char3create
    83. {
    84. border: 2px solid #858585;
    85. }
    86. #char1create:hover, #char2create:hover, #char3create:hover
    87. {
    88. background: #858585;
    89. }
    90. .logo
    91. {
    92. width: 300px;
    93. height: 300px;
    94. margin-top: -60px;
    95. margin-bottom: -20px;
    96. }
    Alles anzeigen

    Und so sieht es bisher aus:
    Ich helfe zu allen Fragen bezüglich PAWN Scripting gerne weiter.
    Auch im Bereich JavaScript und dort der RageMP API helfe ich gern.

    Konversation: Konversation starten
    Discord: LeonMrBonnie#2251

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

    In dieser wird definiert, dass
    1. die Breite 100% ist (kann btw. weggelassen werden :| )
    2. display auf flex gesetzt wird
    3. 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:
    css-tricks.com/snippets/css/a-guide-to-flexbox/




    Los Santos County Roleplay
    Hier gibt es Informationen

  • Neu

    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).
  • Neu

    Madness schrieb:

    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.


    Pytroxis schrieb:

    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 :D


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/

    Beitrag von Pytroxis ()

    Dieser Beitrag wurde vom Autor aus folgendem Grund gelöscht: Problem hat sich erledigt -> HTML Tag onInput ().
  • Neu

    Kaliber schrieb:

    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 :D

    HTML-Quellcode

    1. ...
    2. <div class="price">€4.67</div>
    3. ...

    Entnommen: japancentre.com/en/products/13…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 :D

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Pytroxis ()

    Beitrag von dsfdf34as ()

    Dieser Beitrag wurde von seegras gelöscht ().
  • Neu

    Pytroxis schrieb:

    ist es auch möglich, dass in JavaScript umzusetzen?
    Jaaa, du kannst ja einfach Ajax nutzen und dann kannste mit Javascript das PHP Skript aufrufen, hier mal ein Beispiel:

    PHP-Quellcode

    1. <?php
    2. //Das die get.php Datei
    3. $html = file_get_contents('https://www.japancentre.com/en/products/13574-okura-minori-akitakomachi-brown-rice');
    4. $token = strpos($html,'<div class="price">');
    5. if($token === false) exit();
    6. $a = strlen('<div class="price">');
    7. echo trim(htmlspecialchars(substr($html,$token+$a,strpos($html,'<',$token+$a)-($token+$a))));
    8. ?>

    JavaScript-Quellcode

    1. <script>
    2. function loadDoc() {
    3. var xhttp = new XMLHttpRequest();
    4. xhttp.onreadystatechange = function() {
    5. if (this.readyState == 4 && this.status == 200) {
    6. document.body.innerHTML =
    7. this.responseText;
    8. }
    9. };
    10. xhttp.open("GET", "get.php", true);
    11. xhttp.send();
    12. }
    13. window.onload = loadDoc;
    14. </script>
    Alles anzeigen


    Ergebnis der Seite:

    £4.09


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. X/
  • Neu

    Kaliber schrieb:

    Jaaa, du kannst ja einfach Ajax nutzen und dann kannste mit Javascript das PHP Skript aufrufen, hier mal ein Beispiel:
    Super vielen Dank für die Antwort.
    Ich habe selbst nochmal gesucht und einen etwas besseren Ansatz gefunden (da ich NodeJS verwende).
    JaveScript stellt ein HTTP-get-request -> NodeJS sucht auf der Seite den Preis und liefert das Ergebnis an JS.


    Leider habe ich ein komplett neues Problem und ich weiß nicht was ich falsch mache :S

    Quellcode

    1. var tabelle = document.getElementById("table").insertRow(document.getElementsByTagName("tr").length-1);
    2. var a = tabelle.insertCell(0).innerHTML = "TEst";
    3. a.classList.add("sons", "preis");
    Eigentlich müsste a die Klassen bekommen aber wenn ich auf die Webseite gehe sehe ich, dass sie die Klassen nicht gesetzt bekommen hat.
    Was habe ich falsch gemacht? :S

    Edit:
    Ich bin ein Voll idiot. Ich habe nicht bemerkt, dass ich der Variable innerHTML zugewiesen hab, klar dass es dann nicht ging.
    Habe dann noch die Klasse über className hinzugefügt, da es ein Element ist. Klappt dann jetzt :)

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Pytroxis ()