Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is what I have settled on. I may add some underscores between the links and the explanations, but I think I now have the basis for a great, embedded CSS link menu page for browser use. Here is the result:</p> <p><a href="http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/" rel="nofollow">http://jsfiddle.net/wreckanoid/zV9Sd/embedded/result/</a></p> <p>Here is the code:</p> <p><a href="http://jsfiddle.net/wreckanoid/zV9Sd/" rel="nofollow">http://jsfiddle.net/wreckanoid/zV9Sd/</a></p> <pre><code>.wrapper { position:relative; background-color: #e7ecfa; width: 90%; margin-left:15%; margin-right:15%; height:auto; display: block; overflow:auto; border:inset .5em #ccffff; margin: 1em auto; box-shadow: 0 0.3em 1em #000000; } .div_body_side1 { float: LEFT; position:relative; text-align: left; /* border: solid 1px #d1d7e5; */ width: 45%; display: block; margin-left: 2.5em; margin-right: 1em; margin-top: 2em; margin-bottom: 2em; padding: .5em; white-space:normal; clear:none; } .div_body_side2 { clear:none; float:left; position:reative; text-align: left; /* border: solid 1px #d1d7e5; */ width: 45%; display:inline; margin-right: 1em; margin-top: 2em; margin-bottom: 2em; padding: .5em; } #div_category01, #div_category02, #div_category03, #div_category04, #div_category05, #div_category06, #div_category07, #div_category08, #div_category09 { background-color: #eff5fb; margin: 1em 1em; width: auto; display: block; border:ridge 6px #ff3333; box-shadow: 0 0.3em 1em #000000; position:relative; clear:both; } .center { text-align: center; } .right { float: right; padding-right: 20px; color: #cc6600; } body { margin:0; padding:0; } h1 { text-align: center; } h2 { text-align: center; } img.center { display: block; margin: 0 auto; } a { color: blue; padding-left: 20px; } </code></pre> <p>Here is the HTML:</p> <pre><code>&lt;/head&gt; &lt;body&gt; &lt;div class="wrapper"&gt; &lt;H1&gt; Test Bookmarks Menu&lt;/H1&gt; &lt;a href="http://www.qut.edu.au" &gt; &lt;IMG SRC="http://www.tils.qut.edu.au/graphics/logo.gif" BORDER="4" title="QUT logo" alt="QUT logo" class="center" /&gt;&lt;/a&gt; &lt;div class="div_body_side1"&gt; &lt;div id="div_category01"&gt; &lt;H2&gt;CATEGORY 1 HEADER&lt;/H2&gt; &lt;br&gt; &lt;a href="https://www.google.com.au/" &gt; Google Australia &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Australia &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.google.com/ncr" &gt; Google USA &lt;/a&gt; &lt;span class="right"&gt; Google Secure, USA &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://encrypted.google.com/" &gt; Google Encrypted &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Encrypted &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.google.com.au/" &gt; Google Australia &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Australia &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;/div&gt;&lt;!-- close category01 --&gt; &lt;/div&gt;&lt;!-- close div_body_side1 --&gt; &lt;div class="div_body_side2"&gt; &lt;div id="div_category05"&gt; &lt;H2&gt;Category 5 Header &lt;/H2&gt; &lt;a href="https://www.google.com.au/" &gt; Google Australia &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Australia &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.google.com/ncr" &gt; Google USA &lt;/a&gt; &lt;span class="right"&gt; Google Secure, USA &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://encrypted.google.com/" &gt; Google Encrypted &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Encrypted &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;a href="https://www.google.com.au/" &gt; Google Australia &lt;/a&gt; &lt;span class="right"&gt; Google Secure, Australia &lt;/span&gt;&lt;br&gt;&lt;br&gt; &lt;/div&gt;&lt;!-- close category05 --&gt; &lt;/div&gt;&lt;!-- close div_body_side2 --&gt; </code></pre> <p></p> <p></p> <p>Thanks to all you people I feel I'm now getting a grip on this CSS stuff.. ! :-)</p> <p>I will be adding the 'title' tag to all the links, too. Cheers.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload