CSS & HTML Divs werden nebeneinander statt untereinander angezeigt.

  • CSS

Es gibt 4 Antworten in diesem Thema. Der letzte Beitrag () ist von xChRoNiKx.

    CSS & HTML Divs werden nebeneinander statt untereinander angezeigt.

    Guten Tag ,

    folgendes Problem arbeite grad an einem Projekt.
    Script ist schon fertig.
    Nun wollte ich was schlichtes und einfaches als Seite haben.

    Gesagt getan.

    Bekomme allerdings bei folgendem HTML & CSS Code:

    jsfiddle link: jsfiddle.net/896eug1v/

    oder hier die codes :

    Spoiler anzeigen

    HTML-Quellcode

    1. [/spoiler][spoiler]<div class="centerdiv" >
    3. <div class="status_center">
    4. Test
    5. </div>
    6. <div class="zentriert">
    7. <form action="index.php" method="post" autocomplete="off">
    8. <input type="text" class="urlbox" name="link" />
    9. <button type="submit" name="shortsubmit" class="shortsubmit" >button</button>
    10. </form>
    11. </div>
    13. </div>[/spoiler][spoiler]

    Spoiler anzeigen

    HTML-Quellcode

    1. [/spoiler][spoiler]@CHARSET "ISO-8859-1";
    2. * {
    3. margin: 0;
    4. padding: 0;
    5. }
    6. html, body {
    7. width: 100%;
    8. height: 100%;
    9. }
    10. .centerdiv {
    11. font-size: 150%;
    12. font-family: sans-serif;
    13. display: -webkit-flex;
    14. display: -webkit-box;
    15. display: -ms-flexbox;
    16. display: flex;
    17. -webkit-align-items: center;
    18. -webkit-box-align: center;
    19. -ms-flex-align: center;
    20. align-items: center;
    21. }
    23. .zentriert {
    24. text-align: center;
    25. color: #464646;
    26. width: 100%;
    27. }
    29. .status_center {
    30. text-align: center;
    31. color: #464646;
    32. width: 100%;
    33. }
    35. .urlbox {
    36. margin: 0;
    37. width: 50%;
    38. font-family: sans-serif;
    39. font-size: 22px;
    40. appearance: none;
    41. box-shadow: none;
    42. border-radius: none;
    43. padding: 15px 5px;
    44. line-height: 25px;
    45. }
    46. .urlbox:focus {
    47. outline: none;
    48. }
    49. .shortsubmit {
    50. background: #263640;
    51. background-image: -webkit-linear-gradient(top, #263640, #999c9e);
    52. background-image: -moz-linear-gradient(top, #263640, #999c9e);
    53. background-image: -ms-linear-gradient(top, #263640, #999c9e);
    54. background-image: -o-linear-gradient(top, #263640, #999c9e);
    55. background-image: linear-gradient(to bottom, #263640, #999c9e);
    56. -webkit-border-radius: 10;
    57. -moz-border-radius: 10;
    58. border-radius: 10px;
    59. font-family: Arial;
    60. color: #ffffff;
    61. font-size: 22px;
    62. padding: 10px 20px 10px 20px;
    63. border: solid #000000 2px;
    64. text-decoration: none;
    65. }
    67. .shortsubmit:hover {
    68. background: #4d7187;
    69. background-image: -webkit-linear-gradient(top, #4d7187, #88a6ba);
    70. background-image: -moz-linear-gradient(top, #4d7187, #88a6ba);
    71. background-image: -ms-linear-gradient(top, #4d7187, #88a6ba);
    72. background-image: -o-linear-gradient(top, #4d7187, #88a6ba);
    73. background-image: linear-gradient(to bottom, #4d7187, #88a6ba);
    74. text-decoration: none;
    75. }



    Die beiden divs wollen einfach nicht untereinander.
    Das Div "status_center" soll entweder unter "zentriert" oder über. Natürlich auch so gecentert.

    Hatte auch schon google gefrgt aber jaaa viele lösungen ausprobiert und gint trotzdessen nicht.
    Jemand ne Idee warum das nicht geht ?


    greetz
    Grüße , xChRoNiKx

    Nützliche Links:
    Visual Studio Empfohlene Einstellungen | Try-Catch heißes Eisen

    Das siehst schonmal gut aus.
    Sehe auch das dort viel Code rausgeflogen ist und kann nachvollziehen wieso das jetzt geht ^^
    Danke dafür schonmal @Cross

    Fehlt nur noch das des ganze Horizontal & Vertikal gecentert wird (Was ich garnicht erwähnt hatte seh ich grad).
    Da werd ich mich mal dran versuchen. Falls jemand natürlich Lösungsvorschläge hat nehm ich gerne an ;)

    Greetz
    Grüße , xChRoNiKx

    Nützliche Links:
    Visual Studio Empfohlene Einstellungen | Try-Catch heißes Eisen

Facebook
Telefonspende