Bonsoir à tous ,
J'ai un problème à résoudre et ma connaissance en html et css arrivant à sa limite , je me permets de solliciter votre aide car sur ma page j'aimerai mettre les deux drapeaux symbolisant les langues en haut à gauche de ma barre de recherche et je n'arrive pas à le faire après de multiples essais , tout d'abord voici mon code html de ma page :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="squeldesign.css" />
<title>Insert title here</title>
</head>
<body>
<div id="main_container">
<div class="top_bar">
<div class="top_search">
<input type="text" class="search_input" name="search" />
<input type="image" src="images/search.gif" class="search_bt"/>
<div class="languages">
<a href="#" class="lang"><img src="images/en.gif" alt="" title="anglais" border="1" /></a>
<a href="#" class="lang"><img src="images/francais.png" alt="" title="français" border="1" /></a>
</div>
</div>
<div class="languages">
<a href="#" class="lang"><img src="images/panier.png" alt="panier" title="panier" border="1" /></a>
<a href="#" class="lang"><img src="images/deconnexion.png" alt="Deconnexion" title="Se deconnecter" border="1" /></a>
</div>
</div>
</div>
<div id="main_content">
<div id="menu_tab">
<div class="left_menu_corner"></div>
<ul class="menu">
<li><a href="#" class="nav1">Informatique</a></li>
<li class="divider"></li>
<li><a href="#" class="nav2">Catégorie2</a></li>
<li class="divider"></li>
<li><a href="#" class="nav3">Catégorie3</a></li>
<li class="divider"></li>
</ul>
<div class="right_menu_corner"></div>
</div><!-- end of menu tab -->
</div>
<div class="center_content">
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.jsp">Samsung Webcam</a></div>
<div class="product_img"><a href="details.jsp"><img src="images/p5.gif" alt="" title="" border="0" /></a></div>
<div class="prod_price"><span class="price">270 Euro</span></div>
</div>
<div class="bottom_prod_box"></div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.jsp">Samsung Webcam</a></div>
<div class="product_img"><a href="details.jsp"><img src="images/p5.gif" alt="" title="" border="0" /></a></div>
<div class="prod_price"><span class="price">270 Euro</span></div>
</div>
<div class="bottom_prod_box"></div>
</div>
<div class="prod_box">
<div class="top_prod_box"></div>
<div class="center_prod_box">
<div class="product_title"><a href="details.jsp">Samsung Webcam</a></div>
<div class="product_img"><a href="details.jsp"><img src="images/p5.gif" alt="" title="" border="0" /></a></div>
<div class="prod_price"><span class="price">270 Euro</span></div>
</div>
<div class="bottom_prod_box"></div>
</div>
</div>
</body>
</html>
et voici le CSS qui va avec :
body
{
background:url(images/bg.jpg) no-repeat #fff center top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
margin:0px auto auto auto;
color:#000;
}
p{
padding:2px;
margin:0px;
}
#main_container{
width:1000px;
height:auto;
margin:auto;
padding:0px;
}
.top_bar{
width:1000px;
height:60px;
background-color:#4a4a4a;
}
.top_search{
width:370px;
height:85px;
margin:0px 20px 0 0;
_margin:0px 10px 0 0;
float:left;
background:url(images/top_search_bg.gif) no-repeat center;
}
input.search_input{
width:220px;
height:18px;
float:left;
margin:32px;
margin_left : 5 px;
border:1px solid #dbdbdb;
border-bottom-color:#ffffff;
border-right-color:#ffffff;
}
.search_text{
float:left;
width:110px;
padding:10px 0 0 15px;
color:#999999;
}
.search_text a{
text-decoration:none;
color:#999999;
}
.search_bt{
float:left;
padding:30px 0 0 15px;
}
.Panier{
float:right;
width:150px;
padding:8px 0 0 0;
}
.languages{
float:left;
width:150px;
padding:1px 0 0 0;
}
.lang_text{
float:left;
padding:0 5px 0 0;
color:#b3adad;
}
a.lang{
display:block;
float:left;
padding:0 5px 0 5px;
}
Donc si vous pouviez m'aider , votre aide serait la bienvenue
