CSS, barrierefrei, Bilder und die goldene Mitte

geloescht_JesterDay · 25. September 2004

Hallo,

letztens Stand ja ein schöner Artikel in der c't zum Thema "barrierefrei". Dummerweise hab ich den 2ten Teil nich lesen können, is ja auch egal.

Hab mir dann mal die Seite www.csszengarden.com näher zu gemüte geführt und will jetzt ne Seite von mir auch komplett auf CSS (und somit barrierefrei) umstellen. Also weg vom Frames, Tabelle und strikte Trennung von Form und Inhalt.

Doch schon hab ich ein paar Probleme:

Wie kann ich Bilder mit CSS steuern? Gibt es nur die background-image: url(...) Methode? Hab nichts anderes gefunden. Und wie schaff ich es dann, ein Bild zentriert anzuzeigen?

Bis jetzt sieht es bei mir so aus:

CSS:


#pageHeader { height:65px; padding-top: 50px; background-image: url(../images/ein.gif); background-repeat: no-repeat;  

   position: relative; left: 350px}

#pageHeader h1 { display: none }

Und HTML:


  <div id="pageHeader" title="Title">

    <h1>Title</h1>

  </div>

Das funktioniert auch. Wegen der left-Angabe ist es auch ziemlich in der Mitte. Aber da sitzt es halt fest. Wenn der Browser größer oder kleiner ist rückt es nich nach.

Ich hab schon probiert bei #pageHeader { text-align: center; } hinzuzufügen

oder ein <div id="centered"></div> mit #centered { text-align: center; } auserum. Nichts hilft.

Weis jemand ob und wie ich das hinbekomme?

Ausserdem hab ich Links drin, die ein Bild beinhalten (also <a><img></a>) und in den OnMouse...-Events JavaScript, um das Bild zu ändern. Ist das Ok, also wegen barrierefrei? Oder wie bekommt man das mit CSS hin?

EDIT: Hab es ja schon probiert... ansich geht es, nur der Effekt unten klappt halt nicht.

Zusätzlich zum bild ändere ich auch die Klasse, also dort die Position. Damit man eben den "Button gedrückt" Effekt hinbekommt. Da ich das als Background-image hab geht das aber über die Klasse nicht. Oder schliesst sich bei CSS ein id= und ein class= gegenseitig aus?

Danke

Manitu71 · 25. September 2004

ich schlag mich gerade mit der selben Idee rum und durchkämpfe das Net.

Zu Bilder und deinem Prob bin ich aber leider noch nicht gekommen. Mit 50% gehts wohl ned. Alternativ würde mir da auch nur Javascript einfallen. Da wirds sicherlich gehn, was aber wahrscheinlich ned Sinn und Zweck sein soll

tobias-digital · 25. September 2004

Hi!

Was wollt ihr genau machen?

So würde man eine Seite gestalten, die vertikal zentriert ist und eine feste Breite hat:


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">  

  <head>

    <style type="text/css">

    <!--

    body { 

      text-align: center; 

    }  

    div#container { 

      width: 600px; /* z.B. */

      margin: 0px auto;

      text-align: left;

    }

    -->

    </style>

  </head>

  <body>

    <div id="container">

      <h1>Der gesamte Seiteninhalt kommt hierhin</h1>

    </div>

  </body>

</html>

Was wolltest Du jetzt genau über das Einbinden von Bildern wissen?

Gruß, Tobias

geloescht_JesterDay · 25. September 2004

Hi!

Was wollt ihr genau machen?
So würde man eine Seite gestalten, die vertikal zentriert ist und eine feste Breite hat:

Ich wollte nicht den Text zentriert, das ist mir klar. Es geht um ein Bild.

Mir ist in CSS nur die background-image: Methode für ein Bild bekannt.

Wie bekomm ich ein


<div style="background-image: url(/images/background.gif); 

background-repeat: no-repeat;"></div>

so hin, das es Zentriert im Fenster steht? Habe es so schon probiert:


<div style="text-align: center;">

  <div style="background-image: url(/images/background.gif); 

  background-repeat: no-repeat;">

  </div>

</div>

aber es ging nicht.

geloescht_JesterDay · 25. September 2004

Wie bekomm ich ein
<div style="background-image: url(/images/background.gif); 

background-repeat: no-repeat;"></div>
so hin, das es Zentriert im Fenster steht?

background-position: center;

Das hät ich schonmal Falls es jemand interessiert. Nur mit Firefox gibt es da teilweise noch probleme, aber bei eimem geht es nicht, beim anderen schon. Denke das es nicht daran, sondern an irgendnem anderen "Fehler" bei mir liegt.

tobias-digital · 26. September 2004

Moin!

Also du möchtest einem div ein Hintergrundbild geben. OK, was für Probleme gibt's im Firefox? IMHO musst Du dem div auch eine Höhe, bzw. Breite geben, weil er ohne diese Angaben ein 100% breites und 0px hohes div erzeugt und du das Hintergrundbild somit nicht sehen kannst.

kills · 26. September 2004

vielleicht hilft euch "background-position" weiter....

http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_position

geloescht_JesterDay · 27. September 2004

vielleicht hilft euch "background-position" weiter....

Ja, tut es (s.o.). Hab ich aber in SelfHTML nicht gefunden... is ja auch egal jetzt.

Was noch bleibt:

Ist Background die einzige Möglichkeit ein Bild anzuzeigen mit CSS? Und ist es sinnvoll das zu tun? Also wegen Trennung Form und Inhalt.

Ausserdem das oben angesprochene Problem, das ich <img...> per Javascript ändere und dabei auch die Klasse ändere (siehe oben)... obwohl ich da gerade ne Idee hatte, die ich aber frühestens heute Abend probieren kann.

Und zum Schluss:

position: fixed wird ja von keinem Browser unterstützt. Es gibt aber einige "Hacks" um das dennoch zu schaffen. Das Beispiel geht auch bei mir, aber wenn ich das bei mir einbauen will tut sich nix. Es wird dabei der Body als Container genutzt und die Position bezieht sich dann ja auf den, oder so.

Hat jemand sowas schonmal gemacht?

Sinn und Zweck des ganzen ist es, von den Frames wegzukommen. Bis jetzt ist die Seite 3-geteilt. Oben eine Headerzeile, links die Navigation und der Rest zur Anzeige. Würde das gern so beibehalten, nur halt ohne Frames.

EDIT:

Das Problem mit firefox bezgl. background-positon: center liegt nicht an der Höhe oder an firefox, sondern wohl eher an meinem CSS. Weil manchmal geht es und an anderen Stellen nicht. Das ist jetzt aber nicht so wichtig, weil es ansich geht, ich nur noch den Fehler bei mir finden muss da.

Ragazza · 27. September 2004

<html><head><title>background-position</title>

BODY

{

background-image:url('test.jpg');

background-attachment:fixed;

background-position: center bottom;

background-repeat:no-repeat;

}

</style>

</head><body>

</body></html>

tobias-digital · 27. September 2004

Ist Background die einzige Möglichkeit ein Bild anzuzeigen mit CSS? Und ist es sinnvoll das zu tun? Also wegen Trennung Form und Inhalt.

Mit diesen ganzen Background Eigenschaften steuerst Du Hintergrundbilder. Um ein Bild z.B. in einen Text einzubinden benutzt man den img-Tag:

<img src="test.jpg" alt="Test Bild" />

Und zum Schluss:
position: fixed wird ja von keinem Browser unterstützt. Es gibt aber einige "Hacks" um das dennoch zu schaffen.

Von annähernd Standard kompatiblen Browsern wie z.B. dem Firefox, Mozilla, Konquerer, Camino, usw. wird diese Eigenschaft sehr wohl unterstützt. Da die Mehrheit jedoch immer noch den Standard inkompatiblem Browser von Microsoft benutzt sollte man auf diese Eigenschaft verzichten oder Microsoft ignorieren (was natürlich auch nicht Sinn der Sache ist.)

Gruß Tobias

kills · 27. September 2004

du kannst in CSS nur mit dem BG Imgaes arbeiten. Die sourcen der "normalen" images kannst du AFAIK nicht per CSS ändern.

Du doch nur das layout verändern, nicht den inhalt der site, deshalb brauchst du auch dann nur BG Images auszutauschen etc.

geloescht_JesterDay · 27. September 2004

Von annähernd Standard kompatiblen Browsern wie z.B. dem Firefox, Mozilla, Konquerer, Camino, usw. wird diese Eigenschaft sehr wohl unterstützt.

Ja? Also in meiner (lokalen) SelfHTML Version (muss mir mal ne neue Version holen) stand das noch so, das es von keinem unterstütz wird. Muss das mal probieren...

Das mit dem <img...> war mir bekannt, wollte eben nur wissen, ob es da auch was in CSS gibt.

geloescht_JesterDay · 27. September 2004

Du doch nur das layout verändern, nicht den inhalt der site, deshalb brauchst du auch dann nur BG Images auszutauschen etc.

Ja, aber ich könnte ja auch Images zu Layout-Zwecken verwenden. Eben zur Navigation z.B. Also Buttons als Image, oder als Text. Das ist für mich Layout und kein Inhalt.

Sollte mir vielleicht mal die ganze CSS-Philosophie (also Sinn, Zweck, Hintergrund) zu Gemüte führen...

kills · 27. September 2004

Ja, aber ich könnte ja auch Images zu Layout-Zwecken verwenden. Eben zur Navigation z.B. Also Buttons als Image, oder als Text. Das ist für mich Layout und kein Inhalt.
Sollte mir vielleicht mal die ganze CSS-Philosophie (also Sinn, Zweck, Hintergrund) zu Gemüte führen...

Wenn du das Layout vom Inhalt trennen möchtest, musst du dir dann eben auch in der Navigation mit Hintergrund bilder arbeiten, oder du setzt dir je nach CSS Include noch ein anderes "Images" Verzeichnis, indem du dann auch solche Bilder unterbringen kannst.

Du verwendest doch sicher eine Template Engine oder?

In Smarty z.b. würde ich mir einen modifier schreiben, der erst in meinem "durch das CSS spezifisch" zugeordneten Ordner durchsucht. Wenn es dort dieses Image nicht gibt, würde ich dann quasi ein "Fallback" auf den "Standard" Ordner machen und mir da dann das "Default"-Image raus holen

Sicaine · 28. September 2004

hm also als erstens:

Guckt bei Selfhtml nach der Struckt methode. Dort steht auch welche Tags man noch verwenden darf und welche nicht! Und welche eigenschaften mit css zu ändern sind.

Nebenbei für css geht man nich auf selfhtml sondern auf css4you.de und drittens: ein Menü mit desen "buttons" macht man dofh mit css und nich als grafiken

tobias-digital · 28. September 2004

hm also als erstens:
Guckt bei Selfhtml nach der Struckt methode. Dort steht auch welche Tags man noch verwenden darf und welche nicht! Und welche eigenschaften mit css zu ändern sind.

Komisch, die Suche nach Struckt (http://suche.de.selfhtml.org/cgi-bin/such.pl?Struckt) liefert bei mir kein Ergebnis...hab auch noch nie was davon gehört. Was soll das sein?

Nebenbei für css geht man nich auf selfhtml sondern auf css4you.de

Man könnte natürlich auch noch eine dritte oder vierte Seite hinzuziehen, oder?

und drittens: ein Menü mit desen "buttons" macht man dofh mit css und nich als grafiken

Oh, ok, wenn ich den Satz richtig verstanden habe, willst Du ausdrücken, dass man ein Menü nicht mit klickbaren Grafiken gestalten darf? Warum?

...und viertens: Gruß Tobias

geloescht_JesterDay · 28. September 2004

hm also als erstens:
Guckt bei Selfhtml nach der Struckt methode. Dort steht auch welche Tags man noch verwenden darf und welche nicht! Und welche eigenschaften mit css zu ändern sind.
Nebenbei für css geht man nich auf selfhtml sondern auf css4you.de und drittens: ein Menü mit desen "buttons" macht man dofh mit css und nich als grafiken

Denke mal du meinst strict. Das ist aber keine Methode, sondern eine Auslegung des (X)HTML-Standards. Strict ist einfach (wie einem die Ahnlichkeit zum deutschen strikt schon sagt) eine besonders enge Auslegung. Die etwas weiter gefasst nennt sich transitional.

Aber auch im transitional darf man viele alten Tags nicht mehr verwenden. Also dürfen schon, nur ist das Dokument dann eben kein HTML-4 strict (oder transitional) Dokument und wird nicht als solches validiert.

Man kann menübuttons mit css machen. Wenn es aber um Grafiken geht, glaub ich kaum das du das damit hinbekommst Und es geht hier nicht nur um irgendwas als Button, sondern soll eben was ganz bestimmtes sein. Deswegen Grafiken.

kills · 29. September 2004

haste dir das ma überlegt?

Wenn du das Layout vom Inhalt trennen möchtest, musst du dir dann eben auch in der Navigation mit Hintergrund bilder arbeiten, oder du setzt dir je nach CSS Include noch ein anderes "Images" Verzeichnis, indem du dann auch solche Bilder unterbringen kannst.

Du verwendest doch sicher eine Template Engine oder?

In Smarty z.b. würde ich mir einen modifier schreiben, der erst in meinem "durch das CSS spezifisch" zugeordneten Ordner durchsucht. Wenn es dort dieses Image nicht gibt, würde ich dann quasi ein "Fallback" auf den "Standard" Ordner machen und mir da dann das "Default"-Image raus holen

geloescht_JesterDay · 29. September 2004

haste dir das ma überlegt?

Also ne Template Engine ist schlecht. Das ist ne private Seite (5 versch. Seiten, wenn man die Frames weglässt) und im Moment noch ohne PHP Unterstützung o.ä. Ich mach das für ne bekannte, weil es mir Spass macht und ich dabei hoffe was zu lernen... CSS usw. eben (Ausserdem hab ich mir sowas auch noch nie angesehen und könnte mir im Moment nicht wirklich den Vorteil vorstellen, den das haben würde, vielleicht klärst du mich da aber auf )

Zu Bildern steht was im 2ten Teil (die c't hab ich in einem Stapel anderer leider entsorgt letztens :\), den ich mir demnächst mal kopieren werde. Werd wohl erst am WE wieder n bissel dazukommen was da zu machen. Und wenn der IE position:fixed beherrschen würde, wär das auch alles weniger ein Problem

tobias-digital · 29. September 2004

Moin!

Ich glaube kills ist einer der größten Verfechter von Template-Engines

Gruß Tobias

kills · 29. September 2004

Moin!

Ich glaube kills ist einer der größten Verfechter von Template-Engines

Gruß Tobias

hmmmmmm

was solln das hier jetzt werden???

willste nen Aufstand anzetteln? :beagolisc :eek:

Wenn du mal mit ner Tempate-Engine richtig gearbeitet hast, weisst du deren Vorteile zu schätzen und wirst deine Projekte nie mehr ohne machen ( ausser du hast kein PHP aufm Webspace )

Es ging mir ja eingentlich nur darum, eine Antwort auf die Frage des Threadstellers zu geben, wie man sonst noch die "Quellen" der Images des Layouts ändern könnte, auch wenns keine Background-Images sind.....

Aber ohne PHP wirst du das nicht hinbekommen!

Also versuch einfach ohne Images im Layout zu arbeiten.

Musst halt versuchen überall alles mit BG-Images vollzustopfen

Aber gut,.... :e@sy

tobias-digital · 29. September 2004

Hey kills, nicht in den falschen Hals bekommen, ich bin ja selber Fan von Template-Engines. Mir ist nur aufgefallen, dass Du hier häufiger mal drauf hinweist (<-- was ja auch völlig ok ist.).

kills · 29. September 2004

Hey kills, nicht in den falschen Hals bekommen, ich bin ja selber Fan von Template-Engines. Mir ist nur aufgefallen, dass Du hier häufiger mal drauf hinweist (<-- was ja auch völlig ok ist.).

Ich hab nichts in den falschen hals bekommen.

War doch alles spaß.... ich hab gedacht die smileys machens ersichtlich

:hodata

geloescht_JesterDay · 29. September 2004

wie man sonst noch die "Quellen" der Images des Layouts ändern könnte, auch wenns keine Background-Images sind.....

eigentlich ging es generell um die einbindung von bildern mit CSS, aber das ist wohl nur als HG möglich. Damit war es dann auch im großen und ganzen geklärt

Werd wohl bald meinen Webspace umstellen, mit PHP dann. Dann werd ich mir eine TE mal ansehen.

Ich denke also das thema ist ansich erledigt, es sei denn jemand hat noch die Idee wie das doch geht.

Sicaine · 2. Oktober 2004

hm css4you.de is halt die besten anlaufstelle, wenn ich was von css wissen will

nebenbei:

Erst der Content dann das Design

Anmelden

CSS, barrierefrei, Bilder und die goldene Mitte

Empfohlene Beiträge

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte