summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--www/sample2.html81
-rw-r--r--www/static/static.ver2.css245
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;
+}
+