Normally I always manage to find a solution to my CSS problems, but this one is driving me crazy.
I'm trying to place my list correctly on Wordpress (sidebar widget).
(I tried divs, but that still doesn't work under IE.) So here is the HTML code and some screenshots
<!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>
screenshots:
http://img689.imageshack.us/i/finaltestprev.jpg/
http://img713.imageshack.us/i/finalprevu.jpg/
No comments:
Post a Comment