diff options
author | Mika Havela <mika.havela@gmail.com> | 2008-01-02 16:30:25 +0000 |
---|---|---|
committer | Mika Havela <mika.havela@gmail.com> | 2008-01-02 16:30:25 +0000 |
commit | 5db30ebb5b2f5d4fccfd539743b17c3dc4b42e22 (patch) | |
tree | 3c41a20581c75417cbd185352a9a277b8eb8376e | |
parent | 58a39e262919d32e73a4568bcf04d2b1ffbc7003 (diff) | |
download | acf-core-5db30ebb5b2f5d4fccfd539743b17c3dc4b42e22.tar.bz2 acf-core-5db30ebb5b2f5d4fccfd539743b17c3dc4b42e22.tar.xz |
Saving work for today
git-svn-id: svn://svn.alpinelinux.org/acf/core/trunk@482 ab2d0c66-481e-0410-8bed-d214d4d58bed
-rw-r--r-- | www/sample2.html | 81 | ||||
-rw-r--r-- | www/static/static.ver2.css | 245 |
2 files changed, 270 insertions, 56 deletions
diff --git a/www/sample2.html b/www/sample2.html index af95caf..9ad0f0e 100644 --- a/www/sample2.html +++ b/www/sample2.html @@ -3,7 +3,7 @@ <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Alpine</title> -<link rel="stylesheet" type="text/css" href="snow/snow.css"> +<link rel="stylesheet" type="text/css" href="static/static.ver2.css"> </head> @@ -13,25 +13,28 @@ <a href="#Content" class="hide">[Skip to main content]</a> </div> <h1>AlpineLinux</h1> - This is plain old Head div text (but I don't know what it's for) + <p>This is plain old Head div text (but I don't know what it's for)</p> <div class="tailer"> - [ this is header-tailer div text <a href="#Content">Goto content</a>] + <p class="hide">[ this is header-tailer div text <a href="#Content">Goto content</a>]</p> </div> -</div> +</div> <!-- header --> <div id="main"> <div class="leader"> +<!-- ((header.leader)) --> </div> <div id="nav"> <div class="leader"> +<!-- ((header.nav.leader))--> </div> +<!-- ((header.nav)) --> <ul> <li>Networking <ul> <li><a href="">Interfaces</a></li> - <li><a href="">Firewall</a></li> + <li class="selected"><a href="">Firewall</a></li> <li><a href="">BGP</a></li> <li><a href="">DHCP Server</a></li> <li><a href="">Ipsec VPN</a></li> @@ -55,25 +58,35 @@ </ul> </li> </ul> - <div class="tailer"> + ((header.tailer)) <h2>Networking : Interfaces</h2> <p>[ welcome ] > [ login ] > [ bgp ] > [ firewall ] > [ content filter ] > [ interfaces ]</p> </div> - </div> - + </div> <!-- nav --> +<!-- +Moved this inside <DIV ID=main><DIV ID=nav><DIV CLASS=tailer> + <div class="postnav"> + <h2>Networking : Interfaces</h2> + <p>[ welcome ] > [ login ] > [ bgp ] > [ firewall ] > [ content filter ] > [ interfaces ]</p> + </div> +--> <a name="Content"></a> <div id="subnav"> <div class="leader"> + ((main.subnav.leader)) </div> <a href="">Nav 1</a> <a href="" class="selected">Nav 2</a> <a href="">Nav 3</a> <div class="tailer"> + ((main.subnav.tailer)) </div> </div> + + <div id="content"> <div class="leader"> </div> @@ -92,54 +105,10 @@ Next line content Title3 (p) area. </p> - -<h1>Errors</h1> -<p class="error">This is error text. As if you didn't know that. Just check the errors below.</p> -<p class="hide">This is some plain content level hide text</p> -<p>This is a page with a <a href="foo">link</a> in it.</p> - -<h1>Networking - Status</h1> -<p>This is the networking page. This is a very long paragraph in that page, talking about -all the good things on this page. This is not the real page, its just a standin page for -the page you want. Evenutally, you'll see the page you want. But not quite yet.</p> - -<h2>Status</h2> -<p>The service is running</p> -<form> -<dl> -<dt>bozo</dt> -<dd><input class=error type=text value="Baz" name=bozo size=3>This is error text</dd> - -<dt>foo</dt><dd> -<input type=text value="foo" name=foo size=40> -</dd> - -<dt>Command</dt> -<dd> -<input type=submit value="Start" name="cmd"> -<input type=submit value="Stop" name="cmd"> -<input type=submit value="Restart" name="cmd"> -</dd> - -<dt>Textbox</dt> -<dd><textarea name="textbox">fooo</textarea> -</dd> - - -<dt>A Tag with no form element</dt> -<dd>This is just some text</dd> - -</dl> -</form> - -<h2>Configure</h2> -<p>Bring Service Down</p> -<p>Bring Service Up</p> - <div class="tailer"> </div> - </div> + </div> <!-- content --> <div id="footer"> <div class="leader"> @@ -147,12 +116,12 @@ the page you want. Evenutally, you'll see the page you want. But not quite yet Made with care by webconf <div class="tailer"> </div> - </div> + </div> <!-- footer --> <div class="tailer"> - </div> + </div> <!-- tailer --> -</div> +</div> <!-- main --> </body> </html> diff --git a/www/static/static.ver2.css b/www/static/static.ver2.css new file mode 100644 index 0000000..6821e04 --- /dev/null +++ b/www/static/static.ver2.css @@ -0,0 +1,245 @@ +/* .css - Alpine ACF */ + +/* DEBUG INFORMATION + "#wrapper input" makes things red and ugly. This is to search for things that needs to be added/removed in this css. + If you find that some button/input turns red, pleace see what needs to be changed in your code or in this css. + When using the html.form[]() to create inputs/buttons/fields then everything should work just fine. + When manually wringing a <input... or something like that, see if you need to add class='whatever' or something like it. +*/ + +#content input { /* DEBUG: Search for uncategorized buttons/inputs */ + background: red; +} +.leader { + border: 0px solid yellow; +} + +.tailer { + border: 0px solid magenta; +} + +.hide { + display: none; + } + +a { + text-decoration:none; + color: #072966; +} +a:visited { + color: #072966; +} +a:hover { + color: red; +} +input { + border: 1px solid #ccc; +} +hr { + background-color: #ff9933; + height: 3px; +} +.error { + height: 0px; + font-size: 11pt; + font-weight: bold; + color: #f33; +} +/* Positioning DIV's */ +body { + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; + font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif, Verdana, "Trebuchet MS", SunSans-Regular; +} + +#header { + width: 770px; + height: 75px; + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; +} + +#main { + left: 0px; + top: 0px; + width: 770px; + padding: 0px 0px 0px 0px; + margin: 11px 0px 0px 0px; + background: green; +} +#nav { + width: 180px; + margin: 0px 0px 0px 0px; + background: white; + /*background: blue; */ +} +#subnav { + position: absolute; + top: 100px; + right: 0px; + width: 770px; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + xxbackground: blue; +} +#content { + position: absolute; + top: 200px; + left: 200px; + width: 560px; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; + background: yellow; +} + +/*---------------------------------------------------------------------------------- + * Header, Logotypes and icons + *---------------------------------------------------------------------------------- + */ +#header { + background-image: url(alpine.jpg); + background-repeat: repeat-x; + border: 1px solid #ddd; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; +} +#header .tailer { + background-image: url(shadow-top.png); + background-repeat: repeat-x; + height: 10px; + margin: 10px 0px 0px 0px; + padding: 0px 0px 0px 0px; +} + +#header h1 { + font-size: 40px; + padding: 0px 0px 0px 10px; + margin: 0px 0px 0px 0px; +} +#header p { + text-align: left; + color: #777; + font-size: 12px; + padding: 3px 0px 0px 10px; + margin: 0px 0px 0px 0px; +} + +/*---------------------------------------------------------------------------------- + * navigation + *---------------------------------------------------------------------------------- + */ +#nav { /* 'nav' is only the main menu */ + padding: 0px 10px 0px 0px; + background-image: url(shadow-side.png); + background-repeat: repeat-y; + background-position: right; +} +#nav ul { + list-style-type: none; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; +} +#nav ul li { + color: white; + font-size: 16px; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + background: #6688AA; + padding: 0px 0px 0px 0px; + margin: 0px 0px 0px 0px; +} +#nav ul li ul { + padding: 5px 0px 0px 0px; + margin: 0px 0px 0px 0px; +} +#nav ul li ul li { + font-weight: normal; + font-size: 10pt; + height: 21px; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid #cacaca; + border-top: 1px solid #ccc; + background-image: url(menu_item.png); +} +#nav ul li ul li.selected { + background: yellow; +} +#nav ul li ul li a { + display: block; + height: 21px; + padding: 2px 0px 0px 5px; +} +#nav ul li ul li a:hover { + background-image: url(menu_item_hover.png); +} +#nav ul li ul li.selected a:hover { + background-image: none; +} + + + +# ul li ul li a { + height: 21px; + text-decoration: none; + font-size: 14px; +/* font-weight: bold; */ + white-space: nowrap; + overflow: hidden; + background: white; + padding-top: -10px; + margin-right: -10px; +} + + +#xnav li { + padding-right: 10px; + margin-right: 10px; + border-left: 1px solid #ddd; +} +#xnav ul li.menuitem { + height: 21px; + text-decoration: none; + white-space: nowrap; + overflow: hidden; + border-bottom: 1px solid #cacaca; + border-top: 1px solid #ccc; + background-image: url(menu_item.png); +} +#xnav ul li.last { + background-image: url(shadow-top.png); + background-repeat: repeat-x; + padding-bottom: 5px; +} +#xnav ul li a { + display: block; + height: 21px; + padding: 3px 0px 0px 5px; +} +#xnav ul li.menuitem a:hover { + color: #5c7b99; + color: black; + height: 21px; + padding-right: -10px; + margin-right: -10px; + background-image: url(menu_item_hover.png); +} +#xnav ul li.current a:hover { + text-decoration: underline; +} +#xnav .current a { + color: red; +} +#xnav li.current, #nav li.current a { /* active item */ + height: 21px; + text-decoration: none; + font-size: 14px; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + background: white; + padding-right: -10px; + margin-right: -10px; +} + |