Position listes, floatants, Biensure IE!

**austriker** · 22/02/2010, 19h39

Bonsoir,
Bien d'habitudes j'arrive toujours à trouver une solutions à mes problèmes de CSS... mais la après 3-4 tentatives différentes je ne trouve toujours pas une solution pour positionner correctement mes listes:
En faite ce sont des listes générées par wordpress, des widgets de sidebar.
(J'ai éssayé avec des divs plutot... mais IE n'aime toujours pas...
Donc voila un apercu du rendu ( En haut Webkit/FF, en bas IE).
Voici le code que simplifié:

Code xhtml :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!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>Document sans nom</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        margin:0;
        padding:0;
        border:0;
        outline:0;
        font-size:100%;
        vertical-align:baseline;
        background:transparent;
        list-style:none;
}
#header_wrap {
        display:block;
        width:930px;
        height:80px;
        padding:0 15px;
}
#header_wrap #logo {
        background:url(images/logo.png) no-repeat;
        width:238px;
        height:31px;
        float:left;
        margin:10px 0 0 0;
}
#header_menu {
        display:block;
        float:right;
        text-align:right;
}
#header_menu ul {
        display:inline;
}
#header_menu li {
        display:inline;
}
#header_menu h2 {
        display:none;
}
.clear {
        clear:both;
}
.widget_text, icl_languages_selector, #lang_sel, .widget_pages, #pages, .widget_wp_shopping_cart, #sliding_cart, .widget_search {
        float:right;
}
.widget_pages, .widget_search {
        clear:right;
}
</style>
</head>
<body>
<div id="header_wrap">
  <div id="logo"></div>
  <div id="header_menu">
    <li class="widget icl_languages_selector" id="language-selector">
      <div id="lang_sel">
        <ul>
          <li><a class="lang_sel_sel icl-fr" href="#"> <img alt="fr" src="./flags/fr.png" class="iclflag"/> * </a> </li>
          <li class="icl-en"> <a href="/?lang=en"> <img alt="en" src="./flags/en.png" class="iclflag"/>* </a> </li>
        </ul>
      </div>
    </li>
    <li class="widget widget_text" id="text-3">
      <div class="textwidget">Bienvenue sur TEST</div>
    </li>
    <li class="widget widget_pages" id="pages-4">
      <h2 class="widgettitle">Pages</h2>
      <div id="pages">
        <ul>
          <li class="page_item page-item-201"><a title="Sign in" href="/?page_id=201">Sign in</a></li>
          <li class="page_item page-item-19"><a title="Mon compte" href="/?page_id=19">Mon compte</a></li>
        </ul>
      </div>
    </li>
    <li class="widget widget_wp_shopping_cart" id="shopping-cart">
      <h2 class="widgettitle">Shopping Cart</h2>
      <div class="shopping-cart-wrapper" id="sliding_cart"><span class="gocheckout"> <a href="/?page_id=17">Panier d'achats <span class="items"> <span class="cartcount"> (0 </span> <span class="numberitems">objet(s) dans votre panier)</span> </span> </a> </span> </div>
    </li>
    <li class="widget widget_search" id="search-3">
      <h2 class="widgettitle">Search</h2>
      <ul class="search_wrap">
        <form id="searchform" enctype="application/x-www-form-urlencoded" method="get" action="#">
          <input type="text" value="" class="query" id="s" name="s"/>
          <input type="submit" value="Search" class="submit" id="searchsubmit"/>
          <input type="hidden" name="lang" value="fr"/>
        </form>
      </ul>
    </li>
  </div>
</div>
</body>
</html>

ce qui devrait vous donner un rendu comme sur la 2eme image ( En haut Webkit/FF, en bas IE).

Voila en éspérant que quelqu'un aura le temps de brievement trouver une methode solide et propre de positionner correctement le tout et m'aiguiller.
Merci d'avance.
Austriker.

Position listes, floatants, Biensure IE!

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager