0

I'm using aspx to generate a html page. In essence I'm using LinkButtons with a image and a label inside of them which serve as links for a navigation menu.

When I view the page in html I got a div which contains an image and a span each. The text is then wrapping around the image itself as the width is not enough that the text can be displayed in one go.

I've read a few of the other questions like: Stopping text from wrapping around image which handle this and it works for one of the images, but as soon as I try to use these methods for all navigation items I have the problem that the float left moves the images and the text of them to the right for each image (thus the 2nd image is further right than the first image, ....). That is for versions where it worked that the text stays to the right of the picture. In most cases it didn't work though.

What maybe complicates matters here is also that the div containing the menu (#MenuDiv) has an absolute position which I dynamically (via adding / removing classes) change to a fixed position and back (as the menu scrolls up with the screen and when it is at the topmost position stays there fixated).

And like mentioned the MenuDiv is not very broad (about 100 pixels broad, and the image takes up 24)

As example code

<div id="MenuDiv">
    <div id="menuItem1">
        <image  style="width: 24px; height: 24px;" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2">
        <image  style="width: 24px; height: 24px;" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3">
        <image  style="width: 24px; height: 24px;" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

With MenuDiv having the following css stats.

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

My target is that each navigation item has the text to the right of the image and thus my question is how can I achieve this (while achieving that each image is below the other)?

3 Answers 3

1

one way to go:

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv > div {
   display: table;
   margin-bottom: 10px;
}

#MenuDiv img {
    display: table-cell; 
    vertical-align:middle;
    margin-right: 5px;
}

#MenuDiv div span {
    display: table-cell; 
    vertical-align:middle;
}
0

I like Mia Sno's answer but I'm all for providing options..

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

#MenuDiv>div>img, #MenuDiv>div>span {
  display:inline-block;
  vertical-align:top;
  }

#MenuDiv>div>img {
  width:24px;
  height:24px;
  }

#MenuDiv>div>span {
  width:70px; /*Allow for 4px white space*/
  }
<div id="MenuDiv">
    <div id="menuItem1">
        <image  src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2" >
        <image   src="http://placehold.it/24x24" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3" >
        <image   src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

0

I added white-space: nowrap; this gets your text in one line.

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

#MenuDiv>div>img, #MenuDiv>div>span {
  display:inline-block;
  vertical-align:top;
  }

#MenuDiv>div>img {
  width:24px;
  height:24px;
  }

#MenuDiv>div>span {
  width: 70px;
  white-space: nowrap;
}
<div id="MenuDiv">
    <div id="menuItem1">
        <image  src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2" >
        <image   src="http://placehold.it/24x24" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3" >
        <image   src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.