Einzelnen Beitrag anzeigen

Daniel G
(Gast)

n/a Beiträge
 
#1

[XHTML&CSS] Website im Windows Design - Designproblem

  Alt 20. Jan 2007, 22:38
'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...
Angehängte Dateien
Dateityp: zip my_desktop_145.zip (15,7 KB, 23x aufgerufen)
  Mit Zitat antworten Zitat