ich will nen div-container wie ein fenster bei win2000 aussehen lassen, weiß aber nicht wie ich den rahmen korrekt darstellen kann…
kann mir da jemand nen tipp geben?? danke!
[code]
testTest
Eine Test-Zeile zum testen...
Und noch eine.
cssprofi.bplaced.net/index.html?luna
Einfach in den Quelltext schauen (CSS-Datei kann per Link angezeigt werden) und nachbauen - für Win2k brauchst Du nur andere Grafiken.
yeah das is ne coole sache, werde da sicher öfter mal reinschnuppern…is das deins?
aber mir gehts nicht um das gesamte ding (is alles kein problem für mich) sondern nur um den rahmen:
das ding bereitet mir so richtig kopfzerbrechen 
Ja, das ist meine Seite… allerdings länger nicht mehr gepflegt 
(bin z.Z. anderweitig gut ausgelastet).
Was den Rahmen angeht:
border:3px ridge silver;sollte reichen
igitt nein das geht gar nicht 
zum direkten vergleich…
original: 
fälschung: 
6 pixel, 4 verschiedene farben 
im moment spiel ich noch mit dem gedanken mehrere container zu verschachteln die alle ne andere rahmenfarbe haben, aber das erscheint mir viel zu umständlich und an den ecken wirds auch nicht wirklich gut aussehen
habs auch mal versucht mit grafiken:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Windows</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
body, html {
font-size:12px;
font-family:monospace;
}
.b { font-weight:bold }
.i { font-style:italic }
.u { text-decoration:underline }
.s { text-decoration:line-through }
div.window {
width:500px;
height:500px;
}
div.bottom { height:6px; }
div.edge_left_bottom {
height:6px;
width:6px;
float:left;
background-image:url('border/edge_left_bottom.png');
background-repeat:no-repeat;
}
div.edge_right_bottom {
height:6px;
width:6px;
float:right;
background-image:url('border/edge_right_bottom.png');
background-repeat:no-repeat;
}
div.border_bottom {
height:6px;
background-image:url('border/horizontal.png');
background-repeat:x-repeat;
}
div.middle {
height:464px;
}
div.border_left {
width:6px;
height:464px;
float:left;
background-image:url('border/vertical.png');
background-repeat:y-repeat;
}
div.border_right {
width:6px;
height:464px;
float:right;
background-image:url('border/vertical.png');
background-repeat:y-repeat;
}
div.top {
height:30px;
background-color:#EEEEEE;
}
</style>
</head>
<body>
<div class="window">
<div class="top">
<div class="edge_left_top"></div>
<div class="edge_right_top"></div>
<div class="title">Eigene Dateien</div>
</div>
<div class="middle">
<div class="border_left"></div>
<div class="border_right"></div>
<div class="content"></div>
</div>
<div class="bottom">
<div class="edge_left_bottom"></div>
<div class="edge_right_bottom"></div>
<div class="border_bottom"></div>
</div>
</div>
</body>
</html>Im FF3 klappt das ganz gut, konnte aber leider die Titelleiste nicht einfügen, da ich keinen passenden Screenshot hatte.
mfg Balmung
ok grafiken wollte ich zwar nicht aber scheint der einzig sinnvolle weg zu sein…
vielen dank für die mühe, wird morgen gleich umgesetzt!
mfg
HAst du für deine Fenster irgendwie das Silber-layout? oder hast du die alte win9x Fenster eingestellt? weil so wie ich das sehe hat der Standard XP Theme ja blaue Ränder :<
Magste mir vll auch mal nen PNG-Screenshot vom Titelfenster machen? (hab hier atm leider nur Debian Linux ^^")
Würde das gerne zu Ende bringen. 
[size=85]Edit: und vll auch verraten wie die Schriftarten und -größen eingestellt sind (irgendwo kann man das nachschauen), damit man das für Windows Besucher wenigstens perfekt anpassen kann :3[/size]
mfg Balmung
uno momento…hast glück das ich seit nen paar minuten wach bin, sonst hätte das gedauert bis abends um 7 
halb so wild
bin eh erst um halb acht heut abend wieder zuhause xD
(lästiger 12 Stunden tag, wegen viel zu langem heimweg… ist aber gottseidank nur ein praktikum und bald wieder vorbei :3)
Edit: ich glaube für die Schrift nutzt Windows “Tahoma” oder so… bin mir aber nicht sicher 
zum style: das is der klassische, also 9x
die titelleiste ohne farbübergang:
http://mawek.bplaced.net/titel1.png
mit farbübergang:
http://mawek.bplaced.net/titel2.png
Ich bedanke mich, werde aber wie gesagt erst heut abend wahrscheinlich dazu kommen das zu bearbeiten
Mal sehen, vielleicht ist ja in der Zwischenzeit jemand schneller als ich.
mfg Balmung
kein problem…viel spaß noch
Falls ihr die genauen Farbwerte haben wollt:
Die blaue Leiste:
#QA246A bzw. RGB(10,36,106)
Das Grau:
#D4D0C8 bzw. RGB(212,208,200)
Die Schrift sieht mir eher nach Times New Roman oder Arial aus. Tahoma bezweifle ich 
MfG
myPages
Arial würd ich noch durchgehen lassen, aber wie kommste auf Times New Roman?
Die verwendete Schriftart ist eine sans-serif schriftart, und Times New Roman gehört definitv nicht dazu.
“Trebuchet MS” - Größe 10 müsste es für den XP-Titel sein.
“Tahoma” - Größe 8, ist es für den 9x-Titel. <-- den müssen wir nehmen, da der von mir erstellte Rahmen zum 9x-Fenster gehört
Arial ist gar nicht so gängig im Windows System.
EDIT:
Hier mal in PHP geschrieben, ein kleiner Generator, der die 9x Titelleiste erstellt:
[code]<?php
unset($ret);
if(isset($_GET[‘w’])){
$width = intval($_GET[‘w’]);
}else{
die();
}
//hauptbild
$img = imagecreatetruecolor($width, 18);
$fontfile = “./tahomabd.ttf”;
$text = “Eigene Dateien”;
if(isset($_GET[‘t’])){
$text = $_GET[‘t’];
}
//standard Title Textfarbe
$r = hexdec(‘ff’);
$g = hexdec(‘ff’);
$b = hexdec(‘ff’);
if(isset($_GET[‘tc’])){
$tc = $_GET[‘tc’];
if(preg_match(’/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/’, $tc, $ret)){
$r = hexdec($ret[1]);
$g = hexdec($ret[2]);
$b = hexdec($ret[3]);
}
}
$textcol = ImageColorAllocate($img, $r, $g, $b);
//Farbverlauf erste farbe
$r1 = hexdec(‘0a’);
$g1 = hexdec(‘24’);
$b1 = hexdec(‘6a’);
if(isset($_GET[‘c1’])){
$c1 = $_GET[‘c1’];
if(preg_match(’/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/’, $c1, $ret)){
$r1 = hexdec($ret[1]);
$g1 = hexdec($ret[2]);
$b1 = hexdec($ret[3]);
}
}
$c1 = ImageColorAllocate($img, $r1, $g1, $b1);
//Farbverlauf zweite farbe
$r2 = hexdec(‘a6’);
$g2 = hexdec(‘ca’);
$b2 = hexdec(‘F0’);
if(isset($_GET[‘c2’])){
$c2 = $_GET[‘c2’];
if(preg_match(’/^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/’, $c2, $ret)){
$r2 = hexdec($ret[1]);
$g2 = hexdec($ret[2]);
$b2 = hexdec($ret[3]);
}
}
$c2 = ImageColorAllocate($img, $r2, $g2, $b2);
//farbverlauf
$verlauf = imagecreatetruecolor($width, 1);
for($x=0; $x<$width; $x++){
$rcol = $r1 - round(($r1 - $r2) / 100 * ($x * 100 / $width), 0);
$gcol = $g1 - round(($g1 - $g2) / 100 * ($x * 100 / $width), 0);
$bcol = $b1 - round(($b1 - $b2) / 100 * ($x * 100 / $width), 0);
$col = ImageColorAllocate($img, $rcol, $gcol, $bcol);
imagesetpixel($verlauf, $x, 0, $col);
}
//verlauf vergrößert in unser hauptbild kopieren
imagecopyresized($img, $verlauf, 0, 0, 0, 0, $width, 18, $width, 1);
//text mit schriftart einfügen
imagettftext ($img, 8, 0, 2, 13, $textcol, $fontfile, $text);
//ausgabe
header(“Content-Type: image/png”);
imagepng($img);
imagedestroy($img);
imagedestroy($verlauf);
die();
?>[/code]
Wichtig ist, wenn ihr das auf bplaced nutzen wollt, müsst ihr die “tahomabd.ttf” Datei aus eurem Windows/Fonts Ordner kopieren, und in das selbe Verzeichniss hochladen, in das ihr dieses Script gespeichert habt.
EDIT:
Weil ich bei der Arbeit nicht Antworten konnte hier noch mal paar infos.
Speichert ihr das Script in z.B. der Datei titel.php, könnt ihr folgende Angaben treffen:
titel.php?w=breite&t=text&tc=textfarbe&c1=farbe1&c2=farbe2
Alle Farben werden in sechsstelliger Hexadezimaler Schreibweise angegeben.
Alle Angaben außer die Breite (w) sind optional. Standardwerte für Breite ist 100px und Standardtext ist “Eigene Dateien”.
Die Farben sind die Standardfarben, wie sie bei Windowsklassik vorgegeben sind.
das bild in eine HTML-Seite einbinden ist ganz easy:
<img src="titel.php?w=500" alt="Windows Titel" />
oder CSS:
background-image:url('titel.php?w=500');mfg Balmung
UND nocheinmal…
Ich hab das ganze jetzt mal umgestaltet, und ohne Grafiken erstellt.
sind alles mehrere Divs, mit unterschiedlichen Rahmenfarben. Es haut mit den ecken nicht immmer ganz hin, aber das Ergebniss ist eigentlich recht zufriedenstellend.
Die einzige Grafik ist die Titelleiste, welche mit meinem Script über diesem Post erstellt wird.
[code]
Windowsbody, html {
font-size:12px;
font-family:Verdana,sans-serif;
}
.b { font-weight:bold }
.i { font-style:italic }
.u { text-decoration:underline }
.s { text-decoration:line-through }
div.window {
width:500px;
/height:500px;/
}
div.title {
height:18px;
background-image:url(‘win9x.php?w=492’);
}
div.menu1, div.menu2 {
height:51px;
}
div.menu1 {
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
}
div.menu2 {
border-left:1px solid #808080;
border-top:1px solid #808080;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
div.menu {
height:19px;
border-bottom:1px solid #808080;
background-color:#d4d0c8;
}
div.symbol {
height:30px;
border-top:1px solid #ffffff;
background-color:#d4d0c8;
}
div.bord1 {
border-left:2px solid #d4d0c8;
border-top:2px solid #d4d0c8;
border-right:2px solid #d4d0c8;
border-bottom:2px solid #d4d0c8;
}
div.bord2 {
border-left:1px solid #ffffff;
border-top:1px solid #ffffff;
border-right:1px solid #808080;
border-bottom:1px solid #808080;
}
div.bord3 {
border-left:1px solid #d4d0c8;
border-top:1px solid #d4d0c8;
border-right:1px solid #404040;
border-bottom:1px solid #404040;
}
div.body1 {
border-left:1px solid #404040;
border-top:1px solid #404040;
border-right:1px solid #d4d0c8;
border-bottom:1px solid #d4d0c8;
}
div.body2 {
border-left:1px solid #808080;
border-top:1px solid #808080;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}
div.content {
height:300px;
}
Hallo Welt
Getestet: FF3, IE7
mfg Balmung
