diff options
Diffstat (limited to 'zarb-ml/mageia-artwork/attachments/20110310/c0c36804/attachment.html')
| -rw-r--r-- | zarb-ml/mageia-artwork/attachments/20110310/c0c36804/attachment.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/zarb-ml/mageia-artwork/attachments/20110310/c0c36804/attachment.html b/zarb-ml/mageia-artwork/attachments/20110310/c0c36804/attachment.html new file mode 100644 index 000000000..3329639a8 --- /dev/null +++ b/zarb-ml/mageia-artwork/attachments/20110310/c0c36804/attachment.html @@ -0,0 +1,148 @@ +<!-- +Very rough HTML mockup of install graphics, with most basic elements so far. +It may not be exact, neither accurrate. +--> +<!DOCTYPE html> +<html> +<head> + <style> + html, body { background: #888; } + #win { width: 800px; height: 800px; position: relative; background: #f0a0c0; margin: 10px auto; } + #left { + position: absolute; + top: 0; left: 0; + z-index: 0; + height: 600px; + width: 196px; + background: url(perl-install/install/pixmaps/left-background.png) no-repeat; + } + #right { + position: absolute; + top: 0; + left: 196px; + z-index: 0; + height: 600px; + width: 625px; + /* + perl-install/install/pixmaps/perl-install/install/pixmaps/cadre-blanc_600.png + perl-install/install/pixmaps/perl-install/install/pixmaps/cadre-blanc_768.png + perl-install/install/pixmaps/cadre-blanc_600.png + perl-install/install/pixmaps/cadre-blanc_768.png + */ + background: #fff url(perl-install/install/pixmaps/perl-install/install/pixmaps/cadre-blanc_600.png) no-repeat; + } + #win *:hover { outline: 2px solid #f00; } + #right-left-border-top { + position: absolute; + top: 0; + left: 0; + height: 7px; + width: 22px; + background: #0f0; + background: url(perl-install/install/pixmaps/left-top-corner.png) no-repeat; + background: url(perl-install/pixmaps/right-white-background_left_part-1.png) no-repeat; + z-index: 3; + } + #right-left-border { + position: absolute; + top: 7; + left: 0; + height: 586px; + width: 22px; + /* + perl-install/install/pixmaps/right-white-background_left_part_600.png + perl-install/install/pixmaps/right-white-background_left_part_768.png + */ + background: url(perl-install/install/pixmaps/left-border.png) no-repeat; + background: url(perl-install/pixmaps/right-white-background_left_part-2.png) no-repeat; + z-index: 3; + } + #right-left-border-bottom { + position: absolute; + bottom: 0; + left: 0; + height: 7px; + width: 22px; + background: url(perl-install/install/pixmaps/left-bottom-corner.png) no-repeat; + background: url(perl-install/pixmaps/right-white-background_left_part-3.png) no-repeat; + z-index: 3; + } + + #right-right-border { + position: absolute; + right: 0; + top: 0; + display: block; + height: 650px; + width: 30px; + background: url(perl-install/pixmaps/right-white-background_right_part_600.png) no-repeat; + /* + perl-install/install/pixmaps/right-white-background_right_part_768.png + */ + z-index: 4; + } + + #leftm { + color: #ddd; + margin: 140px 0 0 0; + padding: 0; + text-align: right; + font-family: "Bitstream Vera Sans", Helvetica, Arial, sans-serif; + font-size: 90%; + } + #leftm h3 { padding: 0 46px 0 0; margin: 0 0 0.5em 0; color: #55f; font-weight: normal; text-transform: uppercase; } + #leftm ul { margin: 0; padding: 0; } + #leftm li { + margin: 0; + padding: 0 46px 0 0; + list-style: none; + height: 24px; + display: block; + vertical-align: middle; + line-height: 24px; + background: url(perl-install/pixmaps/steps_done.png) no-repeat 160px 9px; + } + #leftm li.off { + background: url(perl-install/pixmaps/steps_off.png) no-repeat 160px 9px; + } + #leftm li.sel { + z-index: 6; + background: url(perl-install/pixmaps/rollover.png) no-repeat; + display: block; + } + #leftm li.sel:after { + content: " "; + position: relative; + top: -42px; + left: 166px; + display: block; + width: 30px; + height: 60px; + z-index: 10; + background: url(perl-install/pixmaps/steps_on.png) no-repeat top right; + } + </style> +</head> +<body> + + <div id="win"> + <div id="left" title="Left panel"> + <div id="leftm"> + <h3>Category</h3> + <ul> + <li>Some</li> + <li>Menu</li> + <li>Items</li> + <li>Step done</li> + <li class="sel">Current step</li> + <li class="off">Next step</li> + <li class="off">Next step</li> + </ul> + </div> + </div> + <div id="right" title="Right panel"> + </div> + </div> + +</body> +</html>
\ No newline at end of file |