ansaurus

Question

Place text and image next to each other without wrapping and control vertical position of image..?

Answer 1

+2 A:

You can control the vertical alignment of the image my using a negative margin-bottom. I also don't think you need the inner span elements, always remember less markup is better. However, I'm not sure you can prevent wrapping without placing the div in a container wide enough to cater for it.

<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>

roryf 2009-06-16 13:01:42

What happens if there is no white space and the user name is too big??

rahul 2009-06-16 13:03:53

Works perfectly for the moment. Thanks!

Ropstah 2009-06-16 13:12:06

Answer 2

A:

This is a solution, but the username is clickable :

<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>

Alsciende 2009-06-16 13:05:52

Yes I dit this, only then using a container and setting the background-image + padding on the container... But that produced unexpected results...

Ropstah 2009-06-16 13:28:11

Answer 3

A:

there are several anwsers: 1) give your both spans display:block; and the one with text has to have line-height 2) float:left for image and line-height

red777 2009-06-16 13:10:29

Answer 4

A:

This solution works on IE7, Firefox, Safari, Chrome and 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>

Alsciende 2009-06-16 13:11:51

funny how I assumed the icon had to be on the left side of the text -_-

Alsciende 2009-06-16 13:14:43

Haha, i was reading it and thought, this can't be right.. absolute positioning with unknown lengths?? :P

Ropstah 2009-06-16 13:29:22

Answer 5

+1 A:

OPTION #1 ( not perfect - but no programming ):

<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;
}

Joe Bubna 2009-06-16 13:13:45

I'll try this later, I've got some minor issues with Rory Fitzgeralds answer.. This might fix it...

Ropstah 2009-06-16 13:30:36

You may or may not want the height: 20px.

Joe Bubna 2009-06-16 13:51:22

Answer 6

A:

OPTION #2 (Stops wrapping if name is long): This function cuts the name off and adds a triple "..." to the end of the name if it is longer than 32 characters.

#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>

Joe Bubna 2009-06-16 14:45:37

Answer 7

A:

OPTION #3: (Stops wrapping if name is too long and does not shorten name):

#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: Need to put the "&" and "nbsp" together in the function above (it would not display the text on this site if I put them together).

NOTE #2: I made the image an inline style since you said you want a different one for each user.

NOTE #3: I recommend you add a width of whatever the max you would want your text area to be into the userlinkDiv section of the style.

Joe Bubna 2009-06-16 14:46:27

ansaurus

tags:

views:

answers:

Place text and image next to each other without wrapping and control vertical position of image..?

related questions