开发者

CSS positioning2

i want my blocks to be centered. every time i open a div it lean to the left. the code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="开发者_Python百科text/html; charset=utf-8" />


<title>SGKM</title>

<style type="text/css">



body{
margin:0 auto;
}

    body

    {
        font:13px/22px Arial;
        color:#444;
    }

.container{

}
.container2{
    clear:both;
}

a{

color:#000;

}



    .stage

    {

        height:150px;

        width:200px;

        border:1px solid #f0f0f0;

        background:#fafafa;

        margin:60px auto;

    }



.docIcon {
   background: #eee;

   background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

   border: 1px solid #ccc;
   display: block;
   width: 26px;
   height: 50px;

   float:left;
   text-align:center;
}
.docIcon2 {
   background: #eee;

   background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
   background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);

   border: 1px solid #ccc;
   display: block;
   width: 29px;
   height: 50px;

   float:right;
   text-align:center;
}

.doc3{width: 23px;
   height: 50px;
   float:left;
     border: 1px solid #ccc;
   text-align:center;}


</style>

</head>



<body>


    <div class="stage">
<center><h2>Sahne</h2></center>
    </div>
    <div class="container">
    <a href="#" class="doc3"></a>


<a class="doc3"></a>
<a href="#" class="doc3"></a>


<a href="#" class="docIcon">A<br>24</a>
<a href="#" class="docIcon">A<br>23</a>
<a href="#" class="docIcon">A<br>22</a>
<a href="#" class="docIcon">A<br>21</a>
<a href="#" class="docIcon">A<br>20</a>
<a href="#" class="docIcon">A<br>19</a>
<a href="#" class="docIcon">A<br>18</a>

<a href="#" class="doc3"></a>


<a href="#" class="doc3"></a>

<a href="#" class="docIcon">A<br>17</a>
<a href="#" class="docIcon">A<br>16</a>
<a href="#" class="docIcon">A<br>15</a>
<a href="#" class="docIcon">A<br>14</a>
<a href="#" class="docIcon">A<br>13</a>
<a href="#" class="docIcon">A<br>12</a>
<a href="#" class="docIcon">A<br>11</a>
<a href="#" class="docIcon">A<br>10</a>
<a href="#" class="docIcon">A<br>9</a>
<a href="#" class="docIcon">A<br>8</a>

<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>

<a href="#" class="docIcon">A<br>7</a>
<a href="#" class="docIcon">A<br>6</a>
<a href="#" class="docIcon">A<br>5</a>
<a href="#" class="docIcon">A<br>4</a>
<a href="#" class="docIcon">A<br>3</a>
<a href="#" class="docIcon">A<br>2</a>
<a href="#" class="docIcon">A<br>1</a>

 </div>
    <div class="container2">
    <a href="#" class="docIcon">B<br>27</a>
<a href="#" class="docIcon">B<br>26</a>
<a href="#" class="docIcon">B<br>25</a>
<a href="#" class="docIcon">B<br>24</a>
<a href="#" class="docIcon">B<br>23</a>
<a href="#" class="docIcon">B<br>22</a>
<a href="#" class="docIcon">B<br>21</a>
<a href="#" class="docIcon">B<br>20</a>
<a href="#" class="doc3"></a>


<a href="#" class="doc3"></a>
<a href="#" class="docIcon">B<br>19</a>
<a href="#" class="docIcon">B<br>18</a>
<a href="#" class="docIcon">B<br>17</a>
<a href="#" class="docIcon">B<br>16</a>
<a href="#" class="docIcon">B<br>15</a>
<a href="#" class="docIcon">B<br>14</a>
<a href="#" class="docIcon">B<br>13</a>
<a href="#" class="docIcon">B<br>12</a>
<a href="#" class="docIcon">B<br>11</a>
<a href="#" class="docIcon">B<br>10</a>
<a href="#" class="docIcon">B<br>9</a>
<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
<a href="#" class="docIcon">B<br>8</a>
<a href="#" class="docIcon">B<br>7</a>
<a href="#" class="docIcon">B<br>6</a>
<a href="#" class="docIcon">B<br>5</a>
<a href="#" class="docIcon">B<br>4</a>
<a href="#" class="docIcon">B<br>3</a>
<a href="#" class="docIcon">B<br>2</a>
<a href="#" class="docIcon">B<br>1</a>

 </div>
    <div class="container2">
        <a href="#" class="docIcon">G<br>36</a>
        <a href="#" class="docIcon">G<br>35</a>
        <a href="#" class="docIcon">G<br>34</a>
        <a href="#" class="docIcon">G<br>33</a>
        <a href="#" class="docIcon">G<br>32</a>
        <a href="#" class="docIcon">G<br>31</a>
        <a href="#" class="docIcon">G<br>30</a>
        <a href="#" class="docIcon">G<br>29</a>
        <a href="#" class="docIcon">G<br>28</a>
        <a href="#" class="docIcon">G<br>27</a>
        <a href="#" class="docIcon">G<br>26</a>
<a href="#" class="docIcon">G<br>23</a>
<a href="#" class="docIcon">G<br>22</a>
<a href="#" class="docIcon">G<br>21</a>
<a href="#" class="docIcon">G<br>20</a>
<a href="#" class="docIcon">G<br>19</a>
<a href="#" class="docIcon">G<br>18</a>
    <a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
    <a href="#" class="docIcon">G<br>25</a>

    <a href="#" class="docIcon">G<br>24</a>
<a href="#" class="docIcon">G<br>23</a>
<a href="#" class="docIcon">G<br>22</a>
<a href="#" class="docIcon">G<br>21</a>
<a href="#" class="docIcon">G<br>20</a>
<a href="#" class="docIcon">G<br>19</a>
<a href="#" class="docIcon">G<br>18</a>



<a href="#" class="docIcon">G<br>17</a>
<a href="#" class="docIcon">G<br>16</a>
<a href="#" class="docIcon">G<br>15</a>
<a href="#" class="docIcon">G<br>14</a>
<a href="#" class="docIcon">G<br>13</a>
<a href="#" class="docIcon">G<br>12</a>
<a href="#" class="docIcon">G<br>11</a>
<a href="#" class="doc3"></a>
<a href="#" class="doc3"></a>
<a href="#" class="docIcon">G<br>10</a>
<a href="#" class="docIcon">G<br>9</a>
<a href="#" class="docIcon">G<br>8</a>



<a href="#" class="docIcon">G<br>7</a>
<a href="#" class="docIcon">G<br>6</a>
<a href="#" class="docIcon">G<br>5</a>
<a href="#" class="docIcon">G<br>4</a>
<a href="#" class="docIcon">G<br>3</a>
<a href="#" class="docIcon">G<br>2</a>
<a href="#" class="docIcon">G<br>1</a>



</body>

</html>


If you are talking about your letters/button kindof block, the reason is quite simple :

The all float to the left.

The div you called container then do not have any solid element inside them, thus appearing empty.

Would this snippet partially fix your problem?

.container {margin:0px auto; width:968px;}
.container2 {margin:0px auto;width:700px;}
a {display:inline-block !important;float:none!important;}

Here's what it does :

  1. Give your container element a max width and center according to this width. (issue : the width is not dynamic, so it doesn't react to the number of element in it...
  2. Reset the floating of a elements and define them as inline-block so that the are next to each other, but still block element (with dimension).

Note : I'd advise you to not use this, it's bad code. Rethink your style instead with the information I provided you.


Well not sure if it that what you wanted, also your HTML Code is not very read-friendly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SGKM</title>
    <style type="text/css">
        body {
            margin: 0px;
            font: 13px/22px Arial;
            color: #444;
        }

        a {
            color: #000;
        }

        .stage {
            height: 150px;
            width: 200px;
            border: 1px solid #f0f0f0;
            background: #fafafa;
            margin: 60px auto;
        }

        .docIcon {
            background: #eee;
            background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            border: 1px solid #ccc;
            display: block;
            width: 26px;
            height: 50px;
            float:left;
            text-align:center;
        }

        .docIcon2 {
            background: #eee;
            background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -o-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: -ms-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            background: linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%);
            border: 1px solid #ccc;
            display: block;
            width: 29px;
            height: 50px;
            float: right;
            text-align:center;
        }

        .doc3 { 
            width: 23px;
            height: 50px;
            float:left;
            border: 1px solid #ccc;
            text-align:center;
        }

        .container, .container2 {
            width: 1300px;
            margin: auto;
        }

        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="stage">
        <center><h2>Sahne</h2></center>
    </div>
    <div class="container">
        <a href="#" class="doc3"></a>
        <a class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>24</a>
        <a href="#" class="docIcon">A<br>23</a>
        <a href="#" class="docIcon">A<br>22</a>
        <a href="#" class="docIcon">A<br>21</a>
        <a href="#" class="docIcon">A<br>20</a>
        <a href="#" class="docIcon">A<br>19</a>
        <a href="#" class="docIcon">A<br>18</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>17</a>
        <a href="#" class="docIcon">A<br>16</a>
        <a href="#" class="docIcon">A<br>15</a>
        <a href="#" class="docIcon">A<br>14</a>
        <a href="#" class="docIcon">A<br>13</a>
        <a href="#" class="docIcon">A<br>12</a>
        <a href="#" class="docIcon">A<br>11</a>
        <a href="#" class="docIcon">A<br>10</a>
        <a href="#" class="docIcon">A<br>9</a>
        <a href="#" class="docIcon">A<br>8</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">A<br>7</a>
        <a href="#" class="docIcon">A<br>6</a>
        <a href="#" class="docIcon">A<br>5</a>
        <a href="#" class="docIcon">A<br>4</a>
        <a href="#" class="docIcon">A<br>3</a>
        <a href="#" class="docIcon">A<br>2</a>
        <a href="#" class="docIcon">A<br>1</a>
        <div class="clear"></div>
    </div>

    <div class="container2">
        <a href="#" class="docIcon2">B<br>27</a>
        <a href="#" class="docIcon2">B<br>26</a>
        <a href="#" class="docIcon2">B<br>25</a>
        <a href="#" class="docIcon2">B<br>24</a>
        <a href="#" class="docIcon2">B<br>23</a>
        <a href="#" class="docIcon2">B<br>22</a>
        <a href="#" class="docIcon2">B<br>21</a>
        <a href="#" class="docIcon2">B<br>20</a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2">B<br>19</a>
        <a href="#" class="docIcon2">B<br>18</a>
        <a href="#" class="docIcon2">B<br>17</a>
        <a href="#" class="docIcon2">B<br>16</a>
        <a href="#" class="docIcon2">B<br>15</a>
        <a href="#" class="docIcon2">B<br>14</a>
        <a href="#" class="docIcon2">B<br>13</a>
        <a href="#" class="docIcon2">B<br>12</a>
        <a href="#" class="docIcon2">B<br>11</a>
        <a href="#" class="docIcon2">B<br>10</a>
        <a href="#" class="docIcon2">B<br>9</a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2"></a>
        <a href="#" class="docIcon2">B<br>8</a>
        <a href="#" class="docIcon2">B<br>7</a>
        <a href="#" class="docIcon2">B<br>6</a>
        <a href="#" class="docIcon2">B<br>5</a>
        <a href="#" class="docIcon2">B<br>4</a>
        <a href="#" class="docIcon2">B<br>3</a>
        <a href="#" class="docIcon2">B<br>2</a>
        <a href="#" class="docIcon2">B<br>1</a>
        <div class="clear"></div>
    </div>
    <div class="container2">
        <a href="#" class="docIcon">G<br>36</a>
        <a href="#" class="docIcon">G<br>35</a>
        <a href="#" class="docIcon">G<br>34</a>
        <a href="#" class="docIcon">G<br>33</a>
        <a href="#" class="docIcon">G<br>32</a>
        <a href="#" class="docIcon">G<br>31</a>
        <a href="#" class="docIcon">G<br>30</a>
        <a href="#" class="docIcon">G<br>29</a>
        <a href="#" class="docIcon">G<br>28</a>
        <a href="#" class="docIcon">G<br>27</a>
        <a href="#" class="docIcon">G<br>26</a>
        <a href="#" class="docIcon">G<br>23</a>
        <a href="#" class="docIcon">G<br>22</a>
        <a href="#" class="docIcon">G<br>21</a>
        <a href="#" class="docIcon">G<br>20</a>
        <a href="#" class="docIcon">G<br>19</a>
        <a href="#" class="docIcon">G<br>18</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">G<br>25</a>
        <a href="#" class="docIcon">G<br>24</a>
        <a href="#" class="docIcon">G<br>23</a>
        <a href="#" class="docIcon">G<br>22</a>
        <a href="#" class="docIcon">G<br>21</a>
        <a href="#" class="docIcon">G<br>20</a>
        <a href="#" class="docIcon">G<br>19</a>
        <a href="#" class="docIcon">G<br>18</a>
        <a href="#" class="docIcon">G<br>17</a>
        <a href="#" class="docIcon">G<br>16</a>
        <a href="#" class="docIcon">G<br>15</a>
        <a href="#" class="docIcon">G<br>14</a>
        <a href="#" class="docIcon">G<br>13</a>
        <a href="#" class="docIcon">G<br>12</a>
        <a href="#" class="docIcon">G<br>11</a>
        <a href="#" class="doc3"></a>
        <a href="#" class="doc3"></a>
        <a href="#" class="docIcon">G<br>10</a>
        <a href="#" class="docIcon">G<br>9</a>
        <a href="#" class="docIcon">G<br>8</a>
        <a href="#" class="docIcon">G<br>7</a>
        <a href="#" class="docIcon">G<br>6</a>
        <a href="#" class="docIcon">G<br>5</a>
        <a href="#" class="docIcon">G<br>4</a>
        <a href="#" class="docIcon">G<br>3</a>
        <a href="#" class="docIcon">G<br>2</a>
        <a href="#" class="docIcon">G<br>1</a>
        <div class="clear"></div>
    </div>
</body>
</html>

If you want to have the Buttons floated to the left assign the correct class. If you want the content to be centered then set a width for your containers, also your second container2 was not closing. Here you go :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜