28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un bout de code avec une liste à puce UL et un DIV, que je veux juste contraindre a ce positionner sur la même ligne sans passage a la ligne du deuxieme element lorsque l'on rapetisse la fenetre du navigateur dans la largeur ...

cela me semble assez simple ... mais je n'arrive pas les contraindre a rester sur la meme ligne

J'ai rajouté un div englobant avec white-space : nowrap; et cela ne fonctionne pas ...

voici mon code ... je ne sais plus quoi faire :


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

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

<head>
  <title></title>
  <style type="text/css">
    .container{
      border: 1px solid;
      background-color: pink;
      white-space: nowrap;
    }

    <!-- Style pour la liste des puces -->
    ul{
        float: left;
        list-style : none;
        margin: 2px;
        padding: 2px;
	    color: blue;
        border : 1px solid;
     }

    .outer {
      float: left;
      background-color: yellow;
      position:relative;
      padding:4em 0 3em 0;
      background: gray;
      margin:0 auto 3em auto;
    }
    .innera {
      overflow:auto;
      height:9.6em;
      background:blue;
    }
    .outer thead tr {
      position:absolute;
      top:1.5em;
      height:1.5em;
      left:0;
      white-space: nowrap;
    }
    .outer tfoot td {
      position:absolute;
      text-align:center;
      background:#f0c992;
      border:0.1em solid #000;
      color:#000;
      bottom:0;
      left:0
            white-space: nowrap;
    }
    .outer th, .outer td {

      text-align:left;
            white-space: nowrap;
    }
    .outer th {
      background:#724a10;
      color:#fff;
    }
    .outer .dk {
      background:#fff;
    }
  </style>
</head>

<body>

<div class="container">
                          kfgjklelgklrejhklgjr<br>
                          flkdgmkfdm
                <ul>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                        <li>test bidule</li>
                </ul>





                <div class="outer">
                <div class="innera">
                    <table>
                      <thead>
                        <tr>
                          <th>FLIGHT CODE</th>
                          <th>FROM</th>
                          <th>STA</th>
                          <th>ETA</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                          <th>Notes</th>
                        </tr>
                      </thead>
                      <tfoot>
                        <tr>
                          <td colspan="26">DATE : 19th OCTOBER 2005</td>
                        </tr>
                      </tfoot>
                      <tbody>
                      <tr>
                        <th scope="row">T3 4264</th>
                        <td>ISLE OF MAN</td>
                        <td>11:40</td>
                        <td>11:42</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr class="dk">
                        <th scope="row">BA 4081</th>
                        <td>PARIS-CDG</td>
                        <td>11:45</td>
                        <td>11:57</td>
                        <td>LANDED AT 11:58</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr>
                        <th scope="row">BE 843</th>
                        <td>BELFAST CITY</td>
                        <td>11:45</td>
                        <td>11:40</td>
                        <td>LANDED AT 11:41</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr class="dk">
                        <th scope="row">GR 642</th>
                        <td>GUERNSEY</td>
                        <td>11:55</td>
                        <td>11:38</td>
                        <td>LANDED AT 11:37</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr>
                        <th scope="row">EZY 6192</th>
                        <td>PISA</td>
                        <td>12:05</td>
                        <td>12:18</td>
                        <td>LANDED AT 12:17</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr class="dk">
                        <th scope="row">EZY 6052</th>
                        <td>MALAGA</td>
                        <td>12:15</td>
                        <td>11:55</td>
                        <td>LANDED AT 11:55</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr>
                        <th scope="row">EZY 6074</th>
                        <td>ALICANTE</td>
                        <td>12:35</td>
                        <td>12:12</td>
                        <td>LANDED AT 12:14</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr class="dk">
                        <th scope="row">EZY 6068</th>
                        <td>VALENCIA</td>
                        <td>12:40</td>
                        <td>12:49</td>
                        <td>LANDED AT 12:48</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                      <tr>
                        <th scope="row">BA 4122</th>
                        <td>ZURICH</td>
                        <td>13:55</td>
                        <td>13:31</td>
                        <td>LANDED AT 13:31</td>
                         <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                        <td>LANDED AT 11:43</td>
                      </tr>
                     </tbody>


                </table>
                </div>
                </div>

</div>

</body>
</html>


Pour l'instant j'obtiens cela :
upload/9018-capt.JPG

Merci pour votre aide ... ca fait une journée que je cherche et je suis un peu aux abois ...

CG
Modifié par ChtiGeeX (18 Oct 2006 - 14:40)