Problem CSS, HTML

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

  • Problem CSS, HTML

    Hallo,

    ich arbeite gerade am Grundkonzept meines User Control Panels, aus reinem Interesse am lernen.

    Folgendes Problem stellt sich mir. Ich möchte gerne mein Design wie im Bild unten im Spoiler aufbauen, sprich in diesem "Container" alle relevanten Dinge und drum herum einfach ein Background.

    Sprich der Backround scheint an beiden Seiten, sowie oben und unten heraus.

    Mein HTML Code sieht derzeit wie folgt aus

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Control Panel </title>
    4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    6. <link rel="stylesheet" type="text/css" href="css/style.css">
    7. </head>
    8. <body>
    9. <div class="background-box">
    10. <h1>Login</h1>
    11. </div>
    12. </body>
    13. </html>
    Alles anzeigen

    Sowie mein CSS Code:


    CSS-Quellcode

    1. body
    2. {
    3. margin: 0;
    4. padding: 0;
    5. background-color: blue;
    6. background-size: cover;
    7. background-position: center;
    8. font-family: sans-serif;
    9. }
    10. .background-box
    11. {
    12. width: 500px;
    13. height: 500px;
    14. color: red;
    15. top: 50%;
    16. left: 50%;
    17. position: absolute;
    18. transform: translate(-50%, -50%);
    19. box-sizing: border-box;
    20. }
    Alles anzeigen
    Leider funktioniert das ganze nicht so. Derzeitiges Resultat:


    Ich bitte um Hilfe! Zudem wollte ich gerne fragen, wie ich es realisiere, dass das ganze Design responsive ist.
  • Passt, vielen Dank. Code sieht jetzt so aus:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Control Panel </title>
    4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    6. <link rel="stylesheet" type="text/css" href="css/style.css">
    7. </head>
    8. <body>
    9. <div class="background-box">
    10. <div class="background-item">
    11. </div>
    12. </body>
    13. </html>
    Alles anzeigen


    CSS-Quellcode

    1. body
    2. {
    3. background: url(../images/bg.jpg);
    4. background-size: 100% auto;
    5. background-repeat: no-repeat;
    6. }
    7. .background-box
    8. {
    9. display: grid;
    10. padding: 200px;
    11. }
    12. .background-item
    13. {
    14. background-color: white;
    15. padding: 400px;
    16. }
    Alles anzeigen

    Background scheint nun auch responsive zu sein. Wie mache ich das, dass sich der Container nicht in die Länge zieht, beim zoomen etc?
  • Du nutzt doch Bootstrap. Warum arbeitest du nicht damit:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Control Panel </title>
    4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    6. <link rel="stylesheet" type="text/css" href="css/style.css">
    7. </head>
    8. <body>
    9. <div class="container">
    10. <div class="row">
    11. <div class="col-md-12">
    12. Hier kommt dein Text
    13. </div>
    14. </div>
    15. </div>
    16. </body>
    17. </html>
    Alles anzeigen
  • Hab nochmal was anderes ausprobiert. Folgender Code:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Infinity Deathmatch - CP</title>
    5. <link rel="stylesheet" href="../css/bootstrap.min.css">
    6. <link rel="stylesheet" href="../css/style.css">
    7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    8. </head>
    9. <body>
    10. </body>
    11. </html>
    Alles anzeigen


    Quellcode

    1. body
    2. {
    3. background-color: red;
    4. }

    Seite bleibt leider weiß..
  • Der Body ist (sofern nicht anders angegeben) immer so groß wie sein Inhalt. Bei dir hat er keinen Inhalt, dementsprechend ist er auch 0px hoch. Er ist also rot, du kannst es nur nicht sehen.
    Wenn du willst das die ganze Seite rot ist solltest du lieber das Dokument selbst ansprechen:

    CSS-Quellcode

    1. html {
    2. background-color: red;
    3. }
    Alternative kannst du dem body eine Mindesthöhe geben, damit du zumindest den body siehst:

    CSS-Quellcode

    1. body {
    2. background-color: red;
    3. min-height: 400px;
    4. }



    @Mr.Shell red völlig in Ordnung in CSS, ändern auf Hex-Code würde das Problem nicht lösen. Und mit der Bitte dir das Privat zu schicken um "alles zu fixen" hilffst du weder @FamouZz_ dabei es zu lernen, noch anderen die vielleicht via Suchfunktion auf dieses Thema stoßen in der Hoffnung hier eine Lösung zu finden.

    Kalcor schrieb:

    The fact is, I am right. And if you think I'm wrong, you are wrong.
  • Danke das klappt schon mal. Nun zu einem erneuten Problem, dann denke ich, dass ich ein paar Dinge alleine schaffe.

    Ich wollte ein Logo platzieren, der Pfad ist richtig angegeben. Jedoch erscheint kein Logo.

    CSS Code:

    Quellcode

    1. .top-logo
    2. {
    3. background-image:url(../images/logo.png);
    4. }


    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Control Panel </title>
    4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    6. <link rel="stylesheet" type="text/css" href="css/style.css">
    7. </head>
    8. <body>
    9. <div id="top-logo"></div>
    10. </body>
    11. </html>
    Alles anzeigen
  • hier mal Beispiel:

    CSS-Quellcode

    1. #leftlogo { float:left; width: 234px; height: 123px; margin-left: 20px; }

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Control Panel </title>
    4. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    5. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    6. <link rel="stylesheet" type="text/css" href="css/style.css">
    7. </head>
    8. <body>
    9. <img id="leftlogo" src="img/meinlogo.jpg">
    10. </body>
    11. </html>
    Alles anzeigen

    PHP-Quellcode

    1. <?php echo "Mit freundlichen Grüßen <br/> Mr.Shell"; ?>

    Beitrag von FamouZz_ ()

    Dieser Beitrag wurde vom Autor aus folgendem Grund gelöscht: fixxed ().

    Beitrag von FamouZz_ ()

    Dieser Beitrag wurde vom Autor gelöscht ().
  • FamouZz_ schrieb:

    Background wird nicht angezeigt.. ansonsten ist die erste Seite fertig, sobald der Background da wäre..

    Quellcode

    1. body
    2. {
    3. background-image: url("images/idm_background.jpg");
    4. background-attachment: fixed;
    5. background-repeat: no-repeat;
    6. }
    @maddin
    Hallo versuchs mal zum testen direkt über HTML:
    <body background="DEINBILDHIER">

    wenns geht dann gucken wa weiter.

    PHP-Quellcode

    1. <?php echo "Mit freundlichen Grüßen <br/> Mr.Shell"; ?>
  • Bringt auch nichts. Ebenfalls auch keine Fehler.

    Füge ich es beispielweise so im HTML Dokument ein, geht es.
    Will das aber gerne in CSS haben.

    Quellcode

    1. <style>
    2. body
    3. {
    4. background-image: url("images/loginbg.jpg");
    5. background-attachment: fixed;
    6. background-repeat: no-repeat;
    7. }
    8. </style>

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