CSS Forum

**newbie14** · 07-11-2011, 06:49 PM

Dear All,
I have a page here (I am not allowed to post link) .The problem is that I want to make the tyre images align with the join like here (I am not allowed to post link) and also make the text appear over the image not beside or on top of it. What are the html fine tunes I need to perform tried many thing like margin etc did not work too?

**Digital Friend** · 07-11-2011, 10:18 PM

Quote:

Originally Posted by newbie14

The problem is that I want to make the tyre images align with the join like here

You might be interested in the CSS float property.

Quote:

Originally Posted by newbie14

and also make the text appear over the image not beside or on top of it.

The only thing that I can think of, is "tooltips".

**newbie14** · 07-11-2011, 10:24 PM

Dear Friend,
Below is part of my codes. So first how to make the text over the image. Because tool tip I know how to do it and here we have lots of image and is not user friendly for user to mouse over to each of the image. Beside that how to make the image to be bottom rather than top. I tried vertical-align bottom is not working too.

Quote:

**Digital Friend** · 07-12-2011, 12:07 AM

Quote:

Originally Posted by newbie14

So first how to make the text over the image.

Have you tried a link break?

This should place the image on a new line, while the text is displayed above the image :

HTML Code:

R11 <br />
<img src="" />

**newbie14** · 07-12-2011, 07:10 AM

Dear Friend,
I have tried but no difference still the same. I just need a bit more of adjusting and it will be done but I still cant post the link that is the problem.

**Digital Friend** · 07-12-2011, 01:27 PM

Quote:

Originally Posted by newbie14

but I still cant post the link that is the problem

I don't see how posting a link can help when you can tell us of the code source and explain the problem in detail.

Is this what you wanted? ( vertically displaying image/text where the text shows above the image )

CSS :

Code:

.floatleft {
float:left
}

div.newline {
clear: both;
}

HTML :

HTML Code:

<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>

<img src="longJoinAxle.png" class="floatleft">
<div class="newline"></div>

<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>

<div class="floatleft">R12</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>

<img src="centerLongJoinFirstAxle.png" class="floatleft">
<div class="newline"></div>

<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>

I removed the HTML input and the "droppable" class ( since you have not mentioned it ) .

**newbie14** · 07-13-2011, 12:49 AM

Dear Friend,
I want the label on top of the image but over the image meaning like a tag on the image itself. Secondly I want the for e.g. tyre2 then the axle then another tyre2 all on the same line.

Quote:

Originally Posted by Digital Friend

I don't see how posting a link can help when you can tell us of the code source and explain the problem in detail.

Is this what you wanted? ( vertically displaying image/text where the text shows above the image )

CSS :

Code:

.floatleft {
float:left
}
 
div.newline {
clear: both;
}

HTML :

HTML Code:

<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>
 
<img src="longJoinAxle.png" class="floatleft">
<div class="newline"></div>
 
<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>
 
<div class="floatleft">R12</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>
 
<img src="centerLongJoinFirstAxle.png" class="floatleft">
<div class="newline"></div>
 
<div class="floatleft">R11</div>
<div class="newline"></div>
<img src="tyre2.png" class="floatleft">
<div class="newline"></div>

I removed the HTML input and the "droppable" class ( since you have not mentioned it ) .

**Digital Friend** · 07-13-2011, 10:05 AM

Quote:

Originally Posted by newbie14

I want the label on top of the image but over the image meaning like a tag on the image itself. Secondly I want the for e.g. tyre2 then the axle then another tyre2 all on the same line.

Like this :

CSS :

Code:

.floatleft {
float:left;
}

.floatimg {
float: left;
margin-right: 2em;
}

.center {
text-align: center;
}

div.newline {
clear: both;
}

HTML :

HTML Code:

<div class="floatleft">

<div class="floatimg">

<div class="center">R11</div>
<img src="tyre2.png" >

</div>

<div class="floatimg">

<div class="center">Text</div>
<img src="longJoinAxle.png" >

</div>

<div class="floatimg">

<div class="center">R11</div>
<img src="tyre2.png" >

</div>

<div class="floatimg">

<div class="center">R12</div>
<img src="tyre2.png" >

</div>

<div class="floatimg">

<div class="center">Text</div>
<img src="centerLongJoinFirstAxle.png" >

</div>

<div class="floatimg">

<div class="center">R11</div>
<img src="tyre2.png" >

</div>

</div>

<div class="newline"></div>

You were missing two "labels" , so I replaced them with "text" ,

**newbie14** · 07-13-2011, 10:54 PM

Dear Friend,
I tried you latest codes but unfortunately all images arranged horizontally.

**Digital Friend** · 07-14-2011, 12:48 AM

Quote:

Originally Posted by newbie14

I tried you latest codes but unfortunately all images arranged horizontally.

I thought you wanted everything on the same line..

Quote :

Quote:

Originally Posted by newbie14

Secondly I want the for e.g. tyre2 then the axle then another tyre2 all on the same line.

I might be getting a little confused on what you really want..

Do you have any picture examples or can you make your words a little bit clearer please?

**newbie14** · 07-14-2011, 08:48 AM

Dear Friend,
The problem I am not allowed to even upload image or link. Do you have email then I can send you there?