Databases
StackOverflow2013
Postsdbo
POhow to handle two different vertical and horizontal lists
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to handle two different vertical and horizontal lists
    text
    copied!<p>I have made two lists, one is horizontal and the other is vertical, each of them having different look.</p> <p>how do I specify (a:link, a:visited, a:hover,a:active) properties for both of them separately? </p> <p><strong>Top horizontal menu</strong></p> <pre><code> &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="d.css"/&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ul id="topp"&gt; &lt;li class="tl"&gt;&lt;a href="#" class="ta"&gt; Home &lt;/a&gt;&lt;/li&gt; &lt;li class="tl"&gt;&lt;a href="#" class="ta"&gt; New Products &lt;/a&gt;&lt;/li&gt; &lt;li class="tl"&gt;&lt;a href="#" class="ta"&gt; Specials &lt;/a&gt;&lt;/li&gt; &lt;li class="tl"&gt;&lt;a href="#" class="ta"&gt; Contact &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>top horizontal menu css file</p> <pre><code> @charset "utf-8"; /* CSS Document */ #container{ border-style:solid; border-width:thin; background-color:green; height:100%; } .inner{ border-style:solid; border-width:thin; background-color:#0C3; height:600px; width:90%; position:absolute; left:50px; } #head{ background-color:#FF9; height:100px; width:80%; position:absolute; top:0; bottom:550; left:0; right:0; margin:auto; } #topp{ list-style-type:none; margin:0; padding:0; position:absolute; top:100; bottom:550; left:300; right:0; margin:auto; } .ta{ /*Top menu anchor*/ display:block; width:100px; } .tl{ /*top menu list*/ background-color:#3F6; border-style:solid; border-width:thin; float:left; text-align:center; } a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#FF9; color:#000; } </code></pre> <p><strong>Vertical Menu</strong></p> <pre><code> &lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="leftm.css"/&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="arrowgreen"&gt; &lt;ul class="glossymenu"&gt; &lt;li&gt;&lt;a href="#" class="selected" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="new products"&gt;new products&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="specials"&gt;specials&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" title="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>vertical menu css file</strong></p> <pre><code> @charset "utf-8"; /* CSS Document */ .arrowgreen{ width: 180px; /*width of menu*/ border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; } .arrowgreen ul{ list-style-type: none; margin: 0; padding: 0; } .arrowgreen li a{ font: bold 12px Verdana, Arial, Helvetica, sans-serif; display: block; background: transparent url(media/arrowgreen.gif) 100% 0; height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/ padding: 4px 0 4px 10px; line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/ text-decoration: none; } .arrowgreen li a:link, .arrowgreen li a:visited { color: #5E7830; } .arrowgreen li a:hover{ color: #26370A; background-position: 100% -32px; } /*.arrowgreen li a.selected{ color: #26370A; background-position: 100% -64px; } */ </code></pre>
 

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