Visual studio - padding funktioniert nicht (style)?

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 ?

2 Antworten

Baerenheini

26.09.2022, 17:14

Grundsätze:

es gibt:

padding-top, padding-bottom, padding-right, padding-left

-welche nur einen zugehörigen Wert haben

Dann gibt es wie in deinem Fall - padding: x y;

x ist in diesem Fall für den Abstand von oben und unten und y von rechts und links

haveyou

Fragesteller

26.09.2022, 17:17

Weißt du eventuell woran es liegt, dass sich der Inhalt nicht nach links/rechts verschieben lässt ?

Baerenheini

26.09.2022, 17:21

@haveyou

willst du den content nur auf eine Seite verschieben, also Links oder Rechts, oder willst du ihn mittig stehen haben?

haveyou

Fragesteller

26.09.2022, 17:21

@Baerenheini

Erstmals nur nach links bzw. rechts

haveyou

Fragesteller

26.09.2022, 17:22

@haveyou

Wenn es aber einen code gibt um ihn mittig zu bekommen, würde ich mich freuen wenn du mir den auch nennen könntest :)

Baerenheini

26.09.2022, 17:23

@haveyou

na dann kannst du nicht für links und rechts dasselbe padding benutzen,

wenn du nach links verschieben willst: padding-left: 0; padding-right: 40px;

die 40 ist nur ein Beispiel...

Baerenheini

26.09.2022, 17:24

@haveyou

Mittig bekommst du ihn, indem pading-left und padding-right denselben Wert haben

haveyou

Fragesteller

26.09.2022, 17:28

@Baerenheini

Ich habe es mal ausprobiert, leider funktioniert es immer noch nicht - es lässt sich wie vorhin nur nach oben/unten verschieben, gibt es eine andere Möglichkeit um das Problem zu finden ?

Übrigens: Vielen Dank für deine bisherige Bemühungen bzw. Antworten

Baerenheini

26.09.2022, 18:12

@haveyou

Tut mir leid, so aus der Ferne ist es schwer zu helfen. Schau dir einfach möglichst viele Tutorials auf Youtube an wie man eine Webseite baut. Das ist die einzige effektive Möglichkeit alles richtig zu verstehen/lernen.

Viel Erfolg

haveyou

Fragesteller

26.09.2022, 18:29

@Baerenheini

Alles klar, ich danke die für deine Hilfe !

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmieren & Softwareentwicklung

26.09.2022, 17:10

padding: x y; demnach musst du x ändern und nicht y. X ist links rechts und y ist oben unten

haveyou

Fragesteller

26.09.2022, 17:12

Danke für deine Antwort aber das funktioniert leider nicht (es lässt sich nach unten und oben verschieben aber nicht nach links und rechts)

FaTech

26.09.2022, 17:13

@haveyou

Dann zeig Mal deinen Code

haveyou

Fragesteller

26.09.2022, 17:14

@FaTech

<style>

.page-content

{ padding: 150px 100px;

}

</style>

</head>

FaTech

26.09.2022, 17:15

@haveyou

Das ist nicht alles

haveyou

Fragesteller

26.09.2022, 17:15

@haveyou

Dabei lässt sich durch die 150 der Inhalt nur nach unten/oben verschieben nicht nach rechts/links

haveyou

Fragesteller

26.09.2022, 17:16

@FaTech

Das ist nur head Bereich- da wo das Problem ist

FaTech

26.09.2022, 17:17

@haveyou

Kleiner Tipp: Ich rate dir davon ab. Mach lieber den:

padding-left

padding-top

padding-right

padding-bottom

haveyou

Fragesteller

26.09.2022, 17:19

@FaTech

Danke für den Tipp, kannst du mir noch vlt. hinschreiben wie der Code dann aussehen möchte bzw. ist meiner richtig:

<style>

.page-content

{padding-right: 100px;

}

</style>

FaTech

26.09.2022, 17:20

@haveyou

Ja ist es.

haveyou

Fragesteller

26.09.2022, 17:22

@FaTech

Alles klar vielen Dank !

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

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

HTML CSS bild verschieben funktioniert nicht?

Hey,
Ich möchte gerne das eine Bild nach links oben verschieben, nur weiß ich nicht wie. Hab auch schon padding, margin und align-item versucht nix hat funktioniert-_-.

schonmal danke im vorraus
Liebe Grüße
Lucas

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

Wie funktioniert Debugging in Visual Studio Code?

Für JavaScript?

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

Kann mir jemand mit einem Problem bei Visual Studio Code helfen?

Ich hab mir ein Tutorial zur Einrichtung angeguckt. Ich habe Visual Studio Code, Phyton und den Chromedriver heruntergeladen. Allerdings funktioniert der Chromedriver anscheinend nicht so ganz und ich kann Selenium nicht wie im Video beschrieben downloaden. Kann mir jemand sagen was ich tun soll?

...zur Frage

Bild im HTML/CSS verrutscht seitlich?

Hallo,

ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.

Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.

Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.

Also habe ich mir diesen Code hier ausgedacht:

<html>
<head>
<style>


#example {
    box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
    /*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
    margin-left: -10vw;
    margin-right: -10vw;
    margin-top: 0px;
    margin-bottom: 6vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 0px;
    padding-bottom: 0px;
    boarder-left: 0px;
    boarder-right: 0px;
    boarder-top: 0px;
    boarder-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2vh;
    left: 0px;
}
</style>
</head>
<body>
<div id="example">
    <img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>

</body>

Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.

Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.

Woran liegt das und wie kann ich das vermeiden?

(Firefox Dev-Edition 66.0b1 (64-bit))

...zur Frage

cannot open file 'detours.lib'?

Ich mache grad ein Tutorial auf youtube in Visual Studio nach und bekomme den error : LNK1104 : cannot open file 'detours.lib' wisst ihr was ich dagegen machen kann?

...zur Frage

Warum funktioniert Button btn = sender as Button; seit Visual Studio nicht mehr?

Hallo.

Also wenn ich in Visual Studio 2022 diese Code eingebe:

Bekomme ich solche Fehler:

Denn bei Visual Studio 2019 war das nicht so, da hat es ohne probleme funktionirt. Anscheinend hat Microsoft die C# oder Windows Forms so geändert das sender as Button nicht mehr möglich macht.

Weiß jemand was man machen kann?

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

Visual Studio website auf ein raspberry pi packen?

kann ich eine website in Visual Studio machen und dann auf ein raspberry pi packen?

wenn ja wie?
gibt es ein tutorial dafür?

...zur Frage

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zur Frage

Was ist das für ein Fehler in Visual Studio?

Ich habe diesen Code in Visual Studio (mit Unity) geschrieben und alles hat funktioniert. Aber sobald ich oben in der Start Funktion eine Public Variable einsetze wird der komplette Rest rot unterstrichen. Woran liegt das? Danke schonmal für die Hilfe!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen