Element-Breite (width) wird nicht gemacht

[Skoot]

Seid gegrüßt!
----------------

Ich hab einen link, der soll eine bestimmte Breite haben, und einen Rahmen rundherum, dass heißt, ich will, dass der link breiter ist, als die Schrift selbst und den ganzen Rahmen ausfüllt.
(Das ergibt dann so eine art Button)
Wenn man über den Link (überall im Rahmen) fährt, dann soll sich der Hintergrund im Rahmen verfärben.

ich hab das so gemacht:

----------------
(im Head)
<style type="text/css">
a:hover { background-color:#C0C0C0; }
</style>

(im Body)
<a href="derLink.htm" style="width:130px; border: 3px outset #FFFFFF;">derLink</a>
----------------

Der Internet Explorer zeigt das so, wie ich's haben will, an.
Opera und Firefox interpretieren jedoch scheinbar 'width' nicht immer und machen das ganze nur so breit wie die Schrift.
So wie es scheint, interpretieren sie 'width' nur bei Block-Elementen richtig, bei Inline-Elementen jedoch nicht. (Habs mit mehreren ausprobiert).

Gibt es eine Lösung in HTML/CSS, die aufs gleiche hinkommt?

Mit 'padding' würd's zwar gehn, aber dann müsste ich bei jedem Link herumprobieren wie viel, und es wäre unschön. Oder gibts da relative Werte, mit denen ich auf eine bestimmte Gesamtbreite komme? (zusammen mit der Schrift, deren Breite ich nicht kenne)

Buttons will ich nicht verwenden. Die vorige Lösung (nicht von mir) war mit Tabellenfeldern, die einzeln umrahmt waren, der Link darin jedoch auch nur in der Breite der Schrift und der Hintergrund des Feldes hat sich per JavaScript verfärbt (was allerdings nur im IE funktioniert hat). Von der Tabelle wollte ich zwar auch wegkommen, aber wenn es damit eine Lösung gibt, dann werd ich's wohl mit Tabelle machen.

---------------
Grüße, Skoot

[Cheatah]

Hi,

Der Internet Explorer zeigt das so, wie ich's haben will, an.

Deine Seite befindet sich im Quirks-Mode. Ändere dies.

Opera und Firefox interpretieren jedoch scheinbar 'width' nicht immer und machen das ganze nur so breit wie die Schrift.

http://www.w3.org/TR/CSS21/visudet.html#propdef-width:
"Applies to: all elements but non-replaced inline elements, table rows, and row groups"

Dein <a> ist noch immer ein non-replaced inline element.

Cheatah

[Skoot]

Deine Seite befindet sich im Quirks-Mode. Ändere dies.

Was ist der Quirks-Mode?

Dein <a> ist noch immer ein non-replaced inline element.

Was ist ein non-replaced inline element bzw. wie zeichnen sich replaced inline elemente aus? (falls es das auch gibt)

mfg Skoot

[Cheatah]

Hi,

Was ist der Quirks-Mode?

das.

Dein <a> ist noch immer ein non-replaced inline element.
Was ist ein non-replaced inline element bzw. wie zeichnen sich replaced inline elemente aus? (falls es das auch gibt)

Ein replaced element ist eines, dessen Inhalt durch eine separate Ressource bestimmt bzw. ersetzt sind, beispielsweise ein <img>. Ein non-replaced element ist das Gegenteil davon. Dieser Punkt ist zwar interessant, aber für Dein Problem nur bedingt von Relevanz; es geht um das "inline".

Cheatah

[Zeromancer]

Hallo Skoot,

---

(im Head)
<style type="text/css">
a:hover { background-color:#C0C0C0; }
</style>

(im Body)
<a href="derLink.htm" style="width:130px; border: 3px outset #FFFFFF;">derLink</a>

So wie es scheint, interpretieren sie 'width' nur bei Block-Elementen richtig, bei Inline-Elementen jedoch nicht. (Habs mit mehreren ausprobiert).

versuche es mit

a {
  width:130px;
  display:block; /*Das a-Element wird zum Blockelement*/
  border: outset 3px #fff;
}
a:hover {
  background:#c0c0c0;
}

Gestalte deine Seite felxibel und benutze auch mal "em" statt "px". Bei einer Schriftvergrößerung wird man es dir danken.

Mit freundlichen Grüßen,
André

[Skoot]

versuche es mit

a {
  width:130px;
  display:block; /*Das a-Element wird zum Blockelement*/
  border: outset 3px #fff;
}
a:hover {
  background:#c0c0c0;
}

Herzlichen Dank! Es klappt!

Gestalte deine Seite felxibel und benutze auch mal "em" statt "px". Bei einer Schriftvergrößerung wird man es dir danken.

Danke für den Tipp, werd ich mir mal anschauen.

Grüße, Skoot

[Jokat]

Hmm, vielleicht klappts, wenn du einen Bereich (<div>) verlinkst, also <a><div>Text</div></a>. Musst dem Bereich dann nur deine gewünschten Eigenschaften zuweisen...

[wahsaga]

hi,

Hmm, vielleicht klappts, wenn du einen Bereich (<div>) verlinkst, also <a><div>Text</div></a>.

diese verschachtelung ist nicht erlaubt.
bitte gib nur dann ratschläge ab, wenn du dir einigermaßen sicher sein kannst, dass du weißt wo von du redest.

gruß,
wahsaga

[Jokat]

Nun ja, zwischen "erlaubt" und "funktionieren" liegt ein Unterschied. Funktionieren tut es, also war ich mir ja doch einigermaßen sicher, wovon ich rede...

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Jokat
=> Hallo Jokat.

Nun ja, zwischen "erlaubt" und "funktionieren" liegt ein Unterschied. Funktionieren tut es, [...]

Und für wie lange?

Einen schönen Montag noch.

Gruß, Ashura

[Jokat]

Firefox erlaubt diese Verschachtelung.
Sorry, jetzt kommt mal wieder runter. Ich bin dumm und klein und ich bin froh, dass mir Meister wie ihr den rechten Weg weist. Typisch für Programmierer...

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Jokat
=> Hallo Jokat.

Firefox erlaubt diese Verschachtelung.

Er täte schlecht daran, dies nicht zu tun, da seine Nutzer erwarten, dass er so viele Seiten wie möglich darstellen kann, so verdreckt sie auch sein mögen. (Ein hoch auf XML)

Sorry, jetzt kommt mal wieder runter. Ich bin dumm und klein und ich bin froh, dass mir Meister wie ihr den rechten Weg weist.

Singular <-> Plural?

Typisch für Programmierer...

Was? Zu wissen, wovon sie reden?

Einen schönen Montag noch.

Gruß, Ashura

[Jokat]

Ich denke nicht, dass das Forum dazu da ist, Streitereien auszutragen. Was Singular <-> Plural betrifft: Du bist nicht der einzige, der auf meinen wohl falschen Tipp geantwortet hat.

Ich wurde beschuldigt, nicht zu wissen, wovon ich rede, habe mich wohl auch darin vertan, dass die Verschachtelung <a><div> nicht erlaubt ist. Allerdings wusset ich, dass das im Firefox funktioniert - warum also nicht auch annehmen, dass die Verschachtelung erlaubt ist. Typisch für Programmierer ist ihre Ironie gegenüber solchen, die weniger Ahnung haben als sie selbst.

Und damit verabschiede ich mich aus diesem Thread. Es tut mir Leid und dabei sollten wir es alle belassen...

[Gunnar Bittersmann]

Hi Jokat,

Firefox erlaubt diese Verschachtelung.

Nein. Bestenfalls „toleriert“.

HTML verbietet diese Verschachtelung:
<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

Ich bin dumm und klein und ich bin froh,

Mag sein. ;-)

Meister wie ihr

Mag sein. ;-)

Typisch für Programmierer...

Ich bin kein Programmierer.

Gruß,
Gunnar

[Cheatah]

Hi,

Nun ja, zwischen "erlaubt" und "funktionieren" liegt ein Unterschied.

ja. "Erlaubt" heißt nicht, dass es funktioniert; "nicht erlaubt" heißt, dass es nicht funktioniert.

Cheatah

[Gunnar Bittersmann]

Hi Jokat,

Nun ja, zwischen "erlaubt" und "funktionieren" liegt ein Unterschied.

Ein bedeutsamer.

Funktionieren tut es,

Wie kommst du darauf? Warum sollten sich alle Browser bei fehlerhaftem Code definiert gleich verhalten?

also war ich mir ja doch einigermaßen sicher, wovon ich rede...

Nicht wirklich.

Gruß,
Gunnar

[Ashura]

puts "Hallo " + gets.chomp + "."

?> Skoot
=> Hallo Skoot.

Ich hab einen link, der soll eine bestimmte Breite haben, und einen Rahmen rundherum, dass heißt, ich will, dass der link breiter ist, als die Schrift selbst und den ganzen Rahmen ausfüllt.

Ein <a>-Element ist ein Inlineelement. Auf diese dürfen width und height nicht wirken. Willst du dies dennoch, musst du es in ein Blockelement umwandeln.

Der Internet Explorer zeigt das so, wie ich's haben will, an.

Also hast du entweder einen IE < 6.0 oder selbigen im Quirksmodus.

Opera und Firefox interpretieren jedoch scheinbar 'width' nicht immer und machen das ganze nur so breit wie die Schrift.

So wie es sein muss, ja.

So wie es scheint, interpretieren sie 'width' nur bei Block-Elementen richtig, bei Inline-Elementen jedoch nicht. (Habs mit mehreren ausprobiert).

Dann weißt du ja doch schon Bescheid.

Von der Tabelle wollte ich zwar auch wegkommen, aber wenn es damit eine Lösung gibt, dann werd ich's wohl mit Tabelle machen.

Dazu besteht kein Anlass. CSS verschafft dir viele Möglichkeiten.
Du wirst aber zudem noch min-width (für den IE width) benötigen.

Einen schönen Montag noch.

Gruß, Ashura

[MudGuard]

Hi,

Ein <a>-Element ist ein Inlineelement. Auf diese dürfen width und height nicht wirken. Willst du dies dennoch, musst du es in ein Blockelement

Ob das Element aus HTML-Sicht inline oder block (sprich: ob es in der Parameter Entity %inline; oder %block; enthalten ist) ist, ist aus CSS-Sicht vollkommen wurscht.
Wie soll denn ein HTML-inline-Element in ein HTML-block-Element gewandelt werden?
Durch Umschreiben der DTD?

cu,
Andreas

[Ashura]

puts "Hallo " + gets.chomp + "."

?> MudGuard
=> Hallo MudGuard.

Ein <a>-Element ist ein Inlineelement. Auf diese dürfen width und height nicht wirken. Willst du dies dennoch, musst du es in ein Blockelement

Ob das Element aus HTML-Sicht inline oder block (sprich: ob es in der Parameter Entity %inline; oder %block; enthalten ist) ist, ist aus CSS-Sicht vollkommen wurscht.

Aber nicht aus CSS-Sicht.

Wie soll denn ein HTML-inline-Element in ein HTML-block-Element gewandelt werden?
Durch Umschreiben der DTD?

Zum Bleistift. ;-)

Einen schönen Montag noch.

Gruß, Ashura

[MudGuard]

Hi,

Ob das Element aus HTML-Sicht inline oder block (sprich: ob es in der Parameter Entity %inline; oder %block; enthalten ist) ist, ist aus CSS-Sicht vollkommen wurscht.

Aber nicht aus CSS-Sicht.

Doch, auch aus CSS-Sicht ist es vollkommen egal, ob es sich um ein HTML-inline- oder HTML-block-Element handelt.

cu,
Andreas

[Ashura]

puts "Hallo " + gets.chomp + "."

?> MudGuard
=> Hallo MudGuard.

Ob das Element aus HTML-Sicht inline oder block (sprich: ob es in der Parameter Entity %inline; oder %block; enthalten ist) ist, ist aus CSS-Sicht vollkommen wurscht.

Aber nicht aus CSS-Sicht.

Doch, auch aus CSS-Sicht ist es vollkommen egal, ob es sich um ein HTML-inline- oder HTML-block-Element handelt.

Ich widerspreche: CSS ist es durchaus wichtig, ob es auf ein Block- oder ein Inlineelement angewandt wird. Davon hängt schließlich die Umsetzung des jeweiligen Regelsets ab.

Einen schönen Montag noch.

Gruß, Ashura

[MudGuard]

Hi,

Doch, auch aus CSS-Sicht ist es vollkommen egal, ob es sich um ein HTML-inline- oder HTML-block-Element handelt.
Ich widerspreche: CSS ist es durchaus wichtig, ob es auf ein Block- oder ein Inlineelement angewandt wird. Davon hängt schließlich die Umsetzung des jeweiligen Regelsets ab.

Widersprich ruhig, wenn's Dir dann besser geht.
Das ändert aber nichts an den Tatsachen.

<span style="display:block; width:100px;">bla</span>
<div style="display:inline; width:200px;">blubb</div>

span ist aus HTML-Sicht ein inline-Element. Dennoch wird hier die CSS-Eigenschaft width beachtet.
div ist aus HTML-Sicht ein block-Element. Dennoch darf hier die CSS-Eigenschaft width nicht beachtet werden.

Aus CSS-Sicht ist es vollkommen egal, ob ein Element aus HTML-Sicht ein inline- oder ein block-Element ist.
Durch Anwenden der CSS-Eigenschaft display ändert sich die HTML-Sicht auf das Element nicht. Auch ein span mit display:block bleibt ein HTML-inline-Element.

cu,
Andreas

[Ashura]

puts "Hallo " + gets.chomp + "."

?> MudGuard
=> Hallo MudGuard.

Aus CSS-Sicht ist es vollkommen egal, ob ein Element aus HTML-Sicht ein inline- oder ein block-Element ist.

Das „... sofern es nicht umgewandelt wird...“ hätte ich wohl doch drin lassen sollen.

Durch Anwenden der CSS-Eigenschaft display ändert sich die HTML-Sicht auf das Element nicht. Auch ein span mit display:block bleibt ein HTML-inline-Element.

Gut, wenn man so strikt trennt, ja.
Da habe ich mich wohl wieder etwas verfahren...

Einen schönen Montag noch.

Gruß, Ashura

[MudGuard]

Hi,

Aus CSS-Sicht ist es vollkommen egal, ob ein Element aus HTML-Sicht ein inline- oder ein block-Element ist.
Das „... sofern es nicht umgewandelt wird...“ hätte ich wohl doch drin lassen sollen.

Die Umwandlung ist nicht möglich. Dazu müßte die DTD geändert werden. Damit wäre es nicht mehr HTML.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Die Umwandlung ist nicht möglich. Dazu müßte die DTD geändert werden. Damit wäre es nicht mehr HTML.

Ich meinte auch nicht auf Elementarer Basis.
Aber warum meinst du, dass es kein HTML mehr ist, wenn die DTD modifziert wird?

Einen schönen Montag noch.

Gruß, Ashura

[MudGuard]

Hi,

Aber warum meinst du, dass es kein HTML mehr ist, wenn die DTD modifziert wird?

Weil es dann MHTML ist (Modifiziertes HTML).
HTML ist das, was die HTML-Recommendation mit den zugehörigen DTDs definiert.

Wenn HTML nach Modifikation der DTD immer noch HTML wäre, dann könnte man jede beliebige SGML-Sprache als HTML bezeichnen, denn die ließen sich alle durch Modifikation der HTML-DTD herstellen (im Zweifelsfalle den kompletten Inhalt der HTML-DTD rauswerfen und durch den Inhalt der DTD der anderen Sprache ersetzen).

cu,
Andreas

[Ashura]

Hallo MudGuard.

Weil es dann MHTML ist (Modifiziertes HTML).
HTML ist das, was die HTML-Recommendation mit den zugehörigen DTDs definiert.

Gut, stimmt. Das kann ich nachvollziehen.

Wenn HTML nach Modifikation der DTD immer noch HTML wäre, dann könnte man jede beliebige SGML-Sprache als HTML bezeichnen, denn die ließen sich alle durch Modifikation der HTML-DTD herstellen (im Zweifelsfalle den kompletten Inhalt der HTML-DTD rauswerfen und durch den Inhalt der DTD der anderen Sprache ersetzen).

Und wenn keine DTD angegeben wurde, das Dokument aber dennoch sauber struktuiert und geschachtelt wurde? (Natürlich gedanklich dann doch im Sinne einer DTD.)

Ich möchte hier gerne zwischen HTML, strukturiertem HTML und validem HTML unterscheiden.
Die Mindestvorraussetzung ist meiner Meinung nach der Einsatz HTML-spezifischer Elemente. Eine damit eingehende Strukturierung muss nicht zwangsläufig valide sein (ist in meinen Augen auch weniger wichtig, als überhaupt eine sinnvolle Struktur). Natürlich geht die Validität meist mit der Strukturierung einher, denn wer sich dazu Gedanken macht, dem macht es sicher kaum noch Mühe, sein Dokument valide zu halten.

Ich meine, dass HTML auch dann HTML sein kann, wenn keine DTD angegeben wurde, gegen die es validieren könnte.

Einen schönen Dienstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Ich möchte hier gerne zwischen HTML, strukturiertem HTML und validem HTML unterscheiden.

Ein HTML-Dokument ist valide.
Andernfalls ist es kein HTML-Dokument, sondern nur was HTML-ähnliches.

Ich meine, dass HTML auch dann HTML sein kann, wenn keine DTD angegeben wurde, gegen die es validieren könnte.

Das sehe ich anders.

cu,
Andreas

[Ashura]

Hallo MudGuard.

Ich möchte hier gerne zwischen HTML, strukturiertem HTML und validem HTML unterscheiden.

Ein HTML-Dokument ist valide.
Andernfalls ist es kein HTML-Dokument, sondern nur was HTML-ähnliches.

Oder es ist möglicherweise wohlstrukturiert, nur ohne DTD, gegen die es validieren könnte.

Warum sollte die DTD die Grundvoraussetzung für ein HTML-Dokument sein?
Dass sie es für ein valides HTML-Dokument sein muss, ist klar.

Ich meine, dass HTML auch dann HTML sein kann, wenn keine DTD angegeben wurde, gegen die es validieren könnte.

Das sehe ich anders.

Und wie „anders“?

Einen schönen Dienstag noch.

Gruß, Ashura

[MudGuard]

Hi,

Ein HTML-Dokument ist valide.
Andernfalls ist es kein HTML-Dokument, sondern nur was HTML-ähnliches.
Warum sollte die DTD die Grundvoraussetzung für ein HTML-Dokument sein?

http://www.w3.org/TR/html401/struct/global.html#h-7.1
An HTML 4 document is composed of three parts:
   1. a line containing HTML version information,
[...]
7.2 HTML version information
A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879]).

Steht da was von optional? Nein. ==> Keine Doctype-Element ==> kein HTML-Dokument.

Ich meine, dass HTML auch dann HTML sein kann, wenn keine DTD angegeben wurde, gegen die es validieren könnte.
Das sehe ich anders.
Und wie „anders“?

Probleme mit dem Kurzzeitgedächtnis? Steht ein paar Zeilen weiter oben ("Ein HTML-Dokument ist valide.").

cu,
Andreas

[Ashura]

Hallo MudGuard.

http://www.w3.org/TR/html401/struct/global.html#h-7.1
An HTML 4 document is composed of three parts:
   1. a line containing HTML version information,
[...]
7.2 HTML version information
A valid HTML document declares what version of HTML is used in the document. The document type declaration names the document type definition (DTD) in use for the document (see [ISO8879]).

Steht da was von optional? Nein. ==> Keine Doctype-Element ==> kein HTML-Dokument.

Das lese ich dort nicht. Ich lese: „A valid HTML document“. Hier geht es nur um valide HTML-Dokumente. Ist keine DTD angegeben, ist das Dokument zwar in keinem Falle valide (wogegen auch), aber dennoch ein HTML-Dokument. Ich denke nicht, dass die DTD ein HTML-Dokument ausmacht, sondern vielmehr der Einsatz der zur Verfügung stehenden Strukturierungsmittel.

Diese Strukturierungsmittel können zwar in einer DTD näher definiert und mit Restriktionen belegt sein, doch zur Verfügung stehen sie auch ohne DTD.

Steht ein paar Zeilen weiter oben ("Ein HTML-Dokument ist valide.").

Das muss es meiner Meinung nach nicht unbedingt sein. Für mich steht die Strukturierung im Vordergrund, obgleich die Validität damit meist einher geht.

Einen schönen Dienstag noch.

Gruß, Ashura

[MudGuard]

Hi,

An HTML 4 document is composed of three parts:
   1. a line containing HTML version information,

Das lese ich dort nicht. Ich lese: „A valid HTML document“.

Lies nochmal Abschnitt 7.1
Steht dort "valid"?

cu,
Andreas

[Ashura]

Hallo MudGuard.

Das lese ich dort nicht. Ich lese: „A valid HTML document“.

Lies nochmal Abschnitt 7.1
Steht dort "valid"?

Das hat man davon, wenn man einen Text nur überfliegt. Im Abschnitt 7.1 nicht, da hast du Recht.

Einen schönen Dienstag noch.

Gruß, Ashura

[Gunnar Bittersmann]

Hi Ashura,

Da habe ich mich wohl wieder etwas verfahren...

*g* Die Erfahrung hab ich auch schon ein-, zwei-, …mal gemacht. Bisher hatte MudGuard bei HTML-Spitzfindigkeiten immer Recht.

Gruß,
Gunnar

[MudGuard]

Hi,

Bisher hatte MudGuard bei HTML-Spitzfindigkeiten immer Recht.

Was soll diese sinnlose Einschränkung auf HTML-Spitzfindigkeiten? ;-)

cu,
Andreas

[Gunnar Bittersmann]

Hi MudGuard,

Bisher hatte MudGuard bei HTML-Spitzfindigkeiten immer Recht.

Was soll diese sinnlose Einschränkung auf HTML-Spitzfindigkeiten? ;-)

Ergänzung: „und CSS-Spitzfindigkeiten“.

Den Vorzeichen-Subthread wollen wir doch mit der Staubschicht des Archivs bedeckt lassen? ;-)

Gruß,
Gunnar

[Skoot]

Ein <a>-Element ist ein Inlineelement. Auf diese dürfen width und height nicht wirken. Willst du dies dennoch, musst du es in ein Blockelement umwandeln.

Danke sehr, so gehts.

Grüße, Skoot

[Gunnar Bittersmann]

Hi Skoot,

Opera und Firefox interpretieren jedoch scheinbar 'width' nicht immer und machen das ganze nur so breit wie die Schrift.
So wie es scheint, interpretieren sie 'width' nur bei Block-Elementen richtig, bei Inline-Elementen jedoch nicht.

Was auch richtig ist. [CSS2 §10.2]

Gibt es eine Lösung in HTML/CSS, die aufs gleiche hinkommt?

Ja, ganz einfach: Mach deine Links zu Blockelementen. [CSS2 §9.2.5]

Gruß,
Gunnar

[Skoot]

Ja, ganz einfach: Mach deine Links zu Blockelementen.

Danke sehr, es funktioniert!

Grüße, Skoot