Schaltflächen mit Bild, Text und Titel

Status
Nicht offen für weitere Antworten.
S

samson007

Grünschnabel
Hallo,

seit ein paar Tagen beschäftigt mich folgende Problematik:

Auf meiner Startseite sollen 6 Felder mit 150x300px erscheinen. Diese Felder sollen zugleich Schaltflächen sein und ein Bild (130x110px links oben) einen Titel (links unten) und einen Text (rechts) enthalten.

Selbstverständlich soll das im IE, Mozilla und Opera funktionieren und W3C konform sein.

Nun, ich hatte eine Version in der ich ein nettes Layout für die drei Browser hatte, jedoch war es nicht W3C-konform. Jetzt habe ich ein W3C-konformes Layout, das fast zu 100% in den 3 Browsern funktioniert, doch leider ist die Schaltflächenfunktion nicht akzeptabel.

Ich habe das Gefühl ich drehe mich im Kreis und wollte mal hören ob der eine oder andere evtl. eine bessere Möglichkeit weiß diese Aufgabe zu lösen.

Hier der Link: http://go74.homelinux.net/go/test.html

Gruß Samson
 
Also, wenn du mit schaltfläche einen ganz normalen link meinst ist mein erster Gedanket: Die Schaltfläche in ein <div> packen und die link-tags aussen rum:
HTML: 
<a href="#"><div>dein weiterer code</div></a>
Bei mir funktioniert ein ähnliches Modell, wenn es da Probleme geben kann, bzw die W3C meckert, bitte Bescheid sagen, würde mich auch interessieren :)
 
Zuletzt bearbeitet:
Das hatte ich anfangs auch gedacht, doch dann gab es leider Probleme. Ich werde es jetzt jedoch noch mal probieren.
Zum validieren des Codes kann man am besten den Firefox und die "web developer"-Toolbar benutzen. Zumindest mache ich das so und bin damit sehr zufrieden.

Du hattest Dir die Seite angeschaut? Der Code ist das Ergebniss tagelanger Versuche ein funktionierendes Ergebniss zu erhalten...

Gruß Samson
 
Hatte ich gesehen, und mir gefällt sie sehr gut :).
Immer weiter so... vor allem weil es immer wieder nett ist Webmaster zu finden die sich um die W3C kümmern ;)

PS: die Cursor verhält sich bei dem weigefassten Link-Tag nicht immer so wie man es gerne hätte. (innerhalb des Div's als textcursor, in meinem Fall)
Aber auch das kann man mit css Korrigieren (weiss aber nicht ob der cursor zum validen CSS gehört).
 
Zuletzt bearbeitet:
Vielen Dank für die Blumen...ich versuche halt gerade meine Dienstleistungen ansprechend und barrierefrei zu präsentieren. Ich hoffe nur das ich bald fertig bin und die Mühe sich bezahlt macht. Jetzt muss ich mich allerdings wieder um meine Tochter kümmern, wenn die im Bett ist geht es weiter.

Gruß Samson
 
...selbstverständlich! Und natürlich ist es mal wieder ganz simpel...wenn man weiß wie.
Zuerst möchte ich jedoch anmerken das es sich bei der Lösung vermutlich doch wieder um "schmutzigen"-Code handelt, welcher allerdings auf keinerlei Wiederstand seitens W3C oder der Browser stößt (soweit ich weiß).

Also, das Ding sollte ja ein Link sein:
HTML: 
   <a href="leitprint.html">
     <img class="startpic" src="im/sprint.jpg" alt="Leitlinie Print: Grafik" width="130" height="110"/>
     <var class="startdesc">Leitlinie Print</var>
     <var class="starttext">...wiederkehrende Probl...</var>
   </a>

...und so klappt es bei mir.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück