28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'essaie vainement de mettre en page une ligne de résultat qui contient du texte et de petites images...
Je voudrais tou bêtement une ligne avec une partie fixe à gauche, une partie variable (en longueur) à droite, tout en gardant tous les éléments alignés... ça ne devrait pas être si compliqué... et pourtant je cale.
Voici mon html :

<div class="searching">
	<div class="bloc-fixe">
			18 - <a href="#"  title="Afficher un album"><img class="album" src="zyx/img/actions/action_show_album.png" height="24" width="44" alt="display_album" /></a> <a href="#"  title="Afficher l'image">capture_006.png
	</div>
	<div class="bloc-variable">
			<img class="image" src="zyx/img/sap.png" height="32" alt="edit" /><img src="zyx/img/clear.gif" width="30" height="24" alt="vide" title="vide" /></a><img class="action" src="zyx/img/actions/action_next.png" height="24" width="44" alt="display_album" /><img src="zyx/img/actions/action_edit.png" height="24" width="44" alt="display_album" /><img src="zyx/img/actions/action_delete.png" height="24" width="44" alt="display_album" /><img src="zyx/img/actions/action_help.png" height="24" width="44" alt="display_album" /><img src="zyx/img/actions/action_first.png" height="24" width="44" alt="display_album" /><img src="zyx/img/actions/action_last.png" height="24" width="44" alt="display_album" />
	</div>
</div>


et mon css :

.searching {
	width: 750px;
	height: 32px;
	font-size: 1em;
	font-family: "DejaVu Sans Mono", "Lucida Console", monospace;
	text-align: left;
	margin: 3px 0;
}
.bloc-fixe {
  position:fixed;
  border:solid 1px;
  width:240px;
  height: 32px;
}
.album {
	margin-bottom: -8px;
}
.bloc-variable {
height: 32px;
  position:fixed;
  border:solid 1px;
  margin-left:240px;
}
.action {
	margin-bottom: 6px;
}
.image {
	margin-bottom: 3px;
}


Résultat en image jointe (le border devrait être supprimé quand ça sera ok).

N'étant pas un as du css, je fais appel à vos talents.
Merci d'avance
ce@ceck.org
upload/24073-pic016.png " rel="nofollow noopener" >http://www.ceck.org/ upload/24073-pic016.png
Salut,

merci de bien vouloir réindenter le code correctement car c'est assez illisible...

concernant ton affichage, si je résume ce que tu as besoin :

- un élément à gauche qui soit de taille fixe
- une élément à droite de taille variable en largeur

Je vois que dans ton code CSS tu utilises la propriété position:fixed, je pense que tu n'en as pas l'utilité pour ce que tu veux afficher.

<div class="item-gauche">
	<img src="" class="item-n" alt="Item de gauche">
</div>

J'espère que ça puisse t'aider... [biggrin]
<div class="item-droite clearfix">
	<img src="" class="item-n-droite" alt="Item de droite">
	<img src="" class="item-n-droite" alt="Item de droite">
	<img src="" class="item-n-droite" alt="Item de droite">
	<img src="" class="item-n-droite" alt="Item de droite">
	<img src="" class="item-n-droite" alt="Item de droite">
</div>


div.item-gauche
{
	float:left;
	margin-right:10px;
	border:1px solid red;
	width:200px;
	height:40px;

}

div.item-droite
{
	height:40px;
	border:1px solid pink;
}

.clearfix
{
	display:block;
	content:"";
	clear:both;
}
Merci SuperMerguez,

je vais essayer ça à tête reposée pasque là je sature (fin de semaine).

Bon week-end (sans trop de pluie ?)

ce