archive-de.com » DE » E » EKIWI.DE

Total: 422

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • SELFHTML: HTML/XHTML / Referenz /HTML-Zeichenreferenz
    213 Ö O Umlaut Ouml 214 Mal Zeichen times 215 Ø O mit Schrägstrich Oslash 216 Ù U mit accent grave Gravis Ugrave 217 Ú U mit accent aigu Akut Uacute 218 Û U mit Zirkumflex Ucirc 219 Ü U Umlaut Uuml 220 Ý Y mit accent aigu Akut Yacute 221 Þ großes Thorn isländisch THORN 222 ß scharfes S szlig 223 à a mit accent grave Gravis agrave 224 á a mit accent aigu Akut aacute 225 â a mit Zirkumflex acirc 226 ã a mit Tilde atilde 227 ä a Umlaut auml 228 å a mit Ring aring 229 æ a mit legiertem e aelig 230 ç c mit Häkchen ccedil 231 è e mit accent grave Gravis egrave 232 é e mit accent aigu Akut eacute 233 ê e mit Zirkumflex ecirc 234 ë e Umlaut euml 235 ì i mit accent grave Gravis igrave 236 í i mit accent aigu Akut iacute 237 î i mit Zirkumflex icirc 238 ï i Umlaut iuml 239 ð kleines Eth isländisch eth 240 ñ n mit Tilde ntilde 241 ò o mit accent grave Gravis ograve 242 ó o mit accent aigu Akut oacute 243 ô o mit Zirkumflex ocirc 244 õ o mit Tilde otilde 245 ö o Umlaut ouml 246 Divisions Zeichen divide 247 ø o mit Schrägstrich oslash 248 ù u mit accent grave Gravis ugrave 249 ú u mit accent aigu Akut uacute 250 û u mit Zirkumflex ucirc 251 ü u Umlaut uuml 252 ý y mit accent aigu Akut yacute 253 þ kleines Thorn isländisch thorn 254 ÿ y Umlaut yuml 255 Benannte Zeichen für griechische Buchstaben Die HTML Namen dieser Zeichen sind seit HTML 4 0 verfügbar Zeichen Beschreibung Name in HTML Unicode in HTML Α Alpha groß Alpha 913 α alpha klein alpha 945 Β Beta groß Beta 914 β beta klein beta 946 Γ Gamma groß Gamma 915 γ gamma klein gamma 947 Δ Delta groß Delta 916 δ delta klein delta 948 Ε Epsilon groß Epsilon 917 ε epsilon klein epsilon 949 Ζ Zeta groß Zeta 918 ζ zeta klein zeta 950 Η Eta groß Eta 919 η eta klein eta 951 Θ Theta groß Theta 920 θ theta klein theta 952 Ι Iota groß Iota 921 ι iota klein iota 953 Κ Kappa groß Kappa 922 κ kappa klein kappa 954 Λ Lambda groß Lambda 923 λ lambda klein lambda 955 Μ My groß Mu 924 μ my klein mu 956 Ν Ny groß Nu 925 ν ny klein nu 957 Ξ Xi groß Xi 926 ξ xi klein xi 958 Ο Omikron groß Omicron 927 ο omikron klein omicron 959 Π Pi groß Pi 928 π pi klein pi 960 Ρ Rho groß Rho 929 ρ rho klein rho 961 Σ Sigma groß Sigma 931 ς Schluss Sigma sigmaf 962 σ sigma klein sigma 963 Τ Tau groß Tau 932 τ tau klein tau 964 Υ Ypsilon groß Upsilon 933 υ ypsilon klein upsilon 965 Φ Phi

    Original URL path: http://html.ekiwi.de/html/referenz/zeichen.htm (2016-04-25)
    Open archived version from archive


  • SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder
    anderen Verzeichnis steht müssen Sie den relativen oder absoluten Pfadnamen angeben Das funktioniert genau so wie beim Einbinden von Grafiken in HTML Wenn Sie background image in einer separaten CSS Datei notieren beziehen sich relative Pfadangaben auf das Verzeichnis in dem diese Stylesheet Datei liegt Beachten Sie Wenn das Element für das die Hintergrundgrafik definiert wird in der Höhe oder Breite kleiner ist als die Hintergrundgrafik wird die Hintergrundgrafik in der Darstellung an den Grenzen des Elements abgeschnitten background repeat Wiederholungs Effekt Normalerweise wird eine Hintergrundgrafik im Wallpaper Effekt über den gesamten zur Verfügung stehenden Raum wiederholt Sie können jedoch ein anderes Verhalten erzwingen Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title background repeat title head body div style background image url background4 jpg background repeat repeat x margin 30px border thin solid CCCCFF font size 150 p Der erste Bereich br Ein Text der sehr leicht br umbricht usw p div div style background image url background4 jpg background repeat repeat y margin 30px border thin solid CCCCFF font size 150 p Der zweite Bereich br Ein Text der auch leicht umbricht usw p div div style background image url background4 jpg background repeat no repeat margin 30px border thin solid CCCCFF font size 150 p Der dritte Bereich br Ein Text der auch leicht umbricht usw p div body html Erläuterung Mit background repeat können Sie das Wiederholungsverhalten einer Hintergrundgrafik die Sie mit background image einbinden kontrollieren Erlaubt ist eine der folgenden Angaben repeat wiederholen Voreinstellung repeat x nur eine Zeile lang waagerecht wiederholen repeat y nur eine Spalte lang senkrecht wiederholen no repeat nicht wiederholen nur als Einzelbild anzeigen Beachten Sie Netscape 4 x interpretiert diese Eigenschaft zwar hat aber massive Schwierigkeiten bei der Darstellung von Elementinhalten background attachment Wasserzeichen Effekt Bei längeren Elementen wandert ein Hintergrundbild beim Scrollen im Text optisch mit Sie können jedoch erzwingen dass der Hintergrund stehen bleibt Wasserzeichen Effekt Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title background attachment title style type text css div bgscroll margin 20px 20px 20px 250px width 35em border 1px solid red background image url background1 gif background repeat no repeat background position center center background attachment scroll div bgfixed margin 20px 20px 20px 250px border 1px solid red background image url background5 gif background repeat no repeat background position center center background attachment fixed style head body div class bgscroll h1 viel Text usw code background attachment scroll code h1 div div class bgfixed h1 viel Text usw code background attachment fixed code h1 div body html Erläuterung Mit background attachment können Sie das Scroll Verhalten einer Hintergrundgrafik die Sie mit background image einbinden kontrollieren Erlaubt ist eine der folgenden Angaben scroll mitscrollen Voreinstellung orientiert sich an der Position des jeweiligen Elements fixed Hintergrundbild bleibt stehen orientiert sich am Viewport Das obige Beispiel demonstriert einen interessanten Anwendungsfall aus der Kombination der Eigenschaften background attachment und background

    Original URL path: http://html.ekiwi.de/css/eigenschaften/hintergrund.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: JavaScript / Anwendungsbeispiele / Dynamische grafische Buttons
    Highlight2 src button2h gif zweite Highlight Grafik Normal3 new Image Normal3 src button3 gif dritte Standard Grafik Highlight3 new Image Highlight3 src button3h gif dritte Highlight Grafik usw fuer alle weiteren zu benutzenden Grafiken function Bildwechsel Bildnr Bildobjekt window document images Bildnr src Bildobjekt src script style type text css h1 color 6363A5 font family Arial sans serif p color 000000 font family Arial sans serif style head body bgcolor FFFFC0 background buttonsback gif table border 0 cellpadding 0 cellspacing 0 tr td valign top a href index htm onmouseover Bildwechsel 0 Highlight1 onmouseout Bildwechsel 0 Normal1 img src button1 gif width 130 height 30 border 0 alt Home a br a href helferlein index htm onmouseover Bildwechsel 1 Highlight2 onmouseout Bildwechsel 1 Normal2 img src button2 gif width 130 height 30 border 0 alt Helferlein a br a href layouts index htm onmouseover Bildwechsel 2 Highlight3 onmouseout Bildwechsel 2 Normal3 img src button3 gif width 130 height 30 border 0 alt Layouts a br td td nbsp nbsp nbsp nbsp nbsp nbsp td td valign top h1 Dynamische grafische Buttons h1 p b Fahren Sie mit der Maus über die Buttons Sie dürfen auch draufdrücken b p td tr table body html Erläuterung Neue Grafikobjekte für Highlight Grafiken erzeugen Für jede Grafik die Sie dynamisch anzeigen möchten müssen Sie eine Instanz des image Objekts erzeugen Das gilt sowohl für die Grafiken die zunächst in der HTML Datei referenziert werden als auch für diejenigen die beim Überfahren mit der Maus dynamisch angezeigt werden sollen Dazu wird im Beispiel mit Anweisungen wie Normal1 new Image eine Objektinstanz erzeugt Nachdem die Objektinstanz erzeugt ist sind unter dem gewählten Objektnamen im ersten Fall Normal1 alle Eigenschaften des Objekts ansprechbar Zunächst enthält das Objekt noch gar keine Daten Mit der Anweisung Normal1 src button1 gif wird dem neuen Grafikobjekt eine Grafikdatei zugewiesen Wiederholen Sie die beiden beschriebenen Anweisungen für jede Grafikdatei die von dynamischen Änderungen betroffen sein wird und zwar sowohl für Grafiken die im Normalfall angezeigt werden als auch für Grafiken die beim Darüberfahren mit der Maus dynamisch angezeigt werden Vergeben Sie dabei jedesmal einen neuen Objektnamen Im obigen Beispiel sind die entsprechenden Befehle auskommentiert sodass Sie erkennen können was an welcher Stelle definiert wird Funktion Bildwechsel zum dynamischen Austauschen von Grafiken Der bisherige Code im Beispiel wird beim Einlesen der HTML Datei direkt ausgeführt da er nicht in einer Funktion gebunden ist Die Ausführung dieses Codes bewirkt aber keine sichtbaren Ausgaben und wird vom Anwender gar nicht bemerkt Das was am Bildschirm mit Hilfe von JavaScript passieren soll nämlich das dynamische Austauschen eines Bildes geschieht in der definierten Funktion Bildwechsel Die Funktion soll aufgerufen werden wenn der Anwender mit der Maus über einen grafischen Verweis fährt und wenn er den Verweisbereich mit der Maus wieder verlässt Dazu benötigt die Funktion zwei Parameter die wie vielte Grafik in der Datei ausgetauscht werden soll Parameter Bildnr und durch welches zuvor definierte Grafikobjekt das Bild ersetzt werden soll Parameter Bildobjekt Die Funktion kommt dann mit

    Original URL path: http://html.ekiwi.de/javascript/beispiele/buttons.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Stylesheets / CSS-Formate definieren / Das CSS Box-Modell
    um die Adresse der DTD bewirkt in den meisten Browsern bereits eine standardkonforme Darstellung Box Modell mit Dokumenttyp Deklaration HTML 4 01 Strict Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title Box Modell Dokumenttyp HTML 4 01 Strict title head body p style width 200px padding 20px border 20px solid 66a Soll Breite 280px p p img src lineal gif width 300 height 20 alt Lineal p body html Dieses Beispiel wird von allen Browsern korrekt dargestellt Davon ausgenommen sind wie bereits erwähnt lediglich Internet Explorer für Windows bis zu Version 5 5 die Mac Versionen des Browsers sind nicht betroffen Diese HTML Variante führt am ehesten zu einer gleichen Darstellung und sollte daher bevorzugt eingesetzt werden Erläuterung Alle drei Beispiele weisen im p Element identische Eigenschaften auf der Unterschied in der Darstellung ergibt sich einzig aus der Dokumenttyp Deklaration Browser mit Dokumenttyp Weiche Wie bei den Beispielen angeführt übernahmen auch andere Hersteller diese Methode und so weisen im Grunde alle aktuellen Versionen verbreiteter Browser ebenfalls einen Doctype Switch auf Opera 7 orientiert sich am Internet Explorer 6 um größtmögliche Kompatibilität zu erreichen Netscape ab Version 6 Mozilla Firefox Konqueror und Safari dagegen orientieren sich diesbezüglich immer am Standard Der Dokumenttyp wirkt sich in diesen Browsern hauptsächlich auf die Fehlerkorrektur nicht aber auf das Box Modell aus Beachten Sie Netscape 4 x berechnet Dimensionen ebenso falsch wie der Internet Explorer 5 x für Windows Dokumenttyp Deklarationen für den standardkonformen Modus Um aktuelle Browser in den standardkonformen Anzeigemodus zu schalten empfiehlt es sich einen der folgenden sicheren Dokumenttypen zu notieren HTML 4 01 Transitional mit URI DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd HTML 4 01 Strict mit und ohne URI DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd XHTML 1 0 Strict DOCTYPE html PUBLIC W3C DTD XHTML 1 0 Strict EN http www w3 org TR xhtml1 DTD xhtml1 strict dtd Bezüglich XHTML ist zu beachten dass der Internet Explorer 6 die Dokumenttyp Deklaration nur in der ersten Zeile eines Dokuments auswertet Dies hat zur Folge dass bei Notation einer XML Deklaration in den Quirks Modus geschaltet wird xml version 1 0 encoding UTF 8 Diese Zeile ist beim Einsatz von XHTML nicht zwingend erforderlich Sie können sie unter bestimmten Umständen die in der oben genannten Erläuterung beschrieben sind weglassen Umgehungsstrategien für mangelhafte Browser Verzicht auf pixelgenaue Ausrichtung Die einfachste Variante den Box Modell Fehler zu umgehen besteht darin auf den Versuch ein pixelgenaues Layout zu erreichen zu verzichten und allen Elementen etwas Freiraum zu lassen sodass etwaige Abweichungen zwar vorhanden sind aber die Darstellung nicht beeinträchtigen Sollte dies nicht möglich sein setzen Sie eine der im folgenden beschriebenen Methoden ein um eine korrekte Darstellung zu erreichen Trennung der Breite und Höhe von Rahmen und Innenabstand Eine Möglichkeit eine einheitliche Darstellung zu erreichen besteht darin auf die gleichzeitige Angabe von

    Original URL path: http://html.ekiwi.de/css/formate/box_modell.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen
    head title left title head body div style position absolute top 100px left 100px img src hund gif width 208 height 181 alt Hund div div style position absolute top 140px left 350px width 200px background color FFFFE0 border 1px solid 804000 padding 10px Dies ist ein absolut positionierter Text neben einer absolut positionierten Grafik div body html Erläuterung Mit left können Sie die Startposition von links bestimmen Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung bottom Startposition von unten Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position Sie können bestimmen wo ein absolut oder relativ positioniertes Element von unten beginnt Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title bottom title head body div style position absolute bottom 0px left 100px Dies ist ein untenbündiger Hund br img src hund gif width 208 height 181 alt Hund div body html Erläuterung Mit bottom können Sie die Startposition von unten bestimmen Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung Beachten Sie Die Browser der 4er Generation interpretieren diese Eigenschaft noch nicht Opera bis Version 6 benötigt zusätzlich die Angabe von height right Startposition von rechts Diese Angabe ist sinnvoll in Verbindung mit einer vom Wert static abweichenden Angabe zu position Sie können bestimmen wo ein absolut oder relativ positioniertes Element von rechts beginnt Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title right title head body div style position absolute top 100px right 0px Rechtsb uuml ndiger Hund br img src hund gif width 208 height 181 alt Hund div body html Erläuterung Mit right können Sie die Startposition von rechts bestimmen Erlaubt ist eine numerische Angabe oder der Wert auto für eine automatische Positionierung Beachten Sie Die Browser der 4er Generation interpretieren diese Eigenschaft noch nicht Opera bis Version 6 benötigt zusätzlich die Angabe von width width Breite Sie können bestimmen wie breit ein Element oder Bereich sein soll Um zu bestimmen was mit dem Inhalt passieren soll wenn er mehr Breite einnimmt als die hier angegebene Breite können Sie zusätzlich die Eigenschaft overflow verwenden Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title width title head body p code width code mit code overflow hidden code p h1 style width 200px border 10px solid red padding 10px font size 3em overflow hidden Eine Überschrift die möglicherweise breiter ist als erlaubt h1 p code width code ohne code overflow code p h1 style width 200px border 10px solid red padding 10px font size 3em Eine Überschrift die möglicherweise breiter ist als erlaubt h1 body html Erläuterung Mit width können Sie die Breite bestimmen Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Breite Beachten Sie Dass im obigen Beispiel wo nötig in der Breite Text abgeschnitten wird liegt nicht an der Eigenschaft width sondern an der Angabe overflow hidden Die Browser der 4er Generation interpretieren diese Angabe jedoch noch nicht Wird für overflow kein von visible abweichender Wert notiert vergrößert der Internet Explorer bis zur Version 6 das Element so weit bis der Inhalt vollständig sichtbar ist min width Mindestbreite Sie können bestimmen wie breit ein Element oder Bereich mindestens sein soll auch wenn der Inhalt weniger Breite in Anspruch nimmt Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title min width title head body div style position absolute top 100px left 100px min width 400px border solid 1px blue padding 10px Fasse dich kurz div body html Erläuterung Mit min width können Sie die Mindestbreite bestimmen Erlaubt ist eine numerische Angabe Beachten Sie Der Internet Explorer 6 interpretiert diese Angabe noch nicht Safari interpretiert sie bei positionierten Elementen ab Version 2 0 2 max width Maximalbreite Sie können bestimmen wie breit ein Element oder Bereich maximal sein soll Um zu bestimmen was mit dem Inhalt passieren soll wenn er mehr horizontalen Raum einnimmt als die hier angegebene Breite können Sie zusätzlich die Eigenschaft overflow verwenden Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title max width title head body h1 style max width 250px overflow hidden border solid 1px green font size 48px padding 10px Eine Uuml berschrift bei der das Wort m ouml glicherweise m ouml glicherweise zu breit f uuml r 250px ist h1 body html Erläuterung Mit max width können Sie die Maximalbreite bestimmen Erlaubt ist eine numerische Angabe Beachten Sie Der Internet Explorer 6 interpretiert diese Angabe noch nicht Safari interpretiert sie bei positionierten Elementen ab Version 2 0 2 height Höhe Sie können bestimmen wie hoch ein Element oder Bereich sein soll Um zu bestimmen was mit dem Inhalt passieren soll wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe können Sie zusätzlich die Eigenschaft overflow verwenden Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title height title head body p code height code mit code overflow hidden code p h1 style height 240px width 300px border 10px solid red padding 10px font size 3em overflow hidden Eine Überschrift die möglicherweise höher ist als erlaubt h1 p code height code ohne code overflow code p h1 style height 240px width 300px border 10px solid red padding 10px font size 3em Eine Überschrift die möglicherweise höher ist als erlaubt h1 body html Erläuterung Mit height können Sie die Höhe bestimmen Erlaubt ist eine numerische Angabe oder der Wert auto für automatische Höhe Beachten Sie Dass im obigen Beispiel wo nötig in der Höhe Text abgeschnitten wird liegt nicht an der Eigenschaft height sondern an der Angabe overflow hidden Die Browser der 4er Generation interpretieren diese Angabe jedoch noch nicht Wird für overflow kein von visible abweichender Wert notiert vergrößert der Internet Explorer bis Version 6 das Element so weit bis der Inhalt vollständig sichtbar ist min height Mindesthöhe Sie können bestimmen wie hoch ein Element oder Bereich mindestens sein soll Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title min height title head body div style position absolute top 100px left 100px min height 200px border solid 1px blue padding 10px Fasse dich kurz div body html Erläuterung Mit min height können Sie die Mindesthöhe bestimmen Erlaubt ist eine numerische Angabe Beachten Sie Der Internet Explorer 6 interpretiert diese Angabe noch nicht Konqueror 3 1 interpretiert diese Angabe noch nicht bei absolut positionierten Elementen ab Konqueror 3 3 stellt er auch solche absolut positionierte Elemente korrekt dar Safari interpretiert min height bei positionierten Elementen ab Version 2 0 2 max height Maximalhöhe Sie können bestimmen wie hoch ein Element oder Bereich maximal sein soll Um zu bestimmen was mit dem Inhalt passieren soll wenn er mehr vertikalen Raum einnimmt als die hier angegebene Höhe können Sie zusätzlich die Eigenschaft overflow verwenden Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title max height title head body h1 style max width 300px max height 300px overflow hidden border solid 1px green font size 48px padding 10px Eine Uuml berschrift die m ouml glicherweise zu hoch ist f uuml r eine Box von 300 mal 300 Pixel h1 body html Erläuterung Mit max height können Sie die Maximalhöhe bestimmen Erlaubt ist eine numerische Angabe Beachten Sie Der Internet Explorer 6 interpretiert diese Angabe noch nicht Safari interpretiert sie bei positionierten Elementen ab Version 2 0 2 overflow Elementbereich mit übergroßem Inhalt Diese Angabe kann von Bedeutung sein wenn Sie für ein Element oder einen Bereich eine feste oder maximale gewünschte Breite oder Höhe definieren Angenommen Sie definieren einen Bereich mit div div für den Sie mit Hilfe der Eigenschaft width eine Breite von effektiv 202 Pixel da der Rahmen addiert wird erzwingen Wenn Sie innerhalb dieses Bereichs eine Grafikreferenz img notieren bei der das Bild eine Breite von mehr als 200 Pixel aufweist können Sie mit der hier beschriebenen Angabe regulieren wie der Browser diesen Konflikt lösen soll Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title overflow title head body div style width 200px height 150px overflow auto border 1px solid 840 margin 1em beliebiger Hund code auto code br img src hund gif width 208 height 181 alt Hund div div style width 200px height 150px overflow hidden border 1px solid 840 margin 1em abgeschnittener Hund code hidden code br img src hund gif width 208 height 181 alt Hund div div style width 200px height 150px overflow scroll border 1px solid 840 margin 1em scrollender Hund code scroll code br img src hund gif width 208 height 181 alt Hund div div style width 200px height 150px overflow visible border 1px solid 840 margin 1em sichtbarer Hund code visible code br img src hund gif width 208 height 181 alt Hund div body html Erläuterung Mit overflow können Sie bestimmen wie übergroße innere Elemente behandelt werden Folgende Angaben sind möglich visible Inhalt ragt aus dem Element so weit heraus dass sein Inhalt auf jeden Fall komplett sichtbar ist hidden Inhalt wird abgeschnitten wenn er die Grenzen des Elements überschreitet scroll Inhalt wird abgeschnitten wenn er die Grenzen des Elements überschreitet Der WWW Browser sollte jedoch Scroll Leisten anbieten ähnlich wie bei einem eingebetteten Frame Fenster auto Der Web Browser soll entscheiden wie das Element im Konfliktfall angezeigt wird Auch das Anbieten von Scroll Leisten soll dabei erlaubt sein Beachten Sie Netscape 4 x beherrscht nur overflow hidden korrekt Der Internet Explorer bis Version 6 vergrößert bei visible das Element so weit bis der Inhalt vollständig sichtbar ist Opera bis Version 6 stellt auto wie visible und scroll wie hidden dar Konqueror beherrscht die verschiedenen Angaben erst ab Version 3 4 korrekt direction Richtung Mit dieser Angabe können Sie die Schreibrichtung bei Elementen erzwingen und abhängig davon auch in welche Richtung beispielsweise Breitenangaben berechnet werden oder an welcher Seite überbreite Inhalte mit overflow abgeschnitten werden Die Schreibrichtung ist vor allem für die Darstellung von Schriftkulturen wie der arabischen gedacht wo von rechts nach links geschrieben wird Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title direction title head body style direction rtl h1 Hi Junkie h1 p Hier k ouml nnte m ouml glicherweise alles anders aussehen als normal p body html Erläuterung Mit direction können Sie die Schreibrichtung bestimmen Folgende Angaben sind möglich ltr von links nach rechts rtl von rechts nach links Beachten Sie Die Browser der 4er Generation interpretieren diese Angabe noch nicht float Textumfluss Sie können für einen Bereich oder ein Element bestimmen dass nachfolgende Elemente diesen Bereich bzw dieses Element umfließen Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title float title head body h1 style width 400px float left color red Uuml berschrift mal anders h1 p style font size 120 Eine Uuml berschrift muss nicht immer einen langweiligen uuml ber die ganze Breite des Anzeigefensters gehenden Block erzeugen Sie kann auch mal seitlich vom Text stehen und der Text flie szlig t um die Uuml berschrift Auch so kann man lange Texte mal anders gestalten als sonst uuml blich p body html Erläuterung Mit float können Sie bestimmen dass nachfolgende Elemente das aktuelle Element bzw den aktuellen Bereich umfließen Folgende Angaben sind möglich left Element steht links und wird rechts davon von nachfolgenden Elementen umflossen right Element steht rechts und wird links davon von nachfolgenden Elementen umflossen none Kein Umfluss Normaleinstellung Beachten Sie Wenn Sie für ein Element eine Angabe zu float notieren mussten Sie gemäß CSS2 auch eine Angabe zu width definieren Gemäß CSS 2 1 und der tatsächlichen Umsetzung durch die Browser ist dies nicht mehr erforderlich die Breite richtet sich in diesem Fall nach dem Inhalt clear Fortsetzung bei Textumfluss Wenn Sie mit float einen Textumfluss definieren möchten Sie vielleicht nur zwei oder drei Zeilen kommentierenden Text neben einem umflossenen Element haben und den folgenden Text dann unterhalb des umflossenen Elements fortsetzen Dazu dient die hier beschriebene Angabe Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title clear title head body div style float left margin right 20px margin bottom 20px border solid 1px red text align center Kapitel br span style font family Algerian serif font size 96px color red nbsp 1 nbsp span div p style font size 120 In diesem Kapitel geht es um Einf uuml hrendes p p style clear left Dann kommen wir mal zur Sache p body html Erläuterung Mit clear können Sie einen Umfluss abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen Folgende Angaben sind möglich left Erzwingt bei float left die Fortsetzung unterhalb right Erzwingt bei float right die Fortsetzung unterhalb both Erzwingt in jedem Fall die Fortsetzung unterhalb none Erzwingt keine Fortsetzung unterhalb Normaleinstellung Im obigen Beispiel werden die Eigenschaften float und clear dazu genutzt eine seitliche große Kapitelnummer zu notieren neben der Kapitelnummer einen kleinen Text worum es in dem Kapitel geht und unterhalb dieser beiden Elemente dann den normalen Text des Kapitels z index Schichtposition bei Überlappung Diese Eigenschaft wirkt nur in Verbindung mit einer Angabe zu position Wenn Sie mehrere Elemente positionieren deren Anzeigebereiche sich überlappen werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt in der sie definiert werden Im Quelltext später notierte Elemente überdecken vorhergehende Sie können die Reihenfolge ändern indem Sie für die einzelnen Elemente Werte vergeben Elemente mit höherem Wert überdecken Elemente mit niedrigerem Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title z index title head body div style position absolute top 100px left 100px z index 2 border 1px solid 888 background f88 b A 2 b img src hund gif width 208 height 181 alt Hund div div style position absolute top 130px left 130px z index 1 border 1px solid 888 background 88f b B 1 b img src hund gif width 208 height 181 alt Hund div div style position absolute top 190px left 270px width 280px height 280px z index 3 border 1px solid 888 background eee b C 3 b div style position absolute top 30px left 30px z index 2 border 1px solid 888 background 8f8 b D 2 b img src hund gif width 208 height 181 alt Hund div div style position absolute top 30px left 40px z index 3 border 1px solid 888 background ff8 b E 3 b img src hund gif width 208 height 181 alt Hund div div style position absolute top 60px left 60px z index 1 border 1px solid 888 background 8ff b F 1 b img src hund gif width 208 height 181 alt Hund div div body html Erläuterung Mit z index können Sie die Reihenfolge von überlappenden Elementen bestimmen Notieren Sie für jedes Element für das Sie eine eindeutige Schichtposition festlegen wollen eine Zahl Je höher die Zahl desto weiter vorne liegt das Element je niedriger desto weiter hinten liegt das Element vom Betrachter aus gesehen Die Schichtposition orientiert sich darüber hinaus an der des Elternelements Per z index positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel Kontext So werden im Beispiel die Boxen D E und F als Nachfahren der Box C gesondert sortiert Box F z index 1 überdeckt trotz niedrigerem Wert Box B z index 1 da sie als Nachfahre von Box C diese liegt mit z index 3 über Box B lediglich innerhalb dieser sortiert wird Außerhalb des neuen Kontexts liegende Elemente A und B können nicht zwischen diesen gestapelt werden Beachten Sie Mozilla Firefox sortiert aufgrund des negativen Wertes Box F z index 1 hinter deren Elternelement Box C deren Stapelposition innerhalb des neu erzeugten Kontexts mit 0 angenommen wird und weicht damit von Opera und Internet Explorer ab die Nachfahren nicht hinter dem kontexterzeugenden Element selbst darstellen Diese Vorgangsweise entspricht CSS2 während die beiden letztgenannten Browser in diesem Zusammenhang bereits die Spezifikation gemäß CSS 2 1 umsetzen display Anzeigeart bzw Nichtanzeige ohne Platzhalter Sie können bestimmen ob ein Element zunächst angezeigt werden soll oder nicht Ohne Platzhalter bedeutet dass bei Nichtanzeige des Elements auch kein Raum für das Element reserviert wird In diesem Fall deutet bei der Anzeige also zunächst nichts darauf hin dass das Element überhaupt existiert Mit Hilfe von Dynamischem HTML können Sie so ein Element nachträglich anzeigen oder wieder verstecken Ferner können Sie mit der hier beschriebenen Angabe bestimmen wie ein Element angezeigt werden soll Sie können bestimmen dass es einen eigenen absatzerzeugenden Block bilden soll oder dass es mitten im Text inline angezeigt werden soll So können Sie beispielsweise absatzerzeugende Elemente wie Überschriften in Elemente umdefinieren die keinen eigenen Absatz erzeugen Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN html head title display title head body h1 style display inline Ich bin ein inline Element h1 p style display inline nbsp Dieser Text beweist es p h1 id versteckt style display none Ich bin ein Block Element werde aber nicht angezeigt h1 p Und dieser Text tut so als ob sonst nichts w auml re p body html Erläuterung Mit display können Sie die Anzeige von Elementen unterdrücken oder die Art der Anzeige festlegen Folgende Angaben sind möglich block Erzwingt einen Block das Element erzeugt eine neue Zeile inline Erzwingt die Anzeige im Text das Element wird im laufenden Textfluss angezeigt inline block Erzeugt äußerlich einen Block für den Breite Höhe und Außenabstand angegeben werden kann belässt das Element jedoch im laufenden Textfluss ähnlich einem inline replaced element wie img Dieser Wert wird erst mit CSS 2 1 eingeführt list item wie block jedoch mit einem Aufzählungszeichen Bullet davor run in bewirkt dass das Element kontext abhängig als Block

    Original URL path: http://html.ekiwi.de/css/eigenschaften/positionierung.htm (2016-04-25)
    Open archived version from archive

  • Horizontal und vertikal zentriertes Element
    Horizontal und vertikal zentriertes Element zurück

    Original URL path: http://html.ekiwi.de/navigation/anzeige/zentriertes_element.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle
    Spalte td td 1 Zeile 3 Spalte td tr usw andere Zeilen der Tabelle table Beispielschema 2 table border 1 colgroup width 200 span 3 colgroup tr td 1 Zeile 1 Spalte td td 1 Zeile 2 Spalte td td 1 Zeile 3 Spalte td tr usw andere Zeilen der Tabelle table Beispielschema 3 table border 1 width 100 colgroup col width 4 col width 2 col width 1 colgroup tr td 1 Zeile 1 Spalte td td 1 Zeile 2 Spalte td td 1 Zeile 3 Spalte td tr usw andere Zeilen der Tabelle table Erläuterung Mit colgroup leiten Sie hinter dem einleitenden table Tag eine Vorab Definition der Tabellenspalten ein colgroup column group Spaltengruppe Dabei haben Sie zwei Möglichkeiten entweder Sie möchten unterschiedlich breite Tabellenspalten haben Dann gehen Sie so vor wie im obigen Beispielschema 1 Oder Sie haben eine Tabelle in der alle Spalten die gleiche einheitliche Breite haben sollen Dann können Sie so vorgehen wie im obigen Beispielschema 2 Im Beispielschema 1 enthält das colgroup Tag keine weiteren Attribute Dafür notieren Sie im Anschluss an colgroup für jede einzelne gewünschte Tabellenspalte je ein col Tag Das erste col Tag definiert die erste Spalte das zweite die zweite Spalte usw Wenn Sie keine weiteren Angaben machen wird die Breite der Spalten automatisch aufgrund des Tabelleninhalts ermittelt Mit width Pixel Prozent können Sie jedoch eine Spaltenbreite für die einzelnen Spalten vorgeben width Breite Mit width 100 erzwingen Sie beispielsweise eine Spaltenbreite von 100 Pixeln und mit width 33 eine Breite von einem Drittel der Breite der Gesamttabelle Im Beispielschema 2 werden keine col Tags notiert Stattdessen notieren Sie im einleitenden colgroup Tag das Attribut span span spannen Als Wert weisen Sie die Anzahl der Spalten zu die Sie wünschen Mit dem Attribut width können Sie in diesem Fall eine einheitliche Spaltenbreite für alle Spalten definieren Bei width haben Sie neben der Möglichkeit Pixel oder Prozentwerte anzugeben auch noch eine dritte Möglichkeit Sie können das relative Breitenverhältnis der Spalten untereinander bestimmen unabhängig davon wie breit die Tabelle im Verhältnis zum Anzeigefenster ist Eine solche Möglichkeit stellt das obige Beispielschema 3 vor Bei Breitenangaben dieser Art weisen Sie width eine Zahl und dahinter ein Sternzeichen zu Das Sternzeichen ist dabei nur ein Signalzeichen für den Browser dass er die Zahlen davor nicht als Pixel interpretieren soll Wichtig sind die Zahlen Im obigen Beispiel 3 werden drei Spalten definiert bei denen die relativen Zahlen 4 2 und 1 in der Summe 7 ergeben Damit definieren Sie eine Tabelle bei der die erste Spalte vier Siebtel der Tabellenbreite einnimmt die zweite Spalte zwei Siebtel und die dritte Spalte ein Siebtel Zur Geltung kommt ein relatives Spaltenverhältnis aber erst wenn Sie außerdem eine Breite für die gesamte Tabelle angeben Im obigen Beispielschema 3 geschieht das durch die Angabe width 100 im einleitenden table Tag Beachten Sie col Tags dürfen in HTML kein Abschluss Tag haben Das abschließende colgroup Tag ist dagegen optional In XHTML ist das schließende col Tag aber erforderlich Wenn Sie

    Original URL path: http://html.ekiwi.de/html/tabellen/aufbau.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Frames / Eigenschaften von Frames
    Sie den Abstand zwischen oberem bzw unterem Fensterrand und dem Fensterinhalt height Höhe Linke und rechte Ränder sind immer gleich groß ebenso obere und untere Beachten Sie Sie können zu beiden Werten Angaben machen aber auch nur zu einem der beiden Unveränderbare Fenstergröße Normalerweise kann der Anwender in einem angezeigten Frameset die Größe der einzelnen Frame Fenster verändern indem er mit der Maus auf die Rahmen zwischen Frame Fenstern positioniert und durch Ziehen die Größenverhältnisse der Frame Fenster einstellt In vielen Fällen ist das auch sinnvoll und Sie sollten dem Anwender diese Freiheit lassen Wenn Sie aber beispielsweise ein Frame Fenster mit einem fixen Inhalt etwa einem Logo haben können Sie verhindern dass der Anwender die Fenstergröße verändern kann Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Frameset EN http www w3 org TR html4 frameset dtd html head title Unveränderbare Fenstergröße title head frameset cols 250 frame src verweise5 htm name Navigation scrolling no noresize frame src startseite htm name Daten noframes body p a href verweise5 htm Navigation a a href startseite htm Daten a p body noframes frameset html Erläuterung Durch das Attribut noresize in einem frame Tag verhindern Sie dass der Anwender die Größe des Frame Fensters verändern kann noresize no resize keine Größenveränderung Beachten Sie Nicht nur das Frame Fenster für das Sie das Attribut notieren kann dann nicht mehr in der Größe verändert werden sondern auch alle benachbarten Frame Fenster nicht Im obigen Beispiel kann der Anwender also weder das linke noch das rechte Frame Fenster verändern Das ist eigentlich logisch aber Sie sollten diese Folgewirkung berücksichtigen wenn Sie erwägen in einem Frame Fenster das Verändern der Größe zu verhindern Wenn Sie XHTML Standard konform arbeiten wollen müssen Sie das hier beschriebene Attribut in der Form noresize noresize notieren Weitere Informationen dazu im Kapitel über XHTML und HTML Rahmendicke bzw unsichtbare Fensterrahmen Sie können die normalerweise sichtbaren Rahmen zwischen Frame Fenstern unterdrücken Bei unsichtbaren Fensterrahmen wirken die Frame Fenster wie nahtlos aneinander gefügte Flächen am Bildschirm Leider gibt es hierbei bis auf den heutigen Tag Differenzen zwischen den Browsern die dieses Feature seit langem unterstützen und dem W3 Konsortium das eine andere Variante durchsetzen will an die sich die Browser aber nicht halten Sie haben also die Auswahl HTML Standard konform zu schreiben und die weit verbreiteten Browser ignorieren Ihre Angaben oder Sie schreiben für die Browser und verzichten auf die HTML Konformität Beispiel 1 HTML Standard konform Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Frameset EN http www w3 org TR html4 frameset dtd html head title Rahmendicke bzw unsichtbare Fensterrahmen title head frameset cols 250 frame src verweise6 htm name Navigation scrolling no frameborder 0 frame src startseite htm name Daten frameborder 0 noframes body p a href verweise6 htm Navigation a a href startseite htm Daten a p body noframes frameset html Beispiel 2 Browser gerecht Anzeigebeispiel So sieht s aus html head title Rahmendicke bzw unsichtbare Fensterrahmen title

    Original URL path: http://html.ekiwi.de/html/frames/eigenschaften.htm (2016-04-25)
    Open archived version from archive



  •