Databases
StackOverflow2013
Postsdbo
POhelp in Vertical CSS Menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POhelp in Vertical CSS Menu
    text
    copied!<p>What I'm trying to do to design a vertical CSS menu like this one . <a href="http://blog.fluxiom.com/" rel="nofollow noreferrer">on the right of this site</a><br> <img src="https://i.stack.imgur.com/hXVCa.jpg" alt="alt text"></p> <p>. I've two problems . </p> <ol> <li><p>How can I add an image in the menu item .</p></li> <li><p>How can I MAKE the BORDER RADIUS of all the item on the top and on the bottom <strong>NOT for each one</strong> .</p></li> </ol> <p>That's my code</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS3 Buttons&lt;/title&gt; &lt;style&gt; .button { width: 400px; height: 100px; line-height: 100px; color: #C0C0C0; text-decoration: none; font-size: 50px; font-family: helvetica, arial; font-weight: bold; display: block; text-align: center; position: relative; padding-bottom:1px; /* BACKGROUND GRADIENTS */ background: #F5F3F4; /* BORDER RADIUS */ /* -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; */ /* TEXT SHADOW */ text-shadow: 1px 1px 1px black; /* BOX SHADOW */ -moz-box-shadow: 0 1px 3px black; -webkit-box-shadow: 0 1px 3px black; box-shadow: 0 1px 3px black; } /* WHILE HOVERED */ .button:hover { color: #A8A8A8; -moz-box-shadow: 0 2px 6px black; -webkit-box-shadow: 0 2px 6px black; } /* WHILE BEING CLICKED */ .button:active { -moz-box-shadow: 0 2px 6px black; -webkit-box-shadow: 0 2px 6px black; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="#" class="button"&gt; Profile &lt;/a&gt; &lt;a href="#" class="button"&gt; Privacy &lt;/a&gt; &lt;a href="#" class="button"&gt; Services &lt;/a&gt; &lt;a href="#" class="button"&gt; Avatar &lt;/a&gt; &lt;a href="#" class="button"&gt; Language &lt;/a&gt; &lt;/body&gt; &lt;/html&gt; </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