text-indent und span / warum geht das nicht?

[T:-)M]

Hallo,

ich habe ein Problem mit der Kombination von text-indent und span.
Wenn ich das so aufschreibe - wie unten aufgeführt - wird der Text ganz normal abgebildet. Er soll aber auf dem Bildschirm nicht zu sehen sein und nur von screenreadern vorgelesen werden. Wenn ich div statt span nehme klappt es aber ich habe dann auch Zeilenumbrüche und die kann ich an der Stelle nicht gebrauchen.


die Klasse in CSS:

.css_screenunsichtbar {
text-indent: -3000px
 }

der HTML Part:

<div id="zusatz"><span class="css_screenunsichtbar">Diese Seite </span><a href="javascript:window.print()">drucken</a> | <span class="css_screenunsichtbar">Gehe zur alphabetischen &Uuml;bersichtsseite </span><a href="suchen_finden.htm">suchen &amp; finden</a></div>

Habt Ihr einen Rat für mich?
Danke im Voraus.

Gruß

T:-)M

[hero-master]

Hi T:-)

Zitat von T:-)

Habt Ihr einen Rat für mich?

Erstmal ins richtige Forum posten
Zu deinem Problem:
text-indent ist nur für Blockelemente gedacht und span ist eben ein Inlineelement

[T:-)M]

Hi Nico,

hmmm... muss wohl daran liegen das ich so oft im dynamic forum bin ;-)
Hatte es zu spät gesehen und nichts gefunden wie ich es in das richtige Forum verschieben kann....

Merkwürdig ich bilde mir ein ich hätte text-indent auch oft für span gesehen.
Gibt es etwas ähliches was ich für span verwenden kann - also den Text ausserhalb des Bildschirmbereichs schieben?

Gruß

T:-)M

moinsen,
so funzt es bei mir wunderbest:

div {font:12px verdana, sans-serif}
.span {font-size:0; text-indent:-3000px}

<div><a href="#"><span>diese seite</span>drucken</a></div>

[T:-)M]

Hi Ing.o

habe jetzt das Ganze so gesetzt:

<div id="zusatz"><a href="javascript:window.print()"><span class="css_screenunsichtbar">Diese Seite </span>drucken</a> | <a href="suchen_finden.htm"><span class="css_screenunsichtbar">Gehe zur alphabetischen &Uuml;bersichtsseite </span>suchen &amp; finden</a></div>

funzt aber leider auch nicht...

Gruß

T:-)M

zeig doch mal das dazugehörige css

//edit;
hab gerade gesehen, dass die von mir angegebene lösung nur im firefox funzt.
hier findest du eine lösung mit gefloateten span´s


kann mal ein mod. zu den puristen schieben?

[Terry]

Benutze keine Unterstriche in den CSS-Klassen.

Also: css-screenunsichtbar statt css_screenunsichtbar.

CSS ist kein PHP.

[T:-)M]

Hi Ing.o,

im firefox funktioniert es so, der IE enfernt den Abstand nach unten
(immer der zickige IE grummel ;-) ....)


Hi Terry,

Du bist auch immer da - wenn es brennt ;-)

... und dabei habe ich mich so daran gewöhnt immer den Unterstrich zu benutzen
;-)

Ging aber komischerweise auch mit Unterstrich...

Wollte deine text-indent Trick einsetzen - funktioniert auch prima mit nem div aber leider nicht mit einem span.....

Gruß

T:-)M

ich kann mich nur wiederholen,
zeig doch mal deinen code und das dazugehörige css (vielleicht für den gesamten container).
die methode, die ich in meinem beispiel verwendet habe, hab ich im IE, firefox, opera und in ns6 getestet und ich sehe nirgendwo probleme.

[T:-)M]

Hi Ing.o,

ist leider alles ein bischen umfangreicher - deswegen hatte ich nicht gleich den ganzen sourcecode gepostet.
Hier isser.....

Gruß

T:-)M

css code

body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100.01%;
	background-color: #FFE7B6;
	margin:20px 0px;
	padding:0px;
}
h2 {
	font-size: 105%;
}
h3 {
	font-size: 95%;
}
a {
	text-decoration:none;
	color:#000000;
}
a:hover, a:focus {
	text-decoration:underline;
}
/* Logo schön in der Mitte */
#logo {
	width: 759px;
	background-image:url(grafik/layout/dr_haas_logo_759_ok.gif);
	background-repeat: no-repeat;
	height: 85px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
/* Inhalt alles schön in der Mitte */
#mitte {
	background-image:url(grafik/layout/bg_inhalt_1.gif);
	background-repeat:repeat-y;
	padding: 0px;
	margin: 0px auto;
	width: 759px;
	text-align:left;
}
/* Navigationsleiste oben auf der Seite */
#topnavigation {
	background-color: #FFCC66;
	font-size: 80%;
	margin: 0px 1px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CC6600;
}
#pfad {
	float: left;
	margin-left: 10px;
}
#zusatz {
	text-align:right;
	margin-right: 20px;
}
#navicontainer {
	overflow:hidden;
	text-align:left;
	width: 169px;
	float: left;
	background-color: #FFEECC;
	margin-left: 1px;
	margin-right: 20px;
}

/* alles fuer die navigation */


#navicontainer ul
{
	list-style: none;
	padding: 0;
	border: none;
	margin-left: 0;
}

#navicontainer li
{
	margin-bottom: 5px;
}

#navicontainer li a
{
	/* bugfix fuer IE */
	width: 100%;
	/* damit sich bei hover ueber die gesamte breite dir farbe aendert */
	display: block;
	background-color: #fcb849;
	padding-left: 20px;
	color: #ffffff;
	font-size: 80%;
	line-height: 1.5;
	text-decoration: none;
}

#navicontainer li a#current {
	background-color: #fcb849;
	color:#000000;
}

html>body #navicontainer li a { width: auto; }

#navicontainer li a:hover, #navicontainer li a:focus
{
	background-color: #ffcc66;
	color: #fff;
}

#navicontainer li li
{
	border-top: none;
	border-bottom: 0;
	margin: 0;
}

#navicontainer li li a
{
	display: block;
	/* padding: 5px; */
	background-color: #ffcc66;
	color: #000000;
	text-decoration: none;
	width: 100%;
}

#navicontainer li li subactive
{
	color:#000000;
}

#navicontainer li li a#subcurrent
{
	color:#000000;
	background-image:url(grafik/symbole/pfeil_kugel.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
/* navigation ende */

#inhalt {
	font-size: 80%;
	background-color: #FFCC66;
	text-align:left;
	margin: 20px 20px 0px 190px;
	/* für den Abstand zur Fusszeile margin, da sonst andere Farbe */
	padding: 0px 0px 20px 0px;
}

/* container für text neben dem bild */
#textcontainer {
	float:left;
	margin: 0px 20px 20px 0px;
	padding: 0px;
}
/* container für fotlaufenden text */
#text {
	clear:both;
	margin: 0px;
	padding: 0px;
}

/* für die Übersichtspunkte */
.uebersicht {
	list-style:url(grafik/symbole/pfeil_orange.gif) none inside;
	color: #000000;
	}
.uebersicht a {
	text-decoration:none;
	color:#000000;
	}
.uebersicht a:hover, .uebersicht a:focus {
	text-decoration:underline;
	background-color: #FFE7B6;
	}

.foto {
	float: left;
	margin: 0px 20px 10px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left' */
}
/* Fusszeile schön in der Mitte */
#fusszeile {
	clear:left;
	font-size: 75%;
	text-align: center;
	background-image:url(grafik/layout/fusszeile_759_ok.gif);
	background-repeat: no-repeat;
	height: 32px;
	width: 759px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CC6600;
	padding: 0px;
}
/* damit die Fusszeile einen Abstand von Oben hat - dei Grafik sich aber trotzdem nicht wiederholt */
#fusszeile p
{
	margin-top: 7px;
}
/* zusätzliches */
/* auf dem Screen unsichtbar aber der Textreader liest es vor auch wenn er CSS versteht */
.screenunsichtbar {
text-indent: -3000px;
font-size:0; 
!important;
float:left; 
display:block;
width:0;

 }
 
 table, th, tr, td {
 	text-align: left;
 	border: 0px;
	padding: 5px 10px 5px 10px;
 }

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Praxis Dr. Haas - Frauen&auml;rztin- Erlangen</title>
<meta http-equiv="Page-Enter" content="BlendTrans(Duration=2,Transition=12)" />
<meta http-equiv="Page-Exit" content="BlendTrans(Duration=2,Transition=12)" />
<link href="screen.css" rel="stylesheet"  media="screen,projection" />
<link href="druck.css" rel="stylesheet"  media="print" />
</head>
<body bgcolor="#ffcc66" text="#000000">
<div id="mitte">
  <div id="logo"><h1 class="screenunsichtbar">Dr. Madeleine Haas - Frauen&auml;rztin</h1></div>
  <div id="topnavigation">
    <div id="pfad">Sie befinden sich hier: <a href="index.htm">Start</a> &gt; <a href="s_info.htm">Schwangerschaft</a> > Ultraschall </div>
    <div id="zusatz"><span class="screenunsichtbar">Diese Seite </span><a href="javascript:window.print()">drucken</a> | <span class="screenunsichtbar">Gehe zur alphabetischen &Uuml;bersichtsseite </span><a href="suchen_finden.htm">suchen &amp; finden</a></div>
  </div>  
  <div id="navicontainer"><div class="screenunsichtbar"><a href="#inhalt">Hauptnavigation &uuml;berspringen und direkt zum Inhalt gehen</a></div>    
    <ul id="navlist">
      <li><a href="#">Aktuell</a></li>
      <li><a href="p_lage.htm">Praxis</a></li>
      <li id="active"><a href="#" id="current">Schwangerschaft</a>
        <ul id="subnavlist">
          <li><a href="s_info.htm">allgemeine Info </a></li>
          <li><a href="s_richtlinien.htm">Richtlinien</a></li>
          <li><a href="s_zusaetzliches.htm">Zus&auml;tzliches</a></li>
          <li id="subactive"><a href="#"  id="subcurrent">Ultraschall</a></li>
          <li><a href="s_infektionsschutz.htm">Infektions-Schutz</a></li>
          <li><a href="s_bluttests.htm">weitere Blut-Tests</a></li>
        </ul>
      </li>
      <li><a href="k_info.htm">Krebsvorsoge</a></li>
      <li><a href="v_methoden.htm">Verh&uuml;tung</a></li>
      <li><a href="w_fragen.htm">weitere Leistungen</a></li>
    </ul>
  </div>  <div id="inhalt">
  <a name="inhalt" id="inhalt"></a>
    <div id="textcontainer"><img src="grafik/dr_haas_portrait.jpg" alt="Foto von Frau Dr. Haas" width="252" height="172" class="foto"/>
      <h2>Schwangerschaft
        <!-- achtung: ohne break zickt der IE -->
        <br />
        Ultraschall</h2>
      <p>... hier kommen die Links nach unten hin ... </p>
      <div id="text">
        <p>Text</p>
.... hier kommt der ganze Textinhalt .....
        <!-- div text schliessen -->
      </div>
      <!-- div textcontainer schliessen -->
    </div>
    <!-- div inhalt schliessen -->
  </div>
  <div id="fusszeile">
    <p>&copy; 2005 Dr. Haas | design by <a href="http://www.websitebau-barrierefrei.de">www.websitebau-barrierefrei.de</a><span class="kein_druck"> | <a href="impressum.htm">Impressum</a> | <a href="index.htm">Startseite</a></span></p>
  </div>
  <!-- div mitte schliessen -->
</div>
</body>
</html>

so, jetzt hab ichs mir mal zusammengebastelt und angeschaut.
das problem ist, dass du natürlich die schrift des spans aus dem viewport rausziehst, aber die verschiedenen browser scheinbar ein limit an negativem text-indent haben. der ie machts vernünftig, firefox auch, nur opera und der ns6 interpretieren die -3000px nicht, sondern machen nach ca. 250px feierabend.

wenn du für das div #zusatz eine feste breite (oder auch ein display:inline) definierst und es dann entsprechend positionierst, tritt das problem im ie und im ff nicht mehr auf, lediglich opera zickt noch, was man mit ein wenig schummeln mit der schriftfarbe auch in den griff bekommen würde.

die frage, die sich mir gerade stellt ist nur, ob ein display:none für das span nicht einfacher und sinnvoller wäre. da du ja mit verschiedenen medientypen im stylesheet arbeitest, sollte das ja nun kein problem darstellen.

[Boris]

Also ich hab mit text-indent: -9000px noch nie Probleme gehabt, auch nicht mit Opera oder NS6 ... (?)

[T:-)M]

Hallo Ing.o,
Hallo Boris,

Mit obigen code
machts der Firefox prima.
Der IE 6 und 5.5 machen nach unten zu wenig Abstand.
Der IE 5 macht zusätzlich noch einen Zeilenumbruch.
(siehe Anhang screenshots)

Gruß

T:-)M

moinsen,
das ist ja schon mal ein fortschritt
welchen code meinst du jetzt genau?

den abstand und den zeilenumbruch bekommst du sicher mit einer dem entsprechenden formatierung des divs #zusatz hin

[Boris]

Verpass dem Teil mal zum Test nicht nur ein text-indent, sondern auch ein line-height: 0px und font-size: 0px; ... bringt das irgendwas?