Link ohne CSS als Text, ohne Bild, mit CSS als Bild ohne Text
Bob May
- css
Moin also zuerstmal das Problem und dann der Code.
Also wie man sehen kann will ich ein strictes HTML dokument haben, welches auch validiert werden kann. Und es soll mit CSS umgesetzt werden, um somit eine Textversion ohne Bilder und eine Style version zu bekommen.
Mein Problem ist nun das es ja nicht geht ein Bild direkt per CSS einzufügen so wie das mit dem <img> Tag geht, also nur als Hintergrund möglich (Bachground-image). Wenn ich mich da vertuhe bitte sagen, weil dann könnte das problem kein problem mehr sein ;D
So nun aber zur eigentlichen sache.
Wie man sieht will ich in der Version ohne CSS einen Downloadlink einfügen als text (Download PDF). In der CSS Version soll dieser Text aber nicht mehr angezeigt werden und an stelle davon ein Bild. Das währe ja mit Hintergrund kein PRoblem, nur das ich es eben nicht hinbekomme das das Bild dann als Link eingebaut wird.
So wie ich es unten habe mit dem <p> innerhalt des <a> Tags funktioniert es zwar, ist aber eben nicht valid.
Währe echt super wenn mit da jemand helfen könnte. Ist dringend.
MfG
Bob
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
<!--
#link_pdf .p1{
width: 57px;
height: 58px;
BACKGROUND-IMAGE: url(file_pdf.gif);
}
#link_pdf span {
display:none;
}
-->
</style>
</head>
<body>
<div id="download">
<a id="link_pdf" href="the.pdf">
<p class="p1">
<span>
Download PDF
</span>
</p>
</a>
</div>
</body>
</html>
Hallo Bob May,
In der CSS Version soll dieser Text aber nicht mehr angezeigt werden und an stelle davon ein Bild.
Verwende doch das alt-Attribut, es ist schließlich dafür da, einen alternativen Text anzuzeigen, sofern das Bild nicht angezeigt werden kann/soll.
Grüße
David
Hallo Bob May,
In der CSS Version soll dieser Text aber nicht mehr angezeigt werden und an stelle davon ein Bild.
Verwende doch das alt-Attribut, es ist schließlich dafür da, einen alternativen Text anzuzeigen, sofern das Bild nicht angezeigt werden kann/soll.Grüße
David
Naja das mit alt hatte ich auch schon überlegt, aber ich möchte das img tag in der Textversion nicht benutzen, weil es eben eine reine Textversion sein soll. Die Bilder sollen alle nur über CSS eingefügt werden, damit man sie gegebenfalls einfacher ändern kann bzw. ein weitere Style definieren kann mit anderen bildern und dafür keine extra HTML Seite benötigt.
Hi,
So wie ich es unten habe mit dem <p> innerhalt des <a> Tags funktioniert es zwar, ist aber eben nicht valid.
von Davids Tipp abgesehen: Warum glaubst Du, man könne nur einem <p>-Element ein background-image zuweisen?
Ist dringend.
Das ist es immer. Das Gegenteil wäre mal bemerkenswert ...
Cheatah
von Davids Tipp abgesehen: Warum glaubst Du, man könne nur einem <p>-Element ein background-image zuweisen?
weil es bei dem a Tag nicht geht, bzw. ich die größe in einem a Tag oder einem span nicht ändern kann.
Das ist es immer. Das Gegenteil wäre mal bemerkenswert ...
lol das hilf mir jetzt aber auch nicht wirklich weiter :)
Hi,
von Davids Tipp abgesehen: Warum glaubst Du, man könne nur einem <p>-Element ein background-image zuweisen?
weil es bei dem a Tag nicht geht,
CSS kennt nicht den geringsten Unterschied zwischen irgendwelchen Tags. Was mit einem <p> geht, geht auch mit einem <a>, einem <table> oder einem <foobar>.
bzw. ich die größe in einem a Tag oder einem span nicht ändern kann.
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
"Applies to: all elements but non-replaced inline elements, table rows, and row groups"
Das ist es immer. Das Gegenteil wäre mal bemerkenswert ...
lol das hilf mir jetzt aber auch nicht wirklich weiter :)
Zu drängeln hat Dir aber auch nicht geholfen. Im Gegenteil - ich habe lange überlegt, ob ich Dir _überhaupt_ antworte. Ich verabscheue Nötigungen.
Cheatah
CSS kennt nicht den geringsten Unterschied zwischen irgendwelchen Tags. Was mit einem <p> geht, geht auch mit einem <a>, einem <table> oder einem <foobar>.
komischerweise funktioniert es bei mir nicht, wenn ich die css Angaben die ich jetzt fürs p benutze fürs a benutze, dann steht der Text da so als ob die größenangaben nicht vorhanden währen.
Das ist es immer. Das Gegenteil wäre mal bemerkenswert ...
lol das hilf mir jetzt aber auch nicht wirklich weiter :)Zu drängeln hat Dir aber auch nicht geholfen. Im Gegenteil - ich habe lange überlegt, ob ich Dir _überhaupt_ antworte. Ich verabscheue Nötigungen.
ok wo du recht hast hast du recht,
Eine Lösung habe ich immer noch nicht. Vielleicht währe ein Beispiel-Lösung das einfachste.
Hi,
komischerweise funktioniert es bei mir nicht, wenn ich die css Angaben die ich jetzt fürs p benutze fürs a benutze, dann steht der Text da so als ob die größenangaben nicht vorhanden währen.
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
"Applies to: all elements but non-replaced inline elements, table rows, and row groups"
Cheatah
Hi Bob May,
von Davids Tipp abgesehen: Warum glaubst Du, man könne nur einem <p>-Element ein background-image zuweisen?
weil es bei dem a Tag nicht geht, bzw. ich die größe in einem a Tag oder einem span nicht ändern kann.
Du möchtest dich mit der Display-Eigenschaft beschäftigen: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
Das ist es immer. Das Gegenteil wäre mal bemerkenswert ...
lol das hilf mir jetzt aber auch nicht wirklich weiter :)
Nichtsdestotrotz eine gültige Aussage... ;-)
Gruß
Kurt
Hoi,
Du möchtest dich mit der Display-Eigenschaft beschäftigen: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
möchte ich gar nicht, weil ich das schon habe :) Das hilf mir bei meinem Problem nämlich auch nicht weiter.
Bob
Hi,
Du möchtest dich mit der Display-Eigenschaft beschäftigen: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
möchte ich gar nicht, weil ich das schon habe :) Das hilf mir bei meinem Problem nämlich auch nicht weiter.
doch, tut es.
Cheatah
doch, tut es.
und wie bitte ?
Bob
Hi,
doch, tut es.
und wie bitte ?
lies und verstehe. Beachte auch die anderen Ratschläge dieses Threads.
Cheatah
lies und verstehe. Beachte auch die anderen Ratschläge dieses Threads.
ich versteh aber nicht wirklich, was mir davon helfen soll, hab schon einiges probiert, aber das klappt alles nicht.
Was am einfachsten währe und mir aufjedenfall helfen würde ist das mir einfach mal einer das aufschreibt. Ist doch echt nicht zuviel verlangt mal so ein paar zeilen aufzuschreiben.
Das geht schneller als immer wieder zu schreiben schau mal hier und schau mal da.
Bob
Hi,
ich versteh aber nicht wirklich, was mir davon helfen soll, hab schon einiges probiert, aber das klappt alles nicht.
Dir wird niemand helfen können, wenn Du nicht sagst, _was_ Du mit welchem Erfolg versucht hast.
Was am einfachsten währe und mir aufjedenfall helfen würde ist das mir einfach mal einer das aufschreibt.
Recherchiere bitte im </archiv/>, warum das Liefern fertiger Lösungen hier mehr als nur verpöhnt ist.
Ist doch echt nicht zuviel verlangt mal so ein paar zeilen aufzuschreiben.
_Eine_ Zeile. Und es ist nicht zu viel verlangt, dass Du diese Zeile _selbst_ herausfindest. Die Informationen, welche Du erhalten hast, reichen hierzu absolut aus.
Das geht schneller als immer wieder zu schreiben schau mal hier und schau mal da.
Das geht schneller, und Du lernst es nie.
Cheatah
Recherchiere bitte im </archiv/>, warum das Liefern fertiger Lösungen hier mehr als nur verpöhnt ist.
warum das Liefern von fertigen Lösungen verpöhnt sein soll verstehe ich nicht, auch wenn das vielleicht einige anders sehen. Einem helfen die Lösung zu finden ist zwar schön und gut, aber manchmal ist eine Lösung meiner meinung nach viel besser, zumals es in meinem fall ja wohl auch nicht viel zu sein scheint.
Ist doch echt nicht zuviel verlangt mal so ein paar zeilen aufzuschreiben.
_Eine_ Zeile. Und es ist nicht zu viel verlangt, dass Du diese Zeile _selbst_ herausfindest. Die Informationen, welche Du erhalten hast, reichen hierzu absolut aus.
Das geht schneller als immer wieder zu schreiben schau mal hier und schau mal da.
Das geht schneller, und Du lernst es nie.
Jeder lernt anders, und ich kann sehr gut aus Lösungen, bzw. Beispielen lernen. Beispiele kann man nämlich analysieren und verstehen warum etwas so gelöst wurde, anstatt selber müselig rauszufinden bis etwas funktioniert, und sich dann immer noch nicht sicher zu sein ob das wirklich eine "richtige" Lösung ist.
Bob
Hi Bob,
warum das Liefern von fertigen Lösungen verpöhnt sein soll verstehe ich nicht, auch wenn das vielleicht einige anders sehen. Einem helfen die Lösung zu finden ist zwar schön und gut, ...
Rate mal, warum hier alles "self" heißt? Warum sollten wir hier eine Antwortmaschine für Internetprogrammierung betreiben? Unser Ziel hier ist, gemeinsam zu lernen, die Voraussetzung dazu ist, dass jeder, auch ein Anfänger, erkennbare Bemühungen zeigt, die Lösung zu suchen. Du kritisierst hier also nicht irgendetwas, sondern unser Grundprinzip.
Ist doch echt nicht zuviel verlangt mal so ein paar zeilen aufzuschreiben.
Warum kannst Du das verlangen? Warum sollte einer von uns für Dich nach Deinen Vorgaben arbeiten, obwohl Du keinen Cent zahlst?
Das geht schneller, und Du lernst es nie.
Jepp
Jeder lernt anders, und ich kann sehr gut aus Lösungen, bzw. Beispielen lernen. Beispiele kann man nämlich analysieren und verstehen warum etwas so gelöst wurde, anstatt selber müselig rauszufinden bis etwas funktioniert, und sich dann immer noch nicht sicher zu sein ob das wirklich eine "richtige" Lösung ist.
Beispiele gibt's in der Doku und im Netz genug, also streng die kleinen grauen Zellen an, Du wirst sehen, dass Du weiterkommst!
Viele Grüße
Mathias Bigge
Hi Bob May,
lies und verstehe. Beachte auch die anderen Ratschläge dieses Threads.
ich versteh aber nicht wirklich, was mir davon helfen soll, hab schon einiges probiert, aber das klappt alles nicht.
Du weisst, dass ein Anchor ein Inlineelement ist?
Du willst ihm feste Größe verpassen?
Du weisst, daß das bei einem Inlineelement nicht möglich ist?
Und hier kommt Display ins Spiel.
Lies dir bitte aufmerksam die von mir verlinkte Seite durch, wenn nötig auch folgende:
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.2.5�
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.4.1�
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap09.html#heading-9.4.2�
Dann wirst du sehr schnell draufkommen, was zu tun ist.
Was am einfachsten währe und mir aufjedenfall helfen würde ist das mir einfach mal einer das aufschreibt. Ist doch echt nicht zuviel verlangt mal so ein paar zeilen aufzuschreiben.
Doch, jedes "Verlangen" ist in diesem Kontext zu viel.
Daß das Forum auf Freiwilligkeit beruht, ist dir bewusst?
Das geht schneller als immer wieder zu schreiben schau mal hier und schau mal da.
Ja, das ginge tatsächlich schneller, wiewohl du dabei um den Lerneffekt gabracht würdest und bei dem nächsten ähnlichen Problem wieder nachfragen müsstest.
Gruß
Kurt
Hi,
Mein Problem ist nun das es ja nicht geht ein Bild direkt per CSS einzufügen so wie das mit dem <img> Tag geht, also nur als Hintergrund möglich (Bachground-image).
Es gibt auch noch die content-Eigenschaft.
Aber da versagt wieder mal der Massenbrowser (wobei ich nicht weiß, ob das nur am nicht-unterstützten :before/:after liegt)...
cu,
Andreas
Es gibt auch noch die content-Eigenschaft.
Aber da versagt wieder mal der Massenbrowser (wobei ich nicht weiß, ob das nur am nicht-unterstützten :before/:after liegt)...
wenn der MAssenbrowser das nicht unterstützt dann hilft mir das auch nicht weiter. Die Seite soll ja in so gut wie allen browsern funktionieren, mal vom NS4.0 abgesehen :)
So wie ich es unten habe mit dem <p> innerhalt des <a> Tags funktioniert es zwar, ist aber eben nicht valid.
Du kannst definitiv auch einem <a>-Tag ein Hintergrundbild zuweisen, der <p>-Tag ist überflüssig wie ein Kropf.
Wenn Du dem Bild eine bestimmte Höhe/Breite zuweise willst, dann mache "display: block;" für das <a>-Element.
Gruß,
KonRad -