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

Site-Look bei versch. Viewports stark schwankend

lowsaxonian

Neues Mitglied
Moin Forianer,

offenbar stelle ich zu dumm an, aber ich bekomme (Link gelöscht) nicht in den Griff.
Die Umsetzung der Seite habe ich auf einem Monitor mit einer Auflösung von 1024x768 kontrolliert, dort passt auch alles. Wenn ich mir die Seite auf 800x600 oder 1600x1200 ansehe, ist die gesamte Formatierung am A...

Ich habe alle Breiten, Höhen, Abstände, etc. in % angegeben, damit eben das nicht passiert. Bitte schaut mal, was mein Fehler ist. Und bitte, Aussagen wie "lerne mal css" bringen mich hier nicht weiter, ich habe selfhtml rauf und runter gelesen, komme aber nicht drauf, wo mein Fehler sein könnte. Natürlich habe ich auch verschiedene position-Varianten ausprobiert.

CSS ist ohne Fehler validiert, HTML auf Validator.org auch, die w3c-Variante wirft mir irgendwelches wirres Zeug vor die Füsse, das ich nicht nachvollziehen kann (als html-datei meldet er keine Fehler, aber die includes werden natürlich auch nicht geladen). Ich vermute, er kommt mit dem php-Suffix nicht zurecht, denn im Upload-Betrieb kann er die gleiche Datei gar nicht überprüfen.
Die angeblich offenen Tags würde mein Editor bei der Prüfung melden. Wer´s mir nicht glaubt, hier ist die html-Version.

Eine zusätzliche Frage: im Offline-Betrieb (ohne die includes) sowie als reine html-Seite ist der Footer bündig mit dem Content-div ausgerichtet, im Online-Betrieb ist er (auf meinem Monitor) beidseitig je 9px grösser. Hängt das mit den Includes zusammen ?

Ach ja, die Folgeseiten bitte nicht beachten, die habe ich noch nicht be-/überarbeitet.

Grüsse
low
 
Zuletzt bearbeitet:
Hallo.

Der W3C Validator kommt offensichtlich nicht mit deiner wirren Art der HTML erstellung zurecht.

Du hast den Body mehrmals geöffnet, du hast deine CSS Styles in den Body geschrieben, du benutzt Inline Styles obwohl du eine CSS Datei hast.

Du solltest erst mal diese Fehler beseitigen bevor du dir um das Aussehen Sorgen machst.

Ausserdem verwendest du viele absolute Positonierungen. Die heissen so weil sie meistens absolut unnötig sind.

Gruss
Elroy
 
Der W3C Validator kommt offensichtlich nicht mit deiner wirren Art der HTML erstellung zurecht.

Du hast den Body mehrmals geöffnet, du hast deine CSS Styles in den Body geschrieben, du benutzt Inline Styles obwohl du eine CSS Datei hast.

Stimmt, wenn ich mir den Quellcode online anschaue sieht´s so aus. Doch der folgende ist der Quellcode meiner Datei, wie ich ihn im Editor habe:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schomaker&acute;s Landgasthof in Elm</title>
<meta name="author" content="Markus">
<meta name="editor" content="html-editor phase 5">
<meta name='description' content='Willkommen auf der Internetpr&auml;senz von Schomaker&acute;s Landgasthof'>
<meta name='keywords' content='Schomaker, Schomaker&acute;s, Schomacker, Schomacker&acute;s, Landgasthof, Gasthof, Restaurant, Bremerv&ouml;rde, Elm, Feier, Hochzeit, Geburtstag, Konfirmation, 27432'>
<meta name="Robots" content="index, follow" >
<meta name="Revisit-After" content="21 days" >
<meta name="Rating" content="general" >
<meta name="country" content="germany" >
<meta name="city" content="bremerv&ouml;rde" >
<meta name="state" content="niedersachsen" >
<meta name="zipcode" content="27432" >
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/schola.versuch.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta http-equiv="Expires" content="0" >
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- Rahmen -->
<div id="wrapper">

<!-- ## nicht ändern !!! ## -->
<div id="header">
<img class="header" src="pics/logo-schola 590x218.png" alt="Logo" width="25%" height="75%">
<a href="hof.html"><img class="header" src="pics/Schola_2-1.JPG" alt="hier geht&acute;s zu den Bildern" title="hier geht&acute;s zu den Bildern" width="22%" height="100%"></a>
<a href="Marriages/Marriage.html"><img class="header" src="pics/frontpic(412-1).JPG" alt="hier geht&acute;s zu den Hochzeiten" title="hier geht&acute;s zu den Hochzeiten" width="22%" height="100%"></a>
<a href="restaurant/karte.html"><img class="header" src="pics/restaurant1-1.JPG" alt="hier geht&acute;s zur Speisekarte" title="hier geht&acute;s zur Speisekarte" width="22%" height="100%"></a>
</div>
<!-- ## nicht ändern !!! ## -->
<div id="navigation">
<?php
include "l.php" ;
?>
</div>

<!-- Hier kommt der eigentliche Text rein !!! -->
<div id="content">
<p id="Top"></p>
<div id="anfang"></div>
<h1>Schomaker&acute;s Landgasthof in Elm</h1>
<h2>Herzlich Willkommen auf den Interseiten von Schomaker&acute;s Landgasthof !</h2>
<p>Gelegen zwischen Bremen und Hamburg, 5km &ouml;stlich von Bremerv&ouml;rde und 25km westlich von Stade,
finden Sie unseren Gasthof im Zentrum von Elm. Auch wenn das bei "nur" 1.600 Einwohnern etwas
befremdlich klingen mag, so ist der Gasthof doch gut in das gemeinschaftliche Leben eingebunden.
Die zahlreichen Vereine und Vereinigungen halten ihre Versammlungen bei uns ab und feiern ihre
Fest bei uns. <a href="weddings/weddings.php">&nbsp;Hochzeiten&nbsp;</a> werden in diesem Teil des Landes noch als wirkliche Feste gefeiert,
prunkvolle B&auml;lle mit mehr als 250 Personen sind hier keine Seltenheit.</p>

<p>F&uuml;r diese Feste, nat&uuml;rlich auch f&uuml;r andere Veranstaltungen wie Geburtstage, Konfirmationen oder
Tagungen, haben wir mit unserem grossen <a href="rooms/festsaal.php">&nbsp;Festsaal&nbsp;</a> (bis 400 Personen) und dem <a href="rooms/ulmensaal.php">&nbsp;Ulmensaal&nbsp;</a> (bis 90 Personen)
jeweils den richtigen Rahmen. In unserem 2009 neu
eingerichteten <a href="restaurant/opening-rest.php">&nbsp;Restaurant&nbsp;</a> servieren wir Ihnen in gem&uuml;tlicher Atmosph&auml;re regionale und &uuml;berregionale
Spezialit&auml;ten. Wer nur eine Kleinigkeit essen m&ouml;chte oder nur ein schnelles, gepflegtes Bier trinken m&ouml;chte,
kann auch gerne in unser <a href="restaurant/opening-gast.php">&nbsp;Gaststube&nbsp;</a> Platz nehmen. F&uuml;r den Sommer haben wir auf der R&uuml;ckseite des Anwesens, abseits
der Strasse und weit entfernt von Stress und Hektik des Alltags, einen kleinen, aber gem&uuml;tlichen Biergarten
eingerichtet.</p>

<p>Unser Hotel bietet Ihnen mit sieben Zimmer im Landhausstil, alle mit Dusche oder Badewanne, WC und SAT-TV ausgestattet,
die M&ouml;glichkeit, Ihr m&uuml;des Haupt in Morpheus Arme zu betten.</p>

<p>In der direkten <a href="anfahrt/umgebung.html">&nbsp;Umgebung&nbsp;</a> finden Sie viel Waldfl&auml;che, wo Sie bis in den Vormittag hinein Rehe, Wildschweine
aber auch Greifv&ouml;gel beobachten k&ouml;nnen. Die l&auml;ndliche Umgebung macht das Abschalten vom Alltag besonders einfach, ein Spaziergang an
der Oste oder im nahegelegenen Moor ist immer ein kurzweiliger und trotzdem entspannender Genu&szlig;. Auch ein Ausflug an die nahe K&uuml;ste der
Nordsee ist entspannend. Bremerhaven mit seinem Fischereihafen und dem Klimahaus ist nur 50km entfernt, Cuxhaven mit der Insel Neuwerk nur 70km.</p>

<p>Die Oste, der Flu&szlig;, an welchem Elm gelegen ist, kann ab Bremerv&ouml;rde stromabw&auml;rts beschifft werden, ab dem Ostewehr in Bremerv&ouml;rde
stromaufw&auml;rts d&uuml;rfen sie nur leichte Boote wie Kanus oder Kajaks befahren. Wer sich nur mit festem Boden unter den F&uuml;&szlig;en wohlf&uuml;hlt, kann
wundersch&ouml;ne Ausfl&uuml;ge an der Oste unternehmen. Da die Oste ein Tidegew&auml;sser ist, zeigt sie uns immer wieder ein neues Gesicht. Bei
auflaufendem Wasser d&uuml;mpelt sie leise vor sich hin, bei stehendem Wasser wirkt sie an manchen Stellen wie ein See, doch bei ablaufendem Wasser
kann sie durchaus eine Geschwindigkeit von bis zu 5km/h erreichen. Angeln ist den meisten Bereichen der Oste erlaubt, auch der V&ouml;rder See in
Bremerv&ouml;rde kann zum Teil beangelt werden. Wasserv&ouml;gel wie Reiher und Kormorane, aber auch Greifv&ouml;gel sind zahlreich zu sehen, die
abwechslungsreichen Ufer bieten dem Auge immer wieder Abwechslung. Zahlreiche Highlights sind hier zu entdecken, so zum Beispiel die Schwebef&auml;hre
in Osten-Hemmoor.</p>

<p>Trotz dieser idyllischen Umgebung ist es auch nicht weit bis ins pralle und hektische Leben der Gro&szlig;st&auml;dte. Hamburg
ist 80km nord&ouml;stlich gelegen, Bremen 60km nordwestlich. Beide St&auml;dten k&ouml;nnen gut in 60 bis 80 Minuten mit dem Auto erreicht werden.</p>

<p>Seit mehr als 200 Jahren gibt es Schomaker&acute;s Landgasthof. Wir halten diese Tradition aufrecht und setzen neue Akzente. Besuchen Sie uns, damit
wir Sie &uuml;berzeugen k&ouml;nnen.</p>

Mit freundlichen Gr&uuml;&szlig;en<br>
<br>
Ihr SchoLa-Team
<div class="pdf">Auf unseren Seiten werden Dateien auch als <img src="../../restaurant/pics/pdficon_small.JPG" alt="" width="15" height="15"> PDF-Dateien eingestellt.<br>
Falls Sie nicht &uuml;ber den aktuellen <img src="pics/pdficon_small.JPG" alt="Adobe Reader" width="15" height="15"> Adobe Acrobat Reader verf&uuml;gen, k&ouml;nnen<br>Sie diesen auf dem nachfolgenden Link von der Adobe-Site downloaden :
<a href="http://get.adobe.com/de/reader/"><img src="pics/160x41_get_flashplayer.JPG" alt="Adobe Reader" title="Adobe Reader" width="60" height="15"></a><br></div>
<br>
<a href="http://www.validome.org/referer"><img style="border:none" src="http://www.validome.org/images/set5/valid_html_4_0_1.gif" alt="Valid HTML 4.01" width="80" height="15"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:53px;height:20px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS ist valide!"></a>
<br>
<p><a href="#Top">nach oben</a></p>
</div>
<!-- Fußzeile ## nicht ändern !!! ## -->
<div id="footer">
<?php
include "footer.php" ;
?>
</div>
</div>
</body>
</html>
Ich weiss nicht, wo das her kommt, aber das ist nicht mein Code

Du solltest erst mal diese Fehler beseitigen bevor du dir um das Aussehen Sorgen machst.
Ich habe im Eingangspost klar geschrieben, dass alle Validatoren (mit einer kleinen Einschränkung) "grünes Licht" gegeben haben. Sei der validator.org auch noch so schlecht, einen mehrfach geöffeneten body-tag würde auch dieser sicherlich erkannt haben:
CSS ist ohne Fehler validiert, HTML auf Validator.org auch, die w3c-Variante wirft mir irgendwelches wirres Zeug vor die Füsse, das ich nicht nachvollziehen kann (als html-datei meldet er keine Fehler, aber die includes werden natürlich auch nicht geladen). Ich vermute, er kommt mit dem php-Suffix nicht zurecht, denn im Upload-Betrieb kann er die gleiche Datei gar nicht überprüfen.
Die angeblich offenen Tags würde mein Editor bei der Prüfung melden. Wer´s mir nicht glaubt, hier ist die html-Version.

Ist es wirklich zu viel erwartet, mal einen gescheiten, kleinen Hinweis zu bekommen, anstatt wie ein kleiner Schuljunge abgekanzelt zu werden ? Nicht jeder ist Webdesigner und/oder hat eine entsprechende Begabung. Ich stehe 6-7 Tage die Woche 12-14 Stunden täglich in der Küche. Somit habe ich also nicht die Zeit (vvl auch nicht die Begabung) mich wochenlang mit dem Thema zu beschäftigen. Wir können den Spieß ja auch mal umdrehen und um die Wette kochen. Danach halten wir hier Manöverkritik ab und ich scheiß´ Dich genau so blöde an wie Du mich !

Falls es Dir entgangen ist, dieses Forum heisst
html.de schrieb:
html.de Forum - HTML für Anfänger & Fortgeschrittene
und nicht html.de Forum - HTML Anfänger unerwünscht

Falls dem doch so sein sollte, sagt es einfach, es gibt genügend andere Foren !

Grüsse an alle, die mir vll doch noch eine vernünftige Antwort geben wollen vom stark angefressenen
low
 
Ich kann deinen Unmut nicht nachvollziehen. Was Elroy schreibt, stimmt alles und war sicher nur hilfreich gemeint. Die fertige Seite ist nicht valide, u. a. weil der <body>-Tag mehrfach geöffnet wird. Dursuche deine PHP-Includes nach "<body>" und überprüfe noch einmal die Logik, in der sie zur fertigen Seite zusammengefügt werden. Ein so grundlegender Fehler (auch wenn er schnell zu beheben ist) könnte Einfluss auf die CSS-Darstellung haben, weshalb es die meisten Leute (ich zumindest) für müßig befinden, überhaupt über das CSS nachzudenken.

Ein Hinweis:

Code:
div#content {
left:2.2%;
margin-left:12.8em;
}

12.8em ist keine Prozentangabe.

PS: Dass die Hilfe hier gratis ist und es dir im Zweifel freisteht, einen Profi zu engagieren, versteht sich hoffentlich von selbst. Auch Computerzeugs ist ein echter Beruf.
 
Die Umsetzung der Seite habe ich auf einem Monitor mit einer Auflösung von 1024x768 kontrolliert, dort passt auch alles. Wenn ich mir die Seite auf 800x600 oder 1600x1200 ansehe, ist die gesamte Formatierung am A...
Du weißt, dass das nichts mit der Auflösung zu tun hat? Auch bei einer Auflösung von 1900x1600 kann es sein, dass Deine Website nur 772x981px Platz hat, um dargestellt zu werden.

Ich habe alle Breiten, Höhen, Abstände, etc. in % angegeben, damit eben das nicht passiert.
Ich hab beim Verkleinern des Browserfensters nichts gesehen, was aussieht wie "am A...", aber wenn man alles in % angibt, dann gibt es natürlich Probleme. Ich habe z.B: gesehen, dass Dein Menü dann auch so verkleinert wird, dass das Menü selbst Scrollbalken erzeugt. Das ist natürlich nicht ratsam, zumal genug Platz übrig ist.

Es ist eine Gratwanderung, will man vom pixelgenauen Layout weg zu einer dynamischen Site. Es ist gut, man sollte das auch probieren, aber es gibt immer irgendwo Grenzen.

Natürlich habe ich auch verschiedene position-Varianten ausprobiert.
Ich sehe an dem Layout nichts, was eine besondere Positionierung nötig machen würde.

die w3c-Variante wirft mir irgendwelches wirres Zeug vor die Füsse, das ich nicht nachvollziehen kann (als html-datei meldet er keine Fehler, aber die includes werden natürlich auch nicht geladen).
Natürlich werden die doch geladen. Aber natürlich nicht vom Validator, sondern von Deinem Webserver. PHP erzeugt eine statische HTML-Seite, diese wird zurück an den Validator gesendet. Dateiupload darfst Du natürlich nicht machen, sondern musst über die URL testen. Wenn Du PHP-Dateien per Upload testest, geht das natürlich nicht.

Ich vermute, er kommt mit dem php-Suffix nicht zurecht
Die Dateiendung ist dem Validator so ziemlich egal. Er kann natürlich den PHP-Code nicht validieren.

Nicht jeder ist Webdesigner und/oder hat eine entsprechende Begabung. Ich stehe 6-7 Tage die Woche 12-14 Stunden täglich in der Küche. Somit habe ich also nicht die Zeit (vvl auch nicht die Begabung) mich wochenlang mit dem Thema zu beschäftigen.
Dann stellst Du aber zu hohe Anforderungen. Wenn Du Dich mit der Materie nicht auskennst, aber auch keine Zeit dafür hast, Dein Wissen zu vertiefen - wie kannst Du dann glauben, dass am Ende was sinnvolles dabei raus kommt? Das geht nicht!

Wir können den Spieß ja auch mal umdrehen und um die Wette kochen. Danach halten wir hier Manöverkritik ab und ich scheiß´ Dich genau so blöde an wie Du mich !
Eben - weil wir nicht kochen können. Der Unterschied ist aber der, dass wir keinen besonderen Anspruch an unsere Kochkünste stellen, Du aber an Deine Webkenntnisse. Und wenn Dir Basics fehlen, dann musst Du Dir den Hinweis darauf gefallen lassen - denn von Nichts kommt nunmal nichts!

Wenn Du nur nach Lösungen suchst, dann bist Du hier falsch - dazu gibts das Unterforum "Jobbörse". Da kannst Du jemanden suchen, der Dir die Arbeit abnimmt. Immerhin bestelle ich, wenn ich eine große Party schmeißen will, auch den Partyservice, oder letzten Endes gelernte Köche, um mein Essen zu kochen, das mach ich nicht selber.
 
Zurück
Oben