Logo coldheat - Weblog von Christian Mücke

Seitenleiste einblenden

  • Archiv
  • Layouts
  • 100 Filme
  • Uniques
  • Impressum
  • Mo, 06. Februar 2006
  • 3 Kommentare

übles CSS Problem

Es ist soweit, ich finde keine Lösung für ein fieses Problem, im neuen Stylesheet. Unglücklicherweise ist es nicht mal was überaus Trickreiches, sondern eine relativ simple Angelegenheit. Ich habe dem Ganzen eine eigene Testseite gewidmet. Es geht um die in den p-Tags gefloateten span-Elemente. Wie man sieht, wird das span-Element im ersten Paragraphen anders dargestellt, als in den folgenden Beispielen. Der Code ist bei allen der gleiche.

<p><span class="inline-head-right">innere Headline</span>
Text...
</p>

CSS:
.inline-head-left, .inline-head-right {
width: 220px;
float: left;
margin: 0;
padding: 12px 10px 10px 0;
display: inline;
font: 1.6em Georgia, Times, 'Times Roman', serif;
color: #000;
line-height: 134%;
letter-spacing:-1px;
clear: none;
}

span.inline-head-right {
float: right;
padding: 11px 0 15px 11px;
}

Ich möchte, dass auch im ersten Paragraph, die gleiche Darstellung statt findet, wie in den untern p-Blöcken. Anzumerken wäre noch, dass IE6, zu meinem Erstaunen genau dies tut. Das Problem betrifft primär Firefox und Opera.

Die Ursache für das Problem habe ich gefunden, nur eine CSS-interne Lösung fehlt mir noch. Aus irgendeinem Grund, wird das span im ersten Absatz geclared. Ursache für diesen Clear, ist das zweite gefloatete Div, vor dem content-Div, was ebenfalls einen Clear besitzt.

<div class="content">
<div id="entryDetails">...
</div>

<div id="prenextTop">...
</div>

<p>...</p>
</div>

CSS:
.content p {
font: normal .8em Arial, Verdana, Helvetica, sans-serif;
line-height: 140%;
text-align: left;
width: 468px;
margin: 0 0 0 274px;
padding: 3px 20px 12px 0;
}

#entryDetails, #prenextTop{
position: relative;
clear: left;
float: left;
padding:0;
height: auto;
width: 224px;
margin: 0 0 0 30px;
display: inline;
text-align: right;
}

#entryDetails und #prenextTop besitzenfloat: left; und sind zusätzlich mit einem clear:left; versehen, genau dieses clear:left;, des zweiten Divs, ist der Übeltäter, der das span-Elemente irgendwie mit beeinflusst. Mir ist absolut unklar, wieso dies statt findet. Das span-Element ist innerhalb des p-Tags (welches eine fixe Breite besitzt) isoliert und dürfte somit nicht im global-Float hängen.

Ja es gibt Unmengen Lösungen, das Problem zu umgehen, ich möchte es aber lösen. Die p-Tags zu floaten oder #entryDetails und #prenextTop zu einer Div zu vereinen funktionieren zwar, aber genau das versuche ich zu umgehen. Ich möchte die Divs separat halten, um später eben mehr Freiheit in der Gestaltung zu haben.

Meine Frage also, wie bringe ich das span-Element dazu, nicht aus seinem übergeordneten Block-Level-Element, heraus zu schauen? Es kann doch nicht sein, dass die äußeren Floats der Divs, den Float innerhalb des p-Tags beeinflußen? Es ist genug Platz für alle Elemente vorhanden, nur scheint das erste span-Element, diesen Platz nicht zu „finden“.

  • Schlagwörter:
  • CSS,
  • Typografie,
  • Website.

Zum gleichen Thema

  • Eine Frage des Kopfes
    Eine Frage des Kopfes
  • Google Webfonts
    Google Webfonts
  • Neugestaltung Phase Zwei
    Neugestaltung Phase Zwei
  • herbstlicher CSS-Anstrich
    herbstlicher CSS-Anstrich
  • Wo bleiben die Updates?
    Wo bleiben die Updates?
  • Royal Premium Deluxe
    Royal Premium Deluxe

3 Kommentare

Für diesen Eintrag wurden die Kommentare geschlossen.

  • #1
  • Fr, 10. Februar 2006
  • ben_ schrieb:

Weil du kein Gästebuch hast, hinterlass ich einfach mal in nächstliegenen Artikel der zum Thema passt einen Kommentar:Deine Artikel zum Thema Redisgn sind sehr gut und ich bin reichlich inspiriert. Hier arbeitet ein echter und ich hätte ja mal gut Lust an einem theoretischen Austausch. Schließlich ist ein Blog inzwischen zu einem hochkomplexen Informationspool geworden, das irgendwie mit typographischen Mittel „benutzbar“ gemacht werden will.

Im Grunde geht es um nicht weniger als der Schriftbild für das ein neues Zeitalter des Textes zu entwickeln. Ich darf zu diesem Thema Ivan Illichs Essay „Im Weinberg des Textes“ empfehlen, weil ich glaube, dass dich das interessieren könnten.

Desweiteren hoffe ich mit Erlaubnis ein paar Designaspekt des hoffentlich bald neuen cold heat „remixen“ zu dürfen…

  • #2
  • Fr, 10. Februar 2006
  • ben_ schrieb:

Sechzehnhundertzeilen CSS, heilige Mutter Gottes, das nenn ich Kopierschutz. 😉

Webmaster
  • #3
  • Mo, 13. Februar 2006
  • Christian schrieb:

Das Stylesheet ist noch ein Haufen Chaos, wie in der alten Version wird es erst viel zu spät eine Optimierung geben, auch diesmal wieder bin ich wohl zu verschwenderisch mit IDs und Klassen umgegangen, daran wird sich wohl noch was ändern. In einem Punkt hast Recht, es gibt viel übersichtlicheres CSS.^^

CC © 2022 C.Mücke Datenschutzerklärung Zurück zum Seitenanfang