Blockelemente und deren Breite

[sunny]

Hallo zusammen,

hab da mal eine etwas komische Frage, hoffe aber dass sie trotzdem beantwortet wird da ich nach Durchschauen des Archivs und Googeln noch nicht so ganz schlau geworden bin.

Also, mal von Anfang an:
Ich habe hier Links mit Pfeilchen davor die beim Rollover ihre Farbe verändern - also die Links und die Pfeilchen. Das Ganze wollte ich aber nicht per JavaScript sondern per CSS lösen. Also habe ich einfach den Links ein background-image zugewiesen, nämlich das Pfeilchen. Funktioniert auch super. Allerdings interpretiert der IE 5 ja ein Padding nur bei Blockelementen. Also musste ich aus den Links Blockelemente machen damit das Pfeilchen nicht vom LinkText überlagert wird. Das hat aber zur Folge dass meine Links einen sehr "breiten Aktivbereich" haben, da Blockelemente ja auf die zur Verfügung stehende Breite ausgedehnt werden. Stört mich im Grunde nicht so arg, aber ich hab dann eine Seite entdeckt wo das nicht der Fall war.

Das hat mich neugierig gemacht und ein Blick auf den Sourcecode hat gezeigt dass dort um jeden Link ein Table gewickelt war. "Grausige" Lösung, aber es funktioniert. Table scheint allerdings das einzige Blockelement zu sein dass seine Breite an den Inhalt anpasst anstatt ans Elternelement. Oder liege ich da falsch?

Gibt es noch eine Möglichkeit ein Blockelement an die Inhaltsgröße anzupassen? Oder gibt es eine Möglichkeit dem IE 5 per CSS Pfeilchen zu geben ohne Blockelement?

Das Problem an sich ist jetzt nicht wirklich ein großes, dennoch wurde mein Interesse geweckt ob es da bessere Varianten gäbe als diese Table-Variante!?

Liebe Grüße
sunny

[Cheatah]

Hi,

Allerdings interpretiert der IE 5 ja ein Padding nur bei Blockelementen.

es gibt Wege zu "tricksen". Unter Umständen beachtet der IE 5 das Padding, wenn das Element einen Border besitzt - und sei dieser null Pixel breit. Beim IE hilft es oft, wirr rumzuprobieren.

Also musste ich aus den Links Blockelemente machen damit das Pfeilchen nicht vom LinkText überlagert wird. Das hat aber zur Folge dass meine Links einen sehr "breiten Aktivbereich" haben, da Blockelemente ja auf die zur Verfügung stehende Breite ausgedehnt werden.

Nur bei width:auto o.ä., wenn das Element nicht gefloatet und nicht absolut positioniert ist.

Das hat mich neugierig gemacht und ein Blick auf den Sourcecode hat gezeigt dass dort um jeden Link ein Table gewickelt war. "Grausige" Lösung, aber es funktioniert.

Das Geheimnis dieser Lösung ist, dass ein begrenzendes Element drum herum liegt. Auch das ist im Grunde aber grausig genug.

Table scheint allerdings das einzige Blockelement zu sein dass seine Breite an den Inhalt anpasst anstatt ans Elternelement. Oder liege ich da falsch?

Ja, Du liegst falsch: Verantwortlich für diesen Umstand ist nicht der Name des HTML-Elements, sondern dessen CSS-Eigenschaften.

Gibt es noch eine Möglichkeit ein Blockelement an die Inhaltsgröße anzupassen? Oder gibt es eine Möglichkeit dem IE 5 per CSS Pfeilchen zu geben ohne Blockelement?

S.o., s.o.

Cheatah

[sunny]

Hi Cheatah,

danke für Deine ausführliche Antwort!

Allerdings interpretiert der IE 5 ja ein Padding nur bei Blockelementen.

es gibt Wege zu "tricksen". Unter Umständen beachtet der IE 5 das Padding, wenn das Element einen Border besitzt - und sei dieser null Pixel breit. Beim IE hilft es oft, wirr rumzuprobieren.

Ja, das mit den Borders um alle Links wollte ich aber vermeiden, zudem an einer Stelle das Hintergrundbild nicht einfärbig ist ...

Also musste ich aus den Links Blockelemente machen damit das Pfeilchen nicht vom LinkText überlagert wird. Das hat aber zur Folge dass meine Links einen sehr "breiten Aktivbereich" haben, da Blockelemente ja auf die zur Verfügung stehende Breite ausgedehnt werden.

Table scheint allerdings das einzige Blockelement zu sein dass seine Breite an den Inhalt anpasst anstatt ans Elternelement. Oder liege ich da falsch?

Ja, Du liegst falsch: Verantwortlich für diesen Umstand ist nicht der Name des HTML-Elements, sondern dessen CSS-Eigenschaften.

Hmm, verstehe ich jetzt nicht ganz: Ich habe eine Test-Datei gemacht in welcher nur der Link und der Table vorhanden waren, kein zusätzliches CSS außer das angegebene:

<table>
<tr>
  <td><a href="#" style="display:block; border:1px solid red;" >Testlink</a></td>
</tr>
</table>

Der Link ist dann nur so breit wie sein Inhalt, sobald ich den Table entferne erstreckt er sich über das komplette Browserfenster. In beiden Fällen war aber kein CSS im Spiel (an der Tabelle).

Liebe Grüße
sunny

[Gunnar Bittersmann]

In beiden Fällen war aber kein CSS im Spiel (an der Tabelle).

sunny,
Doch, die Defaulteinstellungen des Browsers.
Gunnar

[Frederik]

Hallo!

Dieses Problem hat mich auch schon eine zeitlang beschäftigt (Ich hatte sogar vor kurzer Zeit auch mal eine Frage dazu gestellt, die ich jetzt aber nicht mehr wiederfinde - komisch...).

In Menüs finde ich es sowieso besser, die Links auf block zu setzen, wenn man sie nicht gleich in eine ul packt. Besser als diese <a ...></a><br>-Sache...

Du kannst natürlich einfach eine Breite für die Links angeben. Aber wenn ich dich richtig verstanden habe, wolltest du das nicht.

Also, allgemein gesprochen, besteht das Problem darin: Wie kann man ein Blockelement dazu kriegen, nur so breit zu sein, wie der Inhalt es erfordert, ohne eine feste Breite anzugeben?

Ich habe folgendes ausprobiert, und es scheint echt eine Lösung zu sein - oder sieht jemand Schwierigkeiten?

.element {
  float: left;
}
.element + * {
  clear: left;
}

Der IE kennt diesen Selektor allerdings nicht, also muss man dann doch wieder ein spezielles Element angeben:

.elementdanach {
  clear: left;
}

Oder, wenn die Links in deinem Beispiel nicht in einem umgebenden Element sitzen, auf das man obiges anwenden kann, geht wahrscheinlich auch das:

.menulink {
  display: block;
  float: left;
  clear: left;
}

Hilft das? Anderweitige Anmerkungen?

Liebe Grüße
Fredo

[nag]

Hallo,

Ich hatte sogar vor kurzer Zeit auch mal eine Frage dazu gestellt, die ich jetzt aber nicht mehr wiederfinde - komisch

so schwer kann das doch nicht sein ;)
http://suche.de.selfhtml.org/cgi-bin/such.pl?suchausdruck=frederik&feld=verfasser&index_5=on&hits=100

mfg NAG

[Frederik]

Hallo!

Genau das habe ich ja ausdauernd gemacht, aber wie du selbst sehen wirst, ist der Beitrag, den ich meine, nicht in der Liste - fallst ich nicht ganz blind bin...

Gibt es vielleicht eine Art "blinden Fleck" für Beiträge in der Zeit, nachdem sie auf der Forumsstartseite nicht mehr angezeigt werden und bevor sie im Forum auffindbar sind? Aber ist ja auch nicht so wichtig...

Gruß
Fredo

[sunny]

Hi Frederik,

Du kannst natürlich einfach eine Breite für die Links angeben. Aber wenn ich dich richtig verstanden habe, wolltest du das nicht.

Nein, weil die Wörter/Texte ja unterschiedlich lang sind und bei "Überlänge" würden dann ja auch noch hässliche Umbrüche reinkommen ...

Ich habe folgendes ausprobiert, und es scheint echt eine Lösung zu sein - oder sieht jemand Schwierigkeiten?

.element {
  float: left;
}
.element + * {
  clear: left;
}

Der IE kennt diesen Selektor allerdings nicht, also muss man dann doch wieder ein spezielles Element angeben:

.elementdanach {
  clear: left;
}

Mhh, interessant ...

Oder, wenn die Links in deinem Beispiel nicht in einem umgebenden Element sitzen, auf das man obiges anwenden kann, geht wahrscheinlich auch das:

.menulink {
  display: block;
  float: left;
  clear: left;
}

Wow, das funktioniert tatsächlich, wundert mich allerdings dass sich das float und das clear nicht irgendwie aufheben ... habs zwar noch nicht überall getestet aber sieht echt gut aus! Werd mir das noch ausführlicher ansehen.

Liebe Grüße
sunny

[Ingo Turski]

Hi,

.menulink {
  display: block;
  float: left;
  clear: left;
}

Wow, das funktioniert tatsächlich, wundert mich allerdings dass sich das float und das clear nicht irgendwie aufheben

clear hebt ein evtl. vorangegangenes float auf, die float-Eigenschaft des Elements selbst wird davon nicht betroffen. Was Du im Kopf hast ist float:none. Du siehst den Unterschied?

Der Trick dieser Methode ist übrigens, daß float gemäß CSS 2.1 keine Angabe zu width mehr erfordert.

freundliche Grüße
Ingo

[sunny]

Guten Morgen,

.menulink {
  display: block;
  float: left;
  clear: left;
}

Wow, das funktioniert tatsächlich, wundert mich allerdings dass sich das float und das clear nicht irgendwie aufheben
clear hebt ein evtl. vorangegangenes float auf, die float-Eigenschaft des Elements selbst wird davon nicht betroffen. Was Du im Kopf hast ist float:none. Du siehst den Unterschied?

Ahja stimmt, in meiner gestrigen Verwirrung war das nicht mehr so klar ... ;-)

Der Trick dieser Methode ist übrigens, daß float gemäß CSS 2.1 keine Angabe zu width mehr erfordert.

Alles klar!
Vielen Dank für eure Hilfe!

sunny