Welcome to WebmasterWorld Guest from 54.167.157.247

Forum Moderators: not2easy

Message Too Old, No Replies

Text and an asp:Image on the same row

   
8:25 am on Dec 12, 2012 (gmt 0)



Hey all,
I am pretty new to CSS so please be specific in your answers.
Thank you.

I need to Set a text and an image on the same row.
I want the text to be in the middle of the screen and the image to be adjacent to the right most:

<table style="width:100%">
<p>
<div class="MasterPageTitle">Qwik ProjecTrace </br> Innovative Manufacturing Solutions</div>
<div class="logoIMG"><asp:Image ID="imsImage" runat="server" /></div>
</p>
</table>


.MasterPageTitle
{
font-size:xx-large;
font-weight:bolder;
text-align:center;
font-family:Arial;
}

.logoIMG
{
float: right;
}


The thing is that the image goes down one line instead of staying on the same one.

How to achieve my goal?

Thanks in advance.
1:35 pm on Dec 15, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



1) Your HTML is invalid. A table consists of rows and columns but your table contains none of these. Tables are to be used for tabular data, too, and not for layout. Plus, p elements may not contain div elements.

2) A p element is block level and will be the full width of the page. That is why your image is dropping down. img elements, otoh, are inline and behave like text.

One of the best ways to do what you want is to put your text in a p element and keep your image as is, not contained in anything. Then float the p element left and the image right.
8:43 am on Dec 16, 2012 (gmt 0)



Thank you drhowarddrfine, I've found out that the html is invalid through the hard way.
Anyway, this is how I've implemented it:

<div class="MasterPageTitle">Qwik ProjecTrace <br /> Innovative Manufacturing Solutions</div>

<div class="logoIMG"><asp:Image ID="imsImage" runat="server" /></div>


.MasterPageTitle
{
font-size:xx-large;
font-weight:bolder;
text-align:center;
font-family:Arial;

display:block;
margin:auto;
}

.logoIMG
{
//float: right;
position: absolute;
top: 0px;
right:0px;
}


Hope it'll help others.
Cheers
1:32 am on Dec 17, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What is the purpose of the logoIMG div?
7:20 am on Dec 17, 2012 (gmt 0)



I needed to define an asp:Image, and in order to connect between the control and the css class I decided to use div and define the class="logoIMS" in that div.
As I already mentioned, I am not experienced, there may be a better way of doing it. And if so, please share :)
2:28 pm on Dec 17, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I don't know anything about asp but it's strange that the class can't just be put on an image and controlled that way. It's like buying a bag of doughnuts and having the cashier put it in a bag.
3:17 pm on Dec 17, 2012 (gmt 0)



This is possible indeed.
I could have written the following:

<asp:Image ID="imsImage" runat="server" CssClass="logoIMS"/> instead of putting it in a div...

And regarding the doughnuts, that's fattening :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month