Placez le texte et l'image l'un à côté de l'autre sans envelopper et contrôler la position verticale de l'image ..?

Je veux placer une petite image à côté des noms d'utilisateur sur mon site Web que les visiteurs peuvent cliquer. L'image est une icône (16x16 pixels CAN NOT CHANGE!) Et il doit être affiché un peu plus bas que le texte. Je ne sais pas combien de caractères le nom d'utilisateur sera, mais l'ensemble text + image ne devrait pas être enveloppé sur plusieurs lignes ...Placez le texte et l'image l'un à côté de l'autre sans envelopper et contrôler la position verticale de l'image ..?

Comment cela peut-il être réalisé?

Exemple (ne fonctionne pas pour mes besoins évidemment ...):

<style type="text/css"> 
    div.userlink {height:20px;whitespace:no-wrap;} 
</style> 

<div class="userlink"> 
    <span class="text">The_username_of_unknown_length</span> 
    <span class="image"><a href="#"><img src="/theicon.jpg" /></a></span> 
</div>

Source

2009-06-16 Ropstah

Il n'est pas nécessaire de spécifier l'attribut float pour s'étendre dans votre conception – rahul

Ok, bonne capture, mais le problème persiste :) – Ropstah

Que se passe-t-il lorsque le nom d'utilisateur est trop long? – rahul

Vous pouvez contrôler l'alignement vertical de l'image mon aide d'une marge inférieure négative. Je ne pense pas non plus que vous ayez besoin des éléments internes, souvenez-vous toujours que moins de balisage est préférable. Cependant, je ne suis pas sûr que vous pouvez empêcher l'emballage sans placer le div dans un récipient assez large pour répondre à cela.

<style type="text/css"> 
    div.userlink {position:relative;height:20px;whitespace:no-wrap;} 
    div.userlink a {margin-bottom: -2px;} 
</style> 

<div class="userlink"> 
    The_username_of_unknown_length 
    <a href="#"><img src="/theicon.jpg" /></a> 
</div>

Source

2009-06-16 13:01:42 roryf

Que se passe-t-il s'il n'y a pas d'espace blanc et que le nom d'utilisateur est trop grand? – rahul

Fonctionne parfaitement pour le moment. Merci! – Ropstah

C'est une solution, mais le nom d'utilisateur est cliquable:

<html> 
<head> 
<style> 
a.userlink { 
    background: url('/theicon.jpg') no-repeat left bottom; 
    padding-left: 20px; 
    display: block; 
    height: 20px; 
    line-height: 20px; 
    overflow: hidden; 
} 
</style> 
</head> 
<body> 
<a class="userlink" href="#">The_username_of_unknown_length</a> 
</body> 
</html>

Source

2009-06-16 13:05:52 Alsciende

Oui je l'ai dit, seulement en utilisant un conteneur et en plaçant le fond d'image + padding sur le conteneur ... Mais cela a produit des résultats inattendus ... – Ropstah

il y a plusieurs anwsers: 1) donner à votre deux travées display: block; et celui avec le texte doit avoir une ligne hauteur 2) float: left pour l'image et la ligne de hauteur

Source

2009-06-16 13:10:29 red777

Cette solution fonctionne sur IE7, Firefox, Safari, Chrome et Opera:

<style type="text/css"> 

div.userlink { 
    overflow:hidden; 
    position: relative; 
    height: 25px; 
    line-height: 25px; 
} 
span.image { 
    position: absolute; 
    left: 0px; 
    top: 5px; 
} 
span.text { 
    margin-left: 25px; 
} 

</style> 

<div class="userlink"> 
    <span class="text">The_username_of_unknown_length</span> 
    <span class="image"><a href="#"><img src="/theicon.jpg" /></a></span> 
</div>

Source

2009-06-16 13:11:51 Alsciende

drôle comment je supposais que l'icône devait être sur le côté gauche du texte -_- – Alsciende

Haha, je lisais et pensais, ça ne peut pas être correct ... positionnement absolu avec des longueurs inconnues ?? : P – Ropstah

OPTION # 1 (pas parfait - mais pas de programmation):

<div id="userlink"> 
    <div class="text">The_username_of_unknown_length</div> 
    <a href="#"><img class="userimg" src="image.gif"/></a> 
</div> 



#userlink { 
    height: 20px; 
    whitespace:no-wrap; 
    overflow: hidden; 
} 

.text { 
    float: left; 
} 

.userimg { 
    float: left; 
    margin-top: 3px; 
    margin-left: 3px; 
}

Source

2009-06-16 13:13:45

Je vais essayer cela plus tard, j'ai quelques problèmes mineurs avec Rory Fitzgeralds réponse .. Cela pourrait résoudre le problème ... – Ropstah

Vous pouvez ou ne pas vouloir la hauteur: 20px. –

OPTION # 2 (Arrête l'emballage si le nom est long): Cette fonction coupe le nom et ajoute un triple "..." à la fin du nom s'il dépasse 32 caractères.

#userlink { 
    height: 20px; 
    whitespace:no-wrap; 
    overflow: hidden; 
} 

.text { 
    float: left; 
} 

.userimg { 
    float: left; 
    margin-top: 3px; 
    margin-left: 3px; 
} 

    <?php 
    function format_name($name) { 
     $maxNameLength = 32; 
      if (strlen($name) > $maxNameLength) { 
      $name = substr($name, 0, $maxNameLength - 3)."..."; 
     } 
     return $name; 
    } 

    $name = "The username of unknown length"; 
    $name = format_name($name); 
    ?> 
    <div id="userlink"> 
     <div class="text"><?php echo $name; ?></div><a href="#"> 
     <img class="userimg" src="image.gif" /></a> 
    </div>

Source

2009-06-16 14:45:37

OPTION # 3: (Arrête l'emballage si le nom est trop long et ne raccourcit pas le nom):

#userlinkDiv { 
    height: 20px; 
    display: table; 
} 

.userlink { 
    display: block; 
    padding-right: 24px; 
    text-decoration: none; 
    color: black; 
} 


    <?php 
     function noBreakName($name) { 
      $name = str_ireplace(" ", '& nbsp;', $name); 
      return $name; 
     } 
     $name = "The username of unknown length"; 
     $name = noBreakName($name); 
    ?> 
    <div id="userlinkDiv" style="background: url('image.gif') no-repeat right bottom;"> 
     <a class="userlink" href="#"><?php echo $name; ?></a> 
    </div>

NOTE # 1: Nécessité de mettre le "&" et "nbsp" ensemble dans la fonction ci-dessus (il ne serait pas afficher le texte sur ce site si je les ai mis ensemble).

NOTE # 2: J'ai fait de l'image un style en ligne puisque vous avez dit que vous en vouliez un différent pour chaque utilisateur.

NOTE n ° 3: Je vous recommande d'ajouter une largeur maximale de votre zone de texte dans la section userlinkDiv du style.

Source

2009-06-16 14:46:27

Placez le texte et l'image l'un à côté de l'autre sans envelopper et contrôler la position verticale de l'image ..?

Répondre

Questions connexes