Delphi-PRAXiS

Delphi-PRAXiS (https://www.delphipraxis.net/forum.php)
-   Programmieren allgemein (https://www.delphipraxis.net/40-programmieren-allgemein/)
-   -   [XHTML&CSS] Website im Windows Design - Designproblem (https://www.delphipraxis.net/84734-%5Bxhtml-css%5D-website-im-windows-design-designproblem.html)

Daniel G 20. Jan 2007 21:38
[XHTML&CSS] Website im Windows Design - Designproblem
 
Liste der Anhänge anzeigen (Anzahl: 1)
'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:

chaosben 21. Jan 2007 06:34
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
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.

Daniel G 21. Jan 2007 09:54
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Hi Benjamin,
Zitat:
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. :wink:

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

r2c2 21. Jan 2007 10:26
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Hallo Daniel :hi:

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
Code:
------------------
| Caption
|  --------------
|  |
|  | Content
...
|  |
|  |
|  -------------
------------------
besser
Code:
--------------------
| Caption
--------------------
--------------------
|
|  Content
...
|
|
--------------------
BTW: Es gibt einen schöneren Blindtext: Lorem ipsum

mfg

Christian

Daniel G 21. Jan 2007 10:39
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von r2c2
sondern ein "Schwester-Tag"
Ein was? :gruebel:

Matze 21. Jan 2007 10:48
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
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. :mrgreen:

Daniel G 21. Jan 2007 10:53
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
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... :wink:
Zitat:
Zitat von Matze
Aber dein Code ist mies formatiert. :mrgreen:
Nun ja... :stupid:

r2c2 21. Jan 2007 10:56
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von Daniel G
Zitat:
Zitat von r2c2
sondern ein "Schwester-Tag"
Ein was? :gruebel:
(X)HTML lässt sich, wie XML auch als Baum darstellen:
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

Daniel G 21. Jan 2007 12:47
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Vielleicht sollte ich doch lieber mit Tabellen arbeiten... :?

Matze 21. Jan 2007 13:09
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
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.

Daniel G 21. Jan 2007 13:15
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von 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.
Na ja, 'ne valide Seite hätte schon was. Bin gerade etwas am Basteln...

Matze 21. Jan 2007 13:28
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von Daniel G
Na ja, 'ne valide Seite hätte schon was. Bin gerade etwas am Basteln...
Valide ist sie, da die Tags etc. alles XHTML-konform sind. Nur die Richtlinien (Tabellen nicht für's Layount etc.) hältst du nicht ein, aber der W3C-Validator kann das nicht überprüfen. ;)

Daniel G 21. Jan 2007 13:31
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von Matze
Valide ist sie, da die Tags etc. alles XHTML-konform sind. Nur die Richtlinien (Tabellen nicht für's Layount etc.) hältst du nicht ein, aber der W3C-Validator kann das nicht überprüfen. ;)
Hm, ok, und ich lese gerade, dass Screenreader auch mit den "<th>"-Tags zurecht kommen sollen. Dann wäre das ja geklärt... :mrgreen:

Matze 21. Jan 2007 13:37
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Ein Screenreader muss mit den gängigsten tags zurecht kommen bzw. sollte es. Sonst hätten Sehbehinderte bei 90% aller Seiten Probleme. Und wenn du <label> zur einfacheren Bedienung verwendest, dürfte das kein Problem darstellen.

S2B 21. Jan 2007 13:58
Re: [XHTML&CSS] Website im Windows Design - Designproble
 
Zitat:
Zitat von Daniel G
Hm, ok, und ich lese gerade, dass Screenreader auch mit den "<th>"-Tags zurecht kommen sollen. Dann wäre das ja geklärt... :mrgreen:
Naja, mit dem Tag kommen die Screenreader so oder so aus, da sie Tabellen im eigentlichen Sinne ja beherrschen.

Ich würde auf jeden Fall auch bei einem Tabellenlayout darauf achten, dass du <th> auch wirklich nur für Titel verwendest. Du solltest dich also nicht primär nach dem "Standardaussehen" eines Elements richten (fett und zentriert), sondern nach dem Sinn des Elements. Ich z.B. verwende für Formulare immer diese Tabelle:
Code:
<table class="form">
  <tr>
    <th><label for="blabla">Name</label>:</th>
    <td><input type="text" name="blabla" id="blabla" /></td>
  </tr>
  [...]
</table>
<th> erhält dann meistens ein font-weight: normal und ein text-align: left, sieht also letztendlich genau gleich aus wie das <td>.

Ob das zu 100% semantisch korrekt ist (= dem eigentlichen Sinn der Elemente entspricht), weiß ich nicht, aber es ist auf jeden Fall kein schlechter Code und für mich vollkommen ausreichend und einfach zu handhaben. Abgesehen davon kenne ich auch keine Möglichkeit, mit der man Formulare semantisch korrekter lösen könnte, ohne entscheidende Vorteile meiner Lösung zu verlieren.


Alle Zeitangaben in WEZ +1. Es ist jetzt 21:01 Uhr.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
LinkBacks Enabled by vBSEO © 2011, Crawlability, Inc.
Delphi-PRAXiS (c) 2002 - 2023 by Daniel R. Wolf, 2024 by Thomas Breitkreuz