Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 21

Thema: Kann mir jemand bei ein paar Problemen helfen?

  1. #1
    Youngster
    Registriert seit
    23.04.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Kann mir jemand bei ein paar Problemen helfen?

    Hallo zusammen!

    Ich bin ganz neu in diesem Forum, habe es gerade erst gefunden.
    und hoffe ihr könnt mir bei ein paar Problemen helfen.

    Ich bin gerade an einer HP, die ich für eine Organisation erstellen soll.

    Da ich nicht weiß, ob die es gutheißen würden, wenn ich den Quellcode hier veröffentliche, versuche ich meine Fragen so gut wie möglich zu beschreiben.

    Mein Hauptproblem beginnt damit, dass die Seite barrierefrei sein soll.

    Sie enthält oben auf der Seite ein großes Logo, in das mehrere Info´s eingebaut werden sollen. Das Logo erstreckt sich über die ganze Kopfzeile und an 4 verschiedenen Stellen im Logo stehen jeweils ein Link, eine Liste mit Telefonnummern,
    ein Suchfeld und zwei Icons zum festlegen der Seite als bookmark und als Startseite.

    Nun zu meinen Fragen: Weiß jemand, wie ich diese 4 Infos am besten platziere?
    Soll ich sie alle floaten lassen, oder absolut positionieren?
    Hab beides ausprobiert aber kann mich einfach nicht entscheiden.

    Außerdem muß ich, wegen der barrierefreiheit, alle Größen relativ angeben.
    Zuerst hatte ich sie pixelgenau positioniert, doch sie sollen eben prozentual oder mit em Werten angegeben werden. Schön und gut, doch wenn ich das mache, dann stehen die Dinger in jedem Browser auf einmal wo anders.

    Dann weiß ich leider nicht, wie ich den code erstelle um eine Seite als Startseite festzulegen bzw. sie als bookmark zu speichern.


    Hat da jemand evtl. einen Tip?

    Tut mir leid, dass ich hier gleich mit so vielen Fragen reinplatze aber die Seite muss ganz bald fertig sein.


    Liebe Grüße, Nienna
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    der/die Göttliche Avatar von jojo87
    Registriert seit
    23.03.2007
    Ort
    Leipzig
    Alter
    30
    Beiträge
    3.131
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo.

    Da ich nicht weiß, ob die es gutheißen würden, wenn ich den Quellcode hier veröffentliche, versuche ich meine Fragen so gut wie möglich zu beschreiben.
    Keine Angst, dir klaut hier niemand was, und bei deinen Fragen wird es unverzichtbar sein, dass du deinen Code postest. Zudem ist da nichts dabei, was es wert wäre, zu klauen (was nicht abwertend gemeint sein soll).

    Zu deinen Fragen:

    Sie enthält oben auf der Seite ein großes Logo, in das mehrere Info´s eingebaut werden sollen. Das Logo erstreckt sich über die ganze Kopfzeile und an 4 verschiedenen Stellen im Logo stehen jeweils ein Link, eine Liste mit Telefonnummern,
    ein Suchfeld und zwei Icons zum festlegen der Seite als bookmark und als Startseite.
    Am besten ist es, wenn du hier einen div mit dem Logo als Hintergrund nutzt, du kannst hier ruhig feste Breiten und Höhen nutzen. Wichtig für die Barrierefreiheit ist vor allem eine semantisch korrekte Textauszeichnung und die Angabe von ALternativtexten bei Bildern, zudem der Verzicht auf Javascript und Bildernavigationen.

    Nun zu meinen Fragen: Weiß jemand, wie ich diese 4 Infos am besten platziere?
    Soll ich sie alle floaten lassen, oder absolut positionieren?
    Hängt von 2 Dingen ab.
    1. Stehen diese 4 Elemente geordnet zueinander oder "Frei im Raum verteilt" ?
    Für ersteres bist du mit float besser bedient, sonst ist eine absolute Position einfacher.

    2. Dein persönlicher Geschmack bzw. womit du besser arbeiten kannst. Für meinen Teil empfinde ich float als praktikabler, besser wäre es aber, wenn du einen Screen von deinen Vorstellungen machen könntest und den hier postest

    zwei Icons zum festlegen der Seite als bookmark und als Startseite.
    Ist Mist, da nur mit Javascript machbar und auch dann nur für den IE.

    Außerdem muß ich, wegen der barrierefreiheit, alle Größen relativ angeben.
    Zuerst hatte ich sie pixelgenau positioniert, doch sie sollen eben prozentual oder mit em Werten angegeben werden. Schön und gut, doch wenn ich das mache, dann stehen die Dinger in jedem Browser auf einmal wo anders.
    Ein paar generelle Anmerkungen:
    Ein Pixel-Layout ist nichts verwerfliches im Hinblick auf Barrierefreiheit, solange man darauf achtet, die Elemente korrekt auszuzeichnen (meint die Verwendung semantisch korrekter Tags, besonders für Textelemente) und genug Spielraum für die Vergrößerung der Schrift einräumt. Besonders, wenn du als Header ein festes Logo hast, wird es schwierig, ein sogenanntes "Fließlayout" umzusetzen, ohne dass das Logo verzerrt wird.
    Um eine größtmögliche Kompatibilität deiner Seite bei verschiedenen Browsern zu erreichen, benötigst du einen Standard-Doctype, die penible Verwendung einer ausgelagerten CSS-Datei erleichtert die Arbeit (spätestens beim Fixen des IES) ungemein. Achte streng darauf, keine HTML-Formatierungen und zu verwenden, vermeide auch Inline-CSS-Angaben.

    Mehr kann ich dir ohne Code oder Screen nicht weiterhelfen.

    Gruß,
    Jojo

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    23.04.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo jojo!

    vielen Dank, du hast mir bereits echt enorm geholfen!!!

    Ich habe keine Angst, dass mir hier jemand was klaut, will nur nicht, dass der Auftraggeber seine HP am ende hier im Netz findet, wäre echt peinlich!

    Ich könnte dir den code aber per pn schicken, wenn du mir noch weiter helfen wollen würdest!

    Doch generell bin ich schon etwas beruhigter.

    Die Seite ist xhtml 1.0 strict und css level 2.1 valide. Also in dem Bereich schon mal barrierefrei.

    Die Inhalte des Logos sind eher frei im Raum positioniert aber dennoch mit float zu realisieren.

    Das Logo, sowie die 4 genannten Infos befinden sich zusammen in einem div und jede Info ist nochmal in einem eigenen.

    Wenn du Lust hättest, würde ich dir den code echt gerne mal zuschicken, vielleicht könntest du mir noch ein paar Tipps geben, was ich besser machen könnte!?

    Ich wär dir echt riesig dankbar!

    Viele Grüße, Nienna

  4. #4
    Kaiser(in) Avatar von Elvis
    Registriert seit
    09.05.2006
    Ort
    Hamburg
    Beiträge
    2.537
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    2

    Standard

    Zitat Zitat von nienna
    Die Seite ist xhtml 1.0 strict und css level 2.1 valide. Also in dem Bereich schon mal barrierefrei.
    Diese Verknüpfung verstehe ich nicht, was vermutlich daran liegt dass sie falsch ist. Eine Seite ist nicht barrierefrei nur weil sie in XHTML und CSS realisiert wurde.

    Zitat Zitat von nienna
    Die Inhalte des Logos sind eher frei im Raum positioniert aber dennoch mit float zu realisieren.
    Da position: absolut öfter Probleme macht, sollte man nach Möglichkeit darauf verzichten. Als Anfänger (keine Ahnung auf welchem Level Du bist) sollte man ganz davon Abstand nehmen.

  5. #5
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi,

    für eine barrierefreie Seite benötigst du noch "skiplinks" oben und unten auf der Seite,
    normal einen zur Navi und einen zum Textbereich.

    Die Seite muss einen ausreichenden Farbkontrast aufweisen, da 8-10% der männlichen Bevölkerung eine Farbsehschwäche haben.
    Google mal nach "Colour Contrast Analyzer".

    Wenn du Text in Bilder versteckst solltest du zusätzlich auch einen normalen Text hinterlegen.
    Mit der Image replacement Technik (am besten Gilder/Levin) kannst du das Problem lösen.

    koslowski

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    23.04.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo Elvis!

    Wenn die Seite xhtml und css valide ist, ist sie nicht automatisch barrierefrei, aber dies ist der erste wichtige Schritt in diese Richtung. xhtml 1.0 zum Beispiel läßt gar nicht zu, dass man Bilder ohne zusätzlichen Text in einer Seite hat.
    Ich habe nicht gesagt, dass dies komplett bedeutet, das die Seite Barrierefrei ist. Es ist eben der Anfang.

    Danke, Koslowski, für deine Tipps! Wegen der Farbe habe ich auch schon den Auftraggeber angeschrieben. Denn die ist tasächlich beim großteil der Seite nicht gerade kontrastreich, da dunkelgrau.

    Und die Skiplinks muss ich mir noch genau anschauen. Damit hab ich bisher noch nicht gearbeitet, was ein weiteres Problem ist, was es zu lösen gilt

    Wie gut ich in html und css bin, kann ich nicht sagen oder gibt es dazu einen Test im Netz ?
    Ich versuche halt so lange etwas zu machen, bis ich eine gute Lösung gefunden habe und lerne immer dazu.
    Jetzt muss ich eben die Barrierefreiheit lernen. Zu dumm, dass der Begriff echt ne Menge Regeln enthält und man es kaum schafft, wirklich alles unter einen Hut zu bekommen.

    Viele Grüße und Danke, Nienna

  7. #7
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin,

    ich geb dir mal ein Beispiel für skiplinks und skiplinktabs:

    Skiplinks sind für screenreaderuser und für Leute, die sich HP's per Handy anschauen.
    Skiplinktabs für Leute, die sich per Tabtaste durch die Hp hangeln.

    XHTML:
    Code:
    <ul>
          <li class="skiplink">Zum Inhalt springen
          <li class="skiplink">Zur Navigation springen[/list]
    Diese Zeilen kommen in den Header direkt nach der Hauptüberschrift und in den footer. Die Bereiche wo er hinspringen soll brauchen eine id.

    CSS dazu:
    Code:
    .skiplink  &#123;
         position&#58;absolute;
         top&#58;-9999px;
         left&#58;-9999px;
         width&#58;0px;
         height&#58;0px;
         display&#58;inline;
           &#125;
    .skiplinktab&#58;focus,
    .skiplinktab&#58;active  &#123;
        position&#58;absolute;
    	top&#58;9999px;
    	left&#58;9999px;
    	display&#58;inline;
    	width&#58;13em;
    	height&#58;auto;
    	background-color&#58;#fff;
    	color&#58;#000;
    	padding&#58;0.6em;
    	border&#58;2px solid #000;
             &#125;
    Sieht wilder aus , als es ist.

    Was noch fehlt ist das header und footer position:relative brauchen, damit sich das absolut positionierte Element daran orientieren kann.

    Zuerst werden die skiplinks aus dem Viewport geschoben und dann für Tabtasten-Hangler wieder reingeschoben.

    Die Werte für left, top und die Gestaltung des Kastens für die skiplinktabs mußt du evtl. ein wenig anpassen, je nachdem wo im header und footer sie erscheinen sollen und wie der Kasten ausschauen soll.

    Das mit den skiplinktabs funktioniert nur nicht im Opera.

    Das XHTML und das CSS hab ich unter Vorlagen gespeichert, weil ich sie immer wieder hernehme.

    koslowski

  8. #8
    Samurai Avatar von pinales
    Registriert seit
    12.12.2007
    Ort
    Mittelfranken
    Beiträge
    218
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Tach!

    Ich will vielleicht noch ergänzen, dass der Code einer barrierefreien Seite obligatorisch ohne Tabellen auskommen muss.
    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  9. #9
    Youngster
    Themenstarter

    Registriert seit
    23.04.2008
    Beiträge
    14
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hallo Koslowski!

    Ganz lieben Dank für dein tolles Beispiel!
    Wird direkt umgesetzt.

    Danke dir auch, Pinales, für den Tipp!
    Tabellen habe ich genau deswegen komplett außen vor gelassen.
    Braucht man, in Zeiten von Boxen und CSS ja auch kaum mehr...es sei denn, man will will wirklich mal eine offensichtliche Tabelle einfügen.

    Wißt ihr, wie ich am besten ein Suchfeld in eine Seite einfügen kann? Man soll da halt nach schlagwörtern in der Seite suchen können. Muß ich da jedes Schlagwort einzeln definieren? Und wie mache ich dann die Seite, die die Schlagwörter auflistet?

    Das geht whl auch wieder nicht komplett ohne Javascript oder php, oder?

    Schon dumm, wenn man beides noch nicht kann.

    Viele Grüße, Nienna

  10. #10
    Meister(in)
    Registriert seit
    10.01.2008
    Ort
    Passau/Ösiland
    Beiträge
    267
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hi

    Zitat Zitat von nienna
    Hallo Koslowski!
    Wißt ihr, wie ich am besten ein Suchfeld in eine Seite einfügen kann? Man soll da halt nach schlagwörtern in der Seite suchen können.

    Das geht whl auch wieder nicht komplett ohne Javascript oder php, oder?
    für die Suche brauchst du ein Script, am besten PHP weil JS nicht überall zur Verfügung steht.

    Folge diesem Link : Suchscript

    Wenn du ihn verlinkst gibt es das soweit ich weiß kostenlos, eine Lizenz für kleines Geld.

    Es ist gut dokumentiert, d.h. Eine Anleitung ist dabei, Faq gibts dazu und er hat ein kleines Supportforum wo du nachfragen kannst.

    Es ist einigermaßen sicher im Gegensatz zu vielen anderen Scripten die es online kostenlos gibt.
    Persönlich setze ich es auch mit Erfolg ein.

    koslowski

    ps. ich fange auch jetzt erst mit PHP an und habe den Einbau des Scripts problemlos bewältigen können.

Ähnliche Themen

  1. kann mir jemand helfen
    Von Kadak im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 4
    Letzter Beitrag: 30.09.2007, 12:04
  2. Kann meine Ex net vergessen kann mir jemand helfen?
    Von Lucas im Forum Off Topic und Quasselbox
    Antworten: 25
    Letzter Beitrag: 24.04.2007, 23:01
  3. Kann mir mla jemand helfen?
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 24.08.2006, 17:56
  4. Kann mir jemand helfen?
    Von Hilfe im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 24.09.2005, 16:49
  5. kann mir jemand helfen?
    Von gast im Forum Computer - Internet Forum
    Antworten: 2
    Letzter Beitrag: 25.11.2004, 02:57

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •