All geek questions in one place

How to emulate window title bar in CSS / HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    <style>
        table {border: 1px solid black; width: 500px}
        .title {height: 40px}
        .close {float: right}
        td {text-align: center; border: 1px solid black} 
    </style>
    </head>

    <body>
     <table>
        <tr>
            <td class="title">  Centered  <span class="close">XXXXX</span>  </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
    </body>
</html>

In this example, “XXXX” does indeed fit to the right, but this causes the text “Centered” to shift slightly to the left. This is because "XXXX" still occupies a place in the document stream next to the text "Centered". How can I get it so that the “centered” is centered exactly like the rest of the table?

heres and rendering example:

rendering http://img43.imageshack.us/img43/9659/screenshoteoo.png

+3
source share
1 answer

If you absolutely position span.close, it will not take up space, and your title should be perfectly centered:

tr td {
  position: relative;
}

tr td span.close {
  position: absolute;
  top: 0;
  right: 0;
}

. , . : relative : , <td> . span.close <div> :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 strict.dtd">

<html>
<head>
    <style>
        table {border: 1px solid black; width: 500px}  

        .title div {
           position: relative; 
           height: 40px; 
         }            

        td {text-align: center; border: 1px solid black}             

        td span.close {
          position: absolute;
          top: 0;
          right: 0;
        }
    </style>
</head>

<body>
     <table>
        <tr>
            <td class="title">  
              <div>Centered  <span class="close">XXXXX</span></div>  
            </td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
        <tr>
            <td>content</td>
        </tr>
    </table>
</body>

+3

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

More articles:


All Articles