zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Wie schreibe ich auf ein Bild

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 09.01.2007, 19:33
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

Lineman: Wenn man schon Text *über* einem Bild haben will, so kann man ziemlich sicher davon ausgehen, dass das Bild nur zierde ist. Und all diese Grafiken gehören nicht in <img> Tags! Die braucht man weder auszudrucken noch nem Textbrowser oder Screenreader vorlegen.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 09.01.2007, 19:59
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von LineMan Beitrag anzeigen
so ein quatsch... wenn man weiss was man macht ist das keineswegs in 99% unnötig
Du sprichst von Skalierbarkeit und empfiehlst position: absolute; für ein Element, das Text enthält? Denk nächstes Mal bitte etwas nach, bevor Du hier "so ein quatsch" in den Raum wirfst und Dich mit Deiner weiteren Aussage als vorlauter Anfänger outest.

Von Skalierbarkeit stand zwar nichts im OP, aber wenn es dennoch möglich sein soll, nimmt man img (mit Alt-Text) und Text in a, stellt a und img als Block dar und gibt img negativen margin-bottom (ggf. durch positiven margin-bottom für a wieder ausgleichen). Ein Selbstgänger ist diese Lösung jedoch nicht, d.h. je nach Kontext sind ggf. weitere Anpassungen nötig.

Alternative mit Zusatz-Markup: Man setzt nur das Bild absolut, setzt den Text in span oder strong o.ä., stellt dieses als Block dar und gibt ihm position: relative; und ggf. z-index, sowie min-height bzw. height für IE 5/6 (entsprechend der Bildhöhe); letzteres kann stattdessen auch a bekommen. Alternative ohne Skalierbarkeit, aber auch ohne Zusatz-Markup: img mit Alt-Text, das man per CSS verschwinden und stattdessen als Hintergrundbild erscheinen läßt.

Wenn das Bild nun aber - wie bereits mehrfach angesprochen - eh keine inhaltliche Relevanz hat, macht man es so wie in meinem ersten Posting beschrieben.

Geändert von heiko_rs (09.01.2007 um 20:03 Uhr)
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 09.01.2007, 21:18
Benutzerbild von The Doc
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 19.01.2005
Beiträge: 1.113
The Doc befindet sich auf einem aufstrebenden Ast
Standard

heiko_rs: reiß dich mal zusammen. ob negatives margin-bottom oder position absolute ist doch gehupft wie gesprungen! Ein "vorlauter Anfänger" muss er dadurch ja nicht sein - auch wenn seine Aussage irgendwo Murks ist.
__________________
Bitte keine PN's - schreibt mir ne anständige Mail oder sprecht mich über Msn / Icq an
Milian Wolff | Markdownify | Typogridder
Mit Zitat antworten
  #14 (permalink)  
Alt 09.01.2007, 22:09
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

also ich werd jetzt bestimmt nicht zurück rudern, sondern es gibt durchaus fälle in denen meine angesprochene lösung durchaus sinn macht... (davon ab ist sie extrem einfach umzusetzen -> ohne z-index) z.B. wenn man mit cms systemen arbeitet. wenn bilder und text eben nicht im css/html und beim handgedängel zu setzen sind. lösungen die workarounds erfordern, von denen du hier gerade auch einige genannt hast. aber selbige sind eben nicht immer machbar. und ein einfacher workaround für ein image, welches eine bedeutung hat und eben eine andere als der text der darüber steht gibt es in verschiedensten designs zu hauf... du scheinst ein gegner von position:absolute zu sein... Aber nur weil Du damit nicht umgehen kannst hat diese style-anweisung durchaus seine daseinsberechtigung!

meine angesprochene lösung funktioniert in allen browsern und die reihenfolge des markups als auch die auszeichnungen sind genau die, die es braucht um einen vernünftigen und barrierenfreien code abzuliefern. davon ab hast du eine ganz ähnliche (position:abolute, position:relative, z-index -> was aber nicht immer so funktioniert, wie ich es manchmal brauche) selbst angesprochen und ja es ist eben EINE Lösung... Und ich habe auch gesagt, wenn das Bild lediglich eine Schmuckgrafik ist, dann doch bitte als Hintergrundbild, ausser man muss mit einem CMS arbeiten, welches keine dynamischen styles schreiben kann (falls dieses bild redaktionell austauschbar sein soll)... aber ich glaube darum geht es in diesem forum grundsätzlich selten (was auch ok ist)...

wenn du mein posting gelesen hättest, dann hättest du gemerkt, dass ich nie von einem element geredet habe, welches text enthält... sondern einem bild AUF dem text steht, das aber selber eine andere aussage hat! das ist ein kleiner aber feiner unterschied. und letztlich gibt es browser die mit position:relative teilweise nicht zurecht kommen (netscape 6)... man aber diese browser trotzdem bedienen muss. (vielleicht nicht in diesem fall)...

bei css geht es doch nicht darum sich möglichst verworrene lösungen mit raus und wieder reinschieben auszudeneknen sondern den kompatibelsten weg zu gehen und dabei im markup der html-seite sauber zu bleiben. aber deine aussagen sind doch reichlich selbstgefällig... (bist du ein css-guru?) und man sollte doch aufpassen andere zu beleidigen, wenn man einfach nicht versteht, was sie meinten und eine hilfestellung des anderen als unnötig da stehen lässt (obwohl es funktioniert)... bitte denke du erstmal nach bevor du etwas schreibst. schließlich hast du angefangen:

Zitat:
position: absolute; ist in 99% aller Fälle unnötig oder sogar kontraproduktiv.

Grundsätzlich braucht man überhaupt kein umgebendes Element; a wird einfach als Block dargestellt.
kleine anmerkung zur zweiten aussage... ich habe im unteren beispiel ein p um das a weil ich text-browser nicht ignoriere... und nicht möchte, dass der link direkt hinter dem alt-text steht... und ja.. ich bediene auch netscape6 (wenn ich muss)

Kleines Beispiel gefällig (Es gibt Kunden die sowas wollen.. ja auch mit opacity und redaktionell pflegbar, skalierbar und richtige bilder mit richtigen alt-tags):

Position:Absolute
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...

Geändert von LineMan (09.01.2007 um 22:17 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 10.01.2007, 01:47
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von LineMan Beitrag anzeigen
wenn du mein posting gelesen hättest, dann hättest du gemerkt, dass ich nie von einem element geredet habe, welches text enthält
Natürlich ist Text enthalten, lies das OP. Wenn Du das komplette Konstrukt absolut positionierst, wird es für sich funktionieren (nichts leichter als das), aber nicht in normalem Kontext, da sich die übrigen Elemente nicht an seine Skalierung anpassen werden (von der übrigens - ich sage es nochmal - im OP nicht die Rede ist).

Das hat auch nichts mit "nicht damit umgehen können" zu tun, sondern mit den klaren Nachteilen absoluter Positionierung. Dennoch habe ich auch eine Lösung mit position: absolute; genannt, allerdings ist diese komplett skalierbar, d.h. auch alle übrigen Elemente passen sich an, da das umgebende Element nicht absolut positioniert ist.

Nach diesem Prinzip funktioniert übrigens auch das Beispiel auf dem von Dir geposteten Link (dessen Prinzip meinem genannten Vorschlag entspricht): Das umgebende Element ist nicht absolut positioniert. Abgesehen davon ist das Markup des Beispiels allerdings ziemlich übel und nicht besonders schlau: wozu ein leeres span (das sich darüberhinaus nicht anpaßt, wenn mal mehr Text enthalten ist), wenn gleichzeitig das den Text enthaltende p ungenutzt bleibt?

Abschließend noch etwas allgemeines: Wenn Du jemandem "so ein quatsch" an den Kopf wirfst, darfst anschließend nicht rumjammern, daß seine Antwort Dich "beleidigt" hätte. Damit mußt Du rechnen.

Wie auch immer, für eine weitere Diskussion mit Dir ist mir meine Zeit zu schade.
Mit Zitat antworten
  #16 (permalink)  
Alt 10.01.2007, 02:07
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von The Doc Beitrag anzeigen
reiß dich mal zusammen.
Wenn mir jemand "so ein quatsch" an den Kopf wirft, und dann eine Aussage folgen läßt, die auch Du als Murks bezeichnest, reiße ich mich nicht zusammen.

Zitat:
Zitat von The Doc Beitrag anzeigen
ob negatives margin-bottom oder position absolute ist doch gehupft wie gesprungen!
Nein, da bei letzterer Lösung die Elemente ihren Bezug zueinander verlieren, bei ersterer dagegen nicht: Bei negativem margin passen sich die folgenden Elemente einer Vergrößerung des verschobenen Elementes ganz normal an, bei einem absolut positioniertem Element dagegen nicht.

Das ist bei einer Grafik ja auch kein Problem (da ihre Höhe bekannt ist), bei Text dagegen schon, daher mein Vorschlag, den Text nicht absolut zu positionieren, sondern allenfalls per margin zu verschieben - auch wenn ich hier ein absolut positioniertes img (aber eben nicht absolut positionierten Text) vorziehen würde, wie in meinem weiteren Beispiel genannt.
Mit Zitat antworten
  #17 (permalink)  
Alt 10.01.2007, 07:15
Benutzerbild von LineMan
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 09.08.2006
Ort: Mülheim an der Ruhr
Beiträge: 211
LineMan befindet sich auf einem aufstrebenden Ast
Standard

natürlich muss dann z.B. um ein solches Element noch ein position:relative... es wäre auch dieses überflüssige div notwendig, welches um das bild und den text gelegt werden muss, um es in einer webseite vernünftig zu positionieren... z.B. per float... was glaubst du wovon ich rede? dieses beispiel sollte nur zeigen, dass position:absolute recht sinnvoll sein kann, wenn man eben text auf ein bild legt... Auch ist klar, das bei einem absolut positionierten Element die Textlänge (Anzahl der Worte) nicht beliebig ist... wie auch immer.

ok, stimmt... es war etwas OffTopic und hatte mit dem eigentlichen beispiel nur indirekt etwas zu tun... (wobei die technik auch bei diesem beispiel angewand werden kann, auch wenn ich es bei einem logo grundsätzlich anders machen würde). Aber Murks ist mein Vorschlag nicht...

ich glaube wir haben hier einfach aneiander vorbei geredet (oder ich eben an euch)...
__________________
Mein Bug, Dein Bug, Bugs sind für uns alle da...

Geändert von LineMan (10.01.2007 um 07:35 Uhr)
Mit Zitat antworten
  #18 (permalink)  
Alt 10.01.2007, 08:17
Neuer Benutzer
neuer user
 
Registriert seit: 10.01.2007
Ort: Kunming Yunnan China
Beiträge: 19
heinzel befindet sich auf einem aufstrebenden Ast
Standard div relative font absolute

Hallo,
Wenn ich dein Problem richtig verstanden habe , habe ich das selbe Problem.
Meine Notloesung kannst du weiter unten sehen.
Bin aber selbst nicht sehr zufrieden damit. z.B. ist der Text nicht zentriert.(text-align: center funktioniert nicht)

Also hier ein Auszug aus meinem Websitecode.
Code:
<td align= center bgcolor="#dddddd"  colspan="2" > 
  <div  style="position: relative; left: 0; top: 0">
    <a href="Teaching/teaching.html" title="Culture Teaching/Preparing for China and abroad">
    <img src="./startpictures/Bogenmittels.jpg" alt="Culture Teaching&frasl;Preparing for China and abroad" width="100%" height="94px" style="border-width:0px" />
   <font color="111111" size=2 id=ct style="position: absolute; left: 20%; top: 20px; text-decoration:none"><b>Culture<br> Teaching<br>Preparing<br> for China<br> and abroad</b></font>
    </a>
  </div>
</td>
die Seite ist IcCT Intercultural Consulting and Trading Ltd.**-* China, Deutschland Germany ...*.

Du kannst sehen, dass ich nicht viel Ahnung von css/xhtml habe.
Und Du wirst warscheinlich "Pruegel" von den Stilisten bekommen, wenn du so vorgehst.
Aber von den Profis konnte mir auch keiner eine bessere Loesung anbieten.

Bitte schick ne mail an mich wenn Du eine Loesung gefunden hast.


mfG.
Dirk

PS
Falls meine Antwort etwas hilfreich war schau doch bitte mal kurz
Problem an.
Wie bekomme ich die Zwischenraeume zwischen den Tabellenfeldern weg.
Im Internetexplorer und Firefox.
Sollte xhtml strict bleiben.

Geändert von heinzel (10.01.2007 um 08:19 Uhr) Grund: Verschreiber
Mit Zitat antworten
  #19 (permalink)  
Alt 12.01.2007, 15:34
Benutzerbild von Lockhead883
<? echo "Hello World"; ?>
XHTMLforum-Mitglied
 
Registriert seit: 01.03.2006
Beiträge: 132
Lockhead883 befindet sich auf einem aufstrebenden Ast
Standard

Code:
border="0" cellspacing="0" cellpadding="0"
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 13.01.2007, 16:44
Benutzerbild von E|H
E|H E|H ist offline
body:hover{display:none;}
XHTMLforum-Kenner
 
Registriert seit: 27.01.2005
Beiträge: 1.326
E|H befindet sich auf einem aufstrebenden Ast
Standard

Bei sowas sollte man eigentlich keinen CSS-Vorschlag machen, sondern lieber anmerken, daß der HTML-Code, äh ja, unschön ist.

Irgendwie ist das Board doch nicht mehr ganz das, was es mal war.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild ersetzten durch Bild-nr. +1 luki.boy Javascript & Ajax 3 13.04.2011 09:13
Bild durch Bild ersetzten! (a:hover) Prof. Awesome CSS 11 16.03.2011 14:33
Bild als Active makieren siriussmarty CSS 0 08.07.2010 14:37
Bild über Bild rafa CSS 2 24.01.2010 18:46
Bild über Bild legen mit position: relative (IE6 Problem) naitsab CSS 3 09.06.2009 13:20


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:20 Uhr.