Padding in visual studios (style)?

Hallo ;D ich will ein Text eingabe Feld nach rechts verschieben , das geht nicht, keine ahnung wieso. Das was mich daran verwundert ist aber , dass ich den Text nach oben bzw unten verschieben kann. Hat irgendwer eine Idee was an folgendem code falsch ist ?

<style>

.pageg-content{

padding: 50px 200px;

}

</style>

die 50px stehen ja für ''oben unten'' und die 200 für ''links rechts'' also sehe ich nicht wo das Problem sein könnte

1 Antwort

Artista86

25.01.2024, 22:11

Deine Frage ist sehr schwammig ;)
Aber Fakt ist: Padding steht für den innen-Abstand des Elements. um ein Element nach Links/Rechts/Oben/Unten zu verschieben wie dus beschreibst würde ich Margin nutzen. Also:

.pageg-content{

margin: 50px 200px;

}

So wird dein Element "von aussen her" verschoben.
Ich denke alerdings du suchst nach der absolute-property in position.
.pageg-content{

margin: 50px 200px;
position:absolute

}

wird dir das Element abhängig vom ParentContent absolut auf dem Screen verschieben

Woher ich das weiß:Berufserfahrung

Bennett230

Fragesteller

26.01.2024, 07:14

Ja wusste nicht wie ich das formulieren soll 🫣 Danke aber auf jeden Fall !

Hallo zusammen,

ich gehe momentan ein Tutorial durch, leider funktioniert das padding bei mir nicht:

<style>

.page-content

{ padding: 0px 100px;

}

</style>

Nach unten bzw. oben lässt sich der Inhalt verschieben, nur leider nicht nach rechts und links. Ich habe es wie im Tutorial gemacht, hat jmd. vlt. eine Idee wo das Problem sein könnte ?

...zur Frage

Padding funktioniert nicht?

Hi,

Ich bin neu im Themenbereich html und CSS. Mein Problem ist, dass ich ein Textfeld erstellt habe, welches mit folgendem Code eine bestimmte Position haben soll:

    .page-content {
        padding: 30px 200px;
    }

Die 30px wird das Feld auch nach unten verschoben, aber irgendwie wird es nicht die 200px nach rechts verschoben. Weiß jemand, woran das liegen könnte?

Danke für jede Hilfe!

...zur Frage

CSS verstehen?

Ich schreibe bald eine Prüfung die html/css beinhaltet. An sich ist es einfach nur verstehe ich nicht wie die div boxen funktionieren. Ich habe z.B eine hauptbox wo ein banner drin ist und unten 2 boxen neben einander. Nur behersche ich diese boxen irgendwie nicht. Also die eine springt mal da hin und die andere wo anders hin. Margin und padding will irgendwie nicht funktionieren. Kann mir jemand erklären wie die Boxen funktionieren? Also wonach richten Sie sich und wann machen Sie was?

Mein Code:

<html>

<head>

.hauptbox{border-style: solid; width: 500px; height: 500px;

}

.banner{border-style: solid; width: 450px; height: 100px; margin: 25px;

}

.content1{border-style: solid; height: 300px; margin-left: 50px;

}

.content2{border-style: solid; height: 300px; margin: 25px; margin-left: 50px; padding-top: 50px;

}

</style>

</head>

<body>

</body>

</html>

...zur Frage

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zur Frage

Warum lässt sich mein Bild nicht verschieben (HTML/CSS)?

Hey leute,

Ich arbeite gerade an einem Schulprojekt und muss dabei eine Website machen. Jetzt habe ich gerade das problem:

Ich habe Text eingefügt und unter den Text ein selbst skaliertes Bild reingemacht das genau auf die Größe der Box angepasst ist. Wenn ich jedoch nun padding-left: 15px; mache z.B. verschiebt sich der Text UND die Bilder nach links. Nun ist mein problem: Ich kann das Bild nach oben unten und rechts verschieben aber gott verdammt nochmal nicht nach links. Ich habe schon sau viel ausprobiert und alles gegoogelt erfolgslos... ich hoffe ihr könnt mir weiterhelfen damit ich die Bilder wieder reinbekomme und sie nicht ins aside rein klaffen.

Box width = 1085 padding-left: 15px; Bild format: 1100:250(ja ohne das padding passt es genau rein auch wenn es 1085 ist)

Lg Pascal

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Kein Ergebnis mit Javascript?

Hallo, ich versuche gerade ein bisschen programmieren zu lernen, bin noch sehr am anfangen. Ich hab mit Visual Studios Code einen Code erstellt, der eine Überschrift und Text beinhaltetet. ( hab ein YouTube Video dazu geguckt und zudem den gleichen Code einmal von ChatGPT erstellen lassen). Allerdings immer wenn ich das Produkt in den Browser ziehe kommt nur eine leere weiße Seite als wäre es leer. Woran könnte es liegen und wie kann ich es lösen??
Danke für die Hilfe

bin noch sehr am Anfang sorry

...zur Frage

jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>

...zur Frage

HTML CSS Problem, Kann wer helfen?

Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.

Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?

<!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>Tetris</title>
    <link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
    <style>
        .gameField {
            max-width: 50%;
            margin: 25px auto;
            background-color: #151618;
            box-shadow: 20px 20px 15px black;
            padding-top: 2%;
            padding-bottom: 2%;
            padding-left: 2.5%;
            padding-right: auto;
        }

        canvas {
            background-color: #000000;
            border: 3px solid #a60cf0;
            width: clamp(50px, 50%, 320px);
        }


        .buttonStart {
            background-color: #a60cf0;
        }
    </style>
</head>
<body>
    <div class="gameField">
        <canvas class="canvas" width="320px"  height="640px    </canvas>
        <button class="buttonStart">Start</button>
    </div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Warum hat das Menü trotzdem noch Abstand?

Ich bin ein relativer Anfänger wenn es ums Coden geht. Ich wollte jetzt eine Menü Leiste erstellen, doch egal was ich probiere, gibt es immer noch Abstand nach oben.

Kann mir vielleicht helfen?

Hier der Code:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<style>

body {

margin: 0;

}

.Bild1 {

width: 50px;

height: 74px;

}

.Platz80 {

height: 80px;

}

.Platz20 {

height: 20px;

}

.Auswahl {

float: right;

padding-right: 30px;

font-size: 50px;

}

.Auswahl ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

}

.Auswahl li {

float: left;

}

.Auswahl li a {

color: #8e9aaf;

text-align: center;

padding-left: 30px;

}

.Auswahl li a:hover {

color: #ffcad4;

}

#MenüText {

color: #8e9aaf;

margin: 0;

padding: 0;

font-size: 30px;

}

.Menü {

margin: 0;

padding: 0;

height:100px;

background-color: #cbc0d3;

}

</style>

<ul>

<li>

<a href="/">Ziele</a>

</li>

<li>

</li>

</ul>

</div>

<h3>Willkommen!</h3>

</div>

...zur Frage

HTML Quill WYSIWYG, wie Designe ich es richtig?

Der Bereich zum editieren springt immer nach unten, schuld daran ist ein Skript teil, nämich

<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>

-----------------------------------------------------------------------------

<!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>
   <style>
    body{
      margin: 0cm;
      padding: 0cm;
      font-size: 16px;
    }
    p {
      font-size: 16px;
    }
    header{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      position: relative;
      background-color: palevioletred;
    }
    footer{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
      background-color: palevioletred;
    }
    #sidebar{
      margin: 0cm;
      padding: 0cm;
      float: left;
      min-height:100vh ;
      overflow-x: hidden;
      width: 150px;
      background-color: aliceblue;
      overflow-y: scroll;
      -ms-overflow-style: none; 
      scrollbar-width: none; /* Firefox */
    }
    #sidebar::-webkit-scrollbar {
      display: none;
    }
    #rechts{
      margin: 0cm;
      padding: 0cm;
      width: 100%;
       
      min-height: 100vh;
      background-color: azure;
    }
  </style>
  <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
</head>
<body>
  <header>a</header>
  <div id="sidebar">
    <p>Bereich1</p>
    <p>Bereich2</p>
    <p>Bereich3</p>
    <p>Bereich4</p>
    <p>Bereich5</p>
    <p>Bereich6</p>
    <p>Bereich7</p>
    <p>Bereich8</p>
    <p>Bereich9</p>
  </div>
   
<div id="rechts">
  <div id="toolbar">
  <button class="ql-bold">Bold</button>
  <button class="ql-italic">Italic</button>
    </div>
   <div id="editor">
    <p>Hello World!</p>
  </div>
</div>
   
  <script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
  <script>
   var editor = new Quill('#editor', {
    modules: { toolbar: '#toolbar' },
    theme: 'snow'
   });
  </script>
  <footer>a</footer>
</body>
</html>

...zur Frage

Wie in HTML und CSS Texte und Bilder verschieben?

Hey! Ich habe angefangen mich mit dem erstellen von Websites zu beschäftigen. Ich bin noch ein sehr sehr blutiger Anfänger und Frage mich deshalb folgende Frage:

Wie in HTML & CSS Bilder & Texte verschieben?

Ich möchte nämlich einen Text & ein Bild von der oberen rechten Ecke, nach unten verschieben.

Ich habe das auch schon mit Padding-Top & Right probiert, jedoch verschiebt sich dann der Rest (NavBar & anderer Text) mit nach unten. Wie löse ich das problem?

Ich nutze Visual Studio Code.

...zur Frage

html text verschieben in alle richtungen

mit welchem befehl kann man texte in html nach links,rechts,oben und unten verschieben?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen