[XHTML&CSS] Website im Windows Design - Designproblem

'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:

markieren

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

markieren

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...

**chaosben**

Hmmm ... ich weiß immer noch nicht was du wissen willst.
Willst du das Fenster herumziehen könne? Oder geht es nur ums Aussehen?
Falls dich ersteres interessiert, kannst du dir

das (hergestellt von

denen) mal ansehen.

Hi Benjamin,

Zitat von chaosben:

Oder geht es nur ums Aussehen?

Es geht mir in der Tat nur um das Aussehen. Mein Problem ist, dass der Text über die Caption "wegscrollt" und das die Scrollbar die rechte Begrenzung des Fensters verdeckt.

Der Link sieht nett aus, allerdings wollte ich weitesgehend auf Frames & Js verzichten. Trotzdem danke.

**r2c2**

Hallo Daniel

so, wie ich das sehe, liegt das daran, dass du deine divs etwas... ähm... ungewöhnlich verschachtelt hast. Du hast sie alle ineinder verschachtelt. besser wäre es sie - wenigstens teilweise zu trennen. So sollte die "TitleBar" oben nicht das übergeordnete div-Element sein, sondern ein "Schwester-Tag":

statt

markieren

Code:

			------------------

| Caption

|  --------------

|  |

|  | Content

...

|  |

|  |

|  -------------

------------------

besser

markieren

Code:

			--------------------

| Caption

--------------------

--------------------

|

|  Content

...

|

|

--------------------

BTW: Es gibt einen schöneren Blindtext:

Lorem ipsum

mfg

Christian

Zitat von r2c2:

sondern ein "Schwester-Tag"

Ein was?

**Matze**

Außerdem stimmen die Dateinamen der Bilder z.T. nicht mit den im Stylesheet angegebenen überein, weshalb du wahrscheinlich die abgerundeten Ecken oben nicht siehst (- mit _ verwechselt). Aber dein Code ist mies formatiert.

Zitat von Matze:

Außerdem stimmen die Dateinamen der Bilder z.T. nicht mit den im Stylesheet angegebenen überein, weshalb du wahrscheinlich die abgerundeten Ecken oben nicht siehst (- mit _ verwechselt).

Stimmt, die hatte ich herausgenommen und gestern noch "auf die schnelle" wieder eingefügt. Daher der Fehler...

Zitat von Matze:

Aber dein Code ist mies formatiert.

Nun ja...

**r2c2**

Zitat von Daniel G:

Zitat von r2c2:

sondern ein "Schwester-Tag"

Ein was?

(X)HTML lässt sich, wie XML auch als Baum darstellen:

markieren

Code:

			html

 |

 L head

 |  L Title

 |

 L body

    L h1

    | 

    L div

Genauso, wie es bei einem Baum Parents, Children und Siblings gibt, gibts das auch bei (X)HTML...

mfg

Christian

Vielleicht sollte ich doch lieber mit Tabellen arbeiten...

**Matze**

Bevor du dich zu sehr verkuddelst und nachher selbst nicht mehr durchblickt, würde ich auch Tabellen nehmen. Wenn du diese mit CSS kombinierst, dann steigt die Größe der Seite auch nicht merklich an. Die Seite entspricht dann zwar nicht mehr den XHTML-Richtlinien, aber das muss ja auch nicht oberste Priorität haben.

[XHTML&CSS] Website im Windows Design - Designproblem

[XHTML&CSS] Website im Windows Design - Designproblem

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Re: [XHTML&CSS] Website im Windows Design - Designproble

Forumregeln

Daniel G (Gast) n/a Beiträge	#5 Re: [XHTML&CSS] Website im Windows Design - Designproble 21. Jan 2007, 10:39 Zitat von r2c2: sondern ein "Schwester-Tag" Ein was?
	Zitat

Matze (Co-Admin) Registriert seit: 7. Jul 2003 Ort: Schwabenländle 14.929 Beiträge Turbo Delphi für Win32	#6 Re: [XHTML&CSS] Website im Windows Design - Designproble 21. Jan 2007, 10:48 Außerdem stimmen die Dateinamen der Bilder z.T. nicht mit den im Stylesheet angegebenen überein, weshalb du wahrscheinlich die abgerundeten Ecken oben nicht siehst (- mit _ verwechselt). Aber dein Code ist mies formatiert.
	Zitat

Daniel G (Gast) n/a Beiträge	#9 Re: [XHTML&CSS] Website im Windows Design - Designproble 21. Jan 2007, 12:47 Vielleicht sollte ich doch lieber mit Tabellen arbeiten...
	Zitat