nicht angemeldet
Darstellung der Datein index.html und andere
1 
Gunnar Bittersmann
1 
MudGuard
0
Darstellung der Datein index.html und andere
Hallo großes Forum,
mit dem gleichen Code und unterschiedlichen Dateinamen wird mir die Webseite unterschiedlich dargestellt, wie auf den kommenden Bildern zu sehen:
Dateiname: index.html
Dateiname: xyz.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>C++ für Einsteiger</title>
<link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body style=" background-color:#F17026;">
<div class="HeaderKasten">
<div align='center'>
<img width="90%" src="Pics/Logo.png" alt="Logo" />
</div>
<div class="SeitenAuswahl">
<a href="./index.html"><img alt="Home" src="Button/Home.png" /></a>
<a href="./Download.html"><img alt="Download" src="Button/Download.png" /></a>
<a href="./Info.html"><img alt="Info" src="Button/Info.png" /></a>
<a href="./Food.html"><img alt="Food" src="Button/Food.png" /></a>
</div>
</div>
<div class="InhaltsKasten">
<h1> Herzlich willkommen bei der Lan-Party </h1>
<p> Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext. </p>
<h1> Voraussetzungen </h1>
<p> Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext.Dies ist ein Wilkommenstext. </p>
</div>
</body>
</html>
* { color:#787878; font-family:Arial,sans-serif }
.HeaderKasten { padding-left: 10%; padding-right:10%; width:80%; margin-top:20px; }
.SeitenAuswahl { text-align:center; }
.InhaltsKasten { position:absolute; background-color:#ffffff; width:60%; left:20%; right:20%; border: 6px solid #FF0000; }
h1 { font-size:140%; text-align:center; }
h2 { font-size:120%; border-top: 1px solid #EB9BEB; }
p { font-size: 100%; padding: 5px; }
Inhaltskasten a { padding-left: 20px; }
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
img { padding:0.5%; }
Firefox-Version mit der getestet wurde: 9.0.1.
Wie sieht die Seite mit diesen zwei unterschiedlichen Dateinamen bei euch aus?
Wie kann man das beheben?
ZeroXCola
-
@@ZeroXCola:
nuqneH
wie auf den kommenden Bildern zu sehen:
Nicht wirklich. Wo sind die Bilder zu den Thumbnails?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
Der DOCTYPE und die nachfolgende Syntax passen nicht zusammen. Beschäftige dich mit den <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschieden zwischen XHTML und HTML>! Entscheide dich für eine Syntax! Mein Tip: XHTML. Und wenn doch HTML, dann sollte nicht HTML 4.0 verwendet werden, sondern HML 4.01. Noch besser HTML5. Eine HTML-Transitional-Angabe ohne system identifier (URI) schickt Browser in den Quirks-Modus. Diesen solltest du vermeiden. > <title>C++ für Einsteiger</title> Warum ist das 'ü' verstümmelt? Das solltest du [vermeiden](http://www.w3.org/International/questions/qa-escapes#not). > <body style=" background-color:#F17026;"> Warum steht die Angabe nicht im Stylesheet? Inline-Stil-Angaben (@style-Attribute) solltest du vermeiden. > <div align='center'> Warum steht die Angabe nicht im Stylesheet? Missbilligte darstellungsbezogene Attribute solltest du vermeiden. > <img width="90%" src="Pics/Logo.png" alt="Logo" /> Das Skalieren von Bildern im Browser solltest du vermeiden. > <div class="SeitenAuswahl"> > <a href="./index.html"><img alt="Home" src="Button/Home.png" /></a> > <a href="./Download.html"><img alt="Download" src="Button/Download.png" /></a> > <a href="./Info.html"><img alt="Info" src="Button/Info.png" /></a> > <a href="./Food.html"><img alt="Food" src="Button/Food.png" /></a> > </div> Siehe dazu das von [Thomas Luethi](https://forum.selfhtml.org/?t=208531&m=1418180) und [von mir Gesagte](https://forum.selfhtml.org/?t=208531&m=1418182). > Wie sieht die Seite mit diesen zwei unterschiedlichen Dateinamen bei euch aus? Wie zu erwarten: Exakt gleich. > Wie kann man das beheben? Browsercache löschen? Qapla' -- Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher. (Mark Twain)-
@@ Qapla
nuqneH
<div align='center'>
Warum steht die Angabe nicht im Stylesheet? Missbilligte darstellungsbezogene Attribute solltest du vermeiden.
Das musste ich aufgrund von Unwissenheit tun. Ich wusste nicht, dass bei xhtml Transitional text-align:center möglich ist. Für mich heißt text eben Text, nicht Bild..^^
<img width="90%" src="Pics/Logo.png" alt="Logo" />
Das Skalieren von Bildern im Browser solltest du vermeiden.
Ansonsten währe das Bild nichtmal über die halbe Breite gegangen. Aufgrund der Einfachheit des Bildes macht es gerade keine großen Probleme, danke für den Rat!
Die restlichen Dinge habe ich umgesetzt. Der Code sieht Wundervoll aus, danke!
ZeroXCola
-
Das musste ich aufgrund von Unwissenheit tun. Ich wusste nicht, dass bei xhtml Transitional text-align:center möglich ist. Für mich heißt text eben Text, nicht Bild..^^
hmm das hat relativ wenig mit dem Dokumenttyp zu tun.
Ansonsten darfst du inline-Elemente quasi immer wie Text betrachten (Ausnahmen mag es geben, mir fällt aber gerade keine ein) und behandeln und<img>ist ein inline-Element :)
selfhtml.org kann dich darüber aufklären welche Elemente inline sind und welche nicht. Auf die üblichen DOM-Analyse-Tools (Bugzilla, Chromium-Devtools und Dragonfly) informieren dich über dendisplay:-Wert laut Browser-Stylesheet.Das Skalieren von Bildern im Browser solltest du vermeiden.
Ansonsten währe das Bild nichtmal über die halbe Breite gegangen. Aufgrund der Einfachheit des Bildes macht es gerade keine großen Probleme, danke für den Rat!Auch Bilder lassen sich im CSS skalieren, ich würde Gunnar hier auch widersprechen... man kann ja unter Umständen gar nicht die Fensterbreite voraussehen und muss Bildgrößen daran anpassen und ich erstelle auch nicht x Verianten einer Datei, die ich dann dynamisch mit JavaScript austausche wenn jemand die Größe seines Fensters ändert.
Eindisplay:block; max-width:100%;ist da hier und da meiner Meinung nach durchaus sinnig.
Grundsätzlich ist es aber sicher eine gute Idee eine erstmal passende Größe zu erstellen, wenn man die Pixelbreite ohnehin schon hardcodet. Wenn meine Bildgröße aber relativ zur Schriftgröße sein soll (z.B. Smileys, die genauso hoch sind wie der Fließtext, deren Teil sie sind), dann werde ich eine Höhenangabe in ex oder em machen, die Breite passt der Browser idR automatisch passend an (und umgekehrt), will sagen das Seitenverhältnis bleibt.Grüße
-
@@ZeroXCola:
nuqneH
Ich wusste nicht, dass bei xhtml Transitional text-align:center möglich ist. Für mich heißt text eben Text, nicht Bild..^^
<img width="90%" src="Pics/Logo.png" alt="Logo" />
Das Skalieren von Bildern im Browser solltest du vermeiden.
Ansonsten währe das Bild nichtmal über die halbe Breite gegangen.
Hm, du skalierst das Bild hoch?
Natürlich hat Deus F recht: „Auch Bilder lassen sich im CSS skalieren“. Die Browser haben heute bessere Skalierungsalgorithmen als vor ein paar Jahren, so dass ein im Broser skaliertes Bild nicht pixelig aussieht.
Und dass sich die Bildgröße an die Viewportgröße anpasst, ist ein Merkmal von responsive designs.
Bei einem Bild fester Größe sollte man aber das Bild im Grpfikprogramm skalieren und in der Größe ausliefern, in der es angezeigt werden soll.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Hi,
mit dem gleichen Code und unterschiedlichen Dateinamen wird mir die Webseite unterschiedlich dargestellt, wie auf den kommenden Bildern zu sehen:
Auf diesen Briefmärkchen soll man was erkennen können?
Wie sieht die Seite mit diesen zwei unterschiedlichen Dateinamen bei euch aus?
Anders. Weil ich die Bilder gar nicht habe.
Stell die beiden Seiten online, und verlinke sie beide.
Dann kann man sie beurteilen.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hallo,
evt. nützt es dir schon etwas, wenn du die Browserseite mit CTRL+F5 aktualisierst.
Grüsse V3xX