Delphi-PRAXiS - [XHTML&CSS] Website im Windows Design

'n Abend alle zusammen,

Ich bin gerade so'n bissel am verzweifeln. HTML&CSS sind für mich relatives Neuland. Da ich mal selbst an einem Theme für Wordpress basteln wollte, und etwas besonderes haben wollte, kam mir die Idee, mal den Windows Desktop nachzubasteln.

Allerdings komme ich nicht mit dem CSS-Code nicht mehr wirklich weiter. Ich habe schon X Kombinationen probiert. Im Prinzip möchte ich nur, dass sich das Fenster wie ein normales Windowsfenster verhält. Ist das machbar? Oder setze ich mir da selbst eine unlösbare Aufgabe?

HTML-Quelltext:

Code:

			<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>danielstools.de :: AREA 51  </title>

<meta name="generator" content="WordPress 2.0.6" /> 

<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />

</head>

<body>

<div id="content_container">

[url="http://localhost/"]danielstools.de :: AREA 51[/url]

                Reloaded…

</div>

<div id="inhalt">

<div class="line-hor-top">

<div class="line-vert-left">

<div class="line-vert-right">

<div class="line-hor-bott">

<div class="corner-top-left">

<div class="corner-top-right">

<div class="corner-bott-left">

<div class="corner-bott-right">

<div class="content">

        >> [url]www.danielstools.de[/url] <<

                                <h2 id="post-6">[url="http://localhost/?p=6"]Test[/url]</h2>

                                20. January 2007

                                 daniel.gilbert

Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test Dies ist noch ein Test

</p>

                                Kategorie [url="http://localhost/?cat=1"]Uncategorized[/url] [b]|[/b] [url="http://localhost/?p=6#respond"]0 Kommentare »[/url] 

                                <h2 id="post-5">[url="http://localhost/?p=5"]test[/url]</h2>

                                16. January 2007

                                 daniel.gilbert

Neuer Test

</p>

                                Kategorie [url="http://localhost/?cat=1"]Uncategorized[/url] [b]|[/b] [url="http://localhost/?p=5#respond"]0 Kommentare »[/url] 

                                <h2 id="post-3">[url="http://localhost/?p=3"]Dies ist ein Test[/url]</h2>

                                13. January 2007

                                 daniel.gilbert

Eine Testseite

</p>

                                Kategorie [url="http://localhost/?cat=1"]Uncategorized[/url] [b]|[/b] [url="http://localhost/?p=3#respond"]0 Kommentare »[/url] 

        </div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

                <div id="Taskbar">[url="http://#"][/url]

                danielstools.de :: AREA 51 is powered by

                WordPress| 11 queries. 0.168 seconds.

               </div>

</body>

</html>

CSS-Code

Code:

			/*  

Theme Name:WordPress Theme Vorlage

*/

/* fuer unterschiedliche Kommentare*/

.alt {

        background-color: #f8f8f8;

        border-top: 1px solid #ddd;

        border-bottom: 1px solid #ddd;

        }

/* braucht man immer*/

acronym, abbr, span.caps {

        cursor: help;

        }

a {

outline: none;

}

html {

  background-color: #458AD8 /*#F27A35*/;

  margin:0;

  padding:0;

}

/* Body */

body {

  font:80% Trebuchet MS, Tahoma, sans-serif;

  color:#030303;

  min-width: 41em;

  margin:0;

  padding:0;

}

div#inhalt {

  margin-left: 2em;

  margin-right: 2em;

  min-width: 16em; /* Mindestbreite (der Ueberschrift) verhindert Anzeigefehler in modernen Browsern */

  background-color: white;

}

div#navigation {

  font-size: 0.91em;

  float: left; width: 22em;

  margin-left: 2em;

  padding-left: 1em;

  padding-right: 1em;

  padding-bottom: 1em;

  border: 1px dashed silver;

}

/* Window */

.corner-top-left

{

background-image: url(./images/corner-top-left.png);

background-repeat: no-repeat;

background-position: top left;

background-color: transparent;

width: 100%;

}

.corner-top-right

{

background-image: url(./images/corner-top-right.png);

background-repeat: no-repeat;

background-position: top right;

background-color: transparent;

width: 100%;

}

.corner-bott-left

{

background-image: url(./images/corner_bott_left.png);

background-repeat: no-repeat;

background-position: bottom left;

width: 100%;

}

.corner-bott-right

{

background-image: url(./images/corner_bott_right.png);

background-repeat: no-repeat;

background-position: bottom right;

width: 100%;

}

.line-hor-top

{

background-image: url(./images/line_hor_top.png);

background-repeat: repeat-x;

background-position: top left;

width: 100%;

}

.line-hor-bott

{

background-image: url(./images/line_hor_bott.png);

background-repeat: repeat-x;

background-position: bottom left;

width: 100%;

}

.line-vert-left

{

background-image: url(./images/line_vert_left.png);

background-repeat: repeat-y;

background-position: top left;

width: 100%;

}

.line-vert-right

{

background-image: url(./images/line_vert_right.png);

background-repeat: repeat-y;

background-position: top right;

width: 100%;

}

.content

{

  padding-left: 2em;

  padding-right: 2em;

  padding-bottom: 2em;

  overflow: auto;

max-height: 600px;

}

/* Stats */

div#Stats {}

/* Footer */

div#Taskbar {

clear: both;

background:transparent url(./images/taskbar.png) repeat-x;

width:100%;

line-height:30px;

position:fixed;

bottom:0px;

margin: 0;

}

div#Taskbar a {

float: left;

background-image: url(./images/StartBtn_normal.png);

width: 99px;

height: 30px;

}

#content_container {

    padding-bottom:3em;

}

/* For IE only */

* html, * html body {

    margin:0;

    padding:0;

    height:100%;

    overflow:hidden;

}

* html #content_container {

    padding:0;

    height:95%;

    overflow:auto;

}

* html #Taskbar {

clear: both;

background:transparent url(./images/taskbar.png) repeat-x;

width:100%;

line-height:30px;

position:fixed;

bottom:0px;

margin: 0;

}

* html #Taskbar a {

background-image: url(./images/StartBtn_normal.png);

width: 99px;

height: 30px;

}

Im Anhang die HTML-Datei + CSS + Bilder... :wink: