homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Text and an asp:Image on the same row
Aikon




msg:4527259
 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.

 

drhowarddrfine




msg:4528409
 1:35 pm on Dec 15, 2012 (gmt 0)

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.

Aikon




msg:4528646
 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

drhowarddrfine




msg:4528820
 1:32 am on Dec 17, 2012 (gmt 0)

What is the purpose of the logoIMG div?

Aikon




msg:4528889
 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 :)

drhowarddrfine




msg:4528969
 2:28 pm on Dec 17, 2012 (gmt 0)

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.

Aikon




msg:4528989
 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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved