Bild in CSS-Layout - Frage zu IE
Znol
- css
0 JB0 Znol
0 Ingo Turski0 Znol
Hallo,
ich bekomme es nicht hin, dass eine erstmal nur horizontal zentrierte Seite, in verschiedener Bildschirmauflösung auch im IE so wie gewollt angezeigt wird.
Hatte mir diese Seite hier zur Hilfe genommen http://css.fractatulum.net/sample/layout4format.htm.
Das Problem liegt sicher auch bei den Bildern, die ich per p eingebunden habe.
Nur - in strict - wenn ich keine Tabellen verwenden möchte, was wäre denn sinnvoll für Bilder? Wenn es keinen Text gibt?
Nun würde dieser Quelltext überall ausser im IE gut dargestellt werden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout</title>
<style type="text/css">
<!--
body{text-align:center;}
#Inhalt{margin:auto;width:780px; min-width:780px}
#Navi {border:2px solid #fff;
margin:1em;
list-style:none;
float:left;
width:12em;
padding:1em;
color:#fff;
background-color:#fff;
text-align:left}
#Navi a {text-decoration:none;}
#Navi a:hover {background-color:#ccc;}
#Navi a:active, a:focus {color:#993333;}
#Navi li a{font-family:"Haettenschweiler",Arial Narrow;
font-size:3em;
color:black;}
h1{font-family:"Haettenschweiler",Arial Narrow;text-align:center;}
#fusszeile{font-family:"Haettenschweiler",Arial Narrow;text-align:left;}
-->
</style>
</head>
<body>
<div id="Inhalt">
<ul id="Navi">
<li><a href="u.müller.htm">U. Müller</a></li>
<li><a href="kontakt.htm">Kontakt</a></li>
<li><a href="galerie.htm">Galerie</a></li>
<li><a href="verschiedenes.htm">Verschiedenes</a></li>
<li><a href="impressum.htm">Impressum</a></li>
</ul>
<h1>Illustrationen</h1>
<p><img src="thumbnail162.jpg" alt="party1"><img src="thumbnail163.jpg" alt="party2"><img src="thumbnail161.jpg" alt="party3"></p>
<p id="fusszeile">Bla bla bla bla blab</p>
</div>
</body>
</html>
Ich möchte ohne Javascript das verwirklichen, nur setzt mir der IE das dritte Bild immer unter die zwei anderen.
Ich verstehe nicht warum. Was muss ich beachten?
Könnt Ihr mir da weiter helfen?
Gruß, Znol
Das Problem liegt sicher auch bei den Bildern, die ich per p eingebunden habe.
Welches Problem genau?
Nur - in strict - wenn ich keine Tabellen verwenden möchte, was wäre denn sinnvoll für Bilder? Wenn es keinen Text gibt?
<img ...> ?!
Ich möchte ohne Javascript das verwirklichen, nur setzt mir der IE das dritte Bild immer unter die zwei anderen.
Daran könnte man mit JavaScript auch nur bedingt was ändern.
Wo genau war nun die Frage?
Hallo JB,
ich möchte, dass auch im IE die drei Bilder nebeneinander angezeigt werden.
Nicht, dass das letzte Bild unter den anderen Zweien angezeigt wird.
Das funktioniert in allen Browsern auch so, nur im IE nicht.
Die Frage mit dem Image war eher, was ist semantisch sinnvoll?
Das p ja einerseits nicht wirklich oder? Weil es ja ein Textabsatz ist. Wäre ein div da generell angebrachter?
Ist das bedeutend in dem Fall?
Ich weiß nicht, warum der IE nicht auch die Bilder nebeneinander darstellt.
Die Frage ist, was ich falsch mache? Was ich für den IE denn anders machen muss, um es dort auch nebeneinander angezeigt bekommen?
Gruß, Znol
Hi,
#Inhalt{margin:auto;width:780px; min-width:780px}
das ist Unsinn - gleiche Werte für width und min-width.
width:12em;
em - Angaben ohne eine "feste" Basis für die Schriftgröße (z.B. in % in body) führen zu Fehlern im IE.
<p><img src="thumbnail162.jpg" alt="party1"><img src="thumbnail163.jpg" alt="party2"><img src="thumbnail161.jpg" alt="party3"></p>
wie breit sind Deine Bilder? P kann margin und/oder padding voreingestellt haben.
freundliche Grüße
Ingo
Hallo Ingo,
ja, klar, das width hatte ich auch nun entfernt.
Deine Seite bezüglich der Schriftgröße werde ich mir morgen gleich mal genauer anschauen.
Und die Breite meiner Bilder passt letztlich auch nicht wirklich zu dem Vorhaben, die Seite auch bei einer Auflösung von 800x600 noch gut darzustellen. Obwohl es mir eben doch einmal gelang, mit dem IE auch das dritte Bild wunschgemäß zu platzieren. Allerdings sah es dann in der höheren Auflösung wieder verschoben aus.
Heute habe ich auch deine eine erstellte Künstlerseite nicht mehr gefunden; die mit den Papiertüten, habe ich nicht richtig geschaut oder hast Du die entfernt? Ich wusste leider den Namen nicht mehr.
Ich habe geschaut, wie Deine Seiten aussehen bei verschiedener Auflösung.
Man soll sich ja nicht mehr festlegen auf eine Auflösung, doch wenn die Seite auch in der Auflösung 800x600 noch gut zu sehen sein soll,
und ein Bild oder mehrere darin vorhanden ist bzw. sind, kann ich doch gar nicht allzu große Bilder verwenden (soweit ich nicht die Betrachter endlos scrollen lassen möchte oder etwas wie Javascript einsetze) oder habe ich da einen Denkfehler?
(Abgesehen von bestimmten CSS Spielerei Bildern, die ja widerum häufig browserabhängig sind).
So - schon wieder spät.
Vielen Dank für Eure Erklärungen,
Gruß, Znol
Hi,
Heute habe ich auch deine eine erstellte Künstlerseite nicht mehr gefunden; die mit den Papiertüten, habe ich nicht richtig geschaut oder hast Du die entfernt?
mit Papiertüten hatte noch keine Seite von mir etwas zu tun und die einzige Künstlerseite ist bislang andrealenzing.de.
Man soll sich ja nicht mehr festlegen auf eine Auflösung, doch wenn die Seite auch in der Auflösung 800x600 noch gut zu sehen sein soll,
und ein Bild oder mehrere darin vorhanden ist bzw. sind, kann ich doch gar nicht allzu große Bilder verwenden (soweit ich nicht die Betrachter endlos scrollen lassen möchte oder etwas wie Javascript einsetze) oder habe ich da einen Denkfehler?
Kommt drauf an... man kann sich in solchen Fällen entscheiden, ob man horizontales Scrolling toleriert oder dass die Elemente sich untereinander setzen.
freundliche Grüße
Ingo