Sujet Précédent Sujet Suivant

Codage Html et css

Résolu/Fermé
cixion Messages postés 12 Date d'inscription samedi 27 juin 2009 Statut Membre Dernière intervention 29 novembre 2011 - 28 nov. 2011 à 23:25
cixion Messages postés 12 Date d'inscription samedi 27 juin 2009 Statut Membre Dernière intervention 29 novembre 2011 - 29 nov. 2011 à 12:04
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


A voir également:

2 réponses

Réponse 1 / 2
Leo
29 nov. 2011 à 09:53
Pour placer tes drapeau a gauche de ta barre de recherche,il faut que tu place ton codes des images de drapeaux avant ta barre de recherche .

Essaye la fonction css : float:left; ou float:right; pour passer l'image a gauche ou a droite . Tu peux après ajuster ton image avec margin-left : 10px; ou margin-right:10px;

J'espère t'avoir aidé :)
0
Réponse 2 / 2
cixion Messages postés 12 Date d'inscription samedi 27 juin 2009 Statut Membre Dernière intervention 29 novembre 2011
29 nov. 2011 à 12:04
je te remercie ouah c'est superbe comme ca j'adore
0

Discussions similaires

controleur de codage/décodage PCI
dtp33950 -
kaneagle -

6 réponses
&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Codage de texte
beauté numerique -
beauté numerique -

8 réponses
huffman
walid -
Fee Fay -

1 réponse