asked on

Css menu Vb.net aspx

I am using VB.net aspx and CSS I would like in my menu to have a image and Href display on 1 line thanks

<div class="sub_menu">
                        <div class="col">
                            <div id="container" style="white-space: nowrap">
                                <div id="image" style="display: inline;">
                                    <img src="../images/Close.png" alt="" style="height: 50px; width: 50px;" />
                                </div>
                                <div style="display: inline; white-space: nowrap;">
                                    <a href="..\career\SchoolImport.aspx"><h4>Importing Control</h4></a>
                                </div>

                            </div>

Open in new window

ASKER CERTIFIED SOLUTION

David H.H.Lee

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

K Feening

ASKER

Hi David
Thanks for reply, I did as said worked great,but I didn't add that the menu items list Vertically (I only showed you 1) they now list horozontally. (see second image)
can it be programmed to show image and HRef on 1 line then the other options vertically. like below

also pushing my luck get the text to be in the centre of the image
Found answer for centering

.mega_menu ul li .sub_menu .col {
   display: flex;
   align-items: center;
   justify-content: center
}

Open in new window

Old Screen
User generated image

New Screen and Code
User generated image

code

<div class="sub_menu">
                            <div class="col">
                                <div style="display: inline-block;">
                                    <img src="../images/Close.png" alt="" style="height: 50px; width: 50px;" />
                                </div>
                                <div style="display: inline-block; white-space: nowrap;">
                                    <a href="..\career\SchoolImport.aspx">
                                        <h4>Importing Control</h4>
                                    </a>
                                </div>
                                <div style="display: inline-block;">
                                    <img src="../images/Delete.png" alt="" style="height: 50px; width: 50px;" />
                                </div>
                                <div style="display: inline-block; white-space: nowrap;">
                                    <a href="..\career\SchoolImport.aspx">
                                        <h4>Control</h4>
                                    </a>
                                </div>
                                <div style="display: inline-block;">
                                    <img src="../images/generate.png" alt="" style="height: 50px; width: 50px;" />
                                </div>
                                <div style="display: inline-block; white-space: nowrap;">
                                    <a href="..\career\SchoolImport.aspx">
                                        <h4>Update Files</h4>
                                    </a>
                                </div>
                            </div>

Open in new window