Darstellungsfehler?
Sun
- browser
Hallo,
folgende Seite wird in Firefox und Opera 8 nicht richtig angezeigt. Im IE und in Opera 7.4 erscheit die Seite wie gewünscht. Kann mir jemand sagen woran das liegt? Die Titelseiten sollten jeweils linksbündig ausgerichtet sein. Die kleineren Seiten dann rechts danneben.
http://www.retrocycles.de/Sites/Z1/kawaz1history.htm
Gruß Sun
Moinsen,
Die Titelseiten sollten jeweils linksbündig ausgerichtet sein. Die kleineren Seiten dann rechts danneben.
Vermutung: Du floatierst Die DIVs aber es fehlt ein clear bei einem gewünschten Umbruch. Wenn ich die Seite auf meinem Doppel-Monitor in die Breite ziehe, kommen die Bilderserien in Trepenformation absteigend mit.
Tipp: Du kannst Selektoren kombinieren, dann muss nicht jeder Link und jedes img eine eigene Klasse haben. Z.B.
a:link img, a:visited img{ border: 1px dotted #000;}
a:hover img, a:active img{ border: 1px solid #0F0;}
a:hover, a:active { border: none;}
Tag,
also die DIV's sind nicht floatiert aber die img's.
.centergrafik
{ margin-top:10px; width:100%;}
.centertext
{float:left; padding: 0px 10px 5px 0px;}
.
.
.
<div class="centergrafik">
<a href="Grafik_History/Ring1.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_1_k.jpg" border="0"></a>
<a href="Grafik_History/Ring2.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_2_k.jpg" border="0"></a>
<a href="Grafik_History/Ring3.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_3_k.jpg" border="0"></a>
<a href="Grafik_History/Ring4.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_4_k.jpg" border="0"></a>
<a href="Grafik_History/Ring5.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_5_k.jpg" border="0"></a>
<a href="Grafik_History/Ring6.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_6_k.jpg" border="0"></a>
<a href="Grafik_History/Ring7.htm" target="_blank"><img class="centertext" src="Grafik_History/Ring_7_k.jpg" border="0"></a>
</div>
<div class="centergrafik"> </div>
<P>Das Motorrad 24.Februar'73 : Kawasaki 900 ccm</P>
<div class="centergrafik">
<a href="Grafik_History/Fahrber1.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_1_k.jpg" border="0"></a>
<a href="Grafik_History/Fahrber2.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_2_k.jpg" border="0"></a>
<a href="Grafik_History/Fahrber3.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_3_k.jpg" border="0"></a>
<a href="Grafik_History/Fahrber4.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_4_k.jpg" border="0"></a>
<a href="Grafik_History/Fahrber5.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_5_k.jpg" border="0"></a>
<a href="Grafik_History/Fahrber6.htm" target="_blank"><img class="centertext" src="Grafik_History/Fahrber_6_k.jpg" border="0"></a>
</div>
<div class="centergrafik"> </div>
.
.
.
Das mit dem Kombinieren der Selektoren ist ne gute Idee.Werd ich mir mal anschauen. Ich bin noch CSS Noob und hab mich noch nicht so damit beschäftigt.Was ist das mit dem clear?
Gruß Sun
hi,
Das mit dem Kombinieren der Selektoren ist ne gute Idee.Werd ich mir mal anschauen. Ich bin noch CSS Noob und hab mich noch nicht so damit beschäftigt.Was ist das mit dem clear?
das ist ein stichwort, und wenn du hier ein solches bekommst, informiere dich bitte erst mal selber darüber: clear.
und im abschnitt über CSS-basierte Layouts findest du bestimmt noch weitere hinweise zum umgang mit floats.
gruß,
wahsaga
@Maz
Dank dir für deine Antwort. clear hat's gebracht.
@Wahsaga
das ist ein stichwort, und wenn du hier ein solches bekommst, informiere dich bitte erst mal selber darüber: clear.
Das schreib ich in anderen Foren auch ständig und nun bekomm ich's selbst auf's Auge gedrückt:-p. Ich hoffe du hast mich trotzdem noch lieb.
Gruß Sun
Moinsen,
also die DIV's sind nicht floatiert aber die img's.
das ist eigentlich nicht nötig, da IMGs sich per default aneinander-Reihen. DIVs hingegen sind per default nicht in einer Reihe sondern bauen sich untereinander auf.
Das mit dem Kombinieren der Selektoren ist ne gute Idee.Werd ich mir mal anschauen. Ich bin noch CSS Noob und hab mich noch nicht so damit beschäftigt.Was ist das mit dem clear?
am besten Du guckst auch mal hier: http://www.css4you.de/posproperty.html dann unter float und clear. Grob: Wenn Du etwas floatierst, also aus dem "normalen" Elementefluss hinausnimmst, brauchst Du ein clear um wieder den "normalen" Elementenfluss zu erzeugen.
Guten Tag Sun,
ich habe es jetzt nicht ausprobiert, aber es sieht danach aus, als ob der folgende div-Bereich da weiter macht, wo der vorherige aufgehört hat. Da die Höhe dieser Bereiche jedoch nicht festgelegt ist, sucht sich der Browser selber das Ende des vorherigen. Was spricht dagegen, den div-Bereich eine feste Höhe zuzuweisen?
Mit Gruß
Dada