• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Webseite Bildschirm anpassen

Programmi3r3r

Neues Mitglied
Hallo erstmal, ich versuche seit ein paar Wochen meine Webseite so zu programmieren, dass alle Monitore diese einigermaßen normal anzeigen können - ohne Erfolg.
Ich habe immer prozentangaben genutzt, aber es geht dennoch nicht. Die HTML-elemente überschneiden sich dann oder werden an ganz anderen Stellen angezeigt. Ich habe lange gegoogelt, aber alle "Lösungen" haben bei meiner Webseite nicht funktioniert. Wenn man im Browser diese seite (html.de) aufruft und die höhe oder Breite des fensters verändert überschneidet nichts. Weiss jemand wie das geht?! Würde mir sehr helfen.

MFG Programmi3r3r
 
Werbung:
Hallo

Weiss jemand wie das geht?!

Ja.

Würde mir sehr helfen.

Das ist eher unwahrscheinlich. Um das zu verstehen muss man schon genügend Grundwissen angesammelt haben. Und das Grundwissen füllt ganze Bücher. Damit sind wir hier im Forum überfordert.

Mit einem Link zu deinem aktuellen Stand der Dinge können wir dir wahrscheinlich eher und konkreter weiterhelfen. Quelltextschnipsel helfen in der Regel nicht weiter.

Gruss

MrMurphy
 
Wenn mit Link die Domain gemeint ist - ich habe keine. Noch habe ich auf meinem eigenem PC den Webserver laufen, da dies zum programmieren wesentlich einfacher ist.
 
Werbung:
Ich werde mich mal mit diesem Hoster beschäftigen... Aber dennoch; was mache ich den konkret falsch?!
Wie gesagt, die höhen- und breitenangaben sind alle in prozent. Gibt es nicht irgendeinen css- oder htmlbefehl, der mir weiterhelfen könnte?
 
Werbung:
Was mir gerade beim lesen der AGB´s auffällt: Kann man icons, die man heruntergeladen hat auf bplaced.net hochladen oder darf man das wegen irgendwelchen rechtlichen gründen nicht?
 
du liest dir AGBs durch? vorbildlich!:D das mit den icons sollte klargehen, da solche icons (ionicons, font awesome oder was du benutzt) meistens unter MIT oder einer anderen offenen lizenz veröffentlich sind.
 
Werbung:
möchte ja nicht nerven, aber Irgendwie geht das mit dem hoster nicht... error 404 (nicht gefunden). Eine index.php datei habe ich aber hochgeladen und der account ist aktiviert... dauert das einfach nur eine weile?!

EDIT:geht jetzt :D
die domain:http://webhosting45.bplaced.net/
PS: Die Webseite wird warscheinlich nur für ein paar tage online sein
 
Zuletzt bearbeitet:
Hallo

Wir werden dir wahrscheinlich nicht helfen können, da bei dir einfach zu viele Grundlagen fehlen. Du hast leider vollkommen falsche Vorstellungen wie eine Webseite erstellt wird.

Ich habe immer prozentangaben genutzt

Das ist ein beliebter Anfängerfehler. Zu einem flexiblen und / oder responsive Design gehören durchaus auch feste Einheiten wie px, em oder rem.

Da es im Internet kaum sinnvolle Anleitungen gibt solltest du zunächst etwas Geld in aktuelle Literatur zu HTML5 und CSS3 stecken. Im Internet finden sich leider meist nur veraltete oder sogar falsche Informationen, die von Anfängern nicht als solche erkannt werden können.

Alleine die Erläuterung der Fehler auf deiner Seite würde ein ganzes Buch füllen. Das können wir hier im Rahmen eines Forums natürlich nicht leisten.

Grundsätzlich verschieben sich HTML-Elemente von sich aus nicht übereinander. Wenn dies geschieht hat der Webseitenersteller CSS falsch oder unsinnig angewendet.

Webseiten wie deine sollten grundsätzlich in verschiedenen aufeinander aufbauenden Abschnitten erstellt werden. Zum Beispiel:

1. Grundgerüst der Webseite
2. HTML
3. CSS
4. JavaScript

Bei deinem Grundgerüst fehlen entscheidende Angaben. So der Doctype, damit der Browser überhaupt weiß, welche HTML-Version er anwenden soll. Oder der Zeichensatz, damit auch Sonderzeichen und Umlaute korrekt angezeigt werden.

Ein sinnvolles Grundgerüst für aktuelle Webseiten könnte zum Beispiel folgendermaßen aussehen, wobei der Inhalt von title und description natürlich auf den endgültigen Inhalt abgestimmt werden sollten:

Code:
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Layout Probleme 01</title>
  <meta name="description" content="HTML5, CSS3">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
  </style>
</head>
<body>
</body>
</html>

Die folgenden Informationen gelten für den gesamten Quelltext und nicht nur für die Stellen, die ich zur Verdeutlichung zitiere. Wenn ich zum Beispiel eine Stelle zitiere und darauf hinweise, das inline-CSS nicht verwendet werden sollte gilt das für alle inline-CSS-Angaben. Oder für alle br-Elemente, alle geschützten Leerzeichen, alle div und so weiter.

Solche Angaben

Code:
user-scalable=no"

in

Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

solltest du unterlassen. Wenn ein Besucher die Seite nicht wie von dir vorgeschlagen benutzen kann solltest du ihm die Möglichkeit geben eigene Anpassungen vorzunehmen.

Dann wird der HTML-Quelltext im body-Bereich hinzugefügt, wobei einerseits die Regeln vom HTML beachtet werden sollten und zudem Vorgehensweisen angewendet werden sollten, die sich bewährt haben. Eigene Erfindungen und Konstruktionen führen später regelmäßig zu Problemen und sollten unterbleiben. Das CSS spielt hierbei noch keine Rolle.

Code:
<body id="body">

id sollten nur verwendet werden, wenn sie wirklich benötigt werden. Das ist hier nicht der Fall.

Code:
<div id="menubar">

div-Elemente dürfen nur verwendet werden, wenn es keine geeigneteren Elemente gibt. Unnötige Elemente die nur dem Layout dienen sollten vermieden werden. Dieses div ist, wie viele der folgenden, überflüssig, also weglassen.

Code:
&nbsp;&nbsp;

Geschützte Leerzeichen um einen Abstand zu erzeugen führen zu Problemen und sollten vermieden werden. Abstände werden mittels CSS erzeugt.

Code:
<b style="color:white; font-size:100%;">Anmelden</b>

Das b-Element hat eine bestimmte semantische Bedeutung und es ist sachlich falsch, es für die Anzeige von Fettschrift zu verwenden.

Auf inline-CSS sollte verzichtet werden. Das erschwert nur die spätere Gestaltung per CSS.

Code:
<br>

br-Elemente sollen nicht benutzt werden um Abstände zu erzeugen. Sie sollten nur dort verwendet werden, wo Blockelemente verboten sind.

Code:
<input type="text" name="user" class="input" placeholder="Benutzerame">

input-Elemente sollten nur zusammen mit label-Elementen verwendet werden. Das ist benutzerfreundlicher, auch wenn das placeholder-Attribut verwendet wird. Wenn die Besucher die ausgefüllten Felder noch einmal kontrollieren möchten sind die placeholder-Beschriftungen nicht mehr zu sehen.

Code:
<div id="main"

Das div-Element wir hier falsch vewendet. Hier ist das main-Element korrekt.

Code:
<ul>
  <br>
  <div class='foren' style='position:relative;'>

Auf ul-Elemente dürfen als Kindelemente nur li-Elemente folgen. Keine br, div oder Andere.

Code:
style='position:absolute;

Anfänger sollten auf position:absolute verzichten, da sie es wie auch du in der Regel falsch anwenden.

Code:
<div></div>

Leere Container haben im Quelltext nichts verloren.

Code:
<div ...>...Alle Foren</div>

Text sollte nie direkt in Containern wie div, main, header, footer, aside, article und so weiter stehen, sondern nur in dafür vorgesehenen Elementen wie p, h1 bis h6, li und so weiter.

Wenn du das alles korrigiert hast kannst du mit dem CSS beginnen.

Du siehst, mit ein paar kleinen Anpassungen und Änderungen ist es in deinem Fall leider nicht getan.

Gruss

MrMurphy
 
Danke erstmal für die schnelle Antwort. Ich werde mich in Zukunft mit html mehr beschäftigen.
Ich weiß, dass diese Webseite falsch programmiert ist - ich habe sie gestern innerhalb ein paar minuten erstellt.
Meine alte richtige Webseite habe ich komplett gelöscht, da ich die überschneidungsprobleme hatte.
Wenn diese Webseite (webhosting45.bplaced.net) also richtig programmiert wäre - was müsste man änderm??

MFG Programmi3r3r
 
Werbung:
Hallo

Wenn diese Webseite (webhosting45.bplaced.net) also richtig programmiert wäre- was müsste man änderm??

Wenn der HTML-Quelltext im body-Bereich richtig erstellt wäre? Dann müsste daran nichts mehr geändert werden. Als nächstes müsste das CSS erstellt werden. Dazu ist das vorhandene aber nicht geeignet. Es enthält ähnlich viele Fehler wie der html-Teil.

Die habe ich nicht aufgezählt, da dazu wie schon geschrieben zunächst der HTML-Quelltext korrigiert sein muss. Vorher lohnt es sich nicht mit dem CSS zu beginnen.

Es bleibt ja auch die Frage, ob du die Zeit für das Lernen überhaupt investieren willst. In zwei, drei Tagen wirst du das kaum nachholen können.

Wie bereits geschrieben ist ein Forum nicht geeignet dir die dazu benötigten Informationen zu liefern, da die einfach zu umfangreich sind. Wir können dir zum einen Fehler aufzeigen, so wie ich es getan habe. Und wir können dir zu abgrenzbaren Problemen Lösungen aufzeigen.

Bei dir geht es jedoch um eine ganze Webseite und dir fehlt voraussichtlich das Grundwissen, um unsere Lösungen für dich nutzen zu können, wenn wir dir ein Beispiellayout erstellen würden. Das dazu notwendige Hintergrundwissen füllt ganze Bücher.

Mit ein paar Änderungen am CSS ist es genau so wenig getan wie beim HTML-Quelltext. Das CSS muss komplett neu erstellt werden.

Gruss

MrMurphy
 
"Es bleibt ja auch die Frage, ob du die Zeit für das Lernen überhaupt investieren willst.[...]"
Einfache Antwort: Ja.
Ich würde einfach mal behaupten, dass ich garnicht soooo schlecht html programmieren kann. In 5 Minuten eine richtige webseite zu programmieren geht nun mal nicht wirklich. Wenn der HTML-teil richtig programmiert wäre: was müsste man dann im CSS-teil ändern? Den größten Teil der HTML-Fehler würde ich - wenn ich mir ein wenig mehr mühe geben würde :D - nicht machen. Von CSS hingegen kann ich sagen, dass ich es so gut wie garnicht kann. (Aussgenommen so sachen wie color, border usw.)

MFG Programmi3r3r
 
Werbung:
Dann behaupte ich einfach mal, dass ich mit HTML recht gut Webseiten erstellen kann... NICHT programmieren...
Könnte mir dennoch jemand sagen, wie der CSS-teil aussehen müsste, bzw. was ich falsch gemacht habe??
 
Werbung:
wenn du, wie du behauptest, gut webseiten erstellen kannst, sollte der HTML- code doch kein problem sein. wenn du dir dann jetzt ein buch zu CSS kaufst, kannst du dir all das selbst beibringen, da keiner im forum dir korrektes CSS komplett beibringen kann.
 
Zurück
Oben