✔ Problem mit float und anschließendem clear

  • Themenstarter Themenstarter kunstler
  • Beginndatum Beginndatum
K

kunstler

Hallo,

ich arbeite an mehreren Stellen auf meiner Webseite http://www.robert-bauer.eu mit divs, float, clear usw. Klappt auch alles so wie ich es gerne hätte sowohl im Firefox als auch im IE.

An einer Stelle verzweifle ich aber gerade und ich habe schon viel Varianten versucht, die alle nicht zum gewünschten Ergebnis führen ...

Problem:

zum Anschauen:
http://www.robert-bauer.eu/fotografie/index.php?kat=211

Der "zurück-Link" ganz unten sollte mit einem gewissen Abstand unter den Vorschaubildern angezeigt werden, wird aber rechts neben das letzte Bild gesetzt.

Hier mal ein bißchen verkürzter Quellcode:

HTML: 
<!-- ... -->

<h2>Städte - Rosenheim</h2>

<div class='gesamte_fotovorschau'>

   <a class='fotovorschau' href='foto.php?fid=753&amp;kat=211'>
      <img src='img/foto_0753_s.jpg' alt='Vorschau foto_0753' width=75px height=75px>
   </a>

   <a class='fotovorschau' href='foto.php?fid=754&amp;kat=211'>
      <img src='img/foto_0754_s.jpg' alt='Vorschau foto_0754' width=75px height=75px>
   </a>

   <!-- ... -->

</div>

<div class='nach_fotovorschau'>
   &raquo; <a href='index.php'>zur&uuml;ck</a>
</div>

<!-- ... -->

CSS-Code:
Code: 
.gesamte_fotovorschau {
   margin-bottom: 50px;
}

a.fotovorschau {
   width: 76px;
   height: 76px;
   padding: 11px;
   border: 1px solid white;
   background-color: #D0D0D0;
   float: left;
}

a.fotovorschau:focus, a.fotovorschau:hover, a.fotovorschau:active {
   border: 1px solid #3B74BB;
   background-color: #EFF8FF;
}

.nach_fotovorschau {
   padding-top: 50px;
   width: 400px;
}

Wenn ich den unteren div (.nach_fotovorschau) mit clear versehe, dann verhaut es mir das allgemeine Layout, weil dann auch die Aufteilung in zwei Spalten (Navi und Hauptbereich) kaputt geht.

Wenn ich das a.fotovorschau in ein weiteres div-Element einschließe, dann komme ich zum gleichen Ergebnis.

Ist wahrscheinlich was ganz Triviales, aber ich komme nicht drauf.

Danke für eure Hilfe!
 
Folgender Code klappt bei mir, sofern ich ihn in Firebug eingebe.
Nützliches Tool übrigens, falls du es noch nicht kennst.

Code: 
.nach_fotovorschau {
   padding-top: 20px;
   float:left;
   width: 400px;
}
 
Hi,

und noch ein grundsätzlicher Tipp zu deinem Quellcode: In den HTML-Attributen width und height ist die Einheitenangabe "px" nicht zulässig.

mfg Maik
 
Maik hat gesagt.:
Hi,

und noch ein grundsätzlicher Tipp zu deinem Quellcode: In den HTML-Attributen width und height ist die Einheitenangabe "px" nicht zulässig.

mfg Maik
Zum Vergrößern anklicken....

also das ist mir aber auch neu
und wurde bisher von keinem Validator bemängelt bei meinen Seiten
Dachte immer wäre genau andersrum
 
Kleiner Auszug gefällig?

html-validator.jpg

Und was soll deiner Meinung nach anders herum sein?

mfg Maik
 
Hallo zusammen,

danke für die Antworten. Funktioniert nun wunderbar. Was eine Zeile da oft bewirken kann!

Eigentlich find ich die Lösung aber unlogisch mit dem floaten, denn eigentlich hätte ich gedacht, dass die Breitenangabe alleine ausreicht für den Effekt. Und ich will ja neben das .nach_fotovorschau Element nichts mehr setzen ... Egal.

Zur Pixelangabe: Ich arbeite irgendwie ungern mit em und % etc. Daher dachte ich, dass Pixel die beste Variante ist.

Der W3C-Validator bringt keine Warnung:
http://validator.w3.org/check?uri=h...Inline&group=0&user-agent=W3C_Validator/1.606


Möglicherweise liegt es daran, dass ich nicht height="100px" sondern height=100px angebe?
 
kunstler hat gesagt.:
Zur Pixelangabe: Ich arbeite irgendwie ungern mit em und % etc. Daher dachte ich, dass Pixel die beste Variante ist.
Zum Vergrößern anklicken....
Mein Hinweis war grundsätzlicher Natur, bezog sich also nicht auf die Wahl der Einheit.

http://edition-w3.de/TR/1999/REC-html401-19991224/sgml/dtd.html#Length

Die Maßeinheit "px" gilt in den HTML-Attributen automatisch als absolutes Maß, wenn eine relative Dimension für das Element erwünscht ist, wird "%" angegeben.

mfg Maik
 
Bin mir nicht so ganz sicher, was du genau meinst. Hab bei deinem Link jetzt mal das herausgepickt:

Code: 
<!ENTITY % Length "CDATA" -- nn for pixels or nn% for percentage length -->
<!ENTITY % MultiLength "CDATA" -- pixel, percentage, or relative -->

Für was steht denn das "nn"?

Heißt das also, dass ich in Zukunft bei Längenangaben auf das px völlig verzichten soll und immer nur bspw. height=130 angeben soll?

Nur bei Prozentangaben muss ich height=75% schreiben?

Oder reden wir aneinander vorbei?

Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück