nicht angemeldet
AugeHallo
Ich bin Anfängerin im Programmieren. Habe ein kleines Projekt und möchte, das mein Inhalt bei kleinerem Browserfenster nach links an den Browserfesterrand rutscht. Habe alles versucht! Bitte um Tipps, was ich falsch gemacht habe.
http://detering-design.de/bin/journalismus/journalismus.html
Dass der Inhaltsblock nicht auf die neue Browserfensterbreite zentriert wird, liegt wahrscheinlich an den Angaben leftmargin="auto" und rightmargin="auto" im Tag <body>. Auto ist nur in CSS ein erlaubter Wert für margin, nicht in den HTML-Attributen für ***margin. Da diese aber in den CSS-Angaben ebenfalls erfolgen, kannst du sie als HTML-Attribute auch einfach weglassen (und eventuell im CSS anpassen).
Zudem ist der, offensichtlich von einem Macromedia-Produkt generierte, HTML-Code an einigen Stellen fehlerhaft (z.B. die falsch verpackte Klassenangabe: <ul style=" class="Stil4">), von der Sinnhaftigkeit mancher Konstruktionen (z.B.: <p class="Stil5">Journalistische Biographie</p> ist <http://de.selfhtml.org/html/text/ueberschriften.htm@title=eine Überschrift>, sollte also auch als solche ausgezeichnet werden) mal ganz abgesehen.
Die Benutzung eines Validators zur Überprüfung des Codes ist empfehlenswert, also tue ich das auch mal: Ergebnisse der Prüfung durch den w3.org-Validator oder SELFHTML-Validator (URL zur Seite bitte selbst eintragen). ;-)
Hernach die angemeckerten Fehler beseitigen und schauen, was passiert. Es könnte sein, dass es erstmal schlimmer aussieht, da die jetzt noch per HTML-Attributen vorgeschriebenen Layoutangaben in deinem CSS noch keine Entsprechnung haben. Aber das können wir ja korrigieren.
Wenn dir daran liegt, den ganzen Code zu entschlacken und nach modernen Methoden neu aufzubauen (ist allerdings ein Stück Arbeit, da du dich mit den Grundlagen auseinandersetzen musst), solltest du das <http://de.selfhtml.org/css/layouts/index.htm@title=SELFHTML-Kapitel CSS-basierte Layouts> lesen.
Noch ein paar Tips:
body {
/.../
margin-top: 33px;
margin-right: auto;
margin-bottom: 64;
margin-left: auto;
padding-top: 33px;
padding-right: 50em;
padding-bottom: 64px;
padding-left: 15em;
Sowohl die `margin`{:.language-css}- als auch `padding`{:.language-css}-Angaben lassen sich zusammenfassen. Hier hieße das: `margin: 33px auto 64px auto;`{:.language-css} (merke: sobald ein Zahlenwert ungleich 0 ist, braucht er eine Einheit; das hast du bei `margin-bottom`{:.language-css} vergessen). Das Vorgehen bei `padding`{:.language-css} erfolgt analog.
> ~~~css
position: absolute;
> width: 544px;
> float: none;
> /*...*/
> }
ohne Angaben zu top, left oder auch right und bottom bleibt die Verwendung von position: absolute; ohne direkte optische Auswirkung. float: none; bleibt hier auch ohne Auswirkung, da dies der Vorgabewert ist.
Soweit das, was ich auf die Schnelle bemerkt habe.
Tschö, Auge