Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Posts Tagged ‘HTML’

Vertikale CSS Navigation mit Tooltip – CSS Vertical Navigation with Teaser

Posted by sura1 - 26. März 2009

silver26
Bookmark and Share

Vertikale CSS Navigation mit Tooltips – CSS Vertical Navigation with Teaser

Die Technik, in eine vertikale CSS-Navigation eine Infobox (Tooltip, Teaser) einzubauen, erlaubt Ihnen auf einfache Art und Weise, nähere Informationen zu den jeweiligen Menüpunkten anzuzeigen.

Fertiges Beispiel ansehen [Grafik anklicken!]

vert_nav_teaser_blue

HTML:

Ich starte im Quellcode mit einer einfachen ungeordneten Liste. In die <li>-Tags werden Hyperlinks eingebaut und innerhalb dieser werden <span>-Tags eingefügt. Im Beispiel-Code sind nur die ersten 3 Punkte der vertikalen Navigation angeführt.

<ul class="sidenav">
        <li>
                <a href="#">Home
                <span>Blandit turpis patria euismod at iaceo appellatio,
                             demoveo esse. Tation utrum utrum abigo demoveo immitto
                             aliquam sino aliquip.
                </span>
                </a>
        </li>
        <li>
                <a href="#">Blog
                <span>Blandit turpis patria euismod at iaceo appellatio,
                             demoveo esse. Tation utrum utrum abigo demoveo immitto
                             aliquam sino aliquip.
                </span>
                </a>
        </li>
        <li>
                <a href="#">Tutorials
                <span>Blandit turpis patria euismod at iaceo appellatio,
                             demoveo esse. Tation utrum utrum abigo demoveo immitto
                             aliquam sino aliquip.
                </span>
                </a>
        </li>
</ul>

CSS:

Zuerst werden die Listenelemente für die vertikale Navigation formatiert

ul.sidenav {
        font-size: 1.2em;
        float: left;
        width: 200px;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #005094;
        border-bottom: 1px solid #3373a9;
        border-top: 1px solid #003867;
}
ul.sidenav li a {
        display: block;
        color: #fff;
        text-decoration: none;
        width: 155px;
        padding: 10px 10px 10px 35px;
        background: url(sidenav_a.gif) no-repeat 5px 7px;
        border-top: 1px solid #3373a9;
        border-bottom: 1px solid #003867;
}

Zwischenergebnis: Vertikale Navigation

vert_nav_blue1

Als nächstes wird der hide/show-Effekt hinzugefügt. Wenn Sie danach mit der Maus über die Hpyerlinks fahren, bewirkt der hover-Effekt das Öffnen der Infobox mit den zusätzlichen Infos.

ul.sidenav li a:hover {
        background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
        border-top: 1px solid #1a4c76;
}
ul.sidenav li span{     display: none; }
ul.sidenav li a:hover span {
        display: block;
        font-size: 0.8em;
        padding: 10px 0;
}

Ergebnis: Vertikale Navigation mit Tooltip/Teaser

vert_nav_teaser_blue

Abschließende Bemerkung:

Sie können die oben beschriebene Technik nicht nur in einer vertikalen Navigation, sondern nach entsprechender Modifikation auch in allen anderen Elementen Ihrer Webseite einsetzen (z.B.: Links im Fließtext, Überschriften, Profile etc.).

Zusätzlich zum Original habe ich auch eine Variante in grüner Farbe erstellt.

Variante 1 (blau) und Variante 2 (grün) ansehen [Grafik anklicken!]

vertnav_teaser_bluevertnav_teaser_green

Beide Beispiele zusammen als *Zip-Datei (7,5KB) downloaden [Grafik anklicken!]

vertnav_teaser_green1-horz

Zum Originalartikel [bitte Grafik anklicken!]

sohtanka

Ähnliche Artikel:

CSS Tooltips erstellen: Ballon-Quickinfos / ballon pop-ups
CSS-Tricks: CSS Tooltip erstellen
CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 1
CSS-Tooltips erstellen: Infoboxen über HTML-Elementen / Teil 2
Super simple css bars – einfache Diagramme mit CSS erstellen
Pure CSS Animated Progress Bar – Animierter Fortschrittsbalken
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

Posted in CSS-Tooltipps | Verschlagwortet mit: , , , , , , , , , , , , , , , | 2 Comments »

Link Styles – Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatieren – Teil 2

Posted by sura1 - 3. März 2009

silver031Bookmark and Share

Link Styles mit CSS – Teil 2

linkstyles2

Sie surfen auf einer Webseite mit sehr viel Text und mehreren Links und haben dabei das Problem, dass diese nur sehr schlecht oder aber überhaupt nicht vom Text zu unterscheiden sind.

Ich stoße immer wieder auf Blogs und Webseiten, welche zum Beispiel die Hyperlinks farblich überhaupt nicht anders darstellen. Was folgt daraus? Ist der Inhalt auch noch so interessant – solch eine Webseite wird sehr schnell wieder verlassen..

Ich möchte Ihnen hier in einer 3-teiligen Serie zeigen, wie Sie ganz einfach und ohne Einsatz von Grafiken Ihre Links so formatieren, dass diese bereits auf den ersten Blick vom übrigen Text unterschieden werden können.

   Fertige Beispiele ansehen
       demo2

Vorgangsweise:

Ich setze in meinen Beispielen so genannte Hover-Links ein. Das sind Links, die beim Drüberfahren mit der Maus ihre Farbe verändern. Von dieser Möglichkeit wird im Web rege Gebrauch gemacht. Ein Link kann bei Mausberührung die Unterstreichung verlieren oder bei nicht unterstrichenen Links sie annehmen, die Schrift kann vergrößert werden, fette oder kursive Buchstaben erscheinen und so weiter…..

Sehen Sie meine 10 fertigen Links im folgenden kurzen Video (30 Sekunden – 700 KB)

k-linkstyle2_video1

Link Styles mit CSS – Teil 2 (10 Beispiele)

Farbe der Links in den 10 Bespielen:

Grundfarbe: a {color: #0c7fce;}

Nummer 1 – 4

Hintergrundfarbe hinzufügen, Unterstreichung (hinzugeben, entfernen)

linkstyle2_1

Nach der Mausberührung sehen die obigen 4 Links wie folgt aus:

 1
/* adds background, underline */
    a.add-background-underline:hover {background: #ffdeeb;}
 2
/* adds background, no underline */
    a.add-background-no-underline {text-decoration: none;}
    a.add-background-no-underline:hover {background: #ffdeeb;}
 3
 /* adds background, removes underline */
    a.add-background-remove-underline:hover {background: #ffdeeb;
    text-decoration: none;}
 4
/* adds background, adds underline */
    a.add-background-add-underline {text-decoration: none;}
    a.add-background-add-underline:hover {background: #ffdeeb;
    text-decoration: underline;}

Nummer 5 – 8

Hintergrundfarbe, Wechsel der Schriftfarbe und Unterstreichung (oder nicht)

linkstyle2_2

Nach der Mausberührung sehen die Beispiele 5 bis 8 wie folgt aus:

 5
/* with background, changes color, underline */
    a.background-change-color-underline {background: #ffdeeb;}
    a.background-change-color-underline:hover {color: #ff0066;}
 61
/* with background, changes color, no underline */
    a.background-change-color-no-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-no-underline:hover {color: #ff0066;}
 71
/* with background, changes color, removes underline */
    a.background-change-color-remove-underline {background: #ffdeeb;}
    a.background-change-color-remove-underline:hover {color: #ff0066;
    text-decoration: none;}
 8
/* with background, changes color, adds underline */
    a.background-change-color-add-underline {background: #ffdeeb;
    text-decoration: none;}
    a.background-change-color-add-underline:hover {color: #ff0066;
    text-decoration: underline;}

Nummer 9 – 10

Wechsel Hintergrundfarbe, keine Unterstreichung

linkstyle2_3

Fahren Sie mit der Maus über die beiden Links und Sie sehen folgendes Ergebnis:

 9
/* changes background, no underline */
    a.change-background-no-underline {padding: 2px; background: #ffe300;
    color: #000;  text-decoration: none;}
    a.change-background-no-underline:hover {background: #ff0066;}
 101
 /* changes background, no underline */
    a.change-background-no-underline-bold {padding: 2px; background: #ffe300;
    color: #000; font-weight: 700; text-decoration: none;}
    a.change-background-no-underline-bold:hover {background: #ff0066;}
   Fertige Beispiele ansehen
       demo2

Originalartikel:

gradient11

Ausführliche Informationen zum Thema:

http://de.selfhtml.org/html/verweise/definieren.htm#gestalten
http://de.selfhtml.org/html/verweise/anzeige/a_href_css.htm
http://www.css4you.de/hover.html
http://www.css4you.de/example/hover.html

Ähnliche Artikel: 
Link Styles Teil 1 - Wie Sie mit CSS und ohne Einsatz von Grafiken Ihre Links formatiern
Formatierung von Überschriften mit CSS (Teil 2)
CSS-Beispiele: Blockquote (2x), Textfeld, Hinweisboxen
Abgerundete Ecken, Balkendiagramm mittels CSS
Bilder im Fließtext
Bildunterschriften in XHTML
XHTML/CSS-Übungen: Formulare
Lesehilfe gestalten mit CSS
Formatierung von Überschriften mit CSS
CSS-Übung: Initial gestalten (DropCap)
CSS-Liste mit grafischen Aufzählungszeichen
CSS-Listen mit Sonderzeichen

Posted in CSS | Verschlagwortet mit: , , , , , , , , , , , , , | 1 Comment »

Mit „Postable“ HTML-eigene Zeichen maskieren

Posted by sura1 - 1. März 2009

silver01
Bookmark and Share

http://www.elliotswan.com/postable/

postable

Mit Postable können Sie HTML-eigene Zeichen maskieren

Wenn in Ihrem Text Zeichen vorkommen, die in HTML eine bestimmte Bedeutung haben, müssen Sie diese Zeichen maskieren. Die folgenden Zeichen müssen Sie zum Beispiel wie folgt maskieren:

Ersetzen Sie das Zeichen & durch die Zeichenfolge &amp; ("Ampersand")
Ersetzen Sie das Zeichen < durch die Zeichenfolge &lt; ("lower than")
Ersetzen Sie das Zeichen > durch die Zeichenfolge &gt; ("greater than")

Am gefährlichsten sind die spitze öffnende Klammer (<) und die spitze schließende Klammer (>). Wenn Sie diese Zeichen nicht wie vorgeschrieben maskieren, bringen Sie den Web-Browser mit ziemlicher Sicherheit durcheinander, weil er glaubt, nun würde ein HTML-Tag folgen.

Elliot Swan stellt dafür in seinem Blog eine interessantes Online-Tool mit dem Name POSTABLE vor, mit dem Sie rasch und einfach diese HTML-Sonderzeichen umwandeln können.

Beispiel: Original Quellcode

postable11

Umgewandelter Code:

postable_2

Infos zum Thema:
http://de.selfhtml.org/html/allgemein/zeichen.htm
http://fwpf-webdesign.de/xhtml/ergaenzungen/html-eigene-zeichen
http://leftlogic.com/lounge/articles/entity-lookup/

Interessant in diesem Zusammenhang ist das Firefox Add-on „HTML Entity Character Lookup“, welches Sie hier downloaden können:

http://www.yining.org/firefox/extensions/html-entity-char-lookup/

Nach der Installation können Sie mit einem Klick auf die rechte Maustaste direkt Ihr gesuchtes Sonderzeichen umwandeln.

a) Klick rechte Maustaste – Add-on mit Klick aktivieren!

html_entity

b) gewünschtes Sonderzeichen eintippen – Ergebnis erscheint sofort!

html_entity_1

Ähnliche Artikel:
VideoDownloadHelper 3.2: Firefox Add-on
www.cooliris.com: Firefox Add-on
Firefox Erweiterung Picnik
16 tolle Firefox Themes
Flagfox: Firefox Add-on gibt Standort der besuchten Webseite an

Posted in HTML | Verschlagwortet mit: , , , , , , , | Leave a Comment »

Standardisierte Farbnamen und Grundfarben nach CSS 2.1

Posted by sura1 - 27. Februar 2009

februar_27
Bookmark and Share

Grundfarben nach CSS 2.1 und Standardisierte Farbnamen

Im Internet werden Farben üblicherweise durch Angabe des Hexadezimalwerts angegeben.
Für einige Farben ist es auch möglich, statt des Hexadezimalwerts einen Farbnamen (benannte Farben, named colours) anzugeben.

17 Grundfarben nach CSS 2.1

17 Grundfarben nach CSS 2.1:

Black 000000 Green 008000
Silver C0C0C0 Lime 00FF00
Gray 808080 Olive 808000
White FFFFFF Yellow FFFF00
Maroon 800000 Navy 000080
Red FF0000 Blue 0000FF
Purple 800080 Teal 008080
Fuchsia FF00FF Aqua 00FFFF
Orange FFA500

Standardisierte Farbnamen

HTML und CSS bieten eine bequeme Alternative, Farben zu definieren: Die Farbnamen. Dank dieser Farbnamen wird zum Beispiel  in HTML einfach anstatt <font-color=“#000000″> die Bezeichnung <font-color=“black“> eingegeben, das Resultat ist bei beiden Varianten schwarze Schriftfarbe, nur kann man sich die zweite Möglichkeit besser merken.

Ich stelle Ihnen in dieser Übersicht die bekanntesten Farbnamen vor. Zusätzlich finden Sie noch deren hexadezimalen Farbcode, der zum Einsatz kommen muss, wenn mit HTML- bzw. CSS-Editoren gearbeitet wird.

Standardisierte Farbnamen – Web Color Names Chart

aliceblue
#F0F8FF
antiquewhite
#FAEBD7
aqua
#00FFFF
aquamarine
#7FFFD4
azure
#F0FFFF
beige
#F5F5DC
bisque
#FFE4C4
black
#000000
blanchedalmond
#FFEBCD
blue
#0000FF
blueviolet
#8A2BE2
brown
#A52A2A
burlywood
#DEB887
cadetblue
#5F9EA0
chartreuse
#7FFF00
chocolate
#D2691E
coral
#FF7F50
cornflowerblue
#6495ED
cornsilk
#FFF8DC
crimson
#DC143C
cyan
#00FFFF
darkblue
#00008B
darkcyan
#008B8B
darkgoldenrod
#B8860B
darkgray
#A9A9A9
darkgreen
#006400
darkkhaki
#BDB76B
darkmagenta
#8B008B
darkolivegreen
#556B2F
darkorange
#FF8C00
darkorchid
#9932CC
darkred
#8B0000
darksalmon
#E9967A
darkseagreen
#8FBC8B
darkslateblue
#483D8B
darkslategray
#2F4F4F
darkturquoise
#00CED1
darkviolet
#9400D3
deeppink
#FF1493
deepskyblue
#00BFFF
dimgray
#696969
dodgerblue
#1E90FF
firebrick
#B22222
floralwhite
#FFFAF0
forestgreen
#228B22
fuchsia
#FF00FF
gainsboro
#DCDCDC
ghostwhite
#F8F8FF
gold
#FFD700
goldenrod
#DAA520
gray
#808080
green
#008000
greenyellow
#ADFF2F
honeydew
#F0FFF0
hotpink
#FF69B4
indianred
#CD5C5C
indigo
#4B0082
ivory
#FFFFF0
khaki
#F0E68C
lavender
#E6E6FA
lavenderblush
#FFF0F5
lawngreen
#7CFC00
lemonchiffon
#FFFACD
lightblue
#ADD8E6
lightcoral
#F08080
lightcyan
#E0FFFF
lightgoldenrodyellow
#FAFAD2
lightgreen
#90EE90
lightgrey
#D3D3D3
lightpink
#FFB6C1
lightsalmon
#FFA07A
lightseagreen
#20B2AA
lightskyblue
#87CEFA
lightslategray
#778899
lightsteelblue
#B0C4DE
lightyellow
#FFFFE0
lime
#00FF00
limegreen
#32CD32
linen
#FAF0E6
magenta
#FF00FF
maroon
#800000
mediumaquamarine
#66CDAA
mediumblue
#0000CD
mediumorchid
#BA55D3
mediumpurple
#9370DB
mediumseagreen
#3CB371
mediumslateblue
#7B68EE
mediumspringgreen
#00FA9A
mediumturquoise
#48D1CC
mediumvioletred
#C71585
midnightblue
#191970
mintcream
#F5FFFA
mistyrose
#FFE4E1
moccasin
#FFE4B5
navajowhite
#FFDEAD
navy
#000080
oldlace
#FDF5E6
olive
#808000
olivedrab
#6B8E23
orange
#FFA500
orangered
#FF4500
orchid
#DA70D6
palegoldenrod
#EEE8AA
palegreen
#98FB98
paleturquoise
#AFEEEE
palevioletred
#DB7093
papayawhip
#FFEFD5
peachpuff
#FFDAB9
peru
#CD853F
pink
#FFC0CB
plum
#DDA0DD
powderblue
#B0E0E6
purple
#800080
red
#FF0000
rosybrown
#BC8F8F
royalblue
#4169E1
saddlebrown
#8B4513
salmon
#FA8072
sandybrown
#F4A460
seagreen
#2E8B57
seashell
#FFF5EE
sienna
#A0522D
silver
#C0C0C0
skyblue
#87CEEB
slateblue
#6A5ACD
slategray
#708090
snow
#FFFAFA
springgreen
#00FF7F
steelblue
#4682B4
tan
#D2B48C
teal
#008080
thistle
#D8BFD8
tomato
#FF6347
turquoise
#40E0D0
violet
#EE82EE
wheat
#F5DEB3
white
#FFFFFF
whitesmoke
#F5F5F5
yellow
#FFFF00
yellowgreen
#9ACD32
HTML bietet eine bequeme Alternative, Farben zu definieren: Die Farbnamen. Dank ihrer wird einfach anstatt <font color=“#000000″> <font color=“black“> eingegeben, das Resultat ist bei beiden Varianten schwarze Schriftfarbe, nur kann man sich die zweite Möglichkeit besser merken.
Ähnliche Artikel:
Farbenlehre
Farbkombinationen auf Colorcombos
Farbtabelle: 216 sichere Webfarben
Webfarben: Farbton grün, Farbton gelb
Webfarben: Farbton blau, Farbton purpur/violett
Webfarben: Farbton rot und pink
Webfarben: verschieden Farbtöne (Mix)

Posted in Farben | Verschlagwortet mit: , , , , , , , , , | Leave a Comment »

CSS-Tipps und Tricks: Abschnitte wie mit einem Textmarker markieren

Posted by sura1 - 25. Februar 2009

februar_25
Bookmark and Share

CSS-Tipps und Tricks: Textmarker

Wie Sie Abschnitte auf einer Webseite wie mit einem Textmarker markieren

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe und wenn nötig eine separate Schriftfarbe angeben. Zusätzlich ist zu empfehlen, mit dem CSS-Befehl padding einen linken und rechten Seitenabstand festzulegen.

Beispiel 1:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff), die Hintergrundfarben sind grün (#690) und rot (#920c0d) und der Seitenabstand beträgt links und rechts 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>Effekte, die wie
<span style="color:#fff;background-color:#690;padding:0 3px;">
Markierungen eines Textmarkers</span> aussehen, lassen sich sehr
einfach realisieren.</p>
<p>Den gewünschten Bereich
<span style="color:#fff; background-color:#920c0d; padding:0 3px;">
mit dem span-Tag einschließen</span> und eine Hintergrundfarbe
angeben.</p>

Ergebnis:

Effekte, die wie Markierungen eines Textmarkers aussehen, lassen sich sehr einfach realisieren. Den gewünschten Bereich mit dem <span>-Tag einschließen und eine Hintergrundfarbe angeben.

Beispiel 2:

Die Schriftfarbe innerhalb des <span>-Tags ist weiß (#fff) bzw. schwarz (#000), die Hintergrundfarben sind gelb (#ff0), rot (#f00), blau (#00f) und grün (#690) und der Seitenabstand beträgt links und rechts jeweils 3px (padding: 0 3px;).

HTML-Code mit CSS Inline-Styles:

<p>
Etiam cursus lacus in eros.
<span style="color:#000;background-color:#ff0;padding:0 3px;">
Praesent congue lacinia nunc</span>.
Cras placerat, risus in ullamcorper commodo;augue mauris rhoncus
ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum,
volutpat sed, varius accumsan,
<span style="color:#fff;background-color:#f00;padding:0 3px;">
convallis at, quam</span>.
Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id
lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p>Quisque at leo.
<span style="color:#fff;background-color:#00f;padding:0 3px;">
Donec ac urna. Etiam commodo.</span>
Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa
dignissim commodo. Vivamus aliquam, turpis ac
<span style="color:#fff;background-color:#690;padding:0 3px;">
scelerisque convallis,nisl velit dictum ligula</span>, ac congue nunc
diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae,
vehicula ac, odio.
</p>

Ergebnis:

Etiam cursus lacus in eros. Praesent congue lacinia nunc. Cras placerat, risus in ullamcorper commodo. Augue mauris rhoncus ante, at vulputate urna sapien nec tortor. Pellentesque erat ipsum, volutpat sed, varius accumsan, convallis at, quam. Sed quis est non dolor tempus volutpat. Curabitur convallis. Ut id lectus. Donec lacus. Etiam porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Quisque at leo. Donec ac urna. Etiam commodo. Cras suscipit justo quis neque.In id sem. Mauris vitae lectus ut massa dignissim commodo. Vivamus aliquam, turpis ac scelerisque convallis, nisl velit dictum ligula, ac congue nunc diam ac nunc. Donec purus diam, pulvinar sit amet, scelerisque vitae, vehicula ac, odio.

Ausführliche Infos zu HTML und CSS:

CSS 4 YOU
Michael Jendryschik – Einführung in HTML und CSS
The Styleworks – CSS Praxis
Dr.Web – CSS Grundlagen

Ähnliche Artikel:
CSS Float: Schwebende Boxen (Theorie und Praxis)
CSS Sidebar mit runden Boxen
Styling Blockquotes - Zitate mit CSS gestalten
HTML/CSS-Grundlagen: Unterschied zwischen relativer und absoluter Positionierung
HTML/CSS-Übung: 5 Beispiele, wie Sie ungeordnete Listen formatieren
CSS/HTML-Übung: 6 Wege, wie Sie Grafiken mit Rahmen versehen können
CSS-Tricks: Walking Links - Spazierende Links 
CSS-Experimente: Flashartige Links mit CSS erstellen
CSS-Tricks: Die nach-allen-Seiten-ausdehnbare Box
CSS-Tricks: Kennzeichnung von besuchten Links
CSS-Tricks: Div-Boxen mit runden Ecken (7 Variationen)
CSS Bildergalerie - CSS Sliding Gallery von CSSPlay
CSSplay: Inline links - block styling

Posted in CSS-Tricks | Verschlagwortet mit: , , , , , , , , , , , , | Leave a Comment »