All geek questions in one place

Three column <DIV> navigation bar based on the center width of the <DIV>

What I'm trying to accomplish is a center-aligned navigation bar padded on both sides with a left and right padding div.

Currently, the navigation bar is a built-in div block containing my tags for links and a left and right transition image that will bring up the background of the navigation bar to take up the remaining space.

Normally, I would center the navigation bar in a 100% div and use this wide div as a background, but since I use translucent .png files, I cannot overlap this way.

Layout I would like:

Image of a layout showing three DIVs http://i28.tinypic.com/3451y6c.png (Click on the image to view it in full size.)

I updated this question to include an actual image of what I'm working with. Currently, I have set three <div>(technically, center <UL>) to fixed widths, but I would like to add the flexibility of adding / removing links, and it will expand and contract <div>accordingly. As I said earlier, I cannot center align the center links and overlap them in the background, because I use translucent .pngimage files .

+3
source share
2 answers

: <div>. , , auto, , ( , ).

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #header-nav {
        width: 100%;
      }

      #header-nav-items {
        margin: 0 auto; /* auto centers */
      }

      #header-nav-items a {
        display: block;
        width: 200px;
        text-align: center;
        background: #f00;
      }
    </style>
  </head>
  <body>
    <div id="header-nav">
      <div id="header-nav-items">
        <a href="#">We are centered!</a>
      </div>
    </div>
  </body>
</html>
+1

, , . , 0. , , .

- - ?

0

Source: https://habr.com/ru/post/1757437/

More articles:


All Articles