Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Archive for Juni 2008

Busenquiz auf www.fakeornot.com

Posted by sura1 - 30. Juni 2008

Bookmark and Share

http://www.fakeornot.com/play/play.php


www.fakeornot.com ist eine Online-Spielerei für Freunde von großen, kleinen, operierten oder wirklich echten Brüsten.

Bei diesem Spiel geht es darum, zu erraten, ob die gezeigte Brust ein wahres Naturwunder ist oder ob ein Schönheitschirurg etwas nachgeholfen hat.

Viel Spaß beim Busen-Quiz!

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

Machen Sie Musik mit diesen Strandschönheiten

Posted by sura1 - 30. Juni 2008

Bookmark and Share

http://www.oooooouch.com/

Passend zur Sommerzeit! Machen Sie Musik mit diesen Strandschönheiten.

Auf http://www.oooooouch.com/ haben Sie Gelegenheit dazu. Die 8 Damen am Badesteg stellen eine virtuelle Tonleiter (c,d,e,f,g,a,h,c) dar. Sie können aus 3 verschiedenen Sounds auswählen ( ui, ai, ei).

Einfach Einstellungen vornehmen und drauf losspielen! Der Spaß stellt sich dann garantiert ein.

Voraussetzung:

Grundkenntnisse in Musik!!

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

Natural Hallucinogen: Ein optischer Trip auf YouTube

Posted by sura1 - 30. Juni 2008

Bookmark and Share

Natural Hallucinogen

Ein ganz legaler Trip

Halluzinogene Drogen sind äußerst gefährlich. Unzählige Menschen, die nur mal einen Trip nehmen wollen, sind nicht mehr davon runtergekommen. Einen sicheren Trip verschafft einem dieses Video.

Gebrauchsanweisung: Das Video mit Musik im Vollbildmodus laufen lassen und konzentriert in die Mitte starren. Nach einiger Zeit erscheint dann eine Anweisung auf dem Schirm, wegzuschauen, am Besten auf einen konkreten Gegenstand. Der Effekt ist erstaunlich. Viel Spaß!

(Gefunden unter: http://www.netselektor.de/ )

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

Monoface: Auch so können Gesichter aussehen!

Posted by sura1 - 30. Juni 2008

Bookmark and Share

http://www.mono-1.com/monoface/main.html

Und wieder einmal empfehle ich Ihnen an dieser Stelle ein interessantes und lustiges Online-Tool.

Auf http://www.mono-1.com/monoface/main.html haben Sie die Möglichkeit, die unmöglichsten und kuriosesten Gesichter herzustellen.

Klicken Sie einfach auf Mund, Nase, Stirn, rechtes und linkes Auge und schon erscheinen immer neue Gesichter! Manche sehen normal, manche witzig und manche wirklich hässlich aus – insgesamt gibt es 759.375 verschiedene Möglichkeiten, ein Gesicht zu gestalten.

Hier einige Beispiele:

Posted in Interessante Webseiten | Verschlagwortet mit: , , , , , | Leave a Comment »

XHTML/CSS-Übungen: Bundesliga-Tabellen (Variationen)

Posted by sura1 - 30. Juni 2008

Bookmark and Share

Heute möchte ich mich mit Tabellen in XHTML beschäftigen.

Überarbeitung:

Man kann, wie Sie auf meiner Seite XHTML-Referenz sehen können, einfache Tabellen auch allein mit XHTML-Elementen herstellen. Doch interessant wird die Errichtung von Tabellen erst durch den Einsatz von CSS. Mit CSS haben Sie unendlich viele Möglichkeiten, gestalterisch einzugreifen und Tabellen grafisch ansprechend zu layouten.

Nachfolgend stelle ich Ihnen anhand einer Tabelle der deutschen Fußball-Bundesliga 3 Beispiele von Tabellen vor:

Damit Sie die 3 Tabellen-Beispiele bearbeiten können, haben Sie die Möglichkeit, die Daten für die jeweiligen Tabellen nachfolgenden downzuloaden. Es steht auch eine Zusammenfassung aller 3 Beispiele als Download zur Verfügung.

Bundesligatabelle 1:

(32,3KB Zip-Datei)


Bundesligatabelle 2:

(3KB Zip-Datei)


Bundesligatabelle 3 – alternative Stylesheets:

(17,8KB Zip-Datei)


Herunterladen aller 3 Beispiele in einer Zip-Datei:

(17,8KB Zip-Datei)

Erläuterung zu den einzelnen Beispielen:

Bundesligatabelle 1:

Zusätzlich zum body habe ich in der html-datei „style.html“ einen eigenen div-Container mit der Bezeichnung „wrapper“ eingefügt. Mit diesem habe ich dann im Stylesheet „style.css“ folgende wichtige Formatierungen  festgelegt:

CSS-Code (Auszug):

body { background-color: #005F00;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#wrapper { width: 460px; /* Breite des Inhaltsbereiches */
border: 6px ridge #336633;
margin: 50px auto;
padding: 10px;
background-color: #009F00;
text-align: center;
}

.team { text-align: left; }

Die anderen CSS-Formatierungen entnehmen Sie bitte der CSS-Datei. Ich möchte zu diesem Beispiel noch sagen, dass in der Beispiel-Grafik die Hintergrundfarbe mit #005f00 festgelegt ist. Optisch besser sieht es aber besser aus, wenn Sie die Hintergrundfarbe gegen die Grafik „hintergrund.jpg“ austauschen!

Bundesligatabelle 2:


Bei dieser Tabelle gibt es im html-code keine extra Formatierung mittels „id“. Ich verwende hier nur eine Klasse mit der Bezeichnung „team“ und trotzdem erscheint mir persönlich diese Variante als klassisches Beispiel dafür, was man mit einer (!) Grafik, mit entsprechender Hintergrundfarbe und den Pseudo-Klassen „hover“ und „visited“ alles hervorzaubern kann.

Als Hintergrundfarbe für den body habe ich in der CSS-Datei „sky.css“ die Farbe #000 gewählt, da sie einen ausgezeichneten Kontrast zu den verschiedenen Blautönen darstellt.

CSS-Code (Auszug):

body { color: #000;
background-color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#wrapper { width: 472px; /* Breite des Inhaltsbereiches */
border: 6px ridge #99ccff;
margin: 30px auto;
padding: 10px;
background-color: #6699cc;
text-align: center;
}
.team { text-align: left; }

Der Rest der CSS-Datei besteht nur aus den üblichen Formatierungen und bezieht sich ausschließlich auf die in meiner Elemente-Referenz angeführten XHTML-Befehle für Tabellen.

Bundesliga-Tabellen – 3: Variationen mit mehreren StyleSheets (alternate CSS):


Im Beispiel 3 habe ich in „index.html“ folgenden Codierung vorgenommen:

Sie haben bekanntlich die Möglichkeit, eine CSS-Datei mit Hilfe des XHTML-Elementes <link> in den HMTL-Quellcode einzubingen. Das geht so:

<link href=“dateiname.css“ rel=“stylesheet“ title=“dateiname.css“ type=“text/css“ media=“screen“ />

Wenn Ihnen nun wie hier für eine Tabelle 26 verschiedende Stylesheets zur Verfügung stehen, haben Sie eine interessante Möglichkeit, alle(!) CSS-Dateien auf einmal in den Quell-Code einzubauen. So ersparen Sie sich dann die notwendige Arbeit des Austauschens.

alternate.html

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; lang=“de“ xml:lang=“de“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=iso-8859-1″ />
<link href=“blueonblue.css“ rel=“stylesheet“ title=“blueonblue“ type=“text/css“ media=“screen“ />
<link href=“cga.css“ rel=“alternate stylesheet“ title=“cga“ type=“text/css“ media=“screen“ />
<link href=“chives-tables.css“ rel=“alternate stylesheet“ title=“chives-tables“ type=“text/css“ media=“screen“ />
<link href=“chrome.css“ rel=“alternate stylesheet“ title=“chrome“ type=“text/css“ media=“screen“ />

…………. und hier stehen die übrigen CSS-Dateien!

Sie benennen also eine CSS-Datei (hier blueonblue.css) mit der Bezeichnung rel=“stylesheet“ und alle anderen Stylesheets müssen dann mit rel=“alternate stylesheet“ ausgezeichnet werden.

In Ihrem Firefox- oder Opera-Browser sehen Sie danach unter der Rubrik „Ansicht“ beim Punkt „Webseiten-Stil“ die alternativen Stylesheets angeführt. Durch Anklicken haben Sie dann die Möglichkeit, ganz einfach und schnell den Webseiten-Stil (hier das Tabellen-Layout) zu wechseln.

Einzige Einschränkung: Bei jedem Neustart der html.datei wird wieder die mit rel=“stylesheet“ bezeichnete css.datei neu geladen!

ACHTUNG:  Benutzer des IE 7(oder niedriger) können diese Alternative nicht nutzen, da der Internet-Explorer die Funktion von alternativen Webseiten-Stil-Möglichkeiten nicht unterstützt.

Wie Sie im Internet Explorer trotzdem zwischen den verschiedenen Style-Sheets hin- und herwechseln können, erklärt das Tutorial

http://www.thestyleworks.de/tut-art/style_switcher_1.shtml

Feststellung: Bei einigen Layouts ist es notwendig, kleinere  Anpassungen im HTML-Quellcode vorzunehmen (eher etwas für fortgeschrittene Webseitengestalter!).


Der Großteil der CSS-Dateien für die BUNDESLIGATABELLE stammen von CSS Table Gallery. Idee und Initial-Design von Chris Heilmann. Sie dürfen die CSS-Dateien frei verwenden und zum Beispiel ohne Einschränkungen tauschen, verändern etc. (Ausnahme: wenn in der CSS-Datei etwas Gegenteiliges steht!).

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