Databases
StackOverflow2013
Postsdbo
PONavigation menu with CSS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONavigation menu with CSS
    text
    copied!<p>I try to make a simple horizontal navigation menu with html and css2.</p> <p>What is a bit special is, that I want a nice background (image) and also the left and right side of the menu are styled with a background image (rounded corners):</p> <p>( Link 1 | Link 2 | Link 3 )</p> <p>It would be nice if the dividers are also images but for the moment they are second priority for me as I'm already struggling with the corners.</p> <p>I experimented with using 3 or 4 divs where one is the container for the whole bar and the rest are left, center and right div. Setting the background images in the last 3 divs:</p> <pre><code>div.nav { height:39px; line-height:39px; padding:0; margin:0; text-align:center; vertical-align:middle; } div.navLeft { content:&amp;nbsp; background: url('../images/left.png') center left no-repeat; float: left; width:19px; } div.navRight { content:&amp;nbsp; background: url('../images/right.png') center right no-repeat; float: right; width:19px; } div.navCenter { background-image:url('../images/background.png'); background-color:transparent; background-repeat:repeat-x; background-position:center; width:100px; } </code></pre> <p>And the HTML:</p> <pre><code> &lt;div class="nav"&gt; &lt;div class="navLeft"&gt;&lt;/div&gt; &lt;div class="navCenter"&gt;test&lt;/div&gt; &lt;div class="navRight"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>But in the browser this only shows me the navCenter background image, no left and right image backgrounds are visible. I added the 'content:&nbsp;' as I thought maybe the DIVs need some content but nothing improved.</p> <p>Maybe this is the wrong approach and I should use "ul" and "il" tags for the menu but then I don't know where I should place the css for each according background image. For exmaple, can I place the background image for left in the css for the "ul"? But what with the image for the right corner as ul is already in use? Or do I have to use "ul:after" for this?</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