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

Beitragsersteller

29.12.2021, 01:06

und wie

Asporc

29.12.2021, 01:06

@lschecker90gf

Steht in der "Selfhtml" gut erklärt.

lschecker90gf

Beitragsersteller

29.12.2021, 01:16

@Asporc

nach was muss ich da suchen?

Asporc

29.12.2021, 01:16

@lschecker90gf

Selfhtml

Ähnliche Beiträge

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?

...zum Beitrag

Wie kann ich den Abstand zwischen HTML-Tags entfernen?

HI, ich programmiere gerade einen Taschenrechner in HTML/CSS/JavaScript und möchte den Abstand zwischen den Elementen entfernen. Margin, Padding und Border sind bereits auf 0 gestellt. Der Abstand ist auch nur horizontal zwischen den Elementen. Vielen Dank im Voraus :-)

...zum Beitrag

Drei Elemente nebeneinander in HTML?

Hallo miteinander ich bin wieder mal am Programmieren und dabei bin ich auf folgendes Problem gestoßen:Links von der Seite sollte die Navigation sein in der Mitte der Inhalt und Rechts sollten die SN wie Facebook,Twitter,Google+,YT verlinkt sein. Jedoch finde ich im web nur anleitungen wie man html so aufbaut das zwei elemente nebeneinander sind also navigation darüber, darunter links inhalt rechts verlinkungen und darunter wiederum ein footer. Jetzt währe ich auf die Methode Float gestoßen und da währen dann auch alle Drei Elemente nebeneinander. Jedoch tritt dann Folgendes Problem auf: Wenn ich einen Footer anfügen möchte ist das Nicht möglich da sich der Footer dann ca 200px unter dem anfang vom Content befindet (hierbei ist das Problem der Cont. hat immer eine mindest Höhe von 500px, das heist der Footer verschwindet hinter dem Cont.) Jetzt die Frage weis jemand von euch eine Möglichkeit in CSS das man drei Elemente nebeneinander anordnet ohne das man den Befehl Float benutzt?

...zum Beitrag

HTML Element Click - Counter / Zähler?

Hey, also ich wollte fragen ob jemand weiß, wie ich einen HTML Element Script so schreibe, dass man einen ,,counter hat'' (Ich hab keine ahnung von programmieren, aber bräuchte das).

Wenn man sozusagen auf den + Button drückt, zählt es eine zahl hoch. Auf dem - Butoon zählt es dann runter. Ist das irgendwie möglich?

...zum Beitrag

HTML Objektgröße ändern?

Ich bin dabei eine kleine Webseite zu programmieren. Jedoch ist mir die Größe der Elemente auf dieser zu klein. Wie kann ich das ändern?

...zum Beitrag

HTML CSS überlappen verhindern?

Guten Tag,

ich programmiere ein System in welchem ich oben ein Element habe, jetzt möchte ich bei einem neuen Element dadrunter sagen top:0; und dann soll das neue Element praktisch direkt unter dem anderen beginnen und nicht von ganz oben und das andere überlappen.

Wie kann ich das machen?

Mit freundlichen Grüßen

...zum Beitrag

Java Tabelle mit HTML Layout erstellen?

Hallo!

Ich möchte aus einer großen HTML Tabelle einige Informationen auslesen und dann in einer Tabelle anzeigen lassen, die möglichst genau so aussehen soll. Die Informationen lese ich im Moment mit folgendem Code heraus:

 public static void WebTable(String s){
    String html = //musste den Link entfernen, da dieser nicht öffentlich gemacht werden darf;
   
      try {
         Document doc = Jsoup.connect(html).get();
         Elements tableElements = doc.select("table");


         ArrayList<String> list = new ArrayList<String>();
       
         Elements tableRowElements = tableElements.select(":not(thead) tr");
         for (int i = 0; i < tableRowElements.size(); i++) {
             Element row = tableRowElements.get(i);
             Elements rowItems = row.select("td");
             if(rowItems.size() == 7){
            
             if(rowItems.get(0).text().equalsIgnoreCase(klasse.replaceAll(" ", ""))){

                 for (int j = 0; j < rowItems.size(); j++) {
                    list.add(rowItems.get(j).text());
                }  }     
         }
         }
     } catch (IOException e) {
         e.printStackTrace();
      }
}

Also habe ich nun alle benötigten Daten in einer ArrayList. Nun möchte ich diese einfach in eine Tabelle eintragen. (Also von links nach rechts einfach auffüllen). Die Tabelle soll jedoch aussehen, wie auf dem Bild gezeigt.

http://goo.gl/4zWlSe

Hoffe mir kann jemand weiterhelfen.

Lg SuperSpace

...zum Beitrag

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?

...zum Beitrag

Bilder tabellarisch anordnen?

Hallo,

wie ordne ich Bilder (die ich über einen externen Link bekomme) tabellarisch an, dass ich immer z.B. 5 in einer Reihe habe? Mache ich das über HTML oder CSS und wenn ja, wie lauten die Befehle dafür? Eine Tabelle anlegen über HTML bringt ja nicht viel oder? Oder kann ich da den Link von dem ich die Bilder bekomme einbeziehen?

Danke schon mal im voraus

Liebe Grüße Irgendwer1501

...zum Beitrag

Navigationsleiste auf andere html?

Hallo, ich bin ziemlich neu was Websides programmieren angeht und ich finde kein gutes tutorial dazu, wie man wenn man eine Navigationsleiste hat z.b auf Getränke klickt und dann eine andere html/css Seite mit Getränken auftaucht etc.

versuche da auxh bisschen JavaScript mit rein zubringen d.h Benutze die Navigationsleiste von Material Design Lite.

Bin da bisschen überfragt und habe keine ahnung😅

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
        <a class="mdl-navigation__link" href="">Link</a>
      </nav>
    </div>
  </header>
  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
    <div class="page-content"><!-- Your content goes here --></div>
  </main>
</div>

...zum Beitrag

DIV-Abstand entfernen (HTML/CSS)

Wenn ich meine Datei in DIV-Elemente aufteile, wird im Browser automatisch ein Abstand zwischen diesen eingefügt. Dabei spielt es keine Rolle, ob ich als Browser Chrome oder Firefox verwende. Gibt es eine Möglichkeit das zu unterbinden?

...zum Beitrag

HTML, CSS, JavaScript: Komischer Rand entsteht, der da nicht hin soll. Wie entfernen?

Im Rahmen eines Projektes erstelle ich derzeit eine "Webseite". Das Problem ist, dass im blau umkreisten Menü ein Abstand entstanden ist, der dort nicht hingehört. Zur besseren Veranschaulichung wurden Elementen eine Farbe zugewiesen.

Link zum Code:
https://docs.google.com/document/d/15GRD_qnv_Rr4WNFKoEWZLnoZD5wKAh0WldTEo8ZLhuY/edit?usp=sharing

Screenshot

...zum Beitrag

HTML Dinge nebeneinander anordnen?

Hi, ich habe etwas HTML und CSS geschrieben und das Ergebnis ist nicht wie ich es mir gewünscht habe. Ich will versuchen, dass das Bild ganz links auf der Website ist, in der Mitte das Willkommen und ganz rechts der link zu einer anderen Page. Ich habe versucht, die Elemente zu positionieren, aber irgendwie verändert sich die Position nicht. Kann jemand den Fehler hier vielleicht schnell finden? Danke schonmal!

...zum Beitrag

Wie kann man in HTML mit CSS einzelne Linkfraben ändern?

Hallo :)

Ich arbeite gerade an einer Website. Ich habe für das .html Dokument die Links alle als color: white definiert. Nun möchte ich aber einzelne Links einer div class in Farbe color: black haben.

Weiß jemand wie ich die einzelnen Linkfarben ändern kann?
Danke :)

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen