Webseite in html programmieren; wie werden abstände definiert?

Hallo,

wie kann in einem html dokumment ein Abstand definiert werden zur linken seite?

zum einen geht es mit dem Befehl <center>Hier ist der Text </center>

wenn ich aber nun einen abstand von 100 px von der linken Bildschirmseite bis zum Element haben möchte wie kann ich diesen in dem html dokumment definieren?

3 Antworten

TheFamousSpy

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

29.12.2021, 01:03

<center> solltest du nicht mehr verwenden, das ist veraltet.

Wenn du etwas positionieren willst, dann umgibst du das Ganze mit einem <div> Container und richtest diesen aus https://www.w3schools.com/tags/tag_div.ASP

Woher ich das weiß:Berufserfahrung – drei Jahre Berufserfahrung mit Wordpress

jjk123

29.12.2021, 07:56

Ich denke mal du willst in etwa so etwas:

Bild zum Beitrag

Also dass die Webseite selbst nicht den ganzen Bildschirm ausfüllt, sondern nur einen Teil. Dazu musst du zuerst die größe definieren, z.B:

width: 900px;

Wahrscheinlich willst du aber, dass es bei Handys keinen Abstand hat, sondern den ganzen Bildschirm ausfüllt, also ändern wir es so ab:

width: 100%;
max-width: 900px

Die Breite ist also 100%, aber maximal 900px.

Um das Element jetzt noch in der Mitte zu positionieren, verwendet man

margin: 0 auto;

Wenn du einfach nur einen Linken Abstand haben willst, musst du nur ein margin definieren und den Rest einfach vergessen:

margin-left: 100px;

Asporc

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

29.12.2021, 01:05

Die verwendung von Pixeln ist veraltet.

Wenn du das in %en definierst funktioniert das bei jeder Bilschirmauflösung.

lschecker90gf

Fragesteller

29.12.2021, 01:06

und wie

Asporc

29.12.2021, 01:06

@lschecker90gf

Steht in der "Selfhtml" gut erklärt.

lschecker90gf

Fragesteller

29.12.2021, 01:16

@Asporc

nach was muss ich da suchen?

Asporc

29.12.2021, 01:16

@lschecker90gf

Selfhtml

Ähnliche Fragen

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Wäre nett wenn mir da jemand helfen könnte :)

...zur Frage

Wie Text in einem Flex Element unterschiedlich positionieren?

Hallo zusammen! Ich habe ein Parent Element mit einem Child Element drinnen. Das Childelement besteht aus einer h3 Überschrift und einer h5 Überschrift. Die h3 Überschrift soll zentriert sein, als irgendwas mit center. Die h5 Überschrift hingegen soll am linken Rand stehen. Wie bekomme ich das mit Flex Box hin? Mit justify-content: center; habe ich beides in die Mitte bekommen, aber ich möchte ja nur eins...

MfG Lass228

...zur Frage

Webdesign: Hat rem in font-size (im Wurzelelement) Nachteile gegenüber em in font-size (im body-Element)?

Hallo, angenommen ich will die Schriftgröße definieren, dann würde ich es so machen:

html {font-size: 62.5%;}

und danach in anderen Elementen nur noch mit der Maßeinheit rem weitermachen, bei 20 Pixeln beispielsweise 2.0rem und so weiter. Das geht ja, weil ich die Basisschriftgröße oben mit 62.5% auf 10 Pixel gestellt habe.

Ich sehe aber auch Leute, die statt rem em im body-Element verwenden und so weitermachen. Ich bin noch nicht so erfahren und frage mich wieso, denn mir erscheint rem im Wurzelelement sinnvoller, aber vielleicht übersehe ich auch was. Bei folgender Angabe kommt es doch beispielsweise zu Verfälschungen der angegebenen Schriftgröße: Statt 0.70em wird im Ergebnis beispielsweise 0,665em herausgespuckt (0.95*0.70=0.665). Das wiederum lässt sich umgehen, wenn man mit rem im Wurzel-Element arbeitet. Sehe ich das verkehrt? Wieso sollte man dann noch die Schriftgröße mit em im body-Element definieren statt mit rem im Wurzel-Element?

body {font-size: 0.95em;}
article {font-size: 0.70em;}

...zur Frage

Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

...zur Frage

Custom 'Upload' Button?

Schönen guten Abend!

Ich baue derzeit eine kleine Website mit einer Upload Funktion für beispielsweise Videos und Bilder.

Dazu benötige ich das HTML-Element input mit dem Type file.

Während man beispielsweise normale Eingabefelder mit dem Type text etc. gut selbst 'darstellen' kann, fängt es beim type="file" schon an, dass man den Value des Buttons nicht selsbt bestimmen kann. Mal davon abgesehen, dass der im Button enthaltene Text von Browser zu Browser variiert.

Nun aber zur eigentlichen Frage:

Wie kann ich einen benutzerdefinierten File-Upload definieren?

...zur Frage

JavaScript (html) Element zentrieren?

Hallo ich habe in JavaScript ein Element erstellen lassen und die Größe perfekt angepasst, nun muss es nur noch zentriert werden aber irgendwie funktioniert nichts, egal was ich versuche bleibt es immer in der linken oberen Ecke!

...zur Frage

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!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>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zur Frage

Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

<label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

<label for="workS" align="center"><strong> Abteilung W </strong></label><br>

<label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

//Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

result[element.name] = result[element.name] || [];

result[element.name].push(element);

return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

const limit = name.split(":")[name.split(":").length-1];

for(const el of elements) {

el.addEventListener("change", e => {

if (elements.filter(x => x.checked).length > limit) {

e.target.checked = false;

}

});

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

...zur Frage

html und css: Wo finde ich alte html-befehle?

Hallo,

bei der Erstellung von Webinhalten sind mitlerweile das zusammenspiel von html und css unabbindbar. Oder halt en CMS system.

die CSS-Dateien sind soweit ich richtig informiert bin für das Aussehen (Format der Inhalte) zuständig. Die Css-Datei muss in der html-Datei verlinkt werden.

Frage 1:
Mit welchem Befehl wird die Css Datei verlinkt?

Weiter im Kontext...

Um in der html-datei auf die Formatvorlagen in der Css-Datei zurückzugreifen müssen diese in der Css-Datei definiert und mit einem Tag versehen werden.

Frage 2:
Wie definiere ich diese in der Css Datei?
Frage 2.1:
Wie kann ich diese in der Html-Datei nutzen, einfach den definierten Tag einfügen?

Und hier die Frage für unsere Internethelden....

Vor langer langer Zeit als Css noch nicht geboren war, wurde soweit ich weiss nur in html geschrieben/programmiert/erstellt.. wie auch immer.

Damals musste das Format noch komplett eingegeben werden.

Bsp.:

{font-family: Arial, source code pro, sans-serif; font-size: 24px; color: blue;}

Frage 3:
Wie muss ein html Tag aufgebaut sein damit ich diese "Eingabemethode" so verwenden kann?

Frage 4:
Wie werden folgende Befehle in dem in der Frage 3 befragten weise umgesetzt?

Fett
kursiv
unterstrichen
durchgestrichen
hochgestellt
tiefgestellt
Blocksatz

Ich freue mich schon über die vielen Antworten

...zur Frage

HTML-Schrift neben Bild zentrieren?

Hallo,

ich möchte eine Überschrift mittig auf einer Webseite zentrieren.

In der linken Ecke ist ein Logo und wenn ich mit align: "Center" die Schrift zentrieren möchte kann ich sie nur zwischen dem rechten Ende des Logos und dem rechten Ende des Bildschirms zentrieren und nicht allgemein mittig.

Ich freue mich über eure Hilfe.

...zur Frage

HTML: Warum hält "sticky" nicht perfekt?

Ich habe drei div-Elemente von diesem Aufbau:

<div position:sticky; top=0px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div position:sticky; top=50px><table>Zwei Zeilen, mehrere Spalten</table></div>

<div><table>mehrere tausend Zeilen, 'eine' Spalte</table></div>

Wenn ich nun im Element "C" zu scrollen beginne, ist zunächst alles wie gewünscht. A und B bewegen sich nicht.

Aber wenn jene Zeile, die nach dem Laden nicht zu sehen war (erste Zeile der zweiten Bildschirmseite), am Element "B" ankommt, beginnt sich dieses ebenfalls nach oben zu verschieben (zunächst hinter "A", z-index).

Kommt nun auch diese Zeile (der zweiten Bildschirmseite) am Element "A" an, verschiebt sich diese ebenfalls und es ist nur noch das Element "C" zu sehen.

Was kann ich tun, damit auch beim Scrollen A, B permanent zu sehen ist, selbst dann, wenn schon viele Bildschirmseiten gescrollt wurden?

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen